fixes app crash on launch

App.tsx

@@ -1,3 +1,4 @@
+import 'react-native-gesture-handler';
 import {NavigationContainer} from '@react-navigation/native';
 import {createStackNavigator} from '@react-navigation/stack';
 import {QueryClient, QueryClientProvider} from '@tanstack/react-query';

app.json

@@ -21,7 +21,7 @@
     "ios": {
       "bundleIdentifier": "com.taskratchet.mobile",
       "supportsTablet": true,
-      "buildNumber": "4"
+      "buildNumber": "8"
     },
     "android": {
       "package": "com.taskratchet.mobile",

config-plugins/withRemoveiOSNotificationEntitlement.js

@@ -1,9 +1,10 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 const withEntitlementsPlist =
   require('@expo/config-plugins').withEntitlementsPlist;
 
 const withRemoveiOSNotificationEntitlement = config => {
   return withEntitlementsPlist(config, mod => {
-    mod.modResults = {...mod.modResults, 'aps-environment': undefined};
+    delete mod.modResults['aps-environment'];
     return mod;
   });
 };

jest.config.js

@@ -4,7 +4,7 @@ module.exports = {
     '^.+\\.tsx?$': 'ts-jest',
   },
   transformIgnorePatterns: [
-    'node_modules/(?!((jest-)?react-native|@react-native(-community)?)|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|react-native-svg|firebase|@firebase/util|@react-native-async-storage/async-storage|@react-native-community/datetimepicker|@tanstack/react-query|@react-native-date-picker|react-native-secure-key-store|react-native-url-polyfill|react-native-webview|expo-secure-store|expo-status-bar)',
+    'node_modules/(?!((jest-)?react-native|@react-native(-community)?)|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|react-native-svg|firebase|@firebase/util|@react-native-async-storage/async-storage|@react-native-community/datetimepicker|@tanstack/react-query|@react-native-date-picker|react-native-url-polyfill|react-native-webview|expo-secure-store|expo-status-bar)',
   ],
   setupFilesAfterEnv: ['./jest.setup.ts'],
   testEnvironment: 'jsdom',

package.json

@@ -31,13 +31,14 @@
     "react": "18.2.0",
     "react-native": "^0.72.10",
     "react-native-date-picker": "^5.0.0",
-    "react-native-secure-key-store": "^2.0.10",
+    "react-native-gesture-handler": "~2.12.0",
+    "react-native-safe-area-context": "4.6.3",
+    "react-native-screens": "~3.22.0",
     "react-native-url-polyfill": "^2.0.0",
     "react-native-webview": "13.2.2",
     "react-navigation": "^5.0.0",
     "react-test-renderer": "^18.2.0",
-    "typescript": "^5.4.3",
-    "react-native-gesture-handler": "~2.12.0"
+    "typescript": "^5.4.3"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

src/components/taskListItem.tsx

@@ -89,22 +89,24 @@ export default function Task({item}: taskProps): JSX.Element {
     : {style: {}};
 
   return (
-    <View style={[primaryStyle, styles.taskBlock]}>
-      <View style={[styles.row]}>
-        <View style={[styles.flexOne]}>
-          <Text style={[textColorStyle, styles.taskTitle]} numberOfLines={1}>
-            {item.task}
-          </Text>
-          <Text style={deadlineDetails.style}>{deadlineDetails.text}</Text>
-        </View>
+    <View style={[primaryStyle, styles.wrapperView]}>
+      <View style={styles.taskBlock}>
+        <View style={[styles.row]}>
+          <View style={[styles.flexOne]}>
+            <Text style={[textColorStyle, styles.taskTitle]} numberOfLines={1}>
+              {item.task}
+            </Text>
+            <Text style={deadlineDetails.style}>{deadlineDetails.text}</Text>
+          </View>
 
-        <View style={styles.taskSideRight}>
-          <Text style={[textColorStyle, styles.taskStakes]}>
-            {convertCents(item.cents)}
-          </Text>
+          <View style={styles.taskSideRight}>
+            <Text style={[textColorStyle, styles.taskStakes]}>
+              {convertCents(item.cents)}
+            </Text>
+          </View>
         </View>
+        <View style={[footerStyle.style, styles.statusFooter]} />
       </View>
-      <View style={[footerStyle.style, styles.statusFooter]} />
     </View>
   );
 }

src/screens/HomeScreen.tsx

@@ -235,7 +235,7 @@ export default function HomeScreen({navigation}: Props): JSX.Element {
               </Text>
             </Pressable>
           </View>
-          <View style={styles.taskList}>
+          <View>
             {processedTasks && processedTasks.length > 0 ? (
               processedTasks.map(task => {
                 return (

src/services/taskratchet/fetch2.ts

@@ -1,4 +1,4 @@
-import secureKeystore from 'react-native-secure-key-store';
+import secureStore from 'expo-secure-store';
 
 import {API2_BASE} from './constants';
 import {logout} from './logout';
@@ -19,7 +19,8 @@ export default async function fetch2(
   method = 'GET',
   data: unknown = null,
 ): Promise<Response> {
-  const token = ((await secureKeystore.get('firebase_token')) as string) || '';
+  const token =
+    ((await secureStore.getItemAsync('firebase_token')) as string) || '';
   const route_ = _trim(route, '/');
 
   if (protected_ && !token) {

src/styles/homeScreenStyle.tsx

@@ -52,11 +52,6 @@ export const styles = StyleSheet.create({
   background: {
     flex: 1,
   },
-  taskList: {
-    shadowColor: '#000',
-    shadowOffset: {width: 2, height: 2},
-    shadowOpacity: 0.5,
-  },
   avatar: {
     width: 50,
     height: 50,

src/styles/taskListItemStyle.tsx

@@ -20,15 +20,19 @@ export const styles = StyleSheet.create({
     marginLeft: -20,
     marginRight: -20,
   },
+  wrapperView: {
+    shadowColor: '#000',
+    shadowOffset: {width: 1, height: 2},
+    shadowOpacity: 0.5,
+    shadowRadius: 3,
+    margin: 10,
+    borderRadius: 15,
+  },
   taskBlock: {
     padding: 15,
     paddingLeft: 20,
     paddingRight: 20,
-    margin: 10,
     borderRadius: 15,
-    shadowColor: '#000',
-    shadowOffset: {width: 1, height: 2},
-    shadowOpacity: 0.25,
     overflow: 'hidden',
   },
   row: {