/**
 * React Native SQLite Demo
 * Copyright (c) 2021 Bruce Lefebvre <bruce@brucelefebvre.com>
 * https://github.com/blefebvre/react-native-sqlite-demo/blob/master/LICENSE
 */ import React , { useState , useEffect } from "react" ; import { AppState , StyleSheet , AppStateStatus , TouchableOpacity , Text } from "react-native" ; import { NavigationContainer } from "@react-navigation/native" ; import { createStackNavigator } from "@react-navigation/stack" ; import { LoadingScreen } from "./components/LoadingScreen" ; import { useDatabaseSync } from "./hooks/useDatabaseSync" ; import { HomeScreen } from "./components/HomeScreen" ; import { SettingsScreen } from "./components/SettingsScreen" ; import { ListDetailsScreen } from "./components/ListDetailsScreen" ; import { List } from "./types/List" ; import { ListContextProvider } from "./context/DatabaseContext" ; import { AppText } from "./components/AppText" ; let appState ; const Stack = createStackNavigator ( ) ; export type RootStackParamList = { HomeScreen : undefined ; Settings : undefined ; "List Details" : { list : List ; } ; } ; export const App = function ( ) { const [ isLoading , setIsLoading ] = useState ( false ) ; const [ loadingText , setLoadingText ] = useState ( "Loading..." ) ; appState = AppState . currentState ; useEffect ( function ( ) { appIsNowRunningInForeground ( ) ; appState = "active" ; AppState . addEventListener ( "change" , handleAppStateChange ) ; return function ( ) { AppState . removeEventListener ( "change" , handleAppStateChange ) ; } ; } , [ ] ) ; function handleAppStateChange ( nextAppState ) { if ( appState . match ( /inactive|background/ ) && nextAppState === "active" ) { appIsNowRunningInForeground ( ) ; } appState = nextAppState ; } async function appIsNowRunningInForeground ( ) { console . log ( "App is now running in the foreground!" ) ; const syncDatabase = useDatabaseSync ( prepareForDatabaseUpdate ) ; syncDatabase ( ) ; } async function prepareForDatabaseUpdate ( ) { setIsLoading ( true ) ; setLoadingText ( "Downloading database..." ) ; } function isReady ( ) { return isLoading === false ; } if ( isReady ( ) ) { return ( < ListContextProvider > < NavigationContainer > < Stack . Navigator > < Stack . Screen name = "SQLite List App" component = { HomeScreen } options = { ( { navigation } ) => ( { headerRight : ( ) => { return ( < TouchableOpacity style = { styles . settingsButton } onPress = { ( ) => navigation . navigate ( "Settings" ) } > < AppText style = { styles . settingsButtonText } > ⚙ ️ < /AppText> < /TouchableOpacity>); } , } ) } /> < Stack . Screen name = "Settings" component = { SettingsScreen } options = { { headerBackTitle : "Back" , } } /> < Stack . Screen name = "List Details" component = { ListDetailsScreen } options = { ( { route } ) => { let title = "List details" ; const params = route . params ; if ( params != null && params . list != null ) { title += `: ${ params . list . title }` ; } return { headerBackTitle : "Back" , title , } ; } } /> < /Stack.Navigator> < /NavigationContainer> < /ListContextProvider>); } else { return < LoadingScreen text = { loadingText } />; } } ; const styles = StyleSheet . create ( { container : { flex : 1 , } , settingsButton : { paddingRight : 10 , } , settingsButtonText : { fontSize : 20 , } , } ) ;