Start with React Native_

Discover how to leverage Appwrite's powerful backend to help you build React Native apps for iOS, Android and other native platforms.

2 min read

Raw

Learn how to setup your first React Native project powered by Appwrite. The React Native SDK is still in beta. Proceed with caution if you plan to use this SDK in production.

React for web

Looking to start with React for web? Follow the React quickstart and React tutorial flows.

1. Create React Native project

Create a React Native project using npx.

Bash

npx create-expo-app my-app
cd my-app

2. Create project

Head to the Appwrite Console.

If this is your first time using Appwrite, create an account and create your first project.

Then, under Add a platform, add a Android app or a Apple app.

You can skip optional steps.

3. Install Appwrite

Install the Appwrite SDK for React Native and required dependencies.

Bash

npx expo install react-native-appwrite react-native-url-polyfill

4. Implement Appwrite

Find your project's ID in the Settings page.

Open app/(tabs)/index.tsx and add the following code to it, replace <PROJECT_ID> with your project ID and <YOUR_PLATFORM> with your application id or package name.

This imports and initializes Appwrite and defines some basic authentication methods.

JavaScript

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, TextInput, TouchableOpacity } from 'react-native';
import { Client, Account, ID, Models } from 'react-native-appwrite';
import React, { useState } from 'react';

let client: Client;
let account: Account;

client = new Client();
client
  .setEndpoint('https://<REGION>.cloud.appwrite.io/v1')
  .setProject('66e943139f030e2feaf8')   // Your Project ID
  .setPlatform('com.example.my-app');   // Your package name / bundle identifier

account = new Account(client);
export default function App() {
  const [loggedInUser, setLoggedInUser] = useState<Models.User<Models.Preferences> | null>(null);
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [name, setName] = useState('');

  async function login(email: string, password: string) {
    await account.createEmailPasswordSession({
        email,
        password
    });
    setLoggedInUser(await account.get());
  }

  async function register(email: string, password: string, name: string) {
    await account.create({
        userId: ID.unique(),
        email,
        password,
        name
    });
    await login(email, password);
    setLoggedInUser(await account.get());
  }
  return (
    // ... Implement your UI here
  );
}

const styles = StyleSheet.create({
    // ... define some styles
});

5. Create a login form

With Client and Account service initialized, you can now use them to make your first requests to Appwrite.

Add the following components to your App.js file to create a simple login form.

JavaScript

<View style={styles.root}>
    <Text>
    {loggedInUser ? `Logged in as ${loggedInUser.name}` : 'Not logged in'}
    </Text>
    <View>
    <TextInput
        style={styles.input}
        placeholder="Email"
        value={email}
        onChangeText={(text) => setEmail(text)}
    />
    <TextInput
        style={styles.input}
        placeholder="Password"
        value={password}
        onChangeText={(text) => setPassword(text)}
        secureTextEntry
    />
    <TextInput
        style={styles.input}
        placeholder="Name"
        value={name}
        onChangeText={(text) => setName(text)}
    />

    <TouchableOpacity
        style={styles.button}
        onPress={() => login(email, password)}
    >
        <Text>Login</Text>
    </TouchableOpacity>

    <TouchableOpacity
        style={styles.button}
        onPress={()=> register(email, password, name)}
    >
        <Text>Register</Text>
    </TouchableOpacity>

    <TouchableOpacity
        style={styles.button}
        onPress={async () => {
        await account.deleteSession({ sessionId: 'current' });
        setLoggedInUser(null);
        }}
    >
        <Text>Logout</Text>
    </TouchableOpacity>
    </View>
</View>

You can also add some simple styling to your app by adding the following styles to your App.js file.

JavaScript

const styles = StyleSheet.create({
  root: {
    marginTop: 40,
    marginBottom: 40
  },
  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    marginBottom: 10,
    paddingHorizontal: 10,
  },
  button: {
    backgroundColor: 'gray',
    padding: 10,
    marginBottom: 10,
    alignItems: 'center',
  },
});

6. All set

Run your project with npx expo start.

Was this page helpful?

Share what worked or what we should fix. Once approved, our agents automatically apply suggested updates to the docs.