DEV Community: Younes Henni

Upload Files Using React Native and Firebase (Part 4)

Younes Henni — Fri, 17 Jan 2020 17:11:46 +0000

Overview

In the previous parts, you learned how to set up a Firebase Storage service and wrote custom rules for your storage bucket. You also learned how to use Image Picker to upload photos locally and use the storage API to save photos to your bucket.

In this last part of the series, I’ll show you the following.

How to monitor the upload progress of your photo.
Get the download URL to display the photo from storage.
Render a progress bar and a skeleton placeholder while waiting to fetch the photo from Firebase Storage.

You can find the full code in Github.

Let us jump into it.

1. Monitor upload progress

As a reminder, here is the full code we wrote in part 3 of the series in UploafFile/index.js.

import React, { useState } from 'react';
import { Button, StatusBar } from 'react-native';

import ImagePicker from 'react-native-image-picker';

import { imagePickerOptions, uploadFileToFireBase } from '../../utils';
import { Container, Picture, Skeleton, ProgressBar } from '../../styles';

const UploadFile = () => {
  const [imageURI, setImageURI] = useState(null);


  const uploadFile = () => {
    ImagePicker.launchImageLibrary(imagePickerOptions, imagePickerResponse => {
      const { didCancel, error } = imagePickerResponse;
      if (didCancel) {
        alert('Post canceled');
      } else if (error) {
        alert('An error occurred: ', error);
      } else {
        setImageURI({ uri: downloadURL });
        Promise.resolve(uploadFileToFireBase(imagePickerResponse));
      }
    });
  };

  return (
    <Container>
      <StatusBar barStyle="dark-content" />
      <Button title="New Post" onPress={uploadFile} color="green" />
      {imageURI && <Picture source={imageURI} />}
    </Container>
  );
};

export default UploadFile;

Make the following changes to the uploadFile function.

const uploadFile = () => {
    ImagePicker.launchImageLibrary(imagePickerOptions, imagePickerResponse => {
      const { didCancel, error } = imagePickerResponse;
      if (didCancel) {
        alert('Post canceled');
      } else if (error) {
        alert('An error occurred: ', error);
      } else {
        /*
          Remove these two lines
          setImageURI({ uri: downloadURL });
          Promise.resolve(uploadFileToFireBase(imagePickerResponse)); 
          Replace them with these two lines instead
        */ 
        const uploadTask = uploadFileToFireBase(imagePickerResponse);
        monitorFileUpload(uploadTask);
      }
    });
  };

You no longer need to resolve the promise nor set the local state for the image URI. These two steps will be outsourced to a function called monitorFileUpload that you’re going to write shortly.

You’re now saving the results of uploadFileToFirebase in a variable called uploadTask and passing it as a parameter to monitorFileUpload.

Add the following code just on top of the uploadFile function.

const monitorFileUpload = uploadTask => {
  uploadTask.on('state_changed', snapshot => {
    switch (snapshot.state) {
      case 'running':
        setImageURI(null);
        break;
      case 'success':
        snapshot.ref.getDownloadURL().then(downloadURL => {
          setImageURI({ uri: downloadURL });
         });
         break;
      default:
        break;
    }
  });
};

const uploadFile = () => // ..

The above function takes uploadTask as the argument and uses an observer method on('state_changed', callback) to track state changes.

The observer takes two arguments. The first argument is a string parameter, 'state_changed', and the second argument is a callback with a snapshot parameter.

You can find more info on tracking upload progress in the Firebase official docs here.

With a switch statement, we check snapshot.state for its different cases (i.e., 'running', 'success') and update our logic accordingly.

In the case of snapshot.state returns a success message, we use snapshot.ref.getDownloadURL() to get the remote URL of the uploaded file. We then set the local state to that URL.

Time to test the app. Refresh your simulator, and add a new post. After waiting for a while (until the photo is uploaded and the remote URL is created), you should see the photo displayed on the screen.

2. Build the progress bar and a skeleton placeholder

As a best practice, you want to show users a progress bar while waiting for the photo to be fetched from storage. To do this, I’ll show you how to leverage the task.on() observer function to build a progress bar for your app.

Start by adding the following function in utils/index.js.

export const uploadProgress = ratio => Math.round(ratio * 100);

The above function takes a ratio parameter then returns a rounded percentage.

Add uploadProgress to the imports in UploadFile/index.js.

import {
  imagePickerOptions,
  uploadFileToFireBase,
  uploadProgress,
} from '../../utils';

At this point, you need two things.

Set the value of the upload progress using the local state.
Toggle the progress bar with the placeholder when the photo is ready for display.

Add the following code for the local state inside the UploadFile component.

// Add this
const [upload, setUpload] = useState({
  loading: false,
  progress: 0,
});

const [imageURI, setImageURI] = useState(null);

Update monitorFileUpload with the following code.

const monitorFileUpload = task => {
  task.on('state_changed', snapshot => {

    // Get the upload progress
    const progress = uploadProgress(
      snapshot.bytesTransferred / snapshot.totalBytes
    );

    switch (snapshot.state) {
      case 'running':
        setImageURI(null);

        // Set upload state to true and save progress into local state
        setUpload({ loading: true, progress });

        break;
      case 'success':
        snapshot.ref.getDownloadURL().then(downloadURL => {
          setImageURI({ uri: downloadURL });

          // Set upload state to false
          setUpload({ loading: false });

        });
        break;
      default:
        break;
    }
  });
};

