Building an app like Uber using React-Native

Part 8: Display user profile data and add image picker

If you are coming here for the first time please follow my previous tutorials to know more about this app.

In the previous part we saw stack-navigation and drawer-navigation. In drawer navigation when we click on the user’s image or name we will open the user details screen. The user details screen will consist of user’s basic information such as name, sex, date of birth, phone number, email and profile image. User should also be able to edit his/her information and update it.

User will be able to change image by picking new image either from gallery or by clicking a new pic using mobile camera. We will be using “react-native-image-picker” component to pick user’s image.

We will be creating a new sub module named mycab_user_details in our github for this part. The screen for this part is present in /app/content/UserDetailsScreen.js and the styles for this screen is present in /app/styles/userdetails-styles.js

To add image picker lets first install “react-native-image-picker”

npm install --save react-native-image-picker

Then link the components using react-native link

Next add user permissions to use camera and mobile gallery. Add the below permissions in /android/app/arc/main/AndroidManifest.xml

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

The code for showing user details is as below:

The code for fetching image from mobile is:

const options = {
 title: ‘Select Image’,
 maxWidth: 800, maxHeight: 600,
 storageOptions: {
 skipBackup: true,
 path: ‘images’,
 },
 };
ImagePicker.showImagePicker(options, (response) => {
 console.log(‘Response = ‘, response);
 
 if (response.didCancel) {
 console.log(‘User cancelled image picker’);
 } else if (response.error) {
 console.log(‘ImagePicker Error: ‘, response.error);
 } else if (response.customButton) {
 console.log(‘User tapped custom button: ‘, response.customButton);
 } else {
 const source = { uri: response.uri };
 this.setState({
 image: source,
 });
 }
 });

One the above changes are done run the app using “react-native run-android” and the output will look like below screen. By default the “Save” button will be disabled, it will get enabled if any of the user fields are edited.

In the next part we will see login and signup modules