React Native Project with NodeJS and MongoDB- Part 2

Nabendu Biswas

8 min readApr 27, 2022

Welcome to the part-2 of the series and we will start where we left. You can find part-1 here.

We will first install react native vector icons in our project.

After that include a FooterList component in the Home.js file.

Next, create a footer folder in the components folder and a file FooterList.js inside it. Add the below content in it.

Here, we are sending the text and the name props to a FooterItem component.

Now, create a FooterItem.js file inside the footer folder. Here, we are using the FontAwesome5 icons with the passed props.

Now, in our Home component we will see nice icons in footer.

Now, we will refactor our code by moving all content from App.js file. Here, we have inserted a Navigation component.

Next create a Navigation.js file inside the components folder and add the below code in it.

Here, we are calling a NavigationScreen component.

In the NavigationScreen.js file we have most of the code from App.js file. But we have also added the concept of authentication.

Here, we are checking whether we have the token and if we have it then showing the Home Screen or else showing the SignIn component.

We have also included a new HeaderTabs in the Home Screen.

Now, create a header folder inside the components folder and a HeaderTabs.js file inside it.

Here, we have a Signout buttton which will remove our Async Storage.

Now, our app have a working Signout button.

Now, we will create some new screens. So, first create a file Account.js inside the screens folder and add the below content in it.

Next create a file Links.js inside the screens folder and add the below content in it.

Lastly, create a file Post.js inside the screens folder and add the below content in it.

Now, we will add these new components route in our NavigationScreen.js file.

Next, in the FooterList.js file we will add three new props to the FooterItem component. They are routeName, screenName and handlePress.

Now, we will update our FooterItem.js file. Here, by using the screenName and routeName we are showing an active tab. Also, onPress have the handlePress function.

Now, our components are changing perfectly with active one shown in purple.

Now, we will update our Account.js file to first have the required imports and useState. We are also getting the name, email and role from the context API.

Next, we will create the handleSubmit which is quite similar to the SignIn component.

Lastly we will add the code in return and the styles for it. Again it is quite similar to the SignIn component.

Now, our App will show this nice view in Account.

Now, we will add the logic to upload image in Account.js file. Here, we are creating a image state variable and having a hard-coded url as of now.

Next, we will show an image and also a camera icon to upload image. Notice that when we will not have a image for the first time, we are showing the camera icon.

Now, a nice image is shown in the app.

Now, we will use cloudinary to upload our images. So, login to your cloudinary account.

After that click on Settings and then Upload tab.

After scrolling a bit down, we will get Upload presets. Here the ml_default should be signed.

Now, we will take the cloudinary name, API key and secrets from the home page and create variables from the same in .env file inside server.

Now, we will add expo image picker in our client side.

Next, we will use it in the Account.js file. Here, we are adding a new state variable and also removed the hard-coded url.

Now, we will update our handleUpload function. Here, we are using the ImagePicker functions to get the image and set the base64Image to uploadImage.

We are also passing this to the backend route, which we need to create.

Now, in the app when we click on the Upload button, we will first be asked for permissions.

Next, we will be taken to the simulator photo gallery.

Here, on picking a image we will be taken to the next scree. Here, press on Choose.

Now, our uploaded image will be shown in the component.

Next, we need to create the upload-image route in the server. But first we will change all of our imports to the old NodeJS kind import, because some old node_modules were creating problem.

First update them in index.js file.

Next, we will update them in auth.js file in routes folder. Here, we are also creating a new route for upload-image.

Next, we will update the imports in auth.js for the controllers. We are also adding the cloudinary config.

Now, we will update the imports in user.js for the models.

Next, we will update imports in auth.js for the helpers.

We are also changing our nodemon in package.json file.

Now, in the auth.js in the context folder in client, we are adding the required header for POST request. We have also added logic to handle token expiry.

We were getting an error for json request, so we have to update the limit of it in index.js file inside the server.

Next, we will add the cloudinary package in the server.

Now, we will update our uploadImage function in auth.js inside controllers.

Here, we are using cloudinary to upload our image to cloudinary. Also, getting a unique id with nanoid().

After that updating the record to include the public_id and url from cloudinary.

Next, we will update our handleUpload function to get the user from the stored Async storage and pass it to upload-image endpoint in Account.js file.