As you see above, we can access the bytesTransferred and totalBytes through the snapshot parameter.

We pass the ratio snapshot.bytesTransferred / snapshot.totalBytes to the uploadProgress defined in utils/index.js to get the percentage of the upload progress.

In case the upload is still running, we set loading to true and we save progress to the local state. When the upload is successful, we set loading to false.

Add the following code inside the return() statement.

return (
  <Container>
    <StatusBar barStyle="dark-content" />
    <Button title="New Post" onPress={uploadFile} color="green" />
    {imageURI && <Picture source={imageURI} />}

    {upload.loading && (
      <>
        <Skeleton />
        <ProgressBar bar={upload.progress} />
      </>
    )}

  </Container>
);

Whenever upload.loading is true, we display a Skeleton component and a ProgressBar component (to be defined shortly).

Notice that ProgressBar takes the props bar={upload.progress} to be used to set the width of the bar.

Let us define the Skeleton and ProgressBar styled-components. Add the following code in styles/index.js.

// ..

export const ProgressBar = styled.View`
  background-color: #039ae5;
  height: 3;
  width: ${props => props.bar}%;
  align-items: flex-start;
`;

export const Skeleton = styled.View`
  height: 300;
  width: 100%;
  background-color: #ebebeb;
`;

Notice that the width of ProgressBar is rendered dynamically with the bar props you defined earlier.

Import these two new components in UploadFile/index.js.

import { Container, Picture, Skeleton, ProgressBar } from '../../styles';

The full code in UploadFile/index.js should look like this.

import React, { useState } from 'react';
import { Button, StatusBar } from 'react-native';

import ImagePicker from 'react-native-image-picker';

import {
  imagePickerOptions,
  uploadFileToFireBase,
  uploadProgress,
} from '../../utils';
import { Container, Picture, Skeleton, ProgressBar } from '../../styles';

const UploadFile = () => {
  const [upload, setUpload] = useState({
    loading: false,
    progress: 0,
  });
  const [imageURI, setImageURI] = useState(null);

  const monitorFileUpload = task => {
    task.on('state_changed', snapshot => {
      const progress = uploadProgress(
        snapshot.bytesTransferred / snapshot.totalBytes
      );
      switch (snapshot.state) {
        case 'running':
          setImageURI(null);
          setUpload({ loading: true, progress });
          break;
        case 'success':
          snapshot.ref.getDownloadURL().then(downloadURL => {
            setImageURI({ uri: downloadURL });
            setUpload({ loading: false });
          });
          break;
        default:
          break;
      }
    });
  };

  const uploadFile = () => {
    ImagePicker.launchImageLibrary(imagePickerOptions, imagePickerResponse => {
      const { didCancel, error } = imagePickerResponse;
      if (didCancel) {
        alert('Post canceled');
      } else if (error) {
        alert('An error occurred: ', error);
      } else {
        const uploadTask = uploadFileToFireBase(imagePickerResponse);
        monitorFileUpload(uploadTask);
      }
    });
  };

  return (
    <Container>
      <StatusBar barStyle="dark-content" />
      <Button title="New Post" onPress={uploadFile} color="green" />
      {imageURI && <Picture source={imageURI} />}
      {upload.loading && (
        <>
          <Skeleton />
          <ProgressBar bar={upload.progress} />
        </>
      )}
    </Container>
  );
};

export default UploadFile;

Time to test your app. Launch or refresh your simulator, and add a new photo.

As you can see, a skeleton placeholder with a blue progress bar is shown while the photo is uploaded to storage.

Conclusion

Congratulations on completing this series of tutorials.

You learned how to use react-native-image-picker to upload photos from your mobile device to Firebase Storage. You then learned how to track the upload progress and display a skeleton placeholder with a progress bar. When the upload is successful, you learned how to fetch the photo from its remote URL and displayed it on the screen.

I hope you enjoyed it. Take care, and see you in the next one.

Upload Files Using React Native and Firebase (Part 3)

Younes Henni — Fri, 17 Jan 2020 12:53:14 +0000

Originally published in Medium.

Upload Files Using React Native and Firebase (Part 3) | by Younes Henni | Better Programming | Medium

Younes Henni ・ Jan 17, 2020 ・ 6 min read
Medium

Overview

Welcome to part 3 of this series. If you did not follow through the previous parts, consider reading them before starting here.

In part 1, we learned how to add and configure Firebase to your React Native project.
In part 2, we learned how to add react-native-image-picker and learned how to set Firebase Storage rules.
In this part, we will learn step-by-step how to upload files from our device’s library and save them into a Firebase Storage bucket.

You can find the full source code in my Github.

Let’s jump right into it.

1. Add Firebase Storage

Start by adding the Firebase Storage module. This module depends on @react-native-firebase/app which you installed in part 1.

yarn add @react-native-firebase/storage

You need to add this new dependency for iOS.

cd ios
pod install

There is no additional configuration for Android.

You need to rebuild the apps in the simulators for iOS and Android. Kill your metro bundler and re-run the project.

npx react-native run-ios
npx react-native run-android

