πŸ‘¨β€πŸ’» - [Part 3] - Drupal - Okta - React Native - React Native

Initializing React Native application, setup React-navigation, add Okta OCID
This article is still in draft version

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:

  1. 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.
  2. Add Okta react native and implement authentication with Okta
  3. 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 react-native-template-typescript@6.2.0

Prior to init project, you might need to remove old version of react-native-cli and install the new thing @react-native-community/cli, otherwise you'll be facing this issue

Once set, run npx react-native run-ios to spin up the beautiful app into iOS simulator. 1

Now it's a good time to commit the first change. git commit -m "Init project"

1.2 Add 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 react-native-screens to android/app/build.gradle

implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'

Lastly, add react-navigation-stack:

yarn add react-navigation-stack

Commit changes: git add

πŸ’‘ 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]