sdk-for-react-native Documentation

Technical Documentation: appwrite/sdk-for-react-native

ℹ️ Provenance: Hybrid Fusion: appwrite/sdk-for-react-native + appwrite/docs · CodeWiki Reference · Recency: Active (< 180 days)

1. Project Overview & Quickstart (appwrite/sdk-for-react-native) Copy Chapter

Appwrite React Native SDK

This SDK is compatible with Appwrite server version 1.9.x. For older versions, please check previous releases.

Appwrite is an open-source backend as a service server that abstracts and simplifies complex and repetitive development tasks behind a very simple to use REST API. Appwrite aims to help you develop your apps faster and in a more secure way. Use the React Native SDK to integrate your app with the Appwrite server to easily start interacting with all of Appwrite backend APIs and tools. For full API documentation and tutorials go to https://appwrite.io/docs

Installation Copy Chapter

To install

npx expo install react-native-appwrite react-native-url-polyfill

Getting Started Copy Chapter

Add your Platform Copy Section

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. You can skip optional steps.

iOS steps

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. For Expo projects you can set or find it on app.json file at your project's root directory.

Android steps

Add your app's name and package name, Your package name is generally the applicationId in your app-level build.gradle file. For Expo projects you can set or find it on app.json file at your project's root directory.

Setup Copy Chapter

On index.js add import for react-native-url-polyfill

import 'react-native-url-polyfill/auto'

If you are building for iOS, don't forget to install pods
cd ios && pod install && cd ..

Init your SDK Copy Section

Initialize your SDK with your Appwrite server API endpoint and project ID which can be found in your project settings page.

import { Client } from 'react-native-appwrite';
// Init your React Native SDK
const client = new Client();

client
    .setEndpoint('http://localhost/v1') // Your Appwrite Endpoint
    .setProject('455x34dfkj') // Your project ID
    .setPlatform('com.example.myappwriteapp') // Your application ID or bundle ID.
;

Make Your First Request Copy Section

Once your SDK object is set, access any of the Appwrite services and choose any request to send. Full documentation for any service method you would like to use can be found in your SDK documentation or in the API References section.

const account = new Account(client);

// Register User
account.create(ID.unique(), '[email protected]', 'password', 'Jane Doe')
    .then(function (response) {
        console.log(response);
    }, function (error) {
        console.log(error);
    });

Full Example Copy Section

import { Client, Account } from 'react-native-appwrite';
// Init your React Native SDK
const client = new Client();

client
    .setEndpoint('http://localhost/v1') // Your Appwrite Endpoint
    .setProject('455x34dfkj')
    .setPlatform('com.example.myappwriteapp') // YOUR application ID
;

const account = new Account(client);

// Register User
account.create(ID.unique(), '[email protected]', 'password', 'Jane Doe')
    .then(function (response) {
        console.log(response);
    }, function (error) {
        console.log(error);
    });

Type Safety with Models Copy Section

The Appwrite React Native SDK provides type safety when working with database documents through generic methods. Methods like listDocuments, getDocument, and others accept a generic type parameter that allows you to specify your custom model type for full type safety.

TypeScript:

interface Book {
    name: string;
    author: string;
    releaseYear?: string;
    category?: string;
    genre?: string[];
    isCheckedOut: boolean;
}

const databases = new Databases(client);

try {
    const documents = await databases.listDocuments(
        'your-database-id',
        'your-collection-id'
    );
    
    documents.documents.forEach(book => {
        console.log(`Book: ${book.name} by ${book.author}`); // Now you have full type safety
    });
} catch (error) {
    console.error('Appwrite error:', error);
}

JavaScript (with JSDoc for type hints):

/**
 * @typedef {Object} Book
 * @property {string} name
 * @property {string} author
 * @property {string} [releaseYear]
 * @property {string} [category]
 * @property {string[]} [genre]
 * @property {boolean} isCheckedOut
 */

const databases = new Databases(client);

try {
    /** @type {Models.DocumentList} */
    const documents = await databases.listDocuments(
        'your-database-id',
        'your-collection-id'
    );
    
    documents.documents.forEach(book => {
        console.log(`Book: ${book.name} by ${book.author}`); // Type hints available in IDE
    });
} catch (error) {
    console.error('Appwrite error:', error);
}