Add the following code to create a new storage instance in utils/index.js.

import storage from '@react-native-firebase/storage';

export const FireBaseStorage = storage();

2. Test Firebase Storage Integration With React Native

Time to test the integration of Firebase Storage with your React Native app.

Add the following code to components/UploadFile/index.js.

// ..
import { imagePickerOptions, FireBaseStorage } from '../../utils';
const UploadFile = () => {
  // ..
  return (
    <Container>

      {alert(JSON.stringify(FireBaseStorage))}

    </Container>
  );
};

In the above, you imported the FireBaseStorage and will render its output using the alert function.

Refresh your simulator. You should see a pop-up alert containing your Firebase Storage application details.

3. Upload files to Firebase Storage bucket

As seen in part 2, Image Picker returns a response object with a parameter that points to the location of the file in the device. This parameter is named uri in iOS and path in Android.

Following this observation, you will need a simple three-step process in order to upload files to a Firebase Storage bucket.

Get the local path for the file from the device: iOS vs. Android.
Attach a storage reference to the file for Firebase Storage.
Upload the file in the Firebase Storage bucket.

3.1. Get the local file source path

Start by adding the logic for step one. Add the following function in utils/index.js.

import { Platform } from 'react-native';

export const getFileLocalPath = response => {
  const { path, uri } = response;
  return Platform.OS === 'android' ? path : uri;
};

The above function destructures the path and uri parameters from the response object of Image Picker, then it returns one of these parameters depending on the platform (iOS or Android) using Platform from React Native.

You can now test the output of getFileLocalPath.

To do so, add getFileLocalPath to the imports in UploadFile/index.js.

import { imagePickerOptions, getFileLocalPath } from '../../utils';

Then, inside the uploadFile function add the following console log.

const uploadFile = () => {
  ImagePicker.launchImageLibrary(imagePickerOptions, response => {
    if (response.didCancel) {
      // ..
    } else {
      setImageURI({ uri: response.uri });
      console.log(getFileLocalPath(response));
    }
  });
};

Make sure you enable debug mode and then refresh the simulator. Then press the New Post button to add a new photo. You should see the file source logged in your Chrome Dev Console.

3.2. Attach a storage reference to the file

Your files are stored in the bucket. The files are presented in a hierarchical structure, just like the file system on your local hard disk.

By creating a reference to a file, your app gains access to it. More info on references in the Firebase docs.

Add the following function in utils/index.js.

export const createStorageReferenceToFile = response => {
  const { fileName } = response;
  return FireBaseStorage.ref(fileName);
};

The createStorageReferenceToFile function destructures the fileName from the Image Picker response. Then it returns a storage reference using FireBaseStorage.ref().

You can look at the output of the above function in the Chrome Dev Console. First, import createStorageReferenceToFile in UploadFile/index.js.

import { imagePickerOptions, createStorageReferenceToFile } from '../../utils';

Then, inside the uploadFile function add the following console log.

onst uploadFile = () => {
  ImagePicker.launchImageLibrary(imagePickerOptions, response => {
    if (response.didCancel) {
      // ..
    } else {
      setImageURI({ uri: response.uri });
      console.log(
        'My file storage reference is: ',
        createStorageReferenceToFile(response)
      );
    }
  });
};

Refresh the simulator and add a new photo. You should see the storage reference logged in your Chrome Dev Console.

3.3. Upload a file to the Firebase Storage bucket

This is the last step to send the file to your Firebase Storage bucket.
Add the following function in utils/index.js.

export const uploadFileToFireBase = imagePickerResponse => {
  const fileSource = getFileLocalPath(imagePickerResponse);
  const storageRef = createStorageReferenceToFile(imagePickerResponse);
  return storageRef.putFile(fileSource);
};

The above function incorporates the two previous functions (i.e. getFileLocalPath and createStorageReferenceToFile) to create the file path and the storage reference respectively.

Then, it sends the file to Firebase Storage using the putFile method. More on putFile in the official Firebase docs.

The final code in your utils/index.js should now look like this.

import { Platform } from 'react-native';

import storage from '@react-native-firebase/storage';

export const FireBaseStorage = storage();

export const imagePickerOptions = {
  noData: true,
};

const getFileLocalPath = response => {
  const { path, uri } = response;
  return Platform.OS === 'android' ? path : uri;
};

const createStorageReferenceToFile = response => {
  const { fileName } = response;
  return FireBaseStorage.ref(fileName);
};

export const uploadFileToFireBase = response => {
  const fileSource = getFileLocalPath(response);
  const storageRef = createStorageReferenceToFile(response);
  return storageRef.putFile(fileSource);
};

Import uploadFileToFireBase in UploadFile/index.js.

import { imagePickerOptions, uploadFileToFireBase } from '../../utils';

Then add the following lines of code inside the uploadFile function.

const uploadFile = () => {
  ImagePicker.launchImageLibrary(imagePickerOptions, response => {
    if (response.didCancel) {
      // ..
    } else {
      setImageURI({ uri: response.uri });
      // Remove this
      console.log(
        'My file storage reference is: ',
        createStorageReferenceToFile(response)
      );
      // Add this
      Promise.resolve(uploadFileToFireBase(response));

    }
  });
};

