React Native (Expo) Quickstart

npm install -g base44@latest

base44 create

{
  "name": "Task",
  "type": "object",
  "properties": {
    "title": {
      "type": "string"
    },
    "completed": {
      "type": "boolean",
      "default": false
    }
  },
  "required": ["title"]
}

base44 entities push

npm install @base44/sdk

import { createClient } from '@base44/sdk';

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

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,
  },
});

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',
  },
});

npx expo start