From 5183dc44675da7ed67bf6cc7a6a05b6614ae1950 Mon Sep 17 00:00:00 2001 From: Damodar Lohani Date: Fri, 8 Mar 2024 04:29:38 +0000 Subject: [PATCH 1/7] react native quick start --- .../quick-starts/react-native/+page.markdoc | 132 ++++++++++++++++++ 1 file changed, 132 insertions(+) create mode 100644 src/routes/docs/quick-starts/react-native/+page.markdoc diff --git a/src/routes/docs/quick-starts/react-native/+page.markdoc b/src/routes/docs/quick-starts/react-native/+page.markdoc new file mode 100644 index 0000000000..603f5be666 --- /dev/null +++ b/src/routes/docs/quick-starts/react-native/+page.markdoc @@ -0,0 +1,132 @@ +--- +layout: article +title: Start with React Native +description: Build React Native apps 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. + +{% section #step-1 step=1 title="Create React Native project" %} +Create a React Native project. + +```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. + + +{% /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, don't forget 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 `` with your project ID and `` 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('') + .setPlatform(''); + 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(), 'example@email.com', '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`. +{% /section %} From e43e1e7eab00ae06a92e59fde9afa5f26dd8c075 Mon Sep 17 00:00:00 2001 From: Damodar Lohani Date: Fri, 8 Mar 2024 04:43:51 +0000 Subject: [PATCH 2/7] add react native in the list --- src/routes/docs/quick-starts/+page.svelte | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/routes/docs/quick-starts/+page.svelte b/src/routes/docs/quick-starts/+page.svelte index 820c82b8b7..45b8fd145b 100644 --- a/src/routes/docs/quick-starts/+page.svelte +++ b/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' + }, ] }, { From a919bb8cb0423a9816f699fe053de2554cd3c20e Mon Sep 17 00:00:00 2001 From: Damodar Lohani Date: Fri, 8 Mar 2024 04:45:45 +0000 Subject: [PATCH 3/7] add to technologies --- src/lib/components/Technologies.svelte | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/lib/components/Technologies.svelte b/src/lib/components/Technologies.svelte index 6873e74284..fd761bfe50 100644 --- a/src/lib/components/Technologies.svelte +++ b/src/lib/components/Technologies.svelte @@ -18,6 +18,11 @@ href: '/docs/quick-starts/react', image: `/images/platforms/${$themeInUse}/react.svg` }, + { + name: 'React Native', + href: '/docs/quick-starts/react-native', + image: `/images/platforms/${$themeInUse}/react.svg` + }, { name: 'Svelte', href: '/docs/quick-starts/sveltekit', From 273c011cc7b2e9428c5aa1ef7da84a3ea32f9850 Mon Sep 17 00:00:00 2001 From: Damodar Lohani Date: Fri, 8 Mar 2024 04:51:20 +0000 Subject: [PATCH 4/7] react native --- src/lib/components/Technologies.svelte | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/lib/components/Technologies.svelte b/src/lib/components/Technologies.svelte index fd761bfe50..74d39eb7ed 100644 --- a/src/lib/components/Technologies.svelte +++ b/src/lib/components/Technologies.svelte @@ -18,11 +18,6 @@ href: '/docs/quick-starts/react', image: `/images/platforms/${$themeInUse}/react.svg` }, - { - name: 'React Native', - href: '/docs/quick-starts/react-native', - image: `/images/platforms/${$themeInUse}/react.svg` - }, { name: 'Svelte', href: '/docs/quick-starts/sveltekit', @@ -58,6 +53,11 @@ href: '/docs/quick-starts/android', image: `/images/platforms/${$themeInUse}/android.svg` }, + { + name: 'React Native', + href: '/docs/quick-starts/react-native', + image: `/images/platforms/${$themeInUse}/react.svg` + }, ] as Array<{ name: string; From cbda7d22f3773776ed5ddd406c3623ba260ed74e Mon Sep 17 00:00:00 2001 From: "Vincent (Wen Yu) Ge" Date: Fri, 8 Mar 2024 09:40:42 +0000 Subject: [PATCH 5/7] Add references to SDK and react native in more places in docs --- .../quick-starts/react-native/+page.markdoc | 25 +++++++++++++------ .../docs/quick-starts/react/+page.markdoc | 6 +++++ src/routes/docs/sdks/+page.markdoc | 6 +++++ 3 files changed, 29 insertions(+), 8 deletions(-) diff --git a/src/routes/docs/quick-starts/react-native/+page.markdoc b/src/routes/docs/quick-starts/react-native/+page.markdoc index 603f5be666..9366f2d453 100644 --- a/src/routes/docs/quick-starts/react-native/+page.markdoc +++ b/src/routes/docs/quick-starts/react-native/+page.markdoc @@ -1,7 +1,7 @@ --- layout: article title: Start with React Native -description: Build React Native apps with Appwrite and learn how to use our powerful backend to add authentication, user management, file storage, and more. +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 @@ -9,8 +9,13 @@ 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. +Create a React Native project using [npx](https://www.npmjs.com/package/npx). ```sh npx react-native@latest init my_app && cd my_app @@ -48,7 +53,9 @@ Add your app **name** and **Bundle ID**. You can find your **Bundle Identifier** {% 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 %} @@ -64,7 +71,7 @@ Install the Appwrite SDK for React Native and required dependencies. npm install react-native-appwrite react-native-fs react-native-url-polyfill --save ``` -On iOS, don't forget to install cocoapod dependencies. +On iOS, you will need to install cocoapod dependencies. ```sh cd iOS && pod install && cd .. @@ -107,15 +114,14 @@ function App(): React.JSX.Element { .setEndpoint('https://cloud.appwrite.io/v1') .setProject('') .setPlatform(''); + 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. +With `Client` and `Account` service initialized, you can now make your first requests to Appwrite. ```js let createUser = async () => { @@ -124,9 +130,12 @@ let createUser = async () => { } ``` - {% /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 %} diff --git a/src/routes/docs/quick-starts/react/+page.markdoc b/src/routes/docs/quick-starts/react/+page.markdoc index ce32a9976a..8a5b897678 100644 --- a/src/routes/docs/quick-starts/react/+page.markdoc +++ b/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). diff --git a/src/routes/docs/sdks/+page.markdoc b/src/routes/docs/sdks/+page.markdoc index 8eb5ef5874..a71fb78cab 100644 --- a/src/routes/docs/sdks/+page.markdoc +++ b/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.0.0` +* [appwrite/sdk-for-react-native](https://github.com/appwrite/sdk-for-react-native) +* `beta` {% /table %} # Server {% #server %} From f5083d703045cec2b3793511b84e22fd5391d2cf Mon Sep 17 00:00:00 2001 From: "Vincent (Wen Yu) Ge" Date: Fri, 8 Mar 2024 10:57:18 +0000 Subject: [PATCH 6/7] Remove native from homepage --- src/lib/components/Technologies.svelte | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/lib/components/Technologies.svelte b/src/lib/components/Technologies.svelte index 74d39eb7ed..6873e74284 100644 --- a/src/lib/components/Technologies.svelte +++ b/src/lib/components/Technologies.svelte @@ -53,11 +53,6 @@ href: '/docs/quick-starts/android', image: `/images/platforms/${$themeInUse}/android.svg` }, - { - name: 'React Native', - href: '/docs/quick-starts/react-native', - image: `/images/platforms/${$themeInUse}/react.svg` - }, ] as Array<{ name: string; From c8d2679dc5d35999f94757578474c00cb0a7c1c1 Mon Sep 17 00:00:00 2001 From: "Vincent (Wen Yu) Ge" Date: Fri, 8 Mar 2024 12:09:36 +0100 Subject: [PATCH 7/7] Update +page.markdoc --- src/routes/docs/sdks/+page.markdoc | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/routes/docs/sdks/+page.markdoc b/src/routes/docs/sdks/+page.markdoc index a71fb78cab..eb83b176a2 100644 --- a/src/routes/docs/sdks/+page.markdoc +++ b/src/routes/docs/sdks/+page.markdoc @@ -44,7 +44,7 @@ Client libraries for integrating with Appwrite to build client-based application --- * {% 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.0.0` +* React Native SDK `0.1.0` * [appwrite/sdk-for-react-native](https://github.com/appwrite/sdk-for-react-native) * `beta` {% /table %} @@ -374,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). \ No newline at end of file +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).