Setting Up Appwrite for React Native/Expo

If you're building a React Native app with Expo and need a backend solution, Appwrite is a fantastic choice. It’s an open-source backend server that handles authentication, databases, storage, and more, making it super easy to integrate into your app. Pair that with NativeWind, a utility-first CSS framework for React Native, and you’ve got a sleek, modern app in no time. In this guide, I’ll walk you through the steps to set up Appwrite and NativeWind in your Expo project. Let’s dive in!

What You’ll Need

Before we start, make sure you have the following:

Node.js installed (v20 or higher).
Expo CLI installed globally (npm install -g expo-cli).
A basic understanding of React Native and Expo.

Step 1: Create a New Expo Project

First, let’s create a new Expo project. Open your terminal and run:

npx create-expo-app@latest AppwriteNativeWind

When prompted, choose the "blank" template. This will give you a clean, minimal React Native project to work with. Once the project is created, navigate into the project folder:

cd AppwriteNativeWind

Step 2: Install the Appwrite SDK

Next, we need to install the Appwrite SDK. This will allow us to interact with Appwrite’s backend services. Run the following command:

npm install appwrite

Step 3: Set Up NativeWind for Styling

NativeWind is a great way to style your React Native app using Tailwind CSS-like syntax. It’s super intuitive and makes styling a breeze. Let’s set it up.

First, install NativeWind and Tailwind CSS:

npm install nativewind
npm install --dev tailwindcss

Now, create a tailwind.config.js file in the root of your project. This file will tell Tailwind which files to scan for class names:

// tailwind.config.js
module.exports = {
  content: [
    './App.{js,jsx,ts,tsx}',
    './components/**/*.{js,jsx,ts,tsx}',
    './screens/**/*.{js,jsx,ts,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Next, create a global.css file in the root of your project. This file will include the Tailwind directives:

/* global.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Finally, update your babel.config.js to include NativeWind:

// babel.config.js
module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ['nativewind/babel'],
  };
};

That’s it! NativeWind is now set up and ready to use.

Step 4: Initialize Appwrite

Now, let’s set up Appwrite in our project. Create a new file called Appwrite.js in the root of your project. This file will handle the initialization of the Appwrite client and account services.

// Appwrite.js
import { Client, Account } from 'appwrite';

const client = new Client()
  .setEndpoint('https://cloud.appwrite.io/v1') // Your Appwrite Endpoint
  .setProject('your-project-id'); // Your project ID

const account = new Account(client);

export { client, account };

Make sure to replace 'your-project-id' with your actual Appwrite project ID. You can find this in your Appwrite dashboard.

Step 5: Create a Simple Login Screen

Let’s create a basic login screen to test our setup. Create a new file called LoginScreen.js in the screens directory:

// screens/LoginScreen.js
import React, { useState } from 'react';
import { View, Text, TextInput, Button, Alert } from 'react-native';
import { account } from '../Appwrite';

const LoginScreen = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleLogin = async () => {
    try {
      await account.createEmailSession(email, password);
      Alert.alert('Success', 'Logged in successfully!');
    } catch (error) {
      Alert.alert('Error', error.message);
    }
  };

  return (
    <View className="flex-1 justify-center items-center p-4 bg-gray-100">
      <Text className="text-2xl font-bold mb-4">Login</Text>
      <TextInput
        className="w-full p-2 border border-gray-300 rounded mb-4"
        placeholder="Email"
        value={email}
        onChangeText={setEmail}
        keyboardType="email-address"
        autoCapitalize="none"
      />
      <TextInput
        className="w-full p-2 border border-gray-300 rounded mb-4"
        placeholder="Password"
        value={password}
        onChangeText={setPassword}
        secureTextEntry
      />
      <Button title="Login" onPress={handleLogin} />
    </View>
  );
};

export default LoginScreen;

This screen includes two input fields for email and password, and a login button. When the button is pressed, it uses the Appwrite SDK to create a session and log the user in.

Step 6: Update App.js

Finally, let’s update the App.js file to include our LoginScreen:

// App.js
import React from 'react';
import { SafeAreaView, StatusBar } from 'react-native';
import LoginScreen from './screens/LoginScreen';

const App = () => {
  return (
    <SafeAreaView className="flex-1">
      <StatusBar barStyle="dark-content" />
      <LoginScreen />
    </SafeAreaView>
  );
};

export default App;

Step 7: Run the Project

You’re all set! Now, let’s run the project to see it in action. In your terminal, run:

expo start

Scan the QR code with the Expo Go app on your phone, and you should see the login screen. Try logging in with a user you’ve created in your Appwrite project. If everything is set up correctly, you’ll see a success message.

Wrapping Up

And that’s it! You’ve successfully set up Appwrite for your React Native/Expo project and integrated NativeWind for styling. This setup gives you a solid foundation to build on. From here, you can add more features like user registration, database interactions, or even file storage using Appwrite’s APIs.

If you run into any issues, don’t hesitate to check out the Appwrite documentation or the NativeWind GitHub repo for more details.

Happy coding! 🚀