An Interest In:
Web News this Week
- April 2, 2024
- April 1, 2024
- March 31, 2024
- March 30, 2024
- March 29, 2024
- March 28, 2024
- March 27, 2024
Build fast React Native apps with AWS Amplify
Overview
In this article, we will be building a mobile application with React Native using Expo SQLite adapter as a storage adapter for DataStore.
By the end of the of article, you will be able to build a contact app using the SQLite adapter for storage as shown in the video below:
Expo enables developers to create hybrid JavaScript applications from the comfort of their terminals. Expo has an adapter that gives your app access to a database that can be queried through a WebSQL-like API called expo-sqlite
. The database is persisted across restarts of your app.
Datastore allows you to interact with your data offline first, and it has a sync engine behind the scenes to send data to the backend. DataStore provides a model for using distributed or shared data without writing any additional code for implementing online and offline states. This programming model ensures that working with distributed or shared data is as easy as working with local data. DataStore provides data modeling using GraphQL and converts it to models that you can use in building JavaScript, Android, iOS, and Flutter applications.
With DataStore, at runtime models are passed into a Storage Engine that has a Storage Adapter. Amplify ships with default Storage Adapter implementations, such as SQLite and IndexedDB.
Pre-requisites
- Nodejs v14 installed
- Knowledge of JavaScript and React
- AWS Amplify CLI installed
npm install -g @aws-amplify/cli
- AWS Amplify configured
amplify configure
- Expo CLI installed
npm install -g expo-cli
- Expo Go (installed from your mobile playstore)
Building the React Native app with Expo SQLite and Datastore
Lets get started by initializing a new Expo app. Run this command on your terminal
expo init ReactAmplifyDataStoreExpo
This will create a new React Native application. Change directory and initialize amplify on the directory with these commands
cd AmplifyDataStoreExponpx amplify-app@latest
Installing Dependencies
Next, install the following dependencies with expo
expo install aws-amplify @aws-amplify/datastore-storage-adapter expo-sqlite expo-file-system @react-native-community/netinfo @react-native-async-storage/async-storage
aws-amplify
: this package will enable us to build our AWS cloud-enabled mobile application.@aws-amplify/datastore-storage-adapter
: this is the SQLite storage adapter for Amplify Datastoreexpo-sqlite
: this package gives the app access to a database that can be queried through a WebSQL-like API.expo-file-system
: This package provides access to the local file system on the device.@react-native-community/netinfo
: this package is the React Native Network Info API for Android, iOS, macOS, Windows & Web. It allows you to get information on Connection type and Connection quality@react-native-async-storage/async-storage
: This is an asynchronous, unencrypted, persistent, key-value storage system for React Native.
Next, we go on to create the model for our application.
Generating model with Amplify
The first step to building an app backed by datastore is by defining a schema. The schema contains data types and relationships that represent the app's functionality. In our app, we will create a schema for a simple contact application.
Head over to amplify/backend/api/schema.graphql
, delete the content, and add these lines of code.
type Contact @model { id: ID! name: String! phone: String! email: String}
Here, our Contact model has id
, name,
phone
, and email
as properties. Lets now go ahead to create the graphql generated schema and models. Run this command on your terminal
npm run amplify-modelgen
This will create an src/models
folder with the model and graphql schema. We are making progress!
Next, we initialize the amplify backend. Run this command on your terminal:
amplify init? Enter a name for the environment dev? Choose your default editor: Visual Studio CodeUsing default provider awscloudformation? Select the authentication method you want to use: AWS profile
This will also create an aws-exports.js
in the src
directory. Awesome.
Next, we go ahead to deploy the amplify backend to the cloud. Run this command to do that:
amplify push
For this option, ? Do you want to generate code for your newly created GraphQL API No
, choose No
. We are choosing no here because well be using the datastore API. This will take some time to deploy, depending on your network speed.
Importing Dependencies
Navigate to App.js
, delete the content and add these lines of code:
import { DataStore } from 'aws-amplify';import { ExpoSQLiteAdapter } from '@aws-amplify/datastore-storage-adapter/ExpoSQLiteAdapter';import Amplify from '@aws-amplify/core';import config from './src/aws-exports'import React, { useState, useEffect } from 'react'import { Text, View, TextInput, Button } from 'react-native'import { Contact } from './src/models'
Here, we imported DataStore from amplify, we also got the ExpoSQLiteAdapter
from amplify datastore storage adapter package and the Contact
model from models.
Configuring Amplify and DataStore with ExpoSQLiteAdapter
Next, add these lines of code to App.js
:
Amplify.configure(config)DataStore.configure({ storageAdapter: ExpoSQLiteAdapter});
Here, we configure Amplify with config
from aws-exports
, and then we set ExpoSQLiteAdapter
as the storageAdapter
for Datastore. Lets move on.
Implementing UI Inputs
//App.js const initialState = { name: '', email: '', phone: '' } function App() { return( <View style={container}> <Text style={heading}> My Contacts </Text> <TextInput onChangeText={v => onChangeText('name', v)} placeholder='Contact name' value={formState.name} style={input} /> <TextInput onChangeText={v => onChangeText('email', v)} placeholder='Contact email' value={formState.email} style={input} /> <TextInput onChangeText={v => onChangeText('phone', v)} placeholder='Contact phone' value={formState.phone} style={input} /> <Button onPress={createContact} title='Create Contact' /> </View> )}
Here, we start by setting the initial state of the input fields. We also have TextInput
fields and a Button
that invokes the createContact
function onPress
. Lets go ahead and create the createContact
function.
Implementing Create Contact Functionality
Add these lines of code to App.js
const [formState, updateFormState] = useState(initialState)async function createContact() { if (!formState.name && !formState.email && !formState.phone) return await DataStore.save(new Contact({ ...formState })) updateFormState(initialState) }
Then, we have two state variables, the first formState
will get the values of the input fields and updateFormState
will update the state when the onChangeText
event is triggered.
Next, we have a createContact
function. First, we have a condition that validates if the name
, email
, and phone
fields are empty, if they are, the function returns false, else, we go on to save the field values to Datastore.
Implementing View Contact Functionality
Add these lines of code to App.js
const [contacts, updateContacts] = useState([]) async function fetchContacts() { const contacts = await DataStore.query(Contact) updateContacts(contacts) }
The other variable is an array that holds the contacts we will be fetching from DataStore. Next, we have a fetchContacts
function that queries the Contact
model and then we update the contacts
array.
{ contacts.map(contact => ( <View key={contact.id}> <View style={contactBg}> <Text style={contactText}>Name: {contact.name}</Text> <Text style={contactText}>Email: {contact.email}</Text> <Text style={contactText}>Phone: {contact.phone}</Text> </View> </View> )) }
Here, we mapped through the contacts array to render the contact name
, email
, and phone
.
Implementing onChangeText functionality
Add these lines of code to App.js
function onChangeText(key, value) { updateFormState({ ...formState, [key]: value })}
When the onChangeText event is triggered the formState
is updated with the field values.
Implementing Subscriptions with DataStore
Add these lines of code to App.js
useEffect(() => { fetchContacts() const subscription = DataStore.observe(Contact).subscribe(() => fetchContacts()) return () => subscription.unsubscribe()})
Finally, we have a useEffect()
where we call the fetchContacts()
, and then we do something interesting. We create a graphql subscription with Datastore. So if youre updating the contacts on the web, or iOS app, or Android, you can see those updates in real-time. Awesome.
Adding some Styles
We should go ahead to add the styles. Add the lines of code to the bottom of the codebase in App.js
const container = { padding: 20, paddingTop: 80 }const input = { marginBottom: 10, padding: 7, backgroundColor: '#ddd' }const heading = { fontWeight: 'normal', fontSize: 40 }const contactBg = { backgroundColor: 'white' }const contactText = { margin: 0, padding: 9, fontSize: 20 }export default App
Awesome!
Now lets go ahead and run the app. Run this command on your terminal.
expo start
You should have something like this in the terminal
ReactAmplifyDataStoreExpo git:(master) expo startThis command is being executed with the global Expo CLI.To use the local CLI instead (recommended in SDK 46 and higher), run: npx expo startStarting project at /Users/mac/Desktop/sammy/ReactAmplifyDataStoreExpoStarting Metro Bundler Metro waiting on exp://192.168.104.200:19000 Scan the QR code above with Expo Go (Android) or the Camera app (iOS) Press a open Android Press i open iOS simulator Press w open web Press r reload app Press m toggle menu Press ? show all commandsLogs for your project will appear below. Press Ctrl+C to exit.Started Metro Bundler
Now launch the Expo Go app on your mobile, and scan the QR code. You should have something like this:
Awesome, you can go ahead to install
npm i react-native-web react-dom
This will enable viewing the app on your web browser.
Conclusion
Amplify DataStore allows you to start persisting data locally to your device with DataStore, even without an AWS account. In this article, we learned about Expo SQLite and we went on to build a React native app with Expo SQLite adapter and AWS Amplify DataStore.
Original Link: https://dev.to/codebeast/build-fast-react-native-apps-with-aws-amplify-12ga
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To