Proven Recipes for your React Native apps

   npx ignite-cli@latest new PowerSyncIgnite --remove-demo --workflow=cng --yes

npx expo install \
  @journeyapps/powersync-sdk-react-native \
  @journeyapps/react-native-quick-sqlite 

npx expo install \
  react-native-fetch-api \
  react-native-polyfill-globals \
  react-native-url-polyfill \
  text-encoding \
  web-streams-polyfill@^3.2.1 \
  base-64 \
  @azure/core-asynciterator-polyfill \
  react-native-get-random-values

yarn add -D @babel/plugin-transform-async-generator-functions

npx expo install @supabase/supabase-js

npx expo install @react-native-async-storage/async-storage

    import "react-native-polyfill-globals/auto"
    import "@azure/core-asynciterator-polyfill"

    /** @type {import('@babel/core').TransformOptions['plugins']} */
    const plugins = [
            //... other plugins
            // success-line
            '@babel/plugin-transform-async-generator-functions',  // <-- Add this
            /** NOTE: This must be last in the plugins @see https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation/#babel-plugin */
            "react-native-reanimated/plugin",
        ]
    

{
  "expo": {
    "plugins": [
      // ...
      [
        "expo-build-properties",
        {
          "ios": {
            "newArchEnabled": false,
            "flipper": false
          },
          "android": {
            "newArchEnabled": false,
            // success-line
            "networkInspector": false
          }
        }
      ]
      //...
    ]
    //...
  }
}

// `app/config/config.base.ts`:

// update the interface to include the new properties
export interface ConfigBaseProps {
  // Existing config properties

  // success-line
  supabaseUrl: string
  // success-line
  supabaseAnonKey: string
}

// Add the new properties to the config object
const BaseConfig: ConfigBaseProps = {
  // Existing config values
  // success-line
  supabaseUrl: '<<YOUR_SUPABASE_URL>>',
  // success-line
  supabaseAnonKey: '<<YOUR_SUPABASE_ANON_KEY>>',
}

// app/services/database/supabase.ts
import AsyncStorage from '@react-native-async-storage/async-storage'
import { createClient } from "@supabase/supabase-js"
import { Config } from '../../config'

export const supabase = createClient(Config.supabaseUrl, Config.supabaseAnonKey, {
  auth: {
    persistSession: true, storage: AsyncStorage,
  },
})

// app/services/database/use-auth.tsx
import { User } from "@supabase/supabase-js"
import { supabase } from "app/services/database/supabase"
import React, { createContext, PropsWithChildren, useCallback, useContext, useMemo, useState } from "react"

type AuthContextType = {
  signIn: (email: string, password: string) => void
  signUp: (email: string, password: string) => void
  signOut: () => Promise<void>
  signedIn: boolean
  loading: boolean
  error: string
  user: User | null
}

// We initialize the context with null to ensure that it is not used outside of the provider
const AuthContext = createContext<AuthContextType | null>(null)

/**
 * AuthProvider manages the authentication state and provides the necessary methods to sign in, sign up and sign out.
 */
export const AuthProvider = ({ children }: PropsWithChildren<any>) => {
  const [signedIn, setSignedIn] = useState(false)
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState("")
  const [user, setUser] = useState<User | null>(null)


  // Sign in with provided email and password
  const signIn = useCallback(async (email: string, password: string) => {
    setLoading(true)
    setError("")
    setUser(null)
    
    try {
      // get the session and user from supabase
      const { 
        data: {session, user}, 
        error 
      } = await supabase.auth.signInWithPassword({ email, password })
      
      // if we have a session and user, sign them in
      if (session && user) {
        setSignedIn(true)
        setUser(user)
      // otherwise sign them out and set an error
      } else {
        throw new Error(error?.message);
        setSignedIn(false)
        setUser(null)
      }
    } catch (error: any) {
      setError(error?.message ?? "Unknown error")
      setSignedIn(false)
      setUser(null)
    } finally {
      setLoading(false)
    }
  }, [
    setSignedIn, setLoading, setError, setUser, supabase
  ])

  // Create a new account with provided email and password
  const signUp = useCallback(async (email: string, password: string) => {
    setLoading(true)
    setError("")
    setUser(null)
    try {
      const { data, error } = await supabase.auth.signUp({ email, password })
      if (error) {
        setSignedIn(false)
        setError(error.message)
      } else if (data.session) {
        await supabase.auth.setSession(data.session)
        setSignedIn(true)
        setUser(data.user)
      }
    } catch (error: any) {
      setUser(null)
      setSignedIn(false)
      setError(error?.message ?? "Unknown error")
    } finally {
      setLoading(false)
    }
  }, [
    setSignedIn, setLoading, setError, setUser, supabase
  ])

  // Sign out the current user
  const signOut = useCallback(async () => {
    setLoading(true)
    await supabase.auth.signOut()
    setError("")
    setSignedIn(false)
    setLoading(false)
    setUser(null)
  }, [
    setSignedIn, setLoading, setError, setUser, supabase
  ])

  // Always memoize context values as they can cause unnecessary re-renders if they aren't stable!
  const value = useMemo(() => ({
    signIn, signOut, signUp, signedIn, loading, error, user
  }), [
    signIn, signOut, signUp, signedIn, loading, error, user
  ])
  return <AuthContext.Provider value={ value }>{ children }</AuthContext.Provider>
}

