AppWrite SDK for React-Native

Changelog · Report Bug · Request Feature

📦 Installation

To install @arietta-studio/appwrite-sdk react-native-url-polyfill, run the following command:

$ bun add @arietta-studio/appwrite-sdk react-native-url-polyfill

Add your Platform

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.

iOS steps

Add your app name and Bundle ID. You can find your Bundle Identifier in the General tab for your app's primary target in XCode. For Expo projects you can set or find it on app.json file at your project's root directory.

Android steps

Add your app's name and package name, Your package name is generally the applicationId in your app-level build.gradle file. For Expo projects you can set or find it on app.json file at your project's root directory.

Setup

On index.js add import for react-native-url-polyfill

import 'react-native-url-polyfill/auto'

If you are building for iOS, don't forget to install pods cd ios && pod install && cd ..

Init your SDK

Add these values to .env file:

APPWRITE_ENDPOINT =
  APPWRITE_PLATFORM =
  APPWRITE_PROJECT_ID =
  APPWRITE_STORAGE_ID =
  APPWRITE_DATABASE_ID =
  APPWRITE_USER_COLLECTION_ID =
    'users';

Initialize your SDK with your Appwrite server API endpoint and project ID which can be found in your project settings page.

import { AppWriteProvider } from '@arietta-studio/appwrite-sdk';
import * as SplashScreen from 'expo-splash-screen';

const App = () => {
  const appWriteConfig = {
    endpoint: process.env.APPWRITE_ENDPOINT ?? 'https://cloud.appwrite.io/v1',
    platform: process.env.APPWRITE_PLATFORM ?? 'com.arietta.studio',
    projectId: process.env.APPWRITE_PROJECT_ID ?? 'appWrite-project',
    storageId: process.env.APPWRITE_STORAGE_ID ?? 'appWrite-storage',
    databaseId: process.env.APPWRITE_DATABASE_ID ?? 'appWrite-database',
    userCollectionId: process.env.APPWRITE_USER_COLLECTION_ID ?? 'users',
  };

  useEffect(() => {
    // Stop the Splash Screen from being hidden.
    const showSplashScreen = async () => {
      await SplashScreen.preventAutoHideAsync();
    };
    void showSplashScreen();
  }, []);

  return (
    <AppWriteProvider config={appWriteConfig}>
      <SafeAreaProvider>
        <NavigationContainer
          theme={{
            dark: true,
          }}
        >
          <MainRootStack />
        </NavigationContainer>
      </SafeAreaProvider>
    </AppWriteProvider>
  );
};

export default App;

Use in application

import { useAppWrite } from '@arietta-studio/appwrite-sdk';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import * as SplashScreen from 'expo-splash-screen';
import { type FC, useEffect } from 'react';

import Onboarding from '../pages/Onboarding';
import Profile from '../pages/Profile';
import HomeTabNavigator from './HomeTabNavigator';
import { ScreenNames } from './ScreenNames';

export type MainRootStackParams = {
  // Onboarding
  [ScreenNames.Onboarding]: undefined;

  // Home
  [ScreenNames.MainHome]: undefined;
  [ScreenNames.Profile]: undefined;
};
export const MainStack = createNativeStackNavigator<MainRootStackParams>();

export const MainRootStack: FC = () => {
  const { isAuthenticated, isAuthenticationLoading } = useAppWrite();

  useEffect(() => {
    // Once our data is ready, hide the Splash Screen
    const hideSplashScreen = async () => {
      await SplashScreen.hideAsync();
    };

    if (!isAuthenticationLoading) {
      void hideSplashScreen();
    }
  }, [isAuthenticationLoading]);

  return (
    <MainStack.Navigator initialRouteName={ScreenNames.MainHome}>
      {isAuthenticated ? (
        <MainStack.Group>
          <MainStack.Screen
            name={ScreenNames.MainHome}
            component={HomeTabNavigator}
            options={{ headerShown: false }}
          />
          <MainStack.Screen
            name={ScreenNames.Profile}
            component={Profile}
            options={{ headerShown: false }}
          />
        </MainStack.Group>
      ) : (
        <MainStack.Group>
          <MainStack.Screen
            name={ScreenNames.Onboarding}
            component={Onboarding}
            options={{ headerShown: false }}
          />
        </MainStack.Group>
      )}
    </MainStack.Navigator>
  );
};

Hook gives you these functions and variables

type AppWriteContextType = {
  signUp: (email: string, password: string, username: string) => Promise<Models.Document>;
  signIn: (email: string, password: string) => Promise<Models.Session>;
  signOut: () => Promise<void>;
  userRefresh: () => Promise<void>;
  updateUser: (newUser: Models.Document) => Promise<void>;
  isAuthenticated: boolean;
  user: Models.Document | undefined;
  isAuthenticationLoading: boolean;
  isUserDataRefreshing: boolean;
};

🤝 Contributing

Contributions of all types are more than welcome, if you are interested in contributing code, feel free to check out our GitHub Issues to get stuck in to show us what you’re made of.