@propel-nsl/propel-react-native-sdk 1.0.0

package/src-app/navigation/MainTabNavigator.tsx

@@ -0,0 +1,294 @@
+import React, { useEffect, useRef, useState } from 'react';
+import {
+  View,
+  StyleSheet,
+  Dimensions,
+  Platform,
+  Keyboard,
+  Animated,
+} from 'react-native';
+import {
+  SafeAreaView,
+  useSafeAreaInsets,
+} from 'react-native-safe-area-context';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { createStackNavigator } from '@react-navigation/stack';
+import { TabParamList, AppStackParamList } from '../types/navigation';
+import { getFocusedRouteNameFromRoute } from '@react-navigation/native';
+import { CommonActions } from '@react-navigation/native';
+import {
+  Dashboard,
+  DeliveryAddress,
+  FAQ,
+  Help,
+  MyCart,
+  MyEVouchers,
+  MyOrders,
+  NewDeliveryAddress,
+  PaymentMethod,
+  PointsLog,
+  ProductDetail,
+  Profile,
+  Redeem,
+  RedemptionHistory,
+  TnC,
+  TransactionSuccessful,
+} from '../screens';
+import OrderDetails from '../screens/OrdersDetails';
+import { CustomImage, Footer } from '../components';
+import Images from '../constants/Images';
+import { SCALE, VSCALE } from '../constants/Scaling';
+import { useBackHandler } from '../hooks/useBackHandler';
+
+const Tab = createBottomTabNavigator<TabParamList>();
+const Stack = createStackNavigator<AppStackParamList>();
+
+const { height: screenHeight } = Dimensions.get('window');
+console.log('screenHeight,', screenHeight);
+
+const getTabBarHeight = (): number => {
+  if (Platform.OS === 'ios') {
+    return screenHeight > 800 ? VSCALE(40) : VSCALE(45);
+  }
+  if (Platform.OS === 'android') {
+    return screenHeight > 800 ? VSCALE(35) : VSCALE(55);
+  }
+  return VSCALE(50);
+};
+
+const DashboardStack = () => (
+  <Stack.Navigator screenOptions={{ headerShown: false, gestureEnabled: false }}>
+    <Stack.Screen name="Dashboard" component={Dashboard} />
+    <Stack.Screen name="RedemptionHistory" component={RedemptionHistory} />
+    <Stack.Screen name="MyOrders" component={MyOrders} />
+    <Stack.Screen name="OrderDetails" component={OrderDetails} />
+    <Stack.Screen name="FAQ" component={FAQ} />
+    <Stack.Screen name="TnC" component={TnC} />
+    <Stack.Screen name="ProductDetail" component={ProductDetail} />
+    <Stack.Screen name="MyEVouchers" component={MyEVouchers} />
+    <Stack.Screen name="MyCart" component={MyCart} />
+    <Stack.Screen name="PointsLog" component={PointsLog} />
+    <Stack.Screen name="DeliveryAddress" component={DeliveryAddress} />
+    <Stack.Screen name="NewDeliveryAddress" component={NewDeliveryAddress} />
+    <Stack.Screen name="PaymentMethod" component={PaymentMethod} />
+    <Stack.Screen
+      name="TransactionSuccessful"
+      component={TransactionSuccessful}
+    />
+  </Stack.Navigator>
+);
+
+const TabBarIcon: React.FC<{
+  route: string;
+  focused: boolean;
+  color: string;
+  size: number;
+}> = ({ route, focused }) => {
+  const iconSize = SCALE(18);
+  const containerSize = SCALE(20);
+
+  return (
+    <View
+      style={[
+        styles.iconContainer,
+        { width: containerSize, height: containerSize },
+      ]}
+    >
+      {route === 'DashboardTab' && (
+        <CustomImage
+          source={focused ? Images.homeActive : Images.homeInactive}
+          imgStyle={{ width: iconSize, height: iconSize }}
+        />
+      )}
+      {route === 'Redeem' && (
+        <CustomImage
+          source={focused ? Images.redeemActive : Images.redeemInactive}
+          imgStyle={{ width: iconSize, height: iconSize }}
+        />
+      )}
+      {route === 'Profile' && (
+        <CustomImage
+          source={focused ? Images.userRed : Images.user}
+          imgStyle={{ width: iconSize, height: iconSize }}
+        />
+      )}
+      {route === 'Help' && (
+        <CustomImage
+          source={focused ? Images.redhelpicon : Images.help}
+          imgStyle={{ width: iconSize, height: iconSize }}
+        />
+      )}
+    </View>
+  );
+};
+
+const renderTabBarIcon = ({
+  route,
+  focused,
+  color,
+  size,
+}: {
+  route: { name: string };
+  focused: boolean;
+  color: string;
+  size: number;
+}) => (
+  <TabBarIcon route={route.name} focused={focused} color={color} size={size} />
+);
+
+const MainTabNavigator: React.FC = () => {
+  const insets = useSafeAreaInsets();
+  const [keyboardVisible, setKeyboardVisible] = useState(false);
+  const footerTranslateY = useRef(new Animated.Value(0)).current;
+
+  // useBackHandler();
+
+  useEffect(() => {
+    const showListener = Keyboard.addListener('keyboardDidShow', () => {
+      setKeyboardVisible(true);
+      Animated.timing(footerTranslateY, {
+        toValue: 100,
+        duration: 200,
+        useNativeDriver: true,
+      }).start();
+    });
+
+    const hideListener = Keyboard.addListener('keyboardDidHide', () => {
+      setKeyboardVisible(false);
+      Animated.timing(footerTranslateY, {
+        toValue: 0,
+        duration: 200,
+        useNativeDriver: true,
+      }).start();
+    });
+
+    return () => {
+      showListener.remove();
+      hideListener.remove();
+    };
+  }, []);
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <View style={styles.mainContainer}>
+        <View style={styles.tabContainer}>
+          <Tab.Navigator
+  screenOptions={({ route }) => {
+    // Detect nested stack route
+    const routeName = getFocusedRouteNameFromRoute(route) ?? '';
+
+    // List of screens where we want to hide tab bar
+    const hideOnScreens = ['TnC', 'FAQ', 'TransactionSuccessful', 'RedemptionHistory'];
+
+    return {
+      headerShown: false,
+      tabBarStyle: hideOnScreens.includes(routeName)
+        ? { display: 'none' } // hide tab bar
+        : keyboardVisible
+        ? { display: 'none' }
+        : {
+            position: 'absolute',
+            bottom: 0,
+            left: 0,
+            right: 0,
+            zIndex: 999,
+            backgroundColor: '#FFFFFF',
+            borderTopWidth: 1,
+            borderTopColor: '#E5E7EB',
+            paddingTop: VSCALE(8),
+            paddingBottom: Math.max(
+              VSCALE(8),
+              insets.bottom + VSCALE(4),
+            ),
+            paddingHorizontal: SCALE(16),
+            height: getTabBarHeight() + Math.max(insets.bottom, VSCALE(8)),
+            elevation: 20,
+            shadowColor: '#000',
+            shadowOffset: { width: 0, height: -3 },
+            shadowOpacity: 0.15,
+            shadowRadius: 6,
+          },
+      tabBarIcon: ({ focused, color, size }) =>
+        renderTabBarIcon({ route, focused, color, size }),
+      tabBarActiveTintColor: '#DC291E',
+      tabBarInactiveTintColor: '#1F2937',
+      tabBarLabelStyle: {
+        fontSize: SCALE(10),
+        marginTop: VSCALE(3),
+        marginBottom: VSCALE(1),
+      },
+      tabBarItemStyle: {
+        paddingHorizontal: SCALE(2),
+        minHeight: VSCALE(45),
+      },
+      tabBarIconStyle: {
+        marginBottom: VSCALE(2),
+      },
+    };
+  }}
+><Tab.Screen
+  name="DashboardTab"
+  component={DashboardStack}
+  options={{ tabBarLabel: 'Home' }}
+  listeners={({ navigation }) => ({
+    tabPress: e => {
+      // Always take Home tab to the Dashboard screen inside its stack
+      navigation.dispatch(
+        CommonActions.navigate({
+          name: 'DashboardTab',
+          params: { screen: 'Dashboard' },
+        })
+      );
+    },
+  })}
+/>
+            <Tab.Screen
+              name="Redeem"
+              component={Redeem}
+              options={{ tabBarLabel: 'Redeem' }}
+            />
+            <Tab.Screen
+              name="Profile"
+              component={Profile}
+              options={{ tabBarLabel: 'My Account' }}
+            />
+            <Tab.Screen
+              name="Help"
+              component={Help}
+              options={{ tabBarLabel: 'Help' }}
+            />
+          </Tab.Navigator>
+        </View>
+
+        <Animated.View
+          style={{ transform: [{ translateY: footerTranslateY }] }}
+        >
+          <Footer />
+        </Animated.View>
+      </View>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  iconContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  icon: {
+    resizeMode: 'contain',
+  },
+  container: {
+    flex: 1,
+    backgroundColor: 'white',
+  },
+  mainContainer: {
+    flex: 1,
+    backgroundColor: 'white',
+  },
+  tabContainer: {
+    flex: 1,
+  },
+});
+
+export default MainTabNavigator;