To install @arietta-studio/appwrite-sdk react-native-url-polyfill, run the following command:
$ bun add @arietta-studio/appwrite-sdk react-native-url-polyfill
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.
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.
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.
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 ..
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;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>
);
};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;
};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.