export const useAuth = () => {
  const context = useContext(AuthContext)

  // It's a good idea to throw an error if the context is null, as it means the hook is being used outside of the provider
  if (context === null) {
    throw new Error('useAuthContext must be used within a AuthProvider')
  }
  return context
}


// app/app.tsx
// ...other imports
// success-line
import { AuthProvider } from "app/services/database/use-auth"

// ...
function App(props: AppProps) {
  // ...
  return (
    // success-line
    <AuthProvider>
      <SafeAreaProvider>
        {/* ... */ }
      </SafeAreaProvider>
      // success-line
    </AuthProvider>
  )
}



npx ignite-cli generate screen Auth

// app/screens/AuthScreen.tsx
import { AppStackScreenProps } from "app/navigators"
import { Button, Screen, Text, TextField } from "app/components"
import { useAuth } from "app/services/database/use-auth"
import React, { useEffect, useState } from "react"
import { ActivityIndicator, Modal, TextStyle, View, ViewStyle } from "react-native"
import { colors, spacing } from "../theme"

interface AuthScreenProps extends AppStackScreenProps<"Auth"> {}

export const AuthScreen: React.FC<AuthScreenProps> = ({ navigation }) => {
  const { signUp, signIn, loading, error, user } = useAuth()
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")

  const handleSignIn = async () => {
    signIn(email, password)
  }

  const handleSignUp = async () => {
    signUp(email, password)
  }

  useEffect(() => {
    if (user) {
      navigation.navigate("Welcome")
    }
  }, [user])

  return (
    <Screen style={ $container } safeAreaEdges={ ["top"] }>
      <Text preset={ "subheading" }>PowerSync + Supabase</Text>
      <Text preset={ "heading" }>Sign in or Create Account</Text>
      <TextField
        inputWrapperStyle={ $inputWrapper }
        containerStyle={ $inputContainer }
        label={ "Email" }
        value={ email }
        inputMode={ "email" }
        onChangeText={ setEmail }
        keyboardType="email-address"
        autoCapitalize={ "none" }
      />
      <TextField
        containerStyle={ $inputContainer }
        inputWrapperStyle={ $inputWrapper }
        label={ "Password" }
        value={ password }
        onChangeText={ setPassword }
        secureTextEntry
      />

      <View style={ $buttonContainer }>
        <Button
          disabled={ loading }
          text={ "Sign In" }
          onPress={ handleSignIn }
          style={ $button }
          preset={ "reversed" }
        />

        <Button
          disabled={ loading }
          text={ "Register New Account" }
          onPress={ handleSignUp }
          style={ $button }
        />
      </View>
      { error ? <Text style={ $error } text={ error }/> : null }
      <Modal transparent visible={ loading }>
        <View style={ $modalBackground }>
          <ActivityIndicator size="large" color={ colors.palette.primary500 }/>
        </View>
      </Modal>
    </Screen>
  )
}

const $container: ViewStyle = {
  backgroundColor: colors.background,
  flex: 1,
  justifyContent: "center",
  paddingHorizontal: spacing.lg,
}

const $inputContainer: TextStyle = {
  marginTop: spacing.md,
}

const $inputWrapper: TextStyle = {
  backgroundColor: colors.palette.neutral100,
}
const $modalBackground: ViewStyle = {
  alignItems: "center",
  backgroundColor: "#00000040",
  flex: 1,
  flexDirection: "column",
  justifyContent: "space-around",
}

const $error: TextStyle = {
  color: colors.error,
  marginVertical: spacing.md,
  textAlign: "center",
  width: "100%",
  fontSize: 20,
}

const $buttonContainer: ViewStyle = {
  display: "flex",
  flexDirection: "column",
  justifyContent: "space-between",
  marginVertical: spacing.md,
}

const $button: ViewStyle = {
  marginTop: spacing.xs,
}

npx ignite-cli generate component SignOutButton

// app/components/SignOutButton.tsx

import { Button } from "app/components/Button"
import { useAuth } from "app/services/database/use-auth"
import * as React from "react"
import { StyleProp, View, ViewStyle } from "react-native"
import { observer } from "mobx-react-lite"
import { spacing } from "app/theme"

export interface SignOutButtonProps {
  /**
   * An optional style override useful for padding & margin.
   */
  style?: StyleProp<ViewStyle>
}

/**
 * Describe your component here
 */
export const SignOutButton = observer(function SignOutButton(props: SignOutButtonProps) {
  const { style } = props
  const $styles = [$container, style]

  const { signOut } = useAuth()

  const handleSignOut = async () => {
    await signOut()
  }

  return (
    <View style={ $styles }>
      <Button text="Sign Out" onPress={ handleSignOut }/>
    </View>
  )
})

const $container: ViewStyle = {
  padding: spacing.md,
}

// app/screens/WelcomeScreen.tsx
import { NativeStackScreenProps } from "@react-navigation/native-stack"
import { Lists, SignOutButton } from "app/components"
import { DatabaseProvider } from "app/services/database/database"
import { observer } from "mobx-react-lite"
import React, { FC } from "react"
import { ViewStyle } from "react-native"
import { SafeAreaView } from "react-native-safe-area-context"
import { SignedInNavigatorParamList } from "../navigators"
import { colors } from "../theme"

