-
Notifications
You must be signed in to change notification settings - Fork 150
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1307 from appwrite/feat-react-native-platform
feat: react native platform
- Loading branch information
Showing
9 changed files
with
520 additions
and
310 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -19,7 +19,7 @@ | |
| "e2e:ui": "playwright test tests/e2e --ui" | ||
| }, | ||
| "dependencies": { | ||
| "@appwrite.io/console": "npm:[email protected]", | ||
| "@appwrite.io/console": "1.0.0", | ||
| "@appwrite.io/pink": "0.25.0", | ||
| "@appwrite.io/pink-icons": "0.25.0", | ||
| "@popperjs/core": "^2.11.8", | ||
|
|
||
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
47 changes: 47 additions & 0 deletions
47
src/routes/(console)/project-[project]/overview/platforms/createReactNative.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| <script lang="ts"> | ||
| import { Wizard } from '$lib/layout'; | ||
| import { invalidate } from '$app/navigation'; | ||
| import { wizard } from '$lib/stores/wizard'; | ||
| import { createPlatform } from './wizard/store'; | ||
| import type { WizardStepsType } from '$lib/layout/wizard.svelte'; | ||
| import Step1 from './wizard/react-native/step1.svelte'; | ||
| import Step2 from './wizard/react-native/step2.svelte'; | ||
| import Step3 from './wizard/react-native/step3.svelte'; | ||
| import Step4 from './wizard/step4.svelte'; | ||
| import { Dependencies } from '$lib/constants'; | ||
| async function onFinish() { | ||
| await Promise.all([invalidate(Dependencies.PROJECT), invalidate(Dependencies.PLATFORMS)]); | ||
| createPlatform.reset(); | ||
| wizard.hide(); | ||
| } | ||
| const stepsComponents: WizardStepsType = new Map(); | ||
| stepsComponents.set(1, { | ||
| label: 'Settings', | ||
| component: Step1 | ||
| }); | ||
| stepsComponents.set(2, { | ||
| label: 'Install', | ||
| component: Step2, | ||
| optional: true | ||
| }); | ||
| stepsComponents.set(3, { | ||
| label: 'Import', | ||
| component: Step3, | ||
| optional: true | ||
| }); | ||
| stepsComponents.set(4, { | ||
| label: 'Build', | ||
| component: Step4, | ||
| optional: true | ||
| }); | ||
| </script> | ||
|
|
||
| <Wizard | ||
| title="Add a React Native platform" | ||
| steps={stepsComponents} | ||
| on:finish={onFinish} | ||
| on:exit={onFinish} | ||
| finalAction="Go to dashboard" /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
106 changes: 106 additions & 0 deletions
106
src/routes/(console)/project-[project]/overview/platforms/wizard/react-native/step1.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,106 @@ | ||
| <script lang="ts"> | ||
| import { page } from '$app/stores'; | ||
| import { Pill } from '$lib/elements'; | ||
| import { FormList, InputText } from '$lib/elements/forms'; | ||
| import { WizardStep } from '$lib/layout'; | ||
| import { sdk } from '$lib/stores/sdk'; | ||
| import { createPlatform } from '../store'; | ||
| import { Submit, trackEvent } from '$lib/actions/analytics'; | ||
| import { PlatformType } from '@appwrite.io/console'; | ||
| import { isValueOfStringEnum } from '$lib/helpers/types'; | ||
| let platform: PlatformType = isValueOfStringEnum(PlatformType, $createPlatform.type) | ||
| ? $createPlatform.type | ||
| : PlatformType.Reactnativeandroid; | ||
| const projectId = $page.params.project; | ||
| const placeholder: Partial< | ||
| Record< | ||
| PlatformType, | ||
| { | ||
| name: string; | ||
| hostname: string; | ||
| tooltip: string; | ||
| } | ||
| > | ||
| > = { | ||
| [PlatformType.Reactnativeandroid]: { | ||
| name: 'My Android App', | ||
| hostname: 'com.company.appname', | ||
| tooltip: | ||
| 'Your package name is generally the applicationId in your app-level build.gradle file.' | ||
| }, | ||
| [PlatformType.Reactnativeios]: { | ||
| name: 'My iOS App', | ||
| hostname: 'com.company.appname', | ||
| tooltip: | ||
| "You can find your Bundle Identifier in the General tab for your app's primary target in Xcode." | ||
| } | ||
| }; | ||
| const hostname: Partial<Record<PlatformType, string>> = { | ||
| [PlatformType.Reactnativeandroid]: 'Package Name', | ||
| [PlatformType.Reactnativeios]: 'Bundle ID' | ||
| }; | ||
| async function beforeSubmit() { | ||
| if ($createPlatform.$id) { | ||
| await sdk.forConsole.projects.deletePlatform(projectId, $createPlatform.$id); | ||
| } | ||
| const response = await sdk.forConsole.projects.createPlatform( | ||
| projectId, | ||
| platform, | ||
| $createPlatform.name, | ||
| $createPlatform.key | ||
| ); | ||
| trackEvent(Submit.PlatformCreate, { | ||
| type: platform | ||
| }); | ||
| $createPlatform.$id = response.$id; | ||
| $createPlatform.type = platform; | ||
| } | ||
| $: registee = { | ||
| [PlatformType.Reactnativeandroid]: 'Package name', | ||
| [PlatformType.Reactnativeios]: 'Bundle ID' | ||
| }[platform]; | ||
| </script> | ||
|
|
||
| <WizardStep {beforeSubmit}> | ||
| <svelte:fragment slot="title">{registee} registration</svelte:fragment> | ||
| <svelte:fragment slot="subtitle"> | ||
| <div class="u-flex u-gap-16 u-margin-block-start-8 u-flex-wrap"> | ||
| <Pill | ||
| button | ||
| on:click={() => (platform = PlatformType.Reactnativeandroid)} | ||
| selected={platform === PlatformType.Reactnativeandroid}> | ||
| Android | ||
| </Pill> | ||
| <Pill | ||
| button | ||
| on:click={() => (platform = PlatformType.Reactnativeios)} | ||
| selected={platform === PlatformType.Reactnativeios}> | ||
| iOS | ||
| </Pill> | ||
| </div> | ||
| </svelte:fragment> | ||
|
|
||
| <FormList isCommonSection> | ||
| <InputText | ||
| id="name" | ||
| label="Name" | ||
| placeholder={placeholder[platform].name} | ||
| required | ||
| bind:value={$createPlatform.name} /> | ||
| <InputText | ||
| id="key" | ||
| label={hostname[platform]} | ||
| placeholder={placeholder[platform].hostname} | ||
| tooltip={placeholder[platform].tooltip} | ||
| required | ||
| bind:value={$createPlatform.key} /> | ||
| </FormList> | ||
| </WizardStep> |
13 changes: 13 additions & 0 deletions
13
src/routes/(console)/project-[project]/overview/platforms/wizard/react-native/step2.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| <script lang="ts"> | ||
| import { Code } from '$lib/components'; | ||
| import { WizardStep } from '$lib/layout'; | ||
| const example = `npx expo install react-native-appwrite react-native-url-polyfill`; | ||
| </script> | ||
|
|
||
| <WizardStep> | ||
| <svelte:fragment slot="title">Install</svelte:fragment> | ||
|
|
||
| <p>Install the Appwrite SDK for React Native and required dependencies.</p> | ||
| <Code label="Bash" language="sh" code={example} withCopy /> | ||
| </WizardStep> |
54 changes: 54 additions & 0 deletions
54
src/routes/(console)/project-[project]/overview/platforms/wizard/react-native/step3.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| <script lang="ts"> | ||
| import { Alert, Code } from '$lib/components'; | ||
| import { WizardStep } from '$lib/layout'; | ||
| import { isSelfHosted } from '$lib/system'; | ||
| import { sdk } from '$lib/stores/sdk'; | ||
| import { createPlatform } from '../store'; | ||
| import Id from '$lib/components/id.svelte'; | ||
| const { endpoint, project } = sdk.forProject.client.config; | ||
| const code = `import { Client, Account, ID } from 'react-native-appwrite'; | ||
| const client = new Client(); | ||
| const client | ||
| .setEndpoint('${endpoint}') | ||
| .setProject('${project}') | ||
| .setPlatform('${$createPlatform.key}');`; | ||
| let showAlert = true; | ||
| </script> | ||
|
|
||
| <WizardStep> | ||
| <svelte:fragment slot="title">Initialize</svelte:fragment> | ||
|
|
||
| <h2 class="heading-level-7">Initialize your SDK</h2> | ||
| <p data-private> | ||
| Initialize your SDK by pointing the client to your Appwrite project using your <Id | ||
| value={project}>Project ID</Id> | ||
| </p> | ||
| <div class="u-margin-block-start-16"> | ||
| <Code | ||
| label="React Native" | ||
| labelIcon="code" | ||
| language="js" | ||
| {code} | ||
| withCopy | ||
| withLineNumbers | ||
| noMargin /> | ||
| </div> | ||
| <p class="common-section"> | ||
| Before sending any API calls to your new Appwrite project, make sure your device or emulator | ||
| has network access to your Appwrite project's hostname or IP address. | ||
| </p> | ||
| {#if showAlert && isSelfHosted} | ||
| <div class="common-section"> | ||
| <Alert type="info" on:dismiss={() => (showAlert = false)}> | ||
| <svelte:fragment slot="title">For self-hosted solutions</svelte:fragment> | ||
| When connecting to a locally hosted Appwrite project from an emulator or a mobile device, | ||
| you should use the private IP of the device running your Appwrite project as the hostname | ||
| of the endpoint instead of localhost. You can also use a service like ngrok to proxy | ||
| the Appwrite server. | ||
| </Alert> | ||
| </div> | ||
| {/if} | ||
| </WizardStep> |