React Native and Apollo GraphQL Tutorial: Build Mobile Apps

A comprehensive step by step tutorial on learning to build CRUD (Create, Read, Update, Delete) using React Native, Elements, Navigation, Apollo Client and GraphQL. We will use existing Node.js, Express.js, MongoDB, and GraphQL that already created in React.js tutorial. So, we will focus on accessing GraphQL from the React Native Mobile Apps. Same exactly as React.js tutorial, we will use Apollo Client GraphQL to integrating with React Native.

The flow of CRUD Mobile Apps is very basic. It just the main page that shows the list of data, the details page, the edit, and the create data page. In this tutorial, we will use React Native and React Native Elements components including ScrollView, TextInput, Text, Button, View, etc. The list page contains a list of the book with the details button and a button to add new data on the right corner of the header. The details page contains data details text, the back button on the left corner of the header, an edit button and a delete button. The add-data page contains a React Native form, back button, and save button. The edit-data page contains the React Native form, back data, and update button. Simply as that, we will try to build this React Native Mobile Apps to Android and iOS devices.

The Example of React Native Navigation and Elements wrap together with Apollo Client GraphQL

The following tools, frameworks, and modules are required for this tutorial:

Before start to the main steps, make sure that you have installed Node.js and can run npm in the terminal or command line. To check the existing or installed Node.js environment open the terminal/command line then type this command.

React Native and Apollo GraphQL Tutorial: Install create-react-native-app and Create App

The create-react-native-app is a tool for creating a React Native App. To install it, type this command in your App projects folder.

Then create a React Native App using this create-react-native-app command.

If there question to install Expo, just type Y and choose a blank template because we will add the navigation later. That command will create a React Native app then install all required modules. The app or project folder will contain these folders and files.

Next, go to the newly created React App folder.

This React Native App is running via Expo app, before running on your Android or iOS device, make sure you have to install the Expo App to Android or Expo Client to iOS. Of course, that app is available in the App Store. So, we assume that you have installed the Expo App in your device then type this command to run the app.

or

You will see this barcode and instruction in the terminal or command line.

React Native and Apollo GraphQL Tutorial: Build Mobile Apps - Expo Barcode

To open the app in the Android device, open the Expo App first then tap on Scan QR Code button. Scan the barcode in the terminal or command line then you will see the React Native Android App like this after waiting for minutes the build process.

React Native and Apollo GraphQL Tutorial: Build Mobile Apps - Blank App

For iOS Device, press s from the keyboard to send React Native App URL to your Email or SMS. Enter your phone number or Email address (We use an email address) then press Enter. You will get this email to your mailbox.

React Native and Apollo GraphQL Tutorial: Build Mobile Apps - Expo Email

Choose open in Expo URL then open in your browser, that will be redirected to Expo App. In Expo App welcome screen, shake your phone to open the React Native App. Now, you will see this screen in your iOS device.

React Native and Apollo GraphQL Tutorial: Build Mobile Apps - Blank App

Make sure you have the same network between your device and your development computer.

React Native and Apollo GraphQL Tutorial: Add Navigation Header and required Screen

As you see, the React Native app that you can only show plain text which unlike the standard Android or iOS Mobile Apps. To make a standard Android or iOS Mobile Apps, we need to add React Native header and navigation button with an icon to the React Native view. Type this command to install React Native Navigation (react-navigation).

Also, add the React Native Gesture Handler module by type this command.

We have to link react-native to react-native-gesture-handler.

Next, create a folder for components and components files in the root of the app folder by type these commands.

We will fill that files with simple React Native Button, Text, View, props, and navigation. Open and edit components/BooksScreen.js then add this React codes.

Open and edit components/BookDetailScreen.js then add this React codes.

Open and edit components/AddBookScreen.js then add this React codes.

Open and edit components/EditBookScreen.js then add this React codes.

Next, open and edit App.js then add replace all codes with this.

Next, run again the React Native app then refresh your Expo app. You will see the standard Android or iOS Mobile Apps in your device screen.

React Native and Apollo GraphQL Tutorial: Build Mobile Apps - Dummy View

React Native and Apollo GraphQL Tutorial: Install and Configure Apollo Client GraphQL

