Merge pull request #2027 from appwrite/add-react-native-quickstart

Add react native quick-start + light and dark screenshots in all sites quickstarts

Author: adityaoberai

src/routes/docs/products/sites/develop/+page.markdoc

@@ -173,6 +173,15 @@ Your site's dependencies should be managed by the package manager of each langua
 
 ---
 
+- {% icon icon="react-native" size="m" /%}
+- **React Native**
+- `npm`
+- `npm install`
+- `npm run build`
+- `./dist`
+
+---
+
 - {% icon icon="js" size="m" /%}
 - **Other JavaScript**
 - `npm`

src/routes/docs/products/sites/frameworks/+page.markdoc

@@ -68,6 +68,12 @@ This means you can focus on building your application while Appwrite handles the
 
 ---
 
+- {% icon icon="react-native" size="m" /%}
+- [**React Native**](/docs/products/sites/quick-start/react-native)
+- `Static`
+
+---
+
 - {% icon icon="js" size="m" /%}
 - [**Other JavaScript**](/docs/products/sites/quick-start/vanilla)
 - `Static`

src/routes/docs/products/sites/quick-start/+page.markdoc

@@ -19,8 +19,8 @@ Before deploying your web app with Git, create a new Site attached to your GitHu
 ![Create site wizard](/images/docs/sites/create-site-wizard.png)
 {% /only_light %}
 
-1. In the Appwrite Console's sidebar, click **Sites**.
-2. Click on the **Create site** button.
+1. In the Appwrite Console's sidebar, click **Sites**.
+2. Click on the **Create site** button.
 3. After clicking on **Connect Git repository**, select your repository.
 4. After connecting to GitHub, (optionally) add a name and site ID.
 5. Verify that the correct framework is selected.
@@ -61,6 +61,9 @@ Learn how to quickly setup a web app developed using any of the following framew
 {% cards_item href="/docs/products/sites/quick-start/flutter" title="Flutter" icon="icon-flutter" %}
 {% /cards_item %}
 
+{% cards_item href="/docs/products/sites/quick-start/react-native" title="React Native" icon="icon-react-native" %}
+{% /cards_item %}
+
 {% cards_item href="/docs/products/sites/quick-start/vanilla" title="Vanilla JS" icon="icon-js" %}
 {% /cards_item %}
 

src/routes/docs/products/sites/quick-start/angular/+page.markdoc

@@ -21,7 +21,12 @@ Push this project to a [GitHub repo](https://github.com/new).
 {% section #step-2 step=2 title="Create Appwrite project" %}
 Head to the [Appwrite Console](https://cloud.appwrite.io).
 
+{% only_dark %}
 ![Create Appwrite project](/images/docs/quick-starts/dark/create-project.png)
+{% /only_dark %}
+{% only_light %}
+![Create Appwrite project](/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.
 {% /section %}

src/routes/docs/products/sites/quick-start/astro/+page.markdoc

@@ -20,7 +20,12 @@ Push this project to a [GitHub repo](https://github.com/new).
 {% section #step-2 step=2 title="Create Appwrite project" %}
 Head to the [Appwrite Console](https://cloud.appwrite.io).
 
+{% only_dark %}
 ![Create Appwrite project](/images/docs/quick-starts/dark/create-project.png)
+{% /only_dark %}
+{% only_light %}
+![Create Appwrite project](/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.
 {% /section %}

src/routes/docs/products/sites/quick-start/flutter/+page.markdoc

@@ -26,7 +26,12 @@ Push this project to a [GitHub repo](https://github.com/new).
 {% section #step-2 step=2 title="Create Appwrite project" %}
 Head to the [Appwrite Console](https://cloud.appwrite.io).
 
+{% only_dark %}
 ![Create Appwrite project](/images/docs/quick-starts/dark/create-project.png)
+{% /only_dark %}
+{% only_light %}
+![Create Appwrite project](/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.
 {% /section %}

src/routes/docs/products/sites/quick-start/nextjs/+page.markdoc

@@ -20,7 +20,12 @@ Push this project to a [GitHub repo](https://github.com/new).
 {% section #step-2 step=2 title="Create Appwrite project" %}
 Head to the [Appwrite Console](https://cloud.appwrite.io).
 
+{% only_dark %}
 ![Create Appwrite project](/images/docs/quick-starts/dark/create-project.png)
+{% /only_dark %}
+{% only_light %}
+![Create Appwrite project](/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.
 {% /section %}

src/routes/docs/products/sites/quick-start/nuxt/+page.markdoc

@@ -20,7 +20,12 @@ Push this project to a [GitHub repo](https://github.com/new).
 {% section #step-2 step=2 title="Create Appwrite project" %}
 Head to the [Appwrite Console](https://cloud.appwrite.io).
 
+{% only_dark %}
 ![Create Appwrite project](/images/docs/quick-starts/dark/create-project.png)
+{% /only_dark %}
+{% only_light %}
+![Create Appwrite project](/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.
 {% /section %}

src/routes/docs/products/sites/quick-start/react-native/+page.markdoc

@@ -0,0 +1,58 @@
+---
+layout: article
+title: Deploy a React Native app to Appwrite Sites
+description: Learn how to setup and deploy React Native apps on Appwrite Sites.
+---
+
+{% section #step-1 step=1 title="Create React Native app" %}
+
+First, you must either create a React Native app or setup the [React Native starter template](https://github.com/appwrite/templates-for-sites).
+
+Open your terminal, and run the following command.
+
+```bash
+npx create-expo-app my-app
+```
+
+Once the app is created, navigate to the project directory, open the `package.json` file and add the following line under `scripts`:
+
+```json
+"build": "expo export --platform web"
+```
+
+Push this project to a [GitHub repo](https://github.com/new).
+{% /section %}
+
+{% section #step-2 step=2 title="Create Appwrite project" %}
+Head to the [Appwrite Console](https://cloud.appwrite.io).
+
+{% only_dark %}
+![Create Appwrite project](/images/docs/quick-starts/dark/create-project.png)
+{% /only_dark %}
+{% only_light %}
+![Create Appwrite project](/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.
+{% /section %}
+
+{% section #step-3 step=3 title="Create site" %}
+Head to the **Sites** page in your Appwrite project, click on the **Create site** button, and select **Connect a repository**.
+
+Connect your GitHub account and select the repository you intend to deploy.
+
+1. Select the **production branch** and **root directory** from your repo.
+2. Verify that the **correct framework** is selected. In case an incorrect framework is visible, pick **React Native** from the drop-down list. 
+3. Confirm the **install command**, **build command**, and **output directory** in the build settings. The default build settings for React Native are:
+    - **Install command:** `npm install`
+    - **Build command:** `npm run build`
+    - **Output directory:** `./dist`
+4. Add any **environment variables** required by the site.
+
+Click on the **Deploy** button.
+{% /section %}
+
+{% section #step-4 step=4 title="Visit site" %}
+After successful deployment, click on the **Visit site** button.
+
+{% /section %}

src/routes/docs/products/sites/quick-start/react/+page.markdoc

@@ -20,7 +20,12 @@ Push this project to a [GitHub repo](https://github.com/new).
 {% section #step-2 step=2 title="Create Appwrite project" %}
 Head to the [Appwrite Console](https://cloud.appwrite.io).
 
+{% only_dark %}
 ![Create Appwrite project](/images/docs/quick-starts/dark/create-project.png)
+{% /only_dark %}
+{% only_light %}
+![Create Appwrite project](/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.
 {% /section %}