Tip: You can use the appwrite types command to automatically generate TypeScript interfaces based on your Appwrite database schema. Learn more about type generation.

Error Handling Copy Section

The Appwrite React Native SDK raises an AppwriteException object with message, code and response properties. You can handle any errors by catching the exception and present the message to the user or handle it yourself based on the provided error information. Below is an example.

try {
    const user = await account.create(ID.unique(), "[email protected]", "password", "Walter O'Brien");
    console.log('User created:', user);
} catch (error) {
    console.error('Appwrite error:', error.message);
}

Learn more Copy Section

You can use the following resources to learn more and get help

• 🚀 Getting Started Tutorial
• 📜 Appwrite Docs
• 💬 Discord Community
• 🚂 Appwrite React Native Playground

Contribution Copy Chapter

This library is auto-generated by Appwrite custom SDK Generator. To learn more about how you can help us improve this SDK, please check the contribution guide before sending a pull-request.

License Copy Chapter

Please see the BSD-3-Clause license file for more information.

2. Official Technical Reference & Guides (appwrite/docs) Copy Chapter

The Appwrite Docs 📝

The official Appwrite Documentation source code.

🚀 Contributing Copy Chapter

1. Clone the repository
2. Update, add, or fix current docs
3. Once content is ready, raise a PR

Content Guidelines Copy Section

• Use proper title hierarchy (h1-h6) and valid HTML
• All titles must follow the Chicago style of headline capitalization
• External links (not https://appwrite.io) should be opened in a new tab (target="_blank")
• External links should have an HTML attribute of rel="noopener"
• All filenames should be dash-based and nested in such a way that makes sense
• All images should be in PNG format and 2600x1400px. Do not include any sensitive data in images. All screenshots of the Appwrite dashboard should support light and dark mode.
• When creating new content or adjusting docs hierarchy, please consult the Appwrite team by opening a Github Issue in this repository

Code Examples

Use the following HTML structure to present code examples:

<code class="prism language-ruby" data-prism>#ruby code here...</code>

As of writing this, these are the supported languages for code examples:

• Markup
• CSS
• CLike
• JavaScript
• Bash
• C#
• Dart
• Go
• GraphQL
• HTTP
• Java
• JSON
• Kotlin
• Markup-templating
• PHP
• Powershell
• Python
• Ruby
• Swift
• TypeScript
• YAML

For showing examples in multiple languages use the list structure:

<li>
        <h3>Node.js</h3>
        
            <code class="prism language-javascript" data-prism>// node code here...</code>
        
    </li>
    <li>
        <h3>PHP</h3>

        
            <code class="prism language-php" data-prism>//php code here..</code>
        
    </li>

Don't forget to use proper indenting for all code examples. The indenting of the code examples should be independent from the indentation of the surrounding HTML tags.

Notes

Use the following HTML structure to add important notes inside your docs:

<h2>Important Message</h2>
  Message content here.

Images

Use the following HTML structure to add images. You can also add support for dark and light mode versions (recommended!). If no dark mode is provided, light mode will be the fallback. Don't forget to provide alternative text for user accessibility and a description for each image.

<?php
$image = new View(__DIR__.'/../general/image.phtml');
    echo $image
        ->setParam('srcLight', '/images-ee/docs/functions-light.png')
        ->setParam('srcDark', '/images-ee/docs/functions-dark.png')
        ->setParam('alt', 'Function settings page.')
        ->setParam('description', 'Function settings page.')
        ->render();
?>

🤘 Support Copy Chapter

At any point, if you are stuck, feel free to hop on our Discord server to ask questions or seek mentorship!

Follow Us Copy Chapter

Join our growing community around the world! See our official Blog. Follow us on Twitter, Facebook Page, Facebook Group , DEV Community or join our live Discord server for more help, ideas, and discussions.

--- METRICS ---

• Files Extracted: 2
• Estimated Token Budget: ~2540 tokens
• Recency Window: Active (< 180 days)
• Canonical Reference: https://codewiki.google/github.com/appwrite/sdk-for-react-native