Skip to main content
Follow this quickstart to add Base44 to your React Native (Expo) project. You’ll create a Base44 backend, define entities, and integrate the SDK into your mobile app.
The CLI requires Node.js 20.19.0 or higher.

​
Setup

1

Install the Base44 CLI

Install the Base44 CLI globally:
npm install -g base44
2

Create a Base44 backend

Navigate to your React Native project directory, then run:
base44 create
If you’re not already logged in, the command will prompt you to authenticate.Select Create a basic project when prompted. This creates the backend files within your React Native project directory. Then follow the prompts to configure your project.When you create a project, Base44 skills are included automatically, providing your AI agent with instructions and context for Base44 tasks.
3

Define entities

Create entity schemas to define your data structures. Entity files must be placed in the base44/entities/ directory.For example, create base44/entities/task.jsonc:
{
  "name": "Task",
  "type": "object",
  "properties": {
    "title": {
      "type": "string"
    },
    "completed": {
      "type": "boolean",
      "default": false
    }
  },
  "required": ["title"]
}
4

Push entities to Base44

Push your entity schemas to Base44:
base44 entities push
This command synchronizes your local entity definitions with your Base44 backend, making them available for use in your application. See entities push for more information.
5

Install the Base44 SDK

Install the Base44 JavaScript SDK:
npm install @base44/sdk
6

Create a Base44 client

Create a Base44 SDK client in your project. The appId can be found in your base44/.app.jsonc file.For example, create api/base44Client.js:
import { createClient } from '@base44/sdk';

export const base44 = createClient({
  appId: 'your-app-id-from-app.jsonc'
});
7

Create a task list screen

Create a simple screen component to list and add tasks. For example, create screens/TaskListScreen.js:
import { useState, useEffect } from 'react';
import { View, Text, FlatList, Button, TextInput, StyleSheet, ActivityIndicator } from 'react-native';
import { base44 } from '../api/base44Client';

export default function TaskListScreen() {
  const [tasks, setTasks] = useState([]);
  const [newTitle, setNewTitle] = useState('');
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    loadTasks();
  }, []);

  const loadTasks = async () => {
    setIsLoading(true);
    try {
      // Get records
      const taskList = await base44.entities.Task.list();
      setTasks(taskList);
    } catch (error) {
      console.error('Error loading tasks:', error);
    }
    setIsLoading(false);
  };

  const addTask = async () => {
    if (!newTitle.trim()) return;

    setIsLoading(true);
    try {
      // Create a record
      const newTask = await base44.entities.Task.create({
        title: newTitle,
        completed: false
      });
      setTasks([...tasks, newTask]);
      setNewTitle('');
    } catch (error) {
      console.error('Error creating task:', error);
    }
    setIsLoading(false);
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Tasks</Text>

  <FlatList
    data={tasks}
    keyExtractor={(item) => item.id}
    renderItem={({ item }) => <Text style={styles.task}>{item.title}</Text>}
    ListEmptyComponent={
      isLoading ? <ActivityIndicator /> : <Text style={styles.empty}>No tasks yet</Text>
    }
  />

      <View style={styles.inputRow}>
        <TextInput
          style={styles.input}
          value={newTitle}
          onChangeText={setNewTitle}
          placeholder="New task"
          editable={!isLoading}
        />
        <Button title="Add" onPress={addTask} disabled={isLoading || !newTitle.trim()} />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
  },
  task: {
    fontSize: 16,
    padding: 12,
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
  },
  empty: {
    textAlign: 'center',
    color: '#999',
    marginTop: 20,
  },
  inputRow: {
    flexDirection: 'row',
    gap: 10,
    marginTop: 20,
  },
  input: {
    flex: 1,
    borderWidth: 1,
    borderColor: '#ccc',
    padding: 10,
    borderRadius: 5,
  },
});
Use the exact entity name from your schema when calling the SDK, including capitalization. By convention, entity names begin with a capital letter. For example, if your schema has "name": "Task", you access it as base44.entities.Task.list().
8

Use the screen in your app

Update your App.js to import and render the TaskListScreen component:
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, SafeAreaView } from 'react-native';
import TaskListScreen from './screens/TaskListScreen';

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <TaskListScreen />
      <StatusBar style="auto" />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
});
9

Run your app locally

Start your Expo development server to test your integration. From your project root, run:
npx expo start
Follow the Expo CLI instructions to open your app on a simulator, physical device, or web browser.Your React Native app will connect to your Base44 backend through the SDK client, allowing you to work with your deployed entities in real-time.

​
Next steps

Now that your Base44 backend is integrated with your project, you can:

​
See also