nambah di tab bar try catch

view/Auth.js

@@ -69,75 +69,80 @@ enableScreens();
 const Tab = createBottomTabNavigator();
 
 const BottomNavigation = ({ state, descriptors, navigation }) => {
-  const insets = useSafeArea();
-  let paddingBottom = 0;
-  if (Platform.OS === 'ios') {
-    paddingBottom = insets.bottom;
-  }
-  return (
-    <View style={{ flexDirection: 'row', paddingBottom: paddingBottom }}>
-      {state.routes.map((route, index) => {
-        const { options } = descriptors[route.key];
-        const label =
-          options.tabBarLabel !== undefined
-            ? options.tabBarLabel
-            : options.title !== undefined
-              ? options.title
-              : route.name;
-
-        const isFocused = state.index === index;
-
-        const onPress = () => {
-          const event = navigation.emit({
-            type: 'tabPress',
-            target: route.key,
-            canPreventDefault: true,
-          });
-
-          if (!isFocused && !event.defaultPrevented) {
-            navigation.navigate(route.name);
+  try {
+    const insets = useSafeArea();
+    let paddingBottom = 0;
+    if (Platform.OS === 'ios') {
+      paddingBottom = insets.bottom;
+    }
+    return (
+      <View style={{ flexDirection: 'row', paddingBottom: paddingBottom }}>
+        {state.routes.map((route, index) => {
+          const { options } = descriptors[route.key];
+          const label =
+            options.tabBarLabel !== undefined
+              ? options.tabBarLabel
+              : options.title !== undefined
+                ? options.title
+                : route.name;
+  
+          const isFocused = state.index === index;
+  
+          const onPress = () => {
+            const event = navigation.emit({
+              type: 'tabPress',
+              target: route.key,
+              canPreventDefault: true,
+            });
+  
+            if (!isFocused && !event.defaultPrevented) {
+              navigation.navigate(route.name);
+            }
+          };
+  
+          const onLongPress = () => {
+            navigation.emit({
+              type: 'tabLongPress',
+              target: route.key,
+            });
+          };
+  
+          let icon = require('../assets/icon/icon-home.png')
+          if (label === 'HOME') {
+            icon = require('../assets/icon/icon-home.png')
+          } else if (label === 'MENU') {
+            icon = require('../assets/icon/icon-menu.png')
+          } else if (label === 'REWARDS') {
+            icon = require('../assets/icon/icon-rewards.png')
+          } else if (label === 'ORDER') {
+            icon = require('../assets/icon/icon-order.png')
+          } else if (label === 'OUTLETS') {
+            icon = require('../assets/icon/icon-outlets.png')
+          } else if (label === 'ACCOUNT') {
+            icon = require('../assets/icon/icon-account.png')
           }
-        };
-
-        const onLongPress = () => {
-          navigation.emit({
-            type: 'tabLongPress',
-            target: route.key,
-          });
-        };
-
-        let icon = require('../assets/icon/icon-home.png')
-        if (label === 'HOME') {
-          icon = require('../assets/icon/icon-home.png')
-        } else if (label === 'MENU') {
-          icon = require('../assets/icon/icon-menu.png')
-        } else if (label === 'REWARDS') {
-          icon = require('../assets/icon/icon-rewards.png')
-        } else if (label === 'ORDER') {
-          icon = require('../assets/icon/icon-order.png')
-        } else if (label === 'OUTLETS') {
-          icon = require('../assets/icon/icon-outlets.png')
-        } else if (label === 'ACCOUNT') {
-          icon = require('../assets/icon/icon-account.png')
-        }
-
-        return (
-          <TouchableOpacity
-            key={route.name}
-            accessibilityRole="button"
-            accessibilityStates={isFocused ? ['selected'] : []}
-            accessibilityLabel={options.tabBarAccessibilityLabel}
-            testID={options.tabBarTestID}
-            onPress={onPress}
-            onLongPress={onLongPress}
-            style={{ flex: 1, alignItems: 'center', backgroundColor: 'white', borderTopWidth: 1, borderTopColor: '#f0f0f0' }}
-          >
-            <Image source={icon} style={{ height: 50, width: 50, tintColor: isFocused ? '#CFB368' : 'gray' }} />
-          </TouchableOpacity>
-        );
-      })}
-    </View>
-  )
+  
+          return (
+            <TouchableOpacity
+              key={route.name}
+              accessibilityRole="button"
+              accessibilityStates={isFocused ? ['selected'] : []}
+              accessibilityLabel={options.tabBarAccessibilityLabel}
+              testID={options.tabBarTestID}
+              onPress={onPress}
+              onLongPress={onLongPress}
+              style={{ flex: 1, alignItems: 'center', backgroundColor: 'white', borderTopWidth: 1, borderTopColor: '#f0f0f0' }}
+            >
+              <Image source={icon} style={{ height: 50, width: 50, tintColor: isFocused ? '#CFB368' : 'gray' }} />
+            </TouchableOpacity>
+          );
+        })}
+      </View>
+    )
+  } catch (error) {
+    Alert.alert('Error  ' + error)
+  }
+ 
 }
 
 function HandleInbox({ navigation }) {
@@ -151,17 +156,22 @@ function HandleInbox({ navigation }) {
 }
 
 function HomePage({ navigation }) {
-  return (
-    <Tab.Navigator tabBar={props => <BottomNavigation {...props} />}
-    >
-      <Tab.Screen name="HOME" component={Home} />
-      <Tab.Screen name="MENU" component={MenuSelection} />
-      <Tab.Screen name="REWARDS" component={RewardsList} />
-      <Tab.Screen name="ORDER" component={OrderHistory} />
-      <Tab.Screen name="OUTLETS" component={Outlets} />
-      <Tab.Screen name="ACCOUNT" component={Account} />
-    </Tab.Navigator>
-  );
+  try {
+    return (
+      <Tab.Navigator tabBar={props => <BottomNavigation {...props} />}
+      >
+        <Tab.Screen name="HOME" component={Home} />
+        <Tab.Screen name="MENU" component={MenuSelection} />
+        <Tab.Screen name="REWARDS" component={RewardsList} />
+        <Tab.Screen name="ORDER" component={OrderHistory} />
+        <Tab.Screen name="OUTLETS" component={Outlets} />
+        <Tab.Screen name="ACCOUNT" component={Account} />
+      </Tab.Navigator>
+    );
+  } catch (error) {
+    Alert.alert('Error : '+ error)
+  }
+  
 }
 const Stack = createStackNavigator();
 class Auth extends React.Component {