export const WelcomeScreen: FC<WelcomeScreenProps> = observer(function WelcomeScreen() {
  return (
    <DatabaseProvider>
      <SafeAreaView style={ $container }>
        <SignOutButton/>
      </SafeAreaView>
    </DatabaseProvider>
  )
})

const $container: ViewStyle = {
  flex: 1,
  backgroundColor: colors.palette.neutral300,
  display: "flex",
  justifyContent: "flex-start",
  height: "100%",
  flexDirection: "column",
}

// app/navigators/AppNavigator.tsx

//...

const AppStack = observer(function AppStack() {
  // Fetch the user from the auth context
  // success-line
  // success-line
  const { signedIn } = useAuth()
  return (
    <Stack.Navigator
      screenOptions={ { headerShown: false, navigationBarColor: colors.background } }
    >
      {/**
       * by wrapping the Welcome screen in a conditional, we ensure that
       * the user can only access it if they are signed in
       */ }
      // success-line
      { signedIn
        // success-line
        ? <Stack.Screen name="Welcome" component={ Screens.WelcomeScreen }/>
        // success-line
        : null
        // success-line
      }
      <Stack.Screen name="Auth" component={ Screens.AuthScreen }/>
      {/* IGNITE_GENERATOR_ANCHOR_APP_STACK_SCREENS */ }
    </Stack.Navigator>
  )
})

// ...

// app/config/config.base.ts:

// update the interface to include the new properties
export interface ConfigBaseProps {
  // Existing config properties
  supabaseUrl: string
  supabaseAnonKey: string
  // success-line
  powersyncUrl: string
}

// Add the new properties to the config object
const BaseConfig: ConfigBaseProps = {
  // Existing config values
  supabaseUrl: '<<YOUR_SUPABASE_URL>>',
  supabaseAnonKey: '<<YOUR_SUPABASE_ANON_KEY>>',
  // success-line
  powersyncUrl: '<<YOUR_POWER_SYNC_URL>>',
}

// app/services/database/schema.ts
import {
  Column,
  ColumnType,
  Index,
  IndexedColumn,
  Schema,
  Table
} from '@journeyapps/powersync-sdk-react-native'

export const TODO_TABLE = 'todos'
export const LIST_TABLE = 'lists'

export interface ListRecord {
  id: string
  name: string
  created_at: string
  owner_id?: string
}

export interface TodoRecord {
  id: string
  created_at: string
  completed: boolean
  description: string
  completed_at?: string
  created_by: string
  completed_by?: string
  list_id: string
  photo_id?: string
}

export const AppSchema = new Schema([
  new Table({
    name: 'todos',
    columns: [
      new Column({ name: 'list_id', type: ColumnType.TEXT }),
      new Column({ name: 'created_at', type: ColumnType.TEXT }),
      new Column({ name: 'completed_at', type: ColumnType.TEXT }),
      new Column({ name: 'description', type: ColumnType.TEXT }),
      new Column({ name: 'completed', type: ColumnType.INTEGER }),
      new Column({ name: 'created_by', type: ColumnType.TEXT }),
      new Column({ name: 'completed_by', type: ColumnType.TEXT })
    ],
    indexes: [
      new Index({
        name: 'list',
        columns: [new IndexedColumn({ name: 'list_id' })]
      })
    ]
  }),
  new Table({
    name: 'lists',
    columns: [
      new Column({ name: 'created_at', type: ColumnType.TEXT }),
      new Column({ name: 'name', type: ColumnType.TEXT }),
      new Column({ name: 'owner_id', type: ColumnType.TEXT })
    ]
  }),
])


// from @journeyapps/powersync-sdk-common 
export interface PowerSyncBackendConnector {
  /** Allows the PowerSync client to retrieve an authentication token from your backend
   * which is used to authenticate against the PowerSync service.
   *
   * This should always fetch a fresh set of credentials - don't use cached
   * values.
   *
   * Return null if the user is not signed in. Throw an error if credentials
   * cannot be fetched due to a network error or other temporary error.
   *
   * This token is kept for the duration of a sync connection.
   */
  fetchCredentials: () => Promise<PowerSyncCredentials | null>

  /** Upload local changes to the app backend.
   *
   * Use {@link AbstractPowerSyncDatabase.getCrudBatch} to get a batch of changes to upload.
   *
   * Any thrown errors will result in a retry after the configured wait period (default: 5 seconds).
   */
  uploadData: (database: AbstractPowerSyncDatabase) => Promise<void>
}

// app/services/database/supabase.ts
import {
  AbstractPowerSyncDatabase,
  CrudEntry, PowerSyncBackendConnector,
  UpdateType, PowerSyncCredentials
} from "@journeyapps/powersync-sdk-react-native"
import AsyncStorage from '@react-native-async-storage/async-storage'
import { createClient } from "@supabase/supabase-js"
import Config from "../../config"

export const supabase = createClient(Config.supabaseUrl, Config.supabaseAnonKey, {
  auth: {
    persistSession: true, storage: AsyncStorage,
  },
})