uploadFileToFirebase returns a JavaScript Promise through putFile. All we had to do is resolve it and return the result.

The final code in your UploadFile/index.js should now look like this.

import React, { useState } from 'react';
import { Button, StatusBar } from 'react-native';

import ImagePicker from 'react-native-image-picker';

import { imagePickerOptions, uploadFileToFireBase } from '../../utils';
import { Container, Picture, Skeleton, ProgressBar } from '../../styles';

const UploadFile = () => {
  const [imageURI, setImageURI] = useState(null);


  const uploadFile = () => {
    ImagePicker.launchImageLibrary(imagePickerOptions, imagePickerResponse => {
      const { didCancel, error } = imagePickerResponse;
      if (didCancel) {
        alert('Post canceled');
      } else if (error) {
        alert('An error occurred: ', error);
      } else {
        setImageURI({ uri: downloadURL });
        Promise.resolve(uploadFileToFireBase(imagePickerResponse))
      }
    });
  };

  return (
    <Container>
      <StatusBar barStyle="dark-content" />
      <Button title="New Post" onPress={uploadFile} color="green" />
      {imageURI && <Picture source={imageURI} />}
    </Container>
  );
};

export default UploadFile;

Time to test the file upload to Firebase Storage. Refresh your simulator.

Then press New Post to add a new photo.

Go to your Firebase Console. In the left tab bar, click on the Storage tab. You should see the photo saved in the Files tab (figure below).

Et Voila.

Conclusion

In this article, you added Firebase Storage and integrated it with your React Native app. You then followed a three-step process to get the local path of the file, created a storage reference for it, and uploaded it to Firebase Storage.

The next part is a super cool bonus. I will show you how to track the upload progress of your photo, display a progress bar on the screen, and retrieve the photo stored in your bucket. You can read part 4 in here.

4 Steps To Increase Your Focus

Younes Henni — Fri, 17 Jan 2020 09:55:38 +0000

One of the most important skills that sets high achievers apart is their ability to perform focused work for an extended period of time.

By definition, focused work is the ability to work on tasks that require a high level of focus.

If you are a knowledge worker (e.g. a researcher, a software engineer, a writer) or aspiring to become one, getting good at focused work will give you tremendous career benefits such as:

Increasing your productivity. It makes you get a lot of work done in a short amount of time.
Helping you overcome technically challenging tasks and finish complex projects.
Giving you a feeling of pride and confidence due to the amazing progress.

What are the actions you can take to help increase your focus and makes you better at performing focused work?

To help you answer this question, let me point out that focus is a skill. As any other skill, the more you practice it, the better you get at it.

I am going to show you four steps to help you perform focused work on a daily basis and increase your productivity.

1 — Always plan your tasks ahead

Why is this step so important? Because it helps you avoid procrastination.

Procrastination occurs when you have no prior planning ahead of your daily activities.

Thus, solid planning with detailed tasks helps you kick off the day working immediately.

Here are some great ways to help you plan your tasks.

Plan the next day by the end of the current day

Otherwise, you will waste a precious amount of time planning your day (which is a low focus activity) rather than working on your high focus activities.

Use a task management software

Use Trello for desktop (or equivalent) to plan your tasks.
Create a project board with 4 columns left to right: Todo, Doing, Done, Issues.

The todo column holds the complete list of all your tasks to complete your project.

The doing column contains the task in progress.

The done column holds all the tasks you have finished.

The issues column gathers the tasks you decided to skip for whatever reason (too complicated, need rethinking etc).

Break down your complicated tasks into smaller sub-tasks

Nothing steals focus more than the stress caused by a combination of overwhelming tasks and difficulties to progress in your project.

To ensure you maintain a high level of focus, break every big task into minimal and easy to work on sub-tasks.

Learn more on tasks breakdown using the ETIP method.

2— Block all distractions and interruptions

Distractions and interruptions, whether from direct contact or through digital means (phone, tv, email), kill your focus.

You must stay away from your phone and other digital devices

Before starting your focused work, turn off your smartphone (or turn on the plane mode) and shut down other devices that can grab unnecessary attention. This includes -but not limited to- all digital devices such as TV, tablets, gaming consoles.

Important note

Make sure you have an open communication channel for emergencies (family, serious situation, etc).

Only open the relevant tabs on your laptop

Programmers, for example, must be connected to the internet to perform their focused work.

If the internet is part of your focused work (most probably yes) then make sure to only open the tabs relevant to your focused work. For instance, command-line terminals, documentations tabs, business planning board, are all fine. Email tabs, social media tabs, chat applications tabs, are absolutely not OK. They must stay closed at all time during focused work sessions.

3 — Keep a clean and minimal workspace

Why is this step important? A clean and minimal workspace helps to free you from unnecessary distractions and makes you start work immediately.

Workspace location

Make sure your workspace is situated in a quiet location such as an office room in your house or a not too busy library floor.

Workspace Layout

Ideally, your workspace should contain 4 items only: a table, a chair, your laptop, a big glass of water/coffee (to stay hydrated). That’s it.
Any additional items, such as books/magazines/food, can cause friction/distraction/disturbance and make it more difficult to start work straight away.

4 — Turn focused work into a habit

Practice makes perfect. Focused work is an activity you should seek to perform on a daily basis.

