Merge pull request #858 from appwrite/react-native

[Do not merge, waiting for pink icon release] Add react-native quick start

src/lib/components/FooterNav.svelte

@@ -15,14 +15,18 @@
     const links: Record<string, { label: string; href: string; target?: string; rel?: string }[]> =
         {
             'Quick starts': [
-                { label: 'Flutter', href: '/docs/quick-starts/flutter' },
+                { label: 'Web', href: '/docs/quick-starts/web' },
                 { label: 'Next.js', href: '/docs/quick-starts/nextjs' },
+                { label: 'React', href: '/docs/quick-starts/react' },
                 { label: 'Vue.js', href: '/docs/quick-starts/vue' },
+                { label: 'Nuxt', href: '/docs/quick-starts/nuxt' },
                 { label: 'SvelteKit', href: '/docs/quick-starts/sveltekit' },
+                { label: 'Refine', href: '/docs/quick-starts/refine' },
+                { label: 'Angular', href: '/docs/quick-starts/angular' },
+                { label: 'React Native', href: '/docs/quick-starts/react-native' },
+                { label: 'Flutter', href: '/docs/quick-starts/flutter' },
                 { label: 'Apple', href: '/docs/quick-starts/apple' },
                 { label: 'Android', href: '/docs/quick-starts/android' },
-                { label: 'Nuxt', href: '/docs/quick-starts/nuxt' },
-                { label: 'Angular', href: '/docs/quick-starts/angular' },
                 { label: 'Qwik', href: '/docs/quick-starts/qwik' },
                 { label: 'Astro', href: '/docs/quick-starts/astro' }
             ],

src/routes/docs/quick-starts/+page.svelte

@@ -72,6 +72,12 @@
         {
             title: 'Mobile and native',
             quickStarts: [
+                {
+                    title: 'React Native',
+                    icon: 'icon-react-native',
+                    image: '/images/blog/placeholder.png',
+                    href: 'react-native'
+                },
                 {
                     title: 'Flutter',
                     icon: 'icon-flutter',

src/routes/docs/quick-starts/react-native/+page.markdoc

@@ -0,0 +1,225 @@
+---
+layout: article
+title: Start with React Native
+description: Build React Native apps on iOS, Android, and other native platforms with Appwrite and learn how to use our powerful backend to add authentication, user management, file storage, and more.
+difficulty: beginner
+readtime: 10
+back: /docs/quick-starts
+---
+
+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.
+
+{% info title="React for web" %}
+Looking to start with React for web?
+Follow the [React quickstart](/docs/quick-starts/react) and [React tutorial](/docs/tutorials/react/step-1) flows.
+{% /info %}
+
+{% section #step-1 step=1 title="Create React Native project" %}
+Create a React Native project using [npx](https://www.npmjs.com/package/npx).
+
+```sh
+npx create-expo-app my-app
+cd my-app
+```
+{% /section %}
+
+{% section #step-2 step=2 title="Create project" %}
+Head to the [Appwrite Console](https://cloud.appwrite.io/console).
+
+{% only_dark %}
+![Create project screen](/images/docs/quick-starts/dark/create-project.png)
+{% /only_dark %}
+
+{% only_light %}
+![Create project screen](/images/docs/quick-starts/create-project.png)
+{% /only_light %}
+
+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**.
+
+{% tabs %}
+{% tabsitem #ios title="iOS" %}
+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.
+
+{% only_dark %}
+![Add a platform](/images/docs/quick-starts/dark/add-platform.png)
+{% /only_dark %}
+
+{% only_light %}
+![Add a platform](/images/docs/quick-starts/add-platform.png)
+{% /only_light %}
+{% /tabsitem %}
+
+{% tabsitem #android title="Android" %}
+Add your app's **name** and **package name**, Your package name is generally the `applicationId` in your app-level [build.gradle](https://github.com/appwrite/playground-for-flutter/blob/master/android/app/build.gradle#L41) file.
+
+{% arrow_link
+   href="https://developer.android.com/build/configure-app-module" %}
+Learn more about Android app module
+{% /arrow_link %}
+{% /tabsitem %}
+{% /tabs %}
+
+You can skip optional steps.
+{% /section %}
+
+{% section #step-3 step=3 title="Install Appwrite" %}
+Install the Appwrite SDK for React Native and required dependencies.
+
+```sh
+npx expo install react-native-appwrite react-native-url-polyfill
+```
+{% /section %}
+
+{% section #step-4 step=4 title="Implement Appwrite" %}
+Find your project's ID in the **Settings** page.
+
+{% only_dark %}
+![Project settings screen](/images/docs/quick-starts/dark/project-id.png)
+{% /only_dark %}
+
+{% only_light %}
+![Project settings screen](/images/docs/quick-starts/project-id.png)
+{% /only_light %}
+
+Open `App.js` and add the following code to it, replace `<YOUR_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.
+
+```ts
+import { StatusBar } from 'expo-status-bar';
+import { StyleSheet, Text, View, TextInput, TouchableOpacity } from 'react-native';
+import { Client, Account, ID } from 'react-native-appwrite';
+import React, { useState } from 'react';
+
+let client;
+let account;
+
+client = new Client();
+client
+  .setEndpoint('https://cloud.appwrite.io/v1')
+  .setProject('sisyphus')
+  .setPlatform('com.example.my-app');
+
+account = new Account(client);
+export default function App() {
+  const [loggedInUser, setLoggedInUser] = useState(null);
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [name, setName] = useState('');
+
+  async function login(email, password) {
+    await account.createEmailSession(email, password);
+    setLoggedInUser(await account.get());
+  }
+
+  async function register(email, password, name) {
+    await account.create(ID.unique(), email, password, name);
+    await login(email, password);
+    setLoggedInUser(await account.get());
+  }
+  return (
+    // ... Implement your UI here
+  );
+}
+
+const styles = StyleSheet.create({
+    // ... define some tyles
+});
+
+```
+{% /section %}
+
+{% section #step-5 step=5 title="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.
+
+```ts
+<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('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.
+
+```ts
+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',
+  },
+});
+```
+{% /section %}
+
+{% section #step-6 step=6 title="All set" %}
+Run your project with `npx expo start`.
+
+{% arrow_link
+   href="https://github.com/appwrite/playground-for-react-native" %}
+Explore the React Native playground
+{% /arrow_link %}
+{% /section %}

src/routes/docs/tutorials/android/step-1/+page.markdoc

@@ -17,7 +17,7 @@ This tutorial will introduce the following concepts:
 2. Authentication 
 3. Databases and collections
 4. Queries and pagination
-5. Storage
+
 
 # Prerequisites {% #prerequisites %}
 1. Basic knowledge of Kotlin and Android development.

src/routes/docs/tutorials/react-native/+layout.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { globToTutorial } from '$lib/utils/tutorials.js';
+	import { setContext } from 'svelte';
+
+	export let data;
+	const tutorials = globToTutorial(data);
+	setContext('tutorials', tutorials);
+</script>
+
+<slot />

src/routes/docs/tutorials/react-native/+layout.ts

@@ -0,0 +1,11 @@
+import type { LayoutLoad } from './$types';
+
+export const load: LayoutLoad = ({ url }) => {
+	const tutorials = import.meta.glob('./**/*.markdoc', {
+		eager: true
+	});
+	return {
+		tutorials,
+		pathname: url.pathname
+	};
+};

src/routes/docs/tutorials/react-native/+page.ts

@@ -0,0 +1,6 @@
+import { redirect } from '@sveltejs/kit';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async () => {
+	redirect(303, '/docs/tutorials/react-native/step-1');
+};

src/routes/docs/tutorials/react-native/step-1/+page.markdoc

@@ -0,0 +1,28 @@
+---
+layout: tutorial
+title: Build an ideas tracker with React Native
+description: Learn to build a React Native app with no backend code using an Appwrite backend.
+step: 1
+difficulty: beginner
+readtime: 10
+category: Mobile and native
+framework: React Native
+---
+
+**Idea tracker**: an app to track all the side project ideas that you'll start, but probably never finish.
+In this tutorial, you will build Idea tracker with Appwrite and React Native.
+
+# Concepts {% #concepts %}
+
+This tutorial will introduce the following concepts:
+
+1. Setting up your first project
+2. Authentication 
+3. Databases and collections
+4. Queries and pagination
+
+# Prerequisites {% #prerequisites %}
+
+1. Android, iOS simulators, or a physical device to run the app
+2. Have [Node.js](https://nodejs.org/en) and [NPM](https://www.npmjs.com/) installed on your computer
+3. Basic knowledge of React Native and Expo

src/routes/docs/tutorials/react-native/step-2/+page.markdoc

@@ -0,0 +1,43 @@
+---
+layout: tutorial
+title: Create app
+description: Create a React Native app project and integrate with Appwrite.
+step: 2
+---
+
+# Create React Native project {% #create-react-project %}
+
+Create a React Native app with the `npm create` command.
+
+```sh
+npx create-expo-app ideas-tracker
+cd ideas-tracker
+```
+
+# Add dependencies {% #add-dependencies %}
+
+Install the React Native Appwrite SDK.
+
+```sh
+npx expo install react-native-appwrite react-native-url-polyfill
+```
+
+Then, install React Navigation to help implement simple navigation logic.
+
+```sh
+npm install @react-navigation/native @react-navigation/native-stack
+```
+
+Install peer dependencies needed for React Navigation.
+
+```sh
+npx expo install react-native-screens react-native-safe-area-context
+```
+
+For iOS with bare React Native project, make sure you have CocoaPods installed. Then install the pods to complete the installation:
+
+```
+cd ios
+pod install
+cd ..
+```