11import "expo-dev-client" ;
2- import { useEffect , useState } from "react" ;
2+ import { useCallback , useEffect , useState } from "react" ;
33import {
44 FlatList ,
55 StyleSheet ,
88} from "react-native" ;
99import * as SplashScreen from "expo-splash-screen" ;
1010import { GestureHandlerRootView } from "react-native-gesture-handler" ;
11+ import { initialWindowMetrics , SafeAreaProvider , useSafeAreaInsets } from "react-native-safe-area-context" ;
1112
1213import Button from "./components/button" ;
1314import color from "./constants/colors" ;
@@ -22,7 +23,7 @@ import { ExpoDevMenuItem, registerDevMenuItems } from "expo-dev-menu";
2223import AsyncStorage , { useAsyncStorage } from "@react-native-async-storage/async-storage" ;
2324import { useAsyncStorageDevTools } from "@dev-plugins/async-storage" ;
2425
25- // SplashScreen.preventAutoHideAsync();
26+ SplashScreen . preventAutoHideAsync ( ) ;
2627
2728SplashScreen . setOptions ( {
2829 fade : true ,
@@ -42,7 +43,7 @@ export default function App() {
4243 useAsyncStorageDevTools ( { errorHandler : ( e ) => { console . log ( "[App.js] -> Error:" , e ) } } ) ;
4344
4445 const { getItem, removeItem, setItem } = useAsyncStorage ( "tasks" ) ;
45-
46+ const [ loaded , setLoaded ] = useState ( false ) ;
4647 const [ tasks , setTasks ] = useState < TaskItem [ ] | undefined > ( undefined ) ;
4748 const [ taskToEdit , setTaskToEdit ] = useState < number | undefined > ( ) ;
4849 const [ creationModalVisible , setCreationModalVisible ] = useState ( false ) ;
@@ -52,11 +53,12 @@ export default function App() {
5253 if ( e !== null ) {
5354 setTasks ( JSON . parse ( e ) ) ;
5455 }
56+ setLoaded ( true ) ;
5557 } ) . catch ( ( err ) => console . log ( "[App.tsx] -> Something went wrong: " , err ) )
5658 }
5759
5860 async function saveTasks ( ) {
59- await setItem ( JSON . stringify ( tasks ) ) . then ( ( v ) => console . log ( "[App.tsx] -> Saved successfully: " , tasks ) )
61+ await setItem ( JSON . stringify ( tasks ) ) ;
6062 }
6163
6264 function createTask ( t : TaskItem ) {
@@ -68,7 +70,7 @@ export default function App() {
6870 }
6971
7072 function deleteTask ( id : number ) {
71- setTasks ( prevTasks => prevTasks ?. filter ( ( _ , idx ) => id !== idx ) ) ;
73+ setTasks ( ( prevTasks ) => prevTasks ?. filter ( ( _ , idx ) => id !== idx ) ) ;
7274 }
7375
7476 useEffect ( ( ) => {
@@ -101,15 +103,13 @@ export default function App() {
101103 {
102104 name : "Generate 25 random tasks" ,
103105 callback : ( ) => {
104- for ( let i = 0 ; i <= 25 ; i ++ ) {
105- setTasks ( ( ) => tasks ? [ ...tasks , {
106- title : Math . random ( ) . toString ( ) ,
107- completed : Math . random ( ) > 0.5 ? true : false ,
108- } ] : [ {
106+ const Arr = Array . from ( { length : 25 } , ( ) => {
107+ return {
109108 title : Math . random ( ) . toString ( ) ,
110109 completed : Math . random ( ) > 0.5 ? true : false ,
111- } ] )
112- }
110+ }
111+ } )
112+ setTasks ( ( ) => tasks !== undefined ? [ ...tasks , ...Arr ] : [ ...Arr ] )
113113 } ,
114114 shouldCollapse : true ,
115115 }
@@ -137,21 +137,23 @@ export default function App() {
137137 ) ;
138138 } ;
139139
140- // const onLayoutRootView = useCallback(() => {
141- // if (loaded) {
142- // SplashScreen.hide();
143- // }
144- // }, [loaded]);
140+ const onLayoutRootView = useCallback ( ( ) => {
141+ if ( loaded ) {
142+ SplashScreen . hide ( ) ;
143+ }
144+ } , [ loaded ] ) ;
145145
146- // if (!loaded) {
147- // return null;
148- // }
146+ if ( ! loaded ) {
147+ return null ;
148+ }
149149
150150 return (
151+ // <SafeAreaProvider initialMetrics={initialWindowMetrics}>
151152 < GestureHandlerRootView
152- // onLayout={onLayoutRootView}
153+ onLayout = { onLayoutRootView }
153154 style = { styles . container }
154155 >
156+
155157 { /* this doohickey is to force the modal to rerender again so that the taskToEdit actually goes through */ }
156158
157159 { /* creationModalVisible */ }
@@ -183,8 +185,8 @@ export default function App() {
183185 ListEmptyComponent = { NoTasks }
184186 ListHeaderComponent = { ListHeader }
185187 ListHeaderComponentStyle = { { width : "100%" } }
186- StickyHeaderComponent = { ListHeader }
187- stickyHeaderHiddenOnScroll
188+ // StickyHeaderComponent={ListHeader}
189+ // stickyHeaderHiddenOnScroll
188190 stickyHeaderIndices = { [ 0 ] }
189191 />
190192 </ View >
@@ -199,7 +201,9 @@ export default function App() {
199201 setCreationModalVisible ( true ) ;
200202 } }
201203 />
204+
202205 </ GestureHandlerRootView >
206+ // </SafeAreaProvider>
203207 ) ;
204208}
205209
0 commit comments