Now that you know of three steps to help you get started with your sessions, step 4 is the execution phase and builds on top of the previous steps.

Turn focused work into a habit. Here how you can achieve this.

Perform focused work at the same time every day

I personally prefer doing focused work early in the morning before any other activity. I don’t know about you but my focus peaks when I feel fresh (e.g. the early morning after a good night sleep). In the early morning, your surrounding is most probably quieter (before other home members wake up or before colleagues start arriving in the office).

Work in a series of intervals and breaks

In my case, the best results are obtained when I set aside a 140-minutes block every morning for focused work.

If you want to follow the same time amount, I suggest you break the work session into 4 intervals of 35 minutes. Each interval will have 30 minutes focused work plus 5 minutes break (a la Pomodoro).

Taking these regular breaks of 5 minutes is super important, otherwise, you will burn out very quickly.

Update your project board at the end of every session

After you finish all your 4 intervals (i.e. your 140 minutes focused session), update your project board (back to Step 1) by moving your tasks from left to right in the appropriate columns (todo => doing => done => issues).

Make sure your next focused work session always has a prefilled doing column of tasks. This way, you know exactly what is the plan for the next focused work session. Starting it will be a breeze.

Your current focused work session is now complete.

Conclusion

In a world filled with distractions, it is becoming harder to focus on one task at a time. However, if you want to achieve serious progress in your field, you must learn how to get into the habit of performing focused work longer and often. This will build your confidence, increase your productivity, and help you master whichever skillset you are building.

Upload Files Using React Native and Firebase (Part 2)

Younes Henni — Wed, 15 Jan 2020 09:16:50 +0000

Originally published in Medium.

Upload Files Using React Native and Firebase (Part 2) | by Younes Henni | Better Programming | Medium

Younes Henni ・ Jan 15, 2020 ・ 6 min read
Medium

Overview

In Part 1 we integrated Firebase into our React Native project.

In this part, we’ll add a great open-source library to let users access their device camera or their photo library to upload photos from their phones to Firebase. We’ll also, for the purpose of this series, relax the storage-security rules to allow unauthenticated users to access the storage bucket to get the photos URLs.

Let’s jump right into it.

1. Add React Native Image Picker

The library in question is react-native-image-picker. To add it to your project, run the following in your terminal.

yarn add react-native-image-picker

The next step is to add the necessary permissions to comply with the specific platforms.

1.1. Permissions for iOS

In your RNFirebase/ios/RNFirebase/info.plist, add the following permissions.

<plist version="1.0">
  <dict>
    ...
    <key>NSPhotoLibraryUsageDescription</key>
    <string>
     $(PRODUCT_NAME) would like access to your photo gallery to let   you upload your pictures to the feed.
    </string>
    <key>NSCameraUsageDescription</key>
    <string>
     $(PRODUCT_NAME) would like to use your camera to take picture and share them on your feed.
    </string>
    <key>NSPhotoLibraryAddUsageDescription</key>
    <string>
     $(PRODUCT_NAME) would like to save photos to your photo gallery to upload pictures to your feed.
    </string>
    <key>NSMicrophoneUsageDescription</key>
    <string>
     $(PRODUCT_NAME) would like to use your microphone for videos sharing on your feed.
    </string>
  </dict>
</plist>

Save and close. Now go back to your terminal, and type the following.

cd ios
pod install

This should update the pod dependencies for the iOS app.
Time to rebuild the project.

cd ..
npx react-native run-ios

The app should launch without issues.

1.2 — Permissions for Android

Add the following permissions in your RNFirebase/android/app/src/main/AndroidManifest.xml file.

<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.rnfirebase">
 <uses-permission android:name="android.permission.INTERNET" />

 <uses-permission android:name="android.permission.CAMERA" />
 <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

</manifest>

Save and close. You can now rebuild the app.

npx react-native run-android

Note

If your iOS or Android builds fail, then you need to first run the RNFirebase.xcworkspace or the build.gradle from your Xcode or Android emulator, respectively in order to force instantiate a new build.

2. Configure Firebase Storage Rules

For the purpose of this series, you want to give all users access to the Firebase Storage without the need for authentication, as authentication is a tedious process and is outside the scope of this article.

Configuring the storage rules can easily be done inside the Firebase console. Under the Storage section, go to the Rules tab (see the figure below).

In order to allow unauthenticated users to access Firebase Storage, replace the current rule you have with this one.

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write;
    }
  }
}

Press the Publish button to save the new rules. Now, all users can write and read to this bucket.

3. Upload Photos Locally With Image Picker

Time to implement photo uploading with react-native-image-picker.

Create the following file structure at the root of your project (i.e., where package.json is located).

src|
   components|
             UploadFile|
                       index.js
   styles|
         index.js
   utils|
        index.js

For styling, we’ll use the library styled-components. Add it to your app.

yarn add styled-components

Styled-components is a great library that allows CSS-like styling to React Native, which encourages code sharing between web (e.g., React) and mobile.

Open App.js, and delete all the boilerplate code generated by react-native-cli. Replace it with the following code.

import React from 'react';
import UploadFile from './src/components/UploadFile';
const App = () => <UploadFile />;
export default App;

The above code is straightforward. App.js is rendering the UploadFile component that’ll hold all our business logic.

