React Native & Expo

// AppSchema.ts
import { column, Schema, Table } from '@powersync/react-native';

const lists = new Table({
  created_at: column.text,
  name: column.text,
  owner_id: column.text
});

const todos = new Table(
  {
    list_id: column.text,
    created_at: column.text,
    completed_at: column.text,
    description: column.text,
    created_by: column.text,
    completed_by: column.text,
    completed: column.integer
  },
  { indexes: { list: ['list_id'] } }
);

export const AppSchema = new Schema({
  todos,
  lists
});

// For types
export type Database = (typeof AppSchema)['types'];
export type TodoRecord = Database['todos'];
// OR:
// export type Todo = RowType<typeof todos>;
export type ListRecord = Database['lists'];

import { PowerSyncDatabase } from '@powersync/react-native';
import { Connector } from './Connector';
import { AppSchema } from './Schema';

/**
 * Instantiate the local PowerSync database
 * This uses react-native-quick-sqlite to open a SQLite database file
 */
export const db = new PowerSyncDatabase({
  // The schema you defined in the previous step
  schema: AppSchema,
  database: {
    // Filename for the SQLite database — it's important to only instantiate one instance per file.
    dbFilename: 'powersync.db'
    // Optional. Directory where the database file is located.'
    // dbLocation: 'path/to/directory'
  }
});

export const setupPowerSync = async () => {
  // Uses the backend connector that will be created in the next section
  const connector = new Connector();
  db.connect(connector);
};

// lib/Connector.js
import { UpdateType } from '@powersync/react-native';

/// Postgres Response codes that we cannot recover from by retrying.
const FATAL_RESPONSE_CODES = [
  // Class 22 — Data Exception
  // Examples include data type mismatch.
  new RegExp('^22...$'),
  // Class 23 — Integrity Constraint Violation.
  // Examples include NOT NULL, FOREIGN KEY and UNIQUE violations.
  new RegExp('^23...$'),
  // INSUFFICIENT PRIVILEGE - typically a row-level security violation
  new RegExp('^42501$')
];

export class Connector {
    constructor() {
        // Setup a connection to your server for uploads
        this.serverConnectionClient = TODO;
    }

    async fetchCredentials() {
    // Implement fetchCredentials to obtain a JWT from your authentication service.
    // See https://docs.powersync.com/installation/authentication-setup
    // If you're using Supabase or Firebase, you can re-use the JWT from those clients, see
    // - https://docs.powersync.com/installation/authentication-setup/supabase-auth
    // - https://docs.powersync.com/installation/authentication-setup/firebase-auth
        return {
            endpoint: '[Your PowerSync instance URL or self-hosted endpoint]',
            // Use a development token (see Authentication Setup https://docs.powersync.com/installation/authentication-setup/development-tokens) to get up and running quickly
            token: 'An authentication token'
        };
    }

    async uploadData(database) {
    // Implement uploadData to send local changes to your backend service.
    // You can omit this method if you only want to sync data from the database to the client

    // See example implementation here:https://docs.powersync.com/client-sdk-references/react-native-and-expo#3-integrate-with-your-backend
}

// TodoItemWidget.jsx
import { Text } from 'react-native';

export const TodoItemWidget = ({id}) => {
    const [todoItem, setTodoItem] = React.useState([]);
    const [error, setError] = React.useState([]);

    React.useEffect(() => {
        // .get returns the first item of the result. Throws an exception if no result is found.
        PowerSync.get('SELECT * from todos WHERE id = ?', [id])
          .then(setTodoItem)
          .catch(ex => setError(ex.message))
    }, []);

    return <Text>{error || todoItem.description}</Text>
}

// ListsWidget.jsx
import { FlatList, Text} from 'react-native';

export const ListsWidget = () => {
    const [lists, setLists] = React.useState([]);

    React.useEffect(() => {
        PowerSync.getAll('SELECT * from lists').then(setLists)
    }, []);

    return (<FlatList
        data={lists.map(list => ({key: list.id, ...list}))}
        renderItem={({item}) => <Text>{item.name}</Text>}
    />)
}

// ListsWidget.jsx
import { FlatList, Text } from 'react-native';

export const ListsWidget = () => {
    const [lists, setLists] = React.useState([]);

    React.useEffect(() => {
        const abortController = new AbortController();

        // Option 1: Use with AsyncGenerator
        (async () => {
          for await(const update of PowerSync.watch('SELECT * from lists', [], {signal: abortController.signal})) {
              setLists(update)
          }
        })();

        // Option 2: Use a callback (available since version 1.3.3 of the SDK)
        PowerSync.watch('SELECT * from lists', [], { onResult: (result) => setLists(result) }, { signal: abortController.signal });

        return () => {
            abortController.abort();
        }
    }, []);

    return (<FlatList
        data={lists.map(list => ({ key: list.id, ...list }))}
        renderItem={({ item }) => <Text>{item.name}</Text>}
    />)
}

// ListsWidget.jsx
import { Alert, Button, FlatList, Text, View } from 'react-native';

export const ListsWidget = () => {
  // Populate lists with one of methods listed above
  const [lists, setLists] = React.useState([]);

  return (
    <View>
      <FlatList
        data={lists.map(list => ({key: list.id, ...list}))}
        renderItem={({item}) => (<View>
          <Text>{item.name}</Text>
           <Button
              title="Delete"
              onPress={async () => {
                  try {
                    await PowerSync.execute(`DELETE FROM lists WHERE id = ?`, [item.id])
                    // Watched queries should automatically reload after mutation
                  } catch (ex) {
                    Alert('Error', ex.message)
                  }
                }}
            />
        </View>)}
      />
      <Button
        title="Create List"
        color="#841584"
        onPress={async () => {
            try {
              await PowerSync.execute('INSERT INTO lists (id, created_at, name, owner_id) VALUES (uuid(), datetime(), ?, ?) RETURNING *', [
                'A list name',
                "[The user's uuid]"
              ])
              // Watched queries should automatically reload after mutation
            } catch (ex) {
              Alert.alert('Error', ex.message)
            }
          }}
      />
    </View>
    )
}

// For WebSocket
powerSync.connect(connector)

// For HTTP Stream
powerSync.connect(connector, { connectionMethod: SyncStreamConnectionMethod.HTTP });

// NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin();
// NetworkingModule.setCustomClientBuilder(
//     new NetworkingModule.CustomClientBuilder() {
//       @Override
//       public void apply(OkHttpClient.Builder builder) {
//         builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
//       }
//     });
// client.addPlugin(networkFlipperPlugin);

# Enable network inspector
EX_DEV_CLIENT_NETWORK_INSPECTOR=false

// if (BuildConfig.DEBUG) {
//   ReactNativeFlipper.initializeFlipper(this, reactNativeHost.reactInstanceManager)
// }

pre_install do |installer|
    installer.pod_targets.each do |pod|
      next unless pod.name.eql?('react-native-quick-sqlite')

      def pod.build_type
        Pod::BuildType.static_library
      end
    end
end