Merge pull request #767 from appwrite/feat-getting-started-react-native

Feat react native quick start

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

@@ -89,7 +89,13 @@
                     icon: 'icon-android',
                     image: '/images/blog/placeholder.png',
                     href: 'android'
-                }
+                },
+                {
+                    title: 'React Native',
+                    icon: 'icon-react',
+                    image: '/images/blog/placeholder.png',
+                    href: 'react-native'
+                },
             ]
         },
         {

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

@@ -0,0 +1,141 @@
+---
+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.
+
+{% 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 react-native@latest init 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
+npm install react-native-appwrite react-native-fs react-native-url-polyfill --save
+```
+
+On iOS, you will need to install cocoapod dependencies.
+
+```sh
+cd iOS && pod install && cd ..
+```
+
+{% /section %}
+
+{% section #step-4 step=4 title="Import 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 `index.js` and import `react-native-url-polyfill`.
+
+```js
+import 'react-native-url-polyfill/auto'
+```
+
+Open `App.tsx` 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.
+
+```js
+import { Client, Account, ID } from 'react-native-appwrite';
+
+let client: Client;
+let account: Account;
+
+function App(): React.JSX.Element {
+  const isDarkMode = useColorScheme() === 'dark';
+
+  let setupAppwrite = async () => {
+    client = new Client();
+    client
+        .setEndpoint('https://cloud.appwrite.io/v1')
+        .setProject('<YOUR_PROJECT_ID>')
+        .setPlatform('<YOUR_PLATFORM>');
+
+    account = new Account(client);
+  }
+}
+```
+{% /section %}
+{% section #step-5 step=5 title="Make first request" %}
+With `Client` and `Account` service initialized, you can now make your first requests to Appwrite.
+
+```js
+let createUser = async () => {
+    let user = await account.create(ID.unique(), '[email protected]', 'strongPassword', 'Example user');
+    console.log(user);
+}
+```
+
+{% /section %}
+
+{% section #step-6 step=6 title="All set" %}
+Run your project with `npm run ios` or `npm run android`.
+
+{% arrow_link href="https://github.com/appwrite/playground-for-react-native" %}
+React Native playground
+{% /arrow_link %}
+{% /section %}

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

@@ -8,6 +8,12 @@ back: /docs/quick-starts
 ---
 
 Learn how to setup your first React project powered by Appwrite.
+
+{% info title="React Native" %}
+Looking to start with React Native? 
+Follow the [React Native quickstart](/docs/quick-starts/react-native) to build apps for iOS, Android, and other native platforms.
+{% /info %}
+
 {% section #step-1 step=1 title="Create project" %}
 Head to the [Appwrite Console](https://cloud.appwrite.io/console).
 

src/routes/docs/sdks/+page.markdoc

@@ -41,6 +41,12 @@ Client libraries for integrating with Appwrite to build client-based application
 * Android SDK `4.0.0`
 * [appwrite/sdk-for-android](https://github.com/appwrite/sdk-for-android)
 * 
+---
+* {% only_dark %}{% icon_image src="/images/platforms/dark/react.svg" alt="React logo" size="m" /%}{% /only_dark %}
+{% only_light %}{% icon_image src="/images/platforms/react.svg" alt="React logo" size="m" /%}{% /only_light %}
+* React Native SDK `0.1.0`
+* [appwrite/sdk-for-react-native](https://github.com/appwrite/sdk-for-react-native)
+* `beta`
 {% /table %}
 
 # Server {% #server %}
@@ -368,4 +374,4 @@ Learn more about [storage input file classes](/docs/products/storage/upload-down
 # Community {% #community %}
 If you have created your own framework or any other technology specific integration and would like us to list it here please [contact us](/contact-us).
 
-If you would like to help us expand Appwrite's list of SDKs, you can contribute to Appwrite's [SDK Generator](https://github.com/appwrite/sdk-generator) project on GitHub and read our [contribution guide](https://github.com/appwrite/sdk-generator/blob/master/CONTRIBUTING.md).
+If you would like to help us expand Appwrite's list of SDKs, you can contribute to Appwrite's [SDK Generator](https://github.com/appwrite/sdk-generator) project on GitHub and read our [contribution guide](https://github.com/appwrite/sdk-generator/blob/master/CONTRIBUTING.md).