Next, add the necessary styling (to be used in UploadFile.js) in the styles/index.js file.

import styled from 'styled-components/native';
export const Container = styled.SafeAreaView`
  flex: 1;
  justify-content: center;
`;
export const Picture = styled.Image.attrs({
  resizeMode: 'contain',
})`
  height: 300;
  width: 100%;
`;

The Container and Picture styled-components inherit the primitive React Native views SafeAreaView and Image, respectively. We added the attribute resizeMode: 'contain' to make sure the photo is rendered with its original aspect ratio inside the Picture container.

Time to use the react-native-image-picker. Add the following code to your UploadFile/index.js file.

import React, { useState } from 'react';
import { Button, StatusBar } from 'react-native';
import ImagePicker from 'react-native-image-picker';
import { imagePickerOptions } from '../../utils';
import { Container, Picture } from '../../styles';
const UploadFile = () => {
  const [imageURI, setImageURI] = useState(null);
  const uploadFile = () => {
    ImagePicker.launchImageLibrary(imagePickerOptions, response => {
      if (response.didCancel) {
        alert('Post canceled');
      } else if (response.error) {alert('An error occurred: ',   response.error);
      } else {setImageURI({ uri: response.uri });
        console.log(response);
      }}
    );
  };
  return (
    <Container>
      <StatusBar barStyle="dark-content" />
      <Button title="New Post" onPress={uploadFile} color="green" />
        {imageURI && <Picture source={imageURI} />}
    </Container>
  );
};
export default UploadFile;

Inside the FileUpload component, we define a function called uploadFile.

This function — called from the button by an onPress event — uses the ImagePicker.launchImageLibrary(options, response) function, which takes an options object as its first argument and a response object as its second argument.

We check if the response is successful, and if so, we use a useState hook to write the response URI (i.e., response.uri) to the local state then display it on the screen using the Picture component.

Define the options for ImagePicker and export it from utils/index.js as the following.

export const imagePickerOptions = {
  noData: true,
};

We set the noData field to true. This disables the base64 data field from being generated, which greatly improves performance. The options argument can hold many fields for customization. More on this is in the official API docs.

Time to test the app. Refresh the simulator. By pressing the New Post button, you should be able to access the photos library in the simulator and upload a photo to the screen.

In the Chrome DevTools Console, you should see the response returned from ImagePicker (see figures below).

If you don’t know how to debug in React Native, check the docs here.

Android response.

iOS response.

The response objects from Android and iOS differ slightly. In iOS, the uri parameter gives the local path to the photo, while in Android, this info is given by the path parameter.

Both these parameters will be used in the next part to upload the photo to Firebase Storage.

Conclusion

In this part, you installed react-native-image-picker and used its API to access your photos library, select a photo, and display it on the screen. You also defined custom storage rules for your Firebase Storage bucket.

In the next part, you’ll learn how to save the photo into Firebase Storage then fetch it from its remote URL to be displayed on the screen.
Read part 3 here.

The Ultimate Way To Overcome Challenging Tasks

Younes Henni — Tue, 14 Jan 2020 09:20:54 +0000

Originally published in Medium.

The Ultimate Way to Finish Complicated Projects | by Younes Henni, PhD | Medium

Younes Henni, PhD ・ Apr 14, 2021 ・
Medium

As a developer, I felt stuck countless times during project development. Whatever your profession is, you might have experienced this feeling yourself, I bet.

Regardless if it is work-related or in a personal endeavour, you usually start projects very enthusiastically.

However, when a specific task feels too overwhelming, you tend to lose focus, procrastinate, and sometimes even question your very decision of pursuing a career in your current field.

But not all is lost. I want to share with you a simple way that will greatly help you overcome technically-challenging projects.
Whether you are writing the lyrics of your next song, drafting a business plan, or developing an app, applying this method will help you finish your most complicated tasks.

I call this method: Elementary Task In Progress (ETIP).

Elementary Task in Progress

What do I mean by elementary? Let’s take a look at the Collins Dictionary definition.

Elementary: Something that is very simple and basic.

Thus, by definition, an elementary task is a very simple and basic task that is hardly broken down into smaller, easier steps.

The task in progress should always be elementary so that its execution is straightforward.

Let me clarify this further by asking you a question: “What is the most basic step you can do to get closer to finishing your complicated task?”
Identify that step. Turn it into a task on its own. Work on it.

That’s your ETIP.

If you are stuck in your project because the task in progress is too complicated, chances are, your task is not an ETIP. Turn it into an ETIP by applying the following steps.

- Break the task in progress into simpler, more basic steps.

- For each individual step, break it up even further until it is in its most elementary form. That's your ETIP.

- Pick the first `ETIP` and start working on it.

- Once done with your first ETIP, move to the next one.

Never work on a task that is not an ETIP!

Remember, the task in progress should always be so elementary that its execution is straightforward.

Do you feel that your next task is too complicated? Time to break it down into a series of ETIPs.

A Real-World Example

Let’s say you are part of a team that is building an online banking app.

You are the person tasked with implementing the user profile screen. You receive a design mock-up (i.e. what the profile screen should look like) and a user story (i.e. the different actions the user can perform).

The user story goes like this.

- A user can upload their personal picture.

