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
→