// This function fetches the session token from Supabase, it should return null if the user is not signed in, and the session token if they are.
async function fetchCredentials(): Promise<PowerSyncCredentials | null> {
  const { data: { session }, error } = await supabase.auth.getSession()

  if (error) {
    throw new Error(`Could not fetch Supabase credentials: ${ error }`)
  }

  if (!session) {
    return null
  }

  return {
    endpoint: Config.powersyncUrl,
    token: session.access_token ?? "",
    expiresAt: session.expires_at
               ? new Date(session.expires_at * 1000)
               : undefined
  }
}


// Regexes for response codes indicating unrecoverable errors.
const FATAL_RESPONSE_CODES = [
  /^22...$/, // Data Exception
  /^23...$/, // Integrity Constraint Violation
  /^42501$/, // INSUFFICIENT PRIVILEGE
]

// PowerSync will call this function to upload data to the backend
const uploadData: (database: AbstractPowerSyncDatabase) => Promise<void> = async (database) => {
  const transaction = await database.getNextCrudTransaction()

  if (!transaction) {
    return
  }


  let lastOp: CrudEntry | null = null
  try {
    // Note: If transactional consistency is important, use database functions
    // or edge functions to process the entire transaction in a single call.
    for (const op of transaction.crud) {
      lastOp = op
      const table = supabase.from(op.table)
      let result: any = null
      switch (op.op) {
        case UpdateType.PUT:
          // eslint-disable-next-line no-case-declarations
          const record = { ...op.opData, id: op.id }
          result = await table.upsert(record)
          break
        case UpdateType.PATCH:
          result = await table.update(op.opData).eq('id', op.id)
          break
        case UpdateType.DELETE:
          result = await table.delete().eq('id', op.id)
          break
      }

      if (result?.error) {
        throw new Error(`Could not ${ op.op } data to Supabase error: ${ JSON.stringify(result) }`)
      }
    }

    await transaction.complete()
  } catch (ex: any) {
    console.debug(ex)
    if (typeof ex.code === 'string' && FATAL_RESPONSE_CODES.some((regex) => regex.test(ex.code))) {
      /**
       * Instead of blocking the queue with these errors,
       * discard the (rest of the) transaction.
       *
       * Note that these errors typically indicate a bug in the application.
       * If protecting against data loss is important, save the failing records
       * elsewhere instead of discarding, and/or notify the user.
       */
      console.error(`Data upload error - discarding ${ lastOp }`, ex)
      await transaction.complete()
    } else {
      // Error may be retryable - e.g. network error or temporary server error.
      // Throwing an error here causes this call to be retried after a delay.
      throw ex
    }
  }
}

export const supabaseConnector: PowerSyncBackendConnector = {
  fetchCredentials, uploadData,
}

// app/services/database/database.tsx
import { SupabaseClient } from "@supabase/supabase-js"
import { useAuth } from "./use-auth"
import React, { PropsWithChildren, useEffect } from "react"
import {
  AbstractPowerSyncDatabase,
  PowerSyncContext,
  RNQSPowerSyncDatabaseOpenFactory,
} from "@journeyapps/powersync-sdk-react-native"
import { supabase, supabaseConnector } from "./supabase" // Adjust the path as needed
import { AppSchema } from "./schema" // Adjust the path as needed

export class Database {
  // We expose the PowerSync and Supabase instances for easy access elsewhere in the app
  powersync: AbstractPowerSyncDatabase
  supabase: SupabaseClient = supabase

  /**
   * Initialize the Database class with a new PowerSync instance
   */
  constructor() {
    const factory = new RNQSPowerSyncDatabaseOpenFactory({
      schema: AppSchema,
      dbFilename: "sqlite.db",
    })
    this.powersync = factory.getInstance()
  }

  /**
   * Initialize the PowerSync instance and connect it to the Supabase backend.
   * This will call `fetchCredentials` on the Supabase connector to get the session token.
   * So if your database requires authentication, the user will need to be signed in before this is
   * called.
   */
  async init() {
    await this.powersync.init()
    await this.powersync.connect(supabaseConnector)
  }

  async disconnect() {
    await this.powersync.disconnectAndClear()
  }
}

const database = new Database()

// A context to provide our singleton to the rest of the app
const DatabaseContext = React.createContext<Database | null>(null)

export const useDatabase = () => {
  const context: Database | null = React.useContext(DatabaseContext)
  if (!context) {
    throw new Error("useDatabase must be used within a DatabaseProvider")
  }

  return context
}

// Finally, we create a provider component that initializes the database and provides it to the app
export function DatabaseProvider<T>({ children }: PropsWithChildren<T>) {
  const { user } = useAuth()
  useEffect(() => {
    if (user) {
      database.init().catch(console.error)
    }
  }, [database, user])
  return (
    <DatabaseContext.Provider value={ database }>
      <PowerSyncContext.Provider value={ database.powersync }>
        { children }
      </PowerSyncContext.Provider>
    </DatabaseContext.Provider>
  )
}

// app/app.tsx


//... other imports
// success-line
// Import the provder
// success-line
import { DatabaseProvider } from "app/services/database/database"

// ...