- A user can check and edit their personal info: home address, social security, ID and tax numbers.

- The user can check and edit their bank account details.

The given user story is made up of three main tasks. You picked the first task from the above list and started working on it.

Soon, you discovered that you have no idea how to request permission to access the photo library on the user’s device. You are also not sure how to save the selected picture.

You see, the first task is far from being an ETIP. Time to apply the ETIP method.

Task 1 breakdown

A user can upload their personal picture can be broken up into the following.

1 - Get access to the user’s device’s photos library.

2 - Select a picture from the list of available photos.

3 - Render the selected photo inside the placeholder.

4 - Save the photo in the database.

5 - Make a network request to display the picture every time the user navigates to the profile screen.

We just broke task 1 into five steps. Is step 1 an ETIP? It does not seem like it. Let us further break step 1 down into simpler, basic steps.

Step 1 breakdown

The step Get access to the device photo library can be broken into.

1.1 - Ask permission to access the user’s device’s photos library.

1.2 - If permission is granted, launch the device’s photo library.

1.3 - If permission is not granted, return a message to the user saying that permission to access the photos library is denied.

Step 1 is now made up of three simpler steps. Can you break these steps even further? Maybe you can. However, in my experience, this is enough to start working on each step with simplicity. But if you can, break each step even further until it is in its most elementary form.

Pick step Ask the user for permission to access their device photos library. This is now your ETIP. Start working on it.

Conclusion

Use the ETIP method every time a task feels too overwhelming. Break your task into basic and simple steps that you can execute easily.

While it is almost unavoidable that you will encounter challenging and complex projects that are made up of complicated tasks, you should not work on a task unless you make sure its completion is simple.

The ETIP method will help you to always progress in completing your projects no matter how big the challenges you are faced with.

Upload Files Using React Native and Firebase (Part 1)

Younes Henni — Mon, 13 Jan 2020 23:03:35 +0000

Originally published in Medium.

Upload Files Using React Native and Firebase (Part 1)

Younes Henni, PhD ・ Jan 13, 2020 ・ 6 min read
Medium

Overview

In this comprehensive series, I will show you how to build a basic full-stack React Native app to let users upload and display photos to/from Firebase storage using their mobile phones.

We will explore the following topics:

Create and configure a Firebase Storage back-end for a React Native app.
Access the device library and select a photo using React Native Image Picker.
Upload photos to Firebase Storage.
Build a tracker to show upload progress.
Display photos from the Firebase URIs.

Here is a video demo of the final implementation you are going to build in this series.

You can find the full code in Github.

Prerequisites

Make sure you have all the tools to run a React Native app on your machine for both iOS and Android.

If you’ve never worked with React Native before, you need to follow the step-by-step installation guide in the official docs. (Stop at the Running your React Native application section).

For the purpose of this tutorial, make sure to choose the option React Native CLI.

One more thing. To avoid dependencies mismatch, I recommend you install the same dependencies versions as in my package.json at the GitHub repo.

1. Start a New React Native Project

Run the following command in your terminal.

npx react-native init RNFirebase

Navigate into the project root directory.

cd RNFirebase

Run the app in the iOS simulator by typing the command.

npx react-native run-ios

For Android, make sure you have an emulator running. Type the command.

npx react-native run-android

If all goes well, you should see the app running in your iOS simulator and Android emulator.

Note

If you have trouble running the app in your Android emulator, open your projectName/android/build.gradle file in the emulator and run it first. Then, try to run the app again from the terminal.

2. Add Firebase to Your Project

If you are not already a member, you need to sign up for Firebase Cloud Services. Once this is done, you can now navigate to the Firebase console and create a new project. Name it as you wish.

In order to integrate Firebase into our React Native app, we will use the awesome open-source react-native-firebase library from Invertase.

Add the library to your project by typing the following in your terminal.

yarn add @react-native-firebase/app

You need to perform additional configurations to make react-native-firebase work with Android and iOS.

2.1. Configure Firebase for Android

Open your newly-made project in the Firebase console. Press the + Add app button as shown below.

Select the Android icon as shown below.

You need to fill in the info in order to register the app (figure below).

The first field is mandatory while the other two are optional. The Android package name (first field) can be obtained from android/app/build.gradle. Copy the string value of applicationId.

applicationId "com.RNFirebase"

Then, fill in the app nickname field. You can leave the third field blank. The panel should look like this.

Press on Register app. This is it for step 1.

Step two is to download the google-services.json file.

Press the download button then add the file to your project at the following location RNFirebase/android/app/.

Step three for adding the Firebase SDK is not necessary when using react-native-firebase.

Now, inside your project, navigate to android/build.gradle and add the google-services dependency.

buildscript {
  dependencies {
    // ..    
    classpath("com.google.gms:google-services:4.2.0")
  }
}

To apply the plugin, go to android/app/build.gradle and add the following line of code at the very bottom of the file.

apply plugin: 'com.google.gms.google-services'

2.2. Rebuild your Android project

Close the existing terminal (metro bundler running your app) and run the app again.

npx react-native run-android

If you are having build issues, you can first rebuild the project by launching your Android studio emulator, opening your projectName/android/build.gradle file, and running it.

