Getting started with PocketBase for a React Native Project

PocketBase is an open-source backend solution that provides a simple and efficient way to manage your application's data. It comes with a built-in database, authentication, file storage, and real-time subscriptions. This guide will walk you through the steps to configure PocketBase for a React Native project.

Prerequisites

Before you begin, ensure you have the following:

1. Node.js installed on your machine.
2. React Native development environment set up.
3. PocketBase installed or accessible (you can download it from the official PocketBase GitHub repository).

Step 1: Set Up PocketBase

Download PocketBase:

• Visit the PocketBase GitHub releases page and download the appropriate version for your operating system.

Run PocketBase:

• Extract the downloaded file and run the PocketBase executable:

./pocketbase serve

This will start the PocketBase server on `http://127.0.0.1:8090`.

Create an Admin Account:

• Open your browser and navigate to `http://127.0.0.1:8090/_/`.
• Follow the prompts to create an admin account.

Set Up Collections:

• Use the PocketBase admin dashboard to create collections (tables) for your app.
• Define fields and configure permissions as needed.

Step 2: Install Required Dependencies in Your React Native Project

Create a React Native Project (if you haven’t already):

npx create-expo-app@latest MyPocketBaseApp
cd MyPocketBaseApp

Install PocketBase JS SDK:

• Install the PocketBase JavaScript SDK to interact with your PocketBase backend:

npm install pocketbase

Install Additional Dependencies (optional):

• If you need to handle network requests or manage state, consider installing libraries like axios or react-query.

Step 3: Configure PocketBase in Your React Native App

Create a PocketBase Client:

• Create a utility file to initialize the PocketBase client. For example, create a file named pocketbase.js:

import PocketBase from 'pocketbase';

const pb = new PocketBase('http://127.0.0.1:8090'); // Replace with your PocketBase URL

export default pb;

Use PocketBase in Your Components:

• Import the PocketBase client and use it to interact with your backend. For example, to fetch records from a collection:

import React, { useEffect, useState } from 'react';
import { View, Text } from 'react-native';
import pb from './pocketbase';

const MyComponent = () => {
  const [records, setRecords] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const result = await pb.collection('your_collection_name').getFullList();
        setRecords(result);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };

    fetchData();
  }, []);

  return (
    <View>
      {records.map((record) => (
        <Text key={record.id}>{record.fieldName}</Text>
      ))}
    </View>
  );
};

export default MyComponent;

Step 4: Handle Authentication

PocketBase provides built-in authentication. Here’s how to integrate it into your React Native app:

User Sign-Up:

const signUp = async (email, password) => {
  try {
    const user = await pb.collection('users').create({
      email,
      password,
      passwordConfirm: password,
    });
    console.log('User created:', user);
  } catch (error) {
    console.error('Sign-up error:', error);
  }
};

User Login:

const login = async (email, password) => {
  try {
    const authData = await pb.collection('users').authWithPassword(email, password);
    console.log('Logged in:', authData);
  } catch (error) {
    console.error('Login error:', error);
  }
};

Check Authentication Status:

const isAuthenticated = pb.authStore.isValid;

Logout:

const logout = () => {
  pb.authStore.clear();
  console.log('Logged out');
};

Step 5: Handle Real-Time Updates

PocketBase supports real-time subscriptions. To listen for changes in a collection:

useEffect(() => {
  const unsubscribe = pb.collection('your_collection_name').subscribe('*', (e) => {
    console.log('Real-time update:', e.record);
    // Update your state or UI accordingly
  });

  return () => {
    unsubscribe();
  };
}, []);

Step 6: Deploy PocketBase

For production, deploy PocketBase to a cloud server or use a service like Docker. Update the PocketBase URL in your React Native app to point to the deployed instance.

Troubleshooting

1. CORS Issues:
   • Ensure your PocketBase server is configured to allow requests from your React Native app.
   • Update the PocketBase settings.json file to include your app’s domain.
2. Network Errors:
   • Use a tool like ngrok to expose your local PocketBase server to the internet during development.
3. Authentication Problems:
   • Double-check your collection permissions in the PocketBase admin dashboard.

Conclusion

You’ve successfully configured PocketBase for your React Native project! With PocketBase, you can easily manage your app’s backend, including data storage, authentication, and real-time updates. For more advanced features, refer to the PocketBase documentation.

Happy coding! 🚀