Amplify SDK and Navigation Service

Part ɪɪ: React-Native UI │Story 12: Adding Amplify SDK to react-native app and setting up Navigation Service

GIT : Repo | Feature/Story branch| PR

In the previous posts, we added components for Home screen that would show a list of words user has added to his/her vocabulary collection and AddEditWord screen from where user can add a new word or edit an existing word.

However, so far these components are static having no communication to database. Our Home component is showing a static list of few hard-coded words & AddEditWord component is also not really adding the word to the db.

In this post, we will start with the first step of getting our components use the serverless API to communicate with database i.e setting up the redux actions and reducers for CRUD operations of words data.

Install Amplify SDK

There are several libraries available to make Ajax http calls to API from react, like axios or fetch.
We would use the Amplify SDK provided by AWS for making Ajax requests to our serverless API.Amplify allows developers to easily work with AWS resources like Cognito, APIs, S3 etc. In a later post, we would also configure Amplify for AWS Cognito services to authenticate and authorize our http requests.

$ yarn add aws-amplify aws-amplify-react-native
$ react-native link aws-amplify-react-native

Next, we have to tell Amplify what AWS resources it should use and the Ids/ARNs or endpoints of those resources to point Amplify to right resources.

1 . 📂 Create a folder config under src
2 . 📝 Create a file AppContants.js, under src/config

We would store all the IDs/ARNs and any other constants that we may need in our app in AppContants.js. You can have these constants configured based on your development environment also, like a set of constants for qa env and other set for prod.

For now, we will store our API endpoint URL that we have noted down here when we deployed our Serverless API to AWS👇

3 . 📝 Create a file appConfig.js, under src/config

In this file, we will define the configurations we need for various services in our app. For now, we would add Google SignIn service and Amplify service configuration 👇

👆we added functions to set GoogleConfig and AmplifyConfig that we will call in the UserSignIn component’s constructor to have these services configured at the time of our app’s initial loading before user signs in.

❗ ️️For GoogleConfig, specifying iOS and Android clientIds is optional in our case, as react-native-google-signin plugin would find those from the googleServies-info.plist/googleServies.json files that we have added to iOS(in xCode) & Android(from Android studio) apps respectively.

ℹ️ Web Client Id as we noted down here.
⚠️ Why provide webClientId to GoogleSignin configuration on mobile platforms? discussed this here

Update the UserSignIn component’s constructor to configure Amplify and Google SignIn services using the above two functions 👇

👆Line # 5, 13–14 : In UserSignIn constructor, we replaced GoogleSignin.configure() with GoogleConfig(). Additionally we are now also calling AmplifyConfig in the constructor.

redux-thunk

Now that we are getting ready to make async Ajax requests to the API from the redux actions, we will use redux-thunk that would allow us to write action creators to help us handle these async actions in redux:

$ yarn add redux-thunk

Add redux-thunk as middleware to our redux store. Update src\redux\store\index.js as below:

👆we added redux-thunk to the middlewares for our store (line # 8).

Creating Navigation Service

In some cases, like when a new word has been added by the user, we would like to initiate the navigation from the AddWord screen to the Home screen from the redux action itself after the post word API returns successfully. But we don’t have the navigation prop of react-navigation available in our action functions.

In such cases, react-navigation provides a way to define a navigation service that allows us to access its navigate method from anywhere in the app where navigation object is not available as props.

So lets create NavigationService:
📝 Create a file NavigationService.js under src/routes 👇

Next, we would update the App.js to set a ref for the top level navigator for the above service as below 👇

With this, now we should be able to dispatch a navigate action on our top-level navigator from anywhere just by importing this NavigationService and calling its navigate method.

In the next post, we would set up the redux actions and reducers related to the CRUD operations of words data.

← Prev:Add/Edit Word Component┈🏠┈ Next:Redux for words→