Now, we have to install and configure all of the required modules and dependencies to the React Apollo and GraphQL. Type this command to install the modules at once.

Next, open and edit App.js then replace all imports with these imports.

Change the constant name of createAppContainer constant variable.

Add these lines of Apollo Client constant variables.

Register the Apollo Provider by adding this line before the export line.

React Native and Apollo GraphQL Tutorial: Show List of Books

To show the list of the books in the Books components, open and edit components/BooksScreen.js then add/replace these imports.

As you can see, there are view elements that use react-native-elements module. For that, install the react-native-elements module first by type this command.

Declare a constant before the class name for the query.

Replace navigationOptions with this.

Add the function to extract and mapping result from GraphQL and render list item from the FlatList that will be added to the render section.

Replace all React Native view render with Apollo Client GraphQL Query with pollInterval to make the page always request GraphQL data.

Add React Native styles constant variables before the export code.

React Native and Apollo GraphQL Tutorial: Show a Book Details

To show book details, we have to modify components/BookDetailScreen.js then replace all imports with these imports.

Declare the constant variables of the GraphQL gql or Queries.

Modify the render section of the class to display a book details by implementing Apollo GraphQL Query and React Native ScrollView, Card, View, Button, Text, ActivityIndicator, etc.

Modify or add the React Native style to match the modified details page.

React Native and Apollo GraphQL Tutorial: Add a New Book

To add a new book, we have an add button in the List of Book page that will push the Add Page. This Add Page will use Apollo GraphQL Mutation instead of React Form. The React Native TextInput change will use a function that triggers the OnChange event. Open and edit components/AddBookScreen.js then replace all imports with these imports.

Declare a constant variable of the Apollo GraphQL gql or Query before the class name.

Add an object of the state after the navigationOptions that consists of required fields that match the GraphQL data.

Add a function to update the React Native TextInput value and state object values.

Modify the React Native render section to add Apollo GraphQL Mutation, React Native TextInput, ScrollView, View, ActivityIndicator, etc.

Also, modify the React Native style to match the required views.

React Native and Apollo GraphQL Tutorial: Edit a Book

The Edit Book Screen pushed from the Book Details Screen. Same as the previous Add Book Page, this page will contain the Apollo GraphQL Mutation and React Native TextInput with additional Apollo GraphQL Query. All React Native TextInput will fill with the data from GraphQL Query. Open and edit components/EditBookScreen.js then replace all imports with these imports.

Declare the constant variables of the Apollo GraphQL Query or gql after the imports.

The above constant variables are Apollo GraphQL Query of the GET and the UPDATE Book data. Next, inside the main class, add an object of the state that contains required fields.

Add a function to update only the state instead of the state and the fields because the fields will fill with the data from GraphQL. In this case, you can’t call setState twice to fill the state, so, we fill the state and the fields separately.

Modify the React Native render section to Apollo GraphQL Query, Mutation, React Native ScrollView, View, TextInput, Button, etc.

Modify the React Native style to match the view requirements.

React Native and Apollo GraphQL Tutorial: Run and Test the Mobile Apps

Before running the React Native apps, we have to download and run the Node.js, Express.js, MongoDB GraphQL server. After download and install the required Node modules, run first the MongoDB server in the different terminal tab.

Run the Express.js GraphQL server in another terminal tab.

In the current React Native app terminal tab, run the React Native app.

Open again the Expo app on your iOS or Android device then refresh the current running React Native application. And here they are the full React Native Mobile Apps running with Apollo GraphQL data.

React Native and Apollo GraphQL Tutorial: Build Mobile Apps - List
React Native and Apollo GraphQL Tutorial: Build Mobile Apps - Add
React Native and Apollo GraphQL Tutorial: Build Mobile Apps - Details
React Native and Apollo GraphQL Tutorial: Build Mobile Apps - Edit

That it’s, the React Native and Apollo GraphQL Tutorial: Build Mobile Apps with React Native Elements and Navigation. You can find the full source code from our GitHub.

That just the basic. If you need more deep learning about React.js, React Native or related you can take the following cheap course:

Thanks!

Source link

Leave a Reply

Your email address will not be published. Required fields are marked *