This article is Part 3 of the series of blog post about building a React Native application backed by Drupal, authenticated via Okta
- Part 0: introduction of the project
- Part 1: configuring Okta application
- Part 2: build the Drupal server
- Part 3 : build the React Native application
Create React Native app
For this marathon app, we'll divide the part of building the React Native app into 3 parts:
Initialize the app, setup
react-navigation. At this state, the app will have
- One screen for Single Sign-On, this step is to build up the navigation flow, so clicking the button, you'll be redirected to Home screen. Authentication logic will be added in later steps.
- One Home screen of the app, which user will be redirected to after completing authentication.
- Add Okta react native and implement authentication with Okta
- Make request to Drupal server asking for JSON data
1. Initialize the app and build navigation flow
1.1 Initialize the app
We'll init the project using React Native Typescript template which is recommended by Facebook
npx react-native init soPOC --template email@example.com
Prior to init project, you might need to remove old version of
react-native-cli and install the new thing
otherwise you'll be facing this issue
Now it's a good time to commit the first change.
git commit -m "Init project"
react-navigation and build the navigation flow
To build navigation system in React Native, we use React Navigation. For the sake of simplicity, at this state of the project we only have 2 screens:
- Login screen: a simple screen with one button for Single Sign-On. Once clicked, user is redirected to Home screen.
- Home screen: a primitive screen where printed out the Okta token, proof of a succeed authentication.
These two screens are wrapped in a stack navigator.
a. Add required packages
React navigation requires some additional libraries: react-native-gesture-handler, react-native-reanimated, react-native-screens, so let's get them all with the command below:
yarn add react-navigation react-native-gesture-handler react-native-reanimated react-native-screens
The current tutorial is using React Native 0.60.5 which supports auto linking, but we need one more step to complete linking:
Linking in iOS:
cd ios/ && pod install && cd ..
Linking in Android: add these two dependencies of
implementation 'androidx.appcompat:appcompat:1.1.0-rc01' implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'
yarn add react-navigation-stack
💡 At this point, the app should be able to run without any issue, with no visual change, but under the hood, react-navigation is ready to use. 🦄
b. Create Layout component, create screens and create stackNavigator
Coming from the Drupal world, I always think the Layout component is like
page.html.twig in Drupal.
It's a master template, wrapping everything inside the page. If all screens share same layout with
padding: 16, I'll set it in Layout component.
[to be continue]