Build Notes Taking App with React Native and Webiny Headless CMS

Setting up the application

To create a React Native, we will use Expo. It provides tools and services that make it easy to develop React Native apps. This means you don't need to install and configure native build tools such as Xcode or Android Studio.

With Expo, you can use a single codebase to build mobile apps for iOS, Android, and the web. Proceed to your preferred working directory. Run the following command to bootstrap the React Native Expo application:

npx create-expo-app notes_app

Once the installation process is complete, we will need to install the following packages for navigation.

npx expo install @react-navigation/native @react-navigation/stack react-native-gesture-handler react-native-safe-area-context

• Ensure that the development server is running:

# On ios device
npx expo run ios

# On ios android
npm run android

Handling Environmental Variables

We have created variables we need to use in the React Native app. This includes the API Access Key. To use these constants in React Native, we need to create environmental variables so that the application can access them where necessary.

Expo provides a few different ways to handle environmental variables in your React Native app. They are:

• Using the .env file with the expo-dotenv package
• Using the Expo CLI with the Expo.Constants.manifest.extra object.
• Using a .json file with the expo-constants package

For loading environmental variables, we will use the expo-constants package. Go ahead and install the package using the following command:

npx expo install expo-constants

On the project root folder, create an app.config.js file. Edit the file as follows:

module.exports = {
    name: 'NotesApp',
    version: '1.0.0',
    extra: {
    manageUrl: "your_manage_url",
    readUrl:"your_read_url",
    apiKey:"your_api_key"
    },
};

Update the above dynamic variables as per your Webiny credentials.

Connecting Webiny with React Native

Using the above Webiny environmental variables, let’s connect the CMS to React Native to perform mutations and queries based on the Webiny generated GraphQL endpoints.

On the project root directory, create a store directory. Inside it, create a store.js file. The file will host the application's context. Edit the file as follows, step by step:

• Import the necessary packages:

import React,{createContext, useState} from 'react';
import Constants from 'expo-constants';

• Define the application context:

const AppContext = createContext();

• Define the AppContextProvider function:

const AppContextProvider = ({children}) => {
}

In React, the createContext function is used to create a ReactContext object. This object is used to pass data through the component tree without having to pass props down manually at every level. In his case, we are creating the AppContextProvider function to handle this instance to get data from Webiny and to pass them down through the component tree.

Inside the AppContextProvider, configure the createContext as follows:

• Define the states to hold the values that determine a component's behavior.

The state can be managed within the component itself and updated using the setState method. In this example, we will define the application as follows:

const [notes,setNotes] = useState([]);
const [loading,setLoading] = useState(false);
const [error,setError] = useState('');
const apiKey = Constants.manifest.extra.apiKey;

• Define the function for fetching the notes:

In the above example, we create states to hold the notes data. To get notes from Webiny, we will create the getNotes method to fetch the notes data as follows:

const getNotes = async() => {
    setLoading(true);
    setError('');
    try{
        let url = Constants.manifest.extra.readUrl;
        let headers = {
            "content-type":"application/json",
            "Authorization": `Bearer ${apiKey}`};
        let graphqlQuery = {
            "operationName" : "fetchNotes",
            "query": `query fetchNotes{
                listNotes{
                data{
                    id
                    title
                    content
                    published
                }
                }
            }`,
            "variables":{}
        };
        const options = {
            "method":"POST",
            "headers":headers,
            "body":JSON.stringify(graphqlQuery)
        };
        let response = await fetch(url,options);
        let data = await response.json();
        setNotes(data.data.listNotes.data);
        setLoading(false);
        setError('');
    }catch(e){
        setLoading(false);
        setError(new Error(e).message);
    }
}

• Define a function for adding a note:

Just as getting notes Webiny, we need to create notes and save them to the CMS. The below addNote() method will help add data to Webiny based on the data we have created on the CMS dashboard:

const addNote = async (title,content) => {
    setLoading(true);
    setError('');
    try{
        let url = Constants.manifest.extra.manageUrl;
        let headers = {
            "content-type":"application/json",
            "Authorization": `Bearer ${apiKey}`};
        let graphqlQuery = {
            "operationName":"addNote",
            "query":`mutation addNote($title:String!,$content:String!){
                createNote(data:{title:$title,content:$content}){
                data{
                    id
                    title
                    content
                }
                }
            }`,
            "variables":{
                "title":title,
                "content":content
            }
        };
        const options = {
            "method":"POST",
            "headers":headers,
            "body":JSON.stringify(graphqlQuery)
        };
        let response = await fetch(url,options);
        let data = await response.json();
        setLoading(false);
        setError('');
        return data.data.createNote.data;
    }catch(error){
        setLoading(false);
        setError(new Error(error).message);
    }
}

• Define a function for deleting a note:

Any note published on Webiny CMS can be deleted on the front-end. Using React Native, below is how we can send a request to delete a note based on the specific note id:

const deleteNote = async (id) => {
    setLoading(true);
    setError('');
    try{
        let url = Constants.manifest.extra.manageUrl;
        let headers = {
            "content-type":"application/json",
            "Authorization": `Bearer ${apiKey}`};
        let graphqlQuery = {
            "operationName":"deleteNote",
            "query":`mutation deleteNote($id:ID!){
                deleteNote(revision:$id){
                  data
                }
              }`,
            "variables":{
                "id":id,
            }
        };
        const options = {
            "method":"POST",
            "headers":headers,
            "body":JSON.stringify(graphqlQuery)
        };
        let response = await fetch(url,options);
        let data = await response.json();
        setLoading(false);
        setError('');
        if(data.data.deleteNote.data){
            setNotes(notes.filter(note => note.id !== id));
        }
        return data.data.deleteNote.data;
    }catch(error){
        setLoading(false);
        setError(new Error(error).message);
    }
}

• Return the states and the functions we have created:

return (
    <AppContext.Provider value={{notes,setNotes,loading,setLoading,error,setError,getNotes,addNote,deleteNote}}>
        {children}
    </AppContext.Provider>
)

• Export the AppContext, and AppContextProvider so that the rest of the application can be able to access all the methods we have created:

export {
    AppContext,
    AppContextProvider
}

To allow React Native to use these changes, import the AppContextProvider in App.js:

import {AppContextProvider} from './store/store';

Wrap each component rendered from the App() with the provider:

<AppContextProvider>
    // rest of the components
</AppContextProvider>

Setting up the Screens

In React Native, a screen is typically implemented as a component rendered to the device's screen. This will allow us to create the components that will execute our methods, such as getting the notes and displaying them, a component for adding a new note based on addNote etc.

Inside the project folder, create a screens directory. Inside the directory, create two files:

• Home.js - This screen will display the notes.
• AddNote.js - We will use this screen to create a component to add new notes to Webiny CMS.

To execute these screens, use React Native navigation to control the screen interactions. To do so, edit App.js as follows:

• Import the necessary packages:

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Home from './screens/Home';
import AddNote from './screens/AddNote';
import {AppContextProvider} from './store/store';

• Create a stack navigator:

const Stack = createStackNavigator();

• Render the components as per their routes:

return (
    <AppContextProvider>
    <NavigationContainer>
    <Stack.Navigator initialRouteName='Home'>
        <Stack.Screen name="Home" component={Home} options={{title:"Home"}}/>
        <Stack.Screen name="AddNote" component={AddNote} options={{title:"AddNote"}} />
    </Stack.Navigator>
    </NavigationContainer>
    </AppContextProvider>
);

Displaying Notes

Using the screens/Home.js we have created above, let’s fetch the notes from Webiny:

• First, import the necessary packages:

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View,Button } from 'react-native';
import { useContext, useEffect } from 'react';
import { AppContext } from '../store/store';

• Define the render function:

export default function App({navigation}) {
}

• Inside the render function:
• Extract relevant data from context:

const {notes,getNotes,loading,error} = useContext(AppContext);

• Fetch the notes:

useEffect( () => {
    getNotes();
},[]);

• Render the view:

return (
    <View style={styles.container}>
    {
        loading && <Text>Loading...</Text>
    }
    {
        error && <Text>{error}</Text>
    }
    {
        notes && notes.length > 0 && notes.map((note,index) => (
            <View key={index} style={styles.notesCard}>
                <Text style={styles.notesTitle}>{note.title}</Text>
                <Text style={styles.notesSubTitle}>{note.content}</Text>
            </View>
        ))
    }

    <Button title="Add Note" onPress={ () => navigation.navigate("AddNote") } />
    <StatusBar style="auto" />
    </View>
);

• Define some styles to format the displayed notes:

const styles = StyleSheet.create({
container: {
    padding:20
},
notesCard:{
    margin:10,
    shadowColor:"#fff",
    shadowOpacity:1
},
notesTitle:{
    fontWeight:"bold"
},
notesSubTitle:{
    fontWeight:"300"
}
});

• Ensure your development server is still up and running. Based on the notes available on the Webiny CMS, React Native will display them as follows:

Adding a New Note

These changes go to screens/AddNote.js as follows:

• Import the relevant packages:

import { StatusBar } from 'expo-status-bar';
import { useState,useContext } from 'react';
import { StyleSheet, Text, View,TextInput,Button } from 'react-native';
import { AppContext } from '../store/store';

• Define the render function:

export default function App({navigation}) {
}

Inside the render function:

• Define the states:

const [title,setTitle] = useState('');
const [content,setContent] = useState('');
const [formError,setFormError] = useState('');

• Extract data from context:

const {addNote,publishNote,loading,error} = useContext(AppContext);

• Define a function for adding a note:

const handleAddNote = async () => {
    setFormError('');
    if(title && content){
        try{
            let response = await addNote(title,content); // add a note
            let publishResponse = await publishNote(response.id); // publish the added note
            if(publishResponse.id){
                setTitle('');
                setContent('');
                navigation.navigate('Home'); // redirect to home
            }
        }catch(error){
            setFormError(new Error(error).message);
        }
    }else{
        setFormError("Title and Content are required");
    }
}

• Render the view:

return (
    <View style={styles.container}>
    {
        formError && <Text>Form Error : {formError}</Text>
    }
    {
        error && <Text>Error adding note : {error} </Text>
    }
    <TextInput
        placeholder='Title of note'
        value={title}
        onChangeText={text => setTitle(text)}
    />
    <TextInput
        placeholder='Content of note'
        value={content}
        onChangeText={text => setContent(text)}
    />
    <Button title={
        loading ? "Loading" : "Submit"
    } onPress={() => handleAddNote() } />
    <StatusBar style="auto" />
    </View>
);

• Define some styles:

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },
});

Deleting a Note

Using the screens/Home.js we have created above, let’s delete a note from Webiny:

• Extract the deleteNote function from context:

const {notes,getNotes,loading,error,deleteNote} = useContext(AppContext);

• Define a function for deleting a note:

const handleDeleteNote = async (id) => {
    let res = await deleteNote(id);
    if(res){
        console.log("done");
    }else{
        console.log("an error occurred");
    }
}
        ```

- Add a button for deleting a note while rendering the note card:

```js
{
    notes && notes.length > 0 && notes.map((note,index) => (
        <View key={index} style={styles.notesCard}>
            <Text style={styles.notesTitle}>{note.title}</Text>
            <Text style={styles.notesSubTitle}>{note.content}</Text>
            <Button title="Delete note" color="red" onPress={() => handleDeleteNote(note.id)} />
        </View>
    ))
}

<p data-line="636" class="sync-line" style="margin:0;"></p>

Conclusion

We have successfully created a React Native notes app that is consuming data form Webiny Headless CMS 🚀. In this article we learned how to setup and use the Webiny CMS, configure content models and consuming data from React Native app.

Full source code: https://github.com/webiny/write-with-webiny/tree/main/tutorials/react-native-notes-app

---

This article was written by a contributor to the Write with Webiny program. Would you like to write a technical article like this and get paid to do so? Check out the Write with Webiny GitHub repo.