Once the build is successful, go back to your terminal and run the npx command again. The app should launch with no errors. Your React Native Android app is now connected to your Firebase project.

Optional

You can go back to the Firebase console and run step four. You should see a success message indicating the installation is complete.

2.3. Firebase setup for iOS

We will now configure Firebase to work with iOS.

Go to your project dashboard in the Firebase console and this time, when pressing the Add app button, select iOS as shown in the figure below.

Similar to the Android case, you will be prompted to fill in the following form.

You can add an app nickname (field two) and leave field three empty.

Field one, though, requires the iOS bundle ID. To get your iOS bundle ID, follow these steps.

Open Xcode.
Press open a new project.
Open the following file: RNFirebase/ios/RNFirebase.xcworkspace.
Go to the General tab as shown in the below figure.

The Bundle Identifier is the second field in the Identity section.

org.reactjs.native.example.RNFirebase

Copy and paste it into field one in the Firebase console. Now, press the Register app button.

For step two, press the download button to get the GoogleService-Info.plist file locally.

You need to move GoogleService-Info.plist inside your project. To do so, open RNFirebase/ios/RNFirebase.xcworkspace using Xcode. Right-click the project name and select Add Files to RNFirebase (see below).

A window will pop up. Select the GoogleService-Info.plist file. Make sure that Copy items if needed and Create groups are checked (as seen in the figure above).

Press the Add button.

Next, open the following RNFirebase/ios/RNFirebase/AppDelegate.m file in your editor of choice (preferably from Xcode since you are already there) and add the following import at the top.

@import Firebase;

Within the didFinishLaunchingWithOptions function, add the following code (bold text).

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  // add this
  if ([FIRApp defaultApp] == nil) {
    [FIRApp configure];
  }

  // ..
}

Save and close.

2.4. Rebuild the iOS project

Go back to your terminal and kill any metro bundler running. You need to rebuild the project and run it again. From the root of your project, do the following.

cd ios
pod install --repo-update

This should kick-start the installation of the dependencies.

Time to rebuild the app. Go back to your project root and relaunch the simulator.

cd ..
npx react-native run-ios

Back in the Firebase console, you can skip step three and step four as they are taken care of by the react-native-firebase library. You can run step five to verify that the installation is complete.

Conclusion

Congratulations. Now you have successfully configured react-native-firebase for iOS and Android.

In the next parts, we will build an app to access the device’s library, upload photos from the device to the Firebase Storage and retrieve the photos to display them on the device. You can jump to part 2 right here.

DEV Community: Younes Henni

Upload Files Using React Native and Firebase (Part 4)

Overview

1. Monitor upload progress

2. Build the progress bar and a skeleton placeholder

Conclusion

Upload Files Using React Native and Firebase (Part 3)

Upload Files Using React Native and Firebase (Part 3) | by Younes Henni | Better Programming | Medium

Younes Henni ・ Jan 17, 2020 ・ 6 min read Medium

Overview

1. Add Firebase Storage

2. Test Firebase Storage Integration With React Native

3. Upload files to Firebase Storage bucket

3.1. Get the local file source path

3.2. Attach a storage reference to the file

3.3. Upload a file to the Firebase Storage bucket

Conclusion

4 Steps To Increase Your Focus

1 — Always plan your tasks ahead

Plan the next day by the end of the current day

Use a task management software

Break down your complicated tasks into smaller sub-tasks

2— Block all distractions and interruptions

You must stay away from your phone and other digital devices

Only open the relevant tabs on your laptop

3 — Keep a clean and minimal workspace

Workspace location

Workspace Layout

4 — Turn focused work into a habit

Perform focused work at the same time every day

Work in a series of intervals and breaks

Update your project board at the end of every session

Conclusion

Upload Files Using React Native and Firebase (Part 2)

Upload Files Using React Native and Firebase (Part 2) | by Younes Henni | Better Programming | Medium

Younes Henni ・ Jan 15, 2020 ・ 6 min read Medium

Overview

1. Add React Native Image Picker

1.1. Permissions for iOS

1.2 — Permissions for Android

Note

2. Configure Firebase Storage Rules

3. Upload Photos Locally With Image Picker

Conclusion

The Ultimate Way To Overcome Challenging Tasks

The Ultimate Way to Finish Complicated Projects | by Younes Henni, PhD | Medium

Younes Henni, PhD ・ Apr 14, 2021 ・ Medium

Elementary Task in Progress

A Real-World Example

Task 1 breakdown

Step 1 breakdown

Conclusion

Upload Files Using React Native and Firebase (Part 1)

Upload Files Using React Native and Firebase (Part 1)

Younes Henni, PhD ・ Jan 13, 2020 ・ 6 min read Medium

Overview

Prerequisites

1. Start a New React Native Project

Note

2. Add Firebase to Your Project

2.1. Configure Firebase for Android

2.2. Rebuild your Android project

Optional

2.3. Firebase setup for iOS

2.4. Rebuild the iOS project

Conclusion

Younes Henni ・ Jan 17, 2020 ・ 6 min read
Medium

Younes Henni ・ Jan 15, 2020 ・ 6 min read
Medium

Younes Henni, PhD ・ Apr 14, 2021 ・
Medium

Younes Henni, PhD ・ Jan 13, 2020 ・ 6 min read
Medium