React Native (Expo) Quickstart

Add a Base44 backend to your React Native Expo project

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@latest
   
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:

• Use the SDK to add more functionality to your mobile app.
• Add entities, backend functions, and agents. If you’re working in TypeScript, generate types to get autocomplete and type safety.
• Test locally by running base44 dev for the backend alongside your app’s dev server. See Local development for setup instructions.

See also

• CLI Command Reference: All available CLI commands
• Project Structure: How project files are organized
• JavaScript SDK Documentation: Connect your app to the backend
• Base44 Skills: Teach AI assistants to work with Base44