Building full Stack Mobile App with React Native and Appwrite

Introduction

Building full stack mobile apps just got little easier with React Native and Appwrite. In this tutorial, we will build a full stack mobile app using React Native and Appwrite. We will build a simple mobile app that will allow users create a new account, signin and logout. We will use appwrite as our backend service to handle user authentication. Appwrite is an open source backend server that helps you build apps faster. It has a lot of features that makes it easy to build full stack apps.

App setup with Expo

We will be using Expo to setup our React Native app. Expo is a framework and a platform for universal React applications. It is a set of tools and services built around React Native and native platforms that help you develop, build, deploy, and quickly iterate on iOS, Android, and web apps from the same JavaScript/TypeScript codebase.

To get started, you need to have Node.js or Bun installed on your machine. You can install Node.js from here. After installing Node.js, you can install Expo CLI by running the following command:

bunx create-expo-app chai-appCopy

This will create a new Expo project called chai-app. You can cd into the project directory and start the app by running the following command:

cd chai-app
bun startCopy

You app name is chai-app and you can add android package name by going into the app.json file.

"android": {
      "package": "com.testwrite.app",
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#ffffff"
      }
    },Copy

Next up we need to install the Appwrite SDK for React Native. You can install the SDK by running the following command:

bunx expo install react-native-appwrite react-native-url-polyfillCopy

Appwrite setup

To get started with Appwrite, you need to create an account on Appwrite. After creating an account, you can create a new project and get your project ID and API key. You can find your project ID and API key in the project settings.

Add App in your project on Appwite in Android section add com.testwrite.app as package name and name as chai-app

Linking Appwrite SDK in our app

Go to app.js file and add the following code:

import {Client, Account, ID} from 'react-native-appwrite'

let client;
let account;



client = new Client()
client
    .setEndpoint("https://cloud.appwrite.io/v1")
    .setProject("add-your-id")
    .setPlatform("com.testwrite.app")

account = new Account(client)Copy

Building the app

setting state for fields

const [email, setEmail] = useState('')
const [password, setPassword] = useState('')
const [name, setName] = useState('')
const [userDetails, setUserDetails] = useState(null)Copy

Signup, login and signout functions

// create a new account in appwrite
  async function createAccount() {
    await account.create(ID.unique(), email, password, name)
    console.log("Successfully created account")
  }

  // sign in with email and password
  async function signIn() {
    await account.createEmailSession(email, password)
    setUserDetails(await account.get())
    console.log(userDetails)
  }

  // sign out
  async function signOut() {
    await account.deleteSessions()
    setUserDetails(null)
    console.log("Successfully signed out")
  }Copy

UI for the app

<View>
      <TextInput
        style={{ height: 40, borderColor: 'gray', borderWidth: 1, margin: 10 }}
        onChangeText={(text) => setEmail(text)}
        value={email}
        placeholder="Email"
      />
      <TextInput
        style={{ height: 40, borderColor: 'gray', borderWidth: 1, margin: 10 }}
        onChangeText={(text) => setPassword(text)}
        value={password}
        placeholder="Password"
      />
      <TextInput
        style={{ height: 40, borderColor: 'gray', borderWidth: 1, margin: 10 }}
        onChangeText={(text) => setName(text)}
        value={name}
        placeholder="Name"
      />
      <Button title="Sign In" onPress={signIn} />
      <Button title="Sign Out" onPress={signOut} />
      <Button title="Create Account" onPress={createAccount} />
    </View>

    <View>
      <Text>
        Account ID: {userDetails ? userDetails.$id : 'null'}
      </Text>
      <Text>
        Email: {email}
      </Text>
      <Text>
        Password: {password}
      </Text>
      <Text>
        Name: {name}  
      </Text>
    </View>Copy

Conclusion

In this tutorial, we have built a full stack mobile app using React Native and Appwrite. We have created a simple app that allows users to create a new account, sign in and sign out. We have used Appwrite as our backend service to handle user authentication. Appwrite is an open source backend server that helps you build apps faster. It has a lot of features that makes it easy to build full stack apps.

You can find complete tutorial on my youtube channel, Links are available on the Home page.