function App(props: AppProps) {
  // ...
  return (
    <AuthProvider>
      // success-line
      {/* Add the Database Provider inside the AuthProvider */ }
      // success-line
      <DatabaseProvider>
        <SafeAreaProvider initialMetrics={ initialWindowMetrics }>
          // ...
        </SafeAreaProvider>
        // success-line
      </DatabaseProvider>
    </AuthProvider>
  )
}

export default App

const $container: ViewStyle = {
  flex: 1,
}


const lists = usePowerSyncWatchedQuery<ListItemRecord>(`
    SELECT ${ LIST_TABLE }.*,
         COUNT(${ TODO_TABLE }.id) AS total_tasks,
         SUM(CASE WHEN ${ TODO_TABLE }.completed = true THEN 1 ELSE 0 END) AS completed_tasks
    FROM ${ LIST_TABLE }
         LEFT JOIN ${ TODO_TABLE } ON ${ LIST_TABLE }.id = ${ TODO_TABLE }.list_id
    GROUP BY ${ LIST_TABLE }.id;
  `);

const deleteList = useCallback(async (id: string) => {
  console.log('Deleting list', id)
  return powersync.execute(`DELETE FROM ${ LIST_TABLE } WHERE id = ?`, [id])
}, [powersync])

// app/components/SignOutButton.tsx

//...other imports
import { useDatabase } from "app/services/database/database"

// ...
export const SignOutButton = observer(function SignOutButton(props: SignOutButtonProps) {
  // ...

  const { signOut } = useAuth()
  // success-line
  const { powersync } = useDatabase()

  // success-line
  const handleSignOut = async () => {  // make this async
    // success-line
    await powersync.disconnectAndClear()
    await signOut()
  }

  return (
    <View style={ $styles }>
      <Button text="Sign Out" onPress={ handleSignOut }/>
    </View>
  )
})


npx expo add expo-crypto

// app/services/database/use-lists.ts
import { usePowerSyncWatchedQuery } from "@journeyapps/powersync-sdk-react-native"
import { useAuth } from "app/services/database/use-auth"
import { useCallback } from "react"
import { useDatabase } from "app/services/database/database"
import { LIST_TABLE, ListRecord, TODO_TABLE } from "app/services/database/schema"
import { randomUUID } from 'expo-crypto'

// Extend the base type with the calculated fields from our query  
export type ListItemRecord = ListRecord & { total_tasks: number; completed_tasks: number }

export const useLists = () => {
  // Get the current user from the auth context 
  const { user } = useAuth()
  // Get the database instance from the context
  const { powersync } = useDatabase()

  // List fetching logic here. You can modify it as per your needs.
  const lists = usePowerSyncWatchedQuery<ListItemRecord>(`
      SELECT ${ LIST_TABLE }.*,
             COUNT(${ TODO_TABLE }.id) AS total_tasks,
             SUM(CASE WHEN ${ TODO_TABLE }.completed = true THEN 1 ELSE 0 END) as completed_tasks
      FROM ${ LIST_TABLE }
               LEFT JOIN ${ TODO_TABLE } ON ${ LIST_TABLE }.id = ${ TODO_TABLE }.list_id
      GROUP BY ${ LIST_TABLE }.id
  `)


  const createList = useCallback(async (name: string) => {

    if (!user) {throw new Error("Can't add list -- user is undefined")}

    return powersync.execute(
      `
          INSERT INTO ${ LIST_TABLE }
              (id, name, created_at, owner_id)
          VALUES (?, ?, ?, ?)`,
      [randomUUID(), name, new Date().toISOString(), user?.id],
    )
  }, [user, powersync])

  const deleteList = useCallback(async (id: string) => {
    console.log('Deleting list', id)
    return powersync.execute(`DELETE
                             FROM ${ LIST_TABLE }
                             WHERE id = ?`, [id])
  }, [powersync])

  return { lists, createList, deleteList }
}


npx ignite-cli generate component AddList

npx ignite-cli generate component Lists

// app/screens/WelcomeScreen.tsx
import { NativeStackScreenProps } from "@react-navigation/native-stack"
import { Lists, SignOutButton } from "app/components"
import { observer } from "mobx-react-lite"
import React, { FC } from "react"
import { ViewStyle } from "react-native"
import { SafeAreaView } from "react-native-safe-area-context"
import { SignedInNavigatorParamList } from "../navigators"
import { colors } from "../theme"

interface WelcomeScreenProps
  extends NativeStackScreenProps<SignedInNavigatorParamList, "Welcome"> {}

export const WelcomeScreen: FC<WelcomeScreenProps> = observer(function WelcomeScreen() {
  return (
    <SafeAreaView style={ $container }>
      <Lists/>
      <SignOutButton/>
    </SafeAreaView>
  )
})

const $container: ViewStyle = {
  flex: 1,
  backgroundColor: colors.palette.neutral300,
  display: "flex",
  justifyContent: "flex-start",
  height: "100%",
  flexDirection: "column",
}



// app/components/Lists.tsx
import { NavigationProp, useNavigation } from "@react-navigation/native"
import { AddList, Icon, ListItem, Text } from "app/components"
import { AppStackParamList } from "app/navigators"
import { ListItemRecord, useLists } from "app/services/database/use-lists"
import React, { useCallback } from "react"
import { FlatList, TextStyle, View, ViewStyle } from "react-native"
import { colors, spacing } from "../theme"

export function Lists() {
  
  // use our hook to fetch the lists
  const { lists, deleteList } = useLists()
  const navigation = useNavigation<NavigationProp<AppStackParamList>>()

  // This function tells FlatList how to render each item
  const renderItem = useCallback(({ item }: { item: ListItemRecord }) => {
    return (
      <ListItem
        textStyle={ $listItemText }
        onPress={ () => {
          // Eventually  this si where we'll navigate to the todo, but for now we'll just log the list name
          console.log('Pressed: ', item.name)
        } }
        text={ `${ item.name }` }
        RightComponent={
          <View style={ $deleteListIcon }>
            {/* Let users delete lists */}
            <Icon icon={ "x" } onPress={ () => deleteList(item.id) }/>
          </View>
        }
      />
    )
  }, [])

  return (
    <View style={ $container }>
      <Text preset={ "heading" }>Lists</Text>
      <View style={ $card }>
        <AddList/>
      </View>
      <View style={ [$list, $card] }>
        <Text preset={ "subheading" }>Your Lists</Text>
        <FlatList
          style={ $listContainer }
          // pass in our lists
          data={ lists }
          // pass in our renderItem function
          renderItem={ renderItem }
          keyExtractor={ (item) => item.id }
          ItemSeparatorComponent={ () => <View style={ $separator }/> }
          // show a message if the list is empty
          ListEmptyComponent={ <Text style={ $emptyList }>No lists found</Text> }
        />
      </View>
    </View>
  )
}

// STYLES
const $separator: ViewStyle = { height: 1, backgroundColor: colors.border }
const $emptyList: TextStyle = {
  textAlign: "center",
  color: colors.textDim,
  opacity: 0.5,
  padding: spacing.lg,
}
const $card: ViewStyle = {
  shadowColor: colors.palette.neutral800,
  shadowOffset: { width: 0, height: 1 },
  shadowRadius: 2,
  shadowOpacity: 0.35,
  borderRadius: 8,
}
const $listContainer: ViewStyle = {
  backgroundColor: colors.palette.neutral100,
  paddingHorizontal: spacing.md,
  height: "100%",
  borderColor: colors.border,
  borderWidth: 1,
}
const $list: ViewStyle = {
  flex: 1,
  marginVertical: spacing.md,
  backgroundColor: colors.palette.neutral200,
  padding: spacing.md,
}
const $container: ViewStyle = {
  flex: 1,
  display: "flex",
  flexGrow: 1,
  padding: spacing.md,
}
const $listItemText: TextStyle = {
  height: 44,
  width: 44,
}
const $deleteListIcon: ViewStyle = {
  display: "flex",
  justifyContent: "center",
  alignItems: "center",
  height: 44,
  marginVertical: spacing.xxs,
}

// app/components/AddList.tsx
import { Button, Text, TextField } from "app/components"
import { useLists } from "app/services/database/use-lists"
import { colors, spacing } from "app/theme"
import { observer } from "mobx-react-lite"
import React from "react"
import { Keyboard, TextStyle, View, ViewStyle } from "react-native"

/**
 * Display a form to add a new list
 */
export const AddList = observer(function AddList() {
  const [newListName, setNewListName] = React.useState("")
  const [error, setError] = React.useState<string | null>(null)

  // we use the function from  our hook to create a new list
  const { createList } = useLists()

  const handleAddList = React.useCallback(async () => {
    if (!newListName) {
      Keyboard.dismiss()
      return
    }
    try {
      await createList(newListName)
      setNewListName("")
    } catch (e: any) {
      setError(`Failed to create list: ${ e?.message ?? "unknown error" }`)
    } finally {
      Keyboard.dismiss()
    }
  }, [createList, newListName])

  return (
    <View style={ $container }>
      <Text preset={ "subheading" }>Add a List</Text>
      <View style={ $form }>
        <TextField
          placeholder="Enter a list name"
          containerStyle={ $textField }
          inputWrapperStyle={ $textInput }
          onChangeText={ setNewListName }
          value={ newListName }
          onSubmitEditing={ handleAddList }
        />
        <Button text="Add List" style={ $button } onPress={ handleAddList }/>
      </View>
      { error && <Text style={ $error }>{ error }</Text> }
    </View>
  )
})

const $container: ViewStyle = {
  padding: spacing.md,
  backgroundColor: colors.palette.neutral200,
}

const $form: ViewStyle = {
  display: "flex",
  flexDirection: "row",
  alignItems: "center",
}

const $textField: ViewStyle = {
  flex: 1,
}

const $textInput: ViewStyle = {
  backgroundColor: colors.palette.neutral100,
}

const $button: ViewStyle = {
  marginHorizontal: spacing.xs,
  padding: 0,
  paddingHorizontal: spacing.xs,
  paddingVertical: 0,
  minHeight: 44,
}

const $error: TextStyle = {
  color: colors.error,
  marginTop: spacing.sm,
}



npx ignite-cli generate screen TodoList

    // app/navigators/AppNavigator.tsx
    export type AppStackParamList = {
      Welcome: undefined
      Auth: undefined
      // success-line
      TodoList: { listId: string }  // add this line
      // IGNITE_GENERATOR_ANCHOR_APP_STACK_PARAM_LIST
    }

    // ...
    
    const AppStack = observer(function AppStack() {
      // Fetch the user from the auth context
      const { signedIn } = useAuth()
      return (
        <Stack.Navigator screenOptions={ { headerShown: false, navigationBarColor: colors.background } }>
          <Stack.Screen name={ "Auth" } component={ AuthScreen }/>
          // success-line
          { signedIn ? (
            // success-line
            <>
              // success-line
              <Stack.Screen name="Welcome" component={ Screens.WelcomeScreen }/>
              // success-line
              <Stack.Screen name="TodoList" component={ Screens.TodoListScreen }/>
              // success-line
            </>
            // success-line
          ) : null }
          {/* IGNITE_GENERATOR_ANCHOR_APP_STACK_SCREENS */ }
        </Stack.Navigator>
      )
    })
 
    export const AppNavigator = observer(function AppNavigator(props: NavigationProps) {
      // ...   
    })

    // app/screens/TodoListScreen.tsx
    // ...
    
    export const TodoListScreen: FC<TodoListScreenProps> = function TodoListScreen({
      navigation,
      // success-line
      // We get the listId from the route params
      // success-line
      route: { params: {listId} }
    }) {
      return (
        <Screen style={ $root } preset="scroll" safeAreaEdges={ ["top"] }>
          // success-line
          <Pressable onPress={ () => navigation.goBack() }>
            <Icon icon={ "back" } size={ 50 }/>
          </Pressable>
          // success-line
          <Text preset={ "heading" } text={ listId }/>
        </Screen>
      )
    }
    
    const $root: ViewStyle = {
      flex: 1,
    }
    
    const $backButton: ViewStyle = {
      height: 44,
    }
    
    

// app/components/Lists.tsx

// ... other imports
import { NavigationProp, useNavigation } from "@react-navigation/native"
import { AppStackParamList } from "app/navigators"

export function Lists() {

  const { lists, deleteList } = useLists()
  // We use the root param list, because this component might be reusing in other screens/navigators
  // success-line
  const navigation = useNavigation<NavigationProp<AppStackParamList>>()

  const renderItem = useCallback(({ item }: { item: ListItemRecord }) => {
    return <ListItem
      // ... other props
      // Navigate to the TodoList screen, passing the `listId` as a parameter
      onPress={ () => {
        // success-line
        navigation.navigate("TodoList", { listId: item.id })
      } }
    />
  }, [])

  return (
    //... component body
  )
}

// app/services/database/use-list.ts

import { usePowerSyncQuery, usePowerSyncWatchedQuery } from "@journeyapps/powersync-sdk-react-native"
import { useDatabase } from "app/services/database/database"
import { LIST_TABLE, ListRecord, TODO_TABLE, TodoRecord } from "app/services/database/schema"
import { useAuth } from "app/services/database/use-auth"
import { useCallback } from "react"
import { randomUUID } from 'expo-crypto'


export function useList(listId: string) {
  const { user } = useAuth()
  const { powersync } = useDatabase()


  const listRecords = usePowerSyncQuery<ListRecord>(`
      SELECT *
      FROM ${ LIST_TABLE }
      WHERE id = ?
  `, [listId])

  // we only expect one list record
  const list = listRecords[0]


  const todos = usePowerSyncWatchedQuery<TodoRecord>(`
      SELECT *
      FROM ${ TODO_TABLE }
      WHERE list_id = ?
  `, [listId])


  const addTodo = useCallback(async (description: string): Promise<{ error: string | null }> => {
    if (!user) {
      throw new Error("Can't add todo -- user is undefined")
    }
    try {
      await powersync.execute(
        `INSERT INTO ${ TODO_TABLE }
             (id, description, created_at, list_id, created_by, completed)
         VALUES (?, ?, ?, ?, ?, ?)`,
        [randomUUID(), description, new Date().toISOString(), listId, user?.id, 0],
      )

      return { error: null }
    } catch (error: any) {
      return { error: `Error adding todo: ${ error?.message }` }
    }
  }, [user, powersync, listId])

  const removeTodo = useCallback(async (id: string): Promise<{ error: string | null }> => {
    try {
      await powersync.execute(`DELETE
                                FROM ${ TODO_TABLE }
                                WHERE id = ?`, [id])
      return { error: null }
    } catch (error: any) {
      console.error("Error removing todo", error)
      return { error: `Error removing todo: ${ error?.message }` }
    }

  }, [
    powersync,
  ])

  const setTodoCompleted = useCallback(async (id: string, completed: boolean): Promise<{ error: string | null }> => {

    const completedAt = completed ? new Date().toISOString() : null
    const completedBy = completed ? user?.id : null

    try {
      await powersync.execute(`
            UPDATE ${ TODO_TABLE }
            SET completed = ?, completed_at = ?, completed_by = ?
            WHERE id = ?
        `, [completed, completedAt, completedBy, id])

      return { error: null }

    } catch (error: any) {
      console.error('Error toggling todo', error)
      return { error: `Error toggling todo: ${ error?.message }` }
    }
  }, [powersync])


  return { list, todos, addTodo, removeTodo, setTodoCompleted }

}


// app/screens/TodoListScreen.tsx
import { Button, Icon, ListItem, Screen, Text, TextField } from "app/components"
import { SignedInNavigatorScreenProps } from "app/navigators"
import { TodoRecord } from "app/services/database/schema"
import { useList } from "app/services/database/use-list"
import { colors, spacing } from "app/theme"
import React, { FC, useCallback } from "react"
import { FlatList, Pressable, TextStyle, View, ViewStyle } from "react-native"
import { SafeAreaView } from "react-native-safe-area-context"

interface TodoListScreenProps extends SignedInNavigatorScreenProps<"TodoList"> {}

export const TodoListScreen: FC<TodoListScreenProps> = function TodoListScreen({
  navigation,
  route: { params: { listId } },
}) {

  // We use the hook to get the list and todos for the list
  const { list, todos, addTodo, removeTodo, setTodoCompleted } = useList(listId)

  // State for managing the new todo input and errors
  const [newTodo, setNewTodo] = React.useState("")
  const [error, setError] = React.useState<string | null>(null)

  // We wrap the addTodo from the hook with a bit of error handling
  const handleAddTodo = useCallback(async () => {
    const { error } = await addTodo(newTodo)
    if (error) {
      setError(error)
      return
    }
    setNewTodo("")
  }, [newTodo])

  // And do the same for removeTodo
  const handleRemoveTodo = useCallback(async (id: string) => {
    const { error } = await removeTodo(id)
    if (error) {
      setError(error)
    }
  }, [removeTodo, setError])

  // We'll use the ListItem component to display each todo, as we did with the lists
  const renderItem = useCallback(({ item }: { item: TodoRecord }) => {
    return <ListItem
      containerStyle={ $listItemContainer }
      textStyle={ [$listItemText, item.completed && $strikeThrough] }
      text={ `${ item.description }` }
      RightComponent={ (
        <Pressable style={ $deleteIcon }>
          <Icon icon={ "x" } onPress={ () => handleRemoveTodo(item.id) }/>
        </Pressable>) }
      onPress={ () => setTodoCompleted(item.id, !item.completed) }
    />
  }, [
    handleRemoveTodo,
  ])

  return (
    <Screen style={ $root } preset="fixed">
      <SafeAreaView style={ $header } edges={ ["top"] }>
        <Pressable onPress={ () => navigation.goBack() }>
          <Icon icon={ "back" } size={ 44 }/>
        </Pressable>
        <Text style={ $listName } preset={ "heading" } text={ list?.name }/>
      </SafeAreaView>
      <View style={ $addTodoContainer }>
        <Text preset={ "subheading" }>Add a list</Text>
        <View style={ $form }>
          <TextField
            placeholder="New todo..."
            containerStyle={ $textField }
            inputWrapperStyle={ $textInput }
            onChangeText={ setNewTodo }
            value={ newTodo }/>
          <Button text="ADD" style={ $button } onPress={ handleAddTodo }/>
        </View>
        { error && <Text style={ $error }>{ error }</Text> }
      </View>
      <View style={ $container }>
        <FlatList
          data={ todos }
          renderItem={ renderItem }
          ItemSeparatorComponent={ () => <View style={ $separator }/> }
          ListEmptyComponent={ <Text style={ $emptyList }>List is Empty</Text> }
        />
      </View>
    </Screen>
  )
}

const $root: ViewStyle = {
  flex: 1,
}
const $listItemContainer: ViewStyle = {
  alignItems: "center",
}

const $strikeThrough: TextStyle = { textDecorationLine: "line-through" }

const $form: ViewStyle = {
  display: "flex",
  flexDirection: "row",
  alignItems: "center",
}

const $separator: ViewStyle = { height: 1, backgroundColor: colors.border }

const $emptyList: TextStyle = {
  color: colors.textDim,
  opacity: 0.5,
  padding: spacing.lg,
  fontSize: 24,
}

const $textField: ViewStyle = {
  flex: 1,
}

const $textInput: ViewStyle = {
  backgroundColor: colors.palette.neutral100,
}


const $button: ViewStyle = {
  marginHorizontal: spacing.xs,
  padding: 0,
  paddingHorizontal: spacing.xs,
  paddingVertical: 0,
}

const $addTodoContainer: ViewStyle = {
  padding: spacing.md,
  backgroundColor: colors.palette.neutral300,
}
const $header: ViewStyle = {
  display: "flex",
  flexDirection: "row",
  alignItems: "center",
  backgroundColor: colors.palette.secondary200,
  paddingBottom: spacing.md,
}

const $listName: TextStyle = {
  marginLeft: spacing.sm,
  flex: 1,
}

const $error: TextStyle = {
  color: colors.error,
  marginTop: spacing.sm,
}

const $container: ViewStyle = {
  padding: spacing.md,
}

const $listItemText: TextStyle = {
  height: 44,
  verticalAlign: "middle"
}

const $deleteIcon: ViewStyle = {
  display: "flex",
  justifyContent: "center",
  alignItems: "center",
  height: 44,
  marginVertical: spacing.xxs,
}