unioil-loyalty-rn-app/app/screens/main/tab.js

import React from 'react';
import { Platform, TouchableOpacity, View, Text } from 'react-native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator } from '@react-navigation/stack';
import { useNavigation } from '@react-navigation/native';
import Theme from '../../components/theme.style';
import Icon from '../../components/icons';
import DB from '../../components/storage/';
import Elements from '../../components/elements.js';

import HomeScreen from './home.js';
import PromosScreen from './promo/';
import IQAir from '../iqair';
import PayatpumpScreen from './../payatpump'; //disable temporarily
import StationsScreen from './station/';
import RewardsScreen from './rewards.js';
import { useDispatch, useSelector } from 'react-redux';
import { closeModal, openModal } from '../../redux/actions/AlertActions.js';

const Tab = createBottomTabNavigator();

const screenOptions = ({ route }) => ({
  tabBarIcon: ({ focused, color, size }) => {
    let iconName;    
    if (route.name === 'Home') {
      iconName = focused ? 'activehome' : 'inactivehome';
      return <Elements.icon name={iconName} size={size} color={color} />
    } else if (route.name === 'Promos') {
      iconName = focused ? 'activepromos' : 'inactivepromos';
      return <Elements.icon name={iconName} size={size} color={color} />
    } else if(route.name === 'Payatpump') {
      iconName = focused ? 'activepayatpump' : 'activepayatpump';
      return <Elements.icon name={iconName} size={45} color={color} resizeMode={'contain'} marginBottom={5} />
    } else if (route.name === 'Stations') {
      iconName = focused ? 'activestation' : 'inactivestation';
      return <Elements.icon name={iconName} size={size} color={color} />
    } else if (route.name === 'Rewards') {
      iconName = focused ? 'activerewards' : 'inactiverewards';
      return <Elements.icon name={iconName} size={size} color={color} />
    }
  },
});

const PayatpumpTab = (navigation) => {
  const app_theme = useSelector(state => state.appThemeReducer.theme);
  const dispatch = useDispatch();

  const noEmailContainer = () => {
    const close = () => {
      dispatch(closeModal());
    }

    const proceed = () => {
      navigation.navigation.navigate('Payatpump');
      dispatch(closeModal());
    }

    const update = () => {
      dispatch(closeModal());
    }

    return (
      <View style={{paddingVertical: 10, paddingHorizontal: 10}}>
        <TouchableOpacity onPress={close} style={{ marginBottom: 10, width: 20, height: 20, alignSelf: 'flex-end', borderWidth: 1, borderColor: Theme.colors.primary, borderRadius: 30, alignItems: 'center', justifyContent: 'center' }} >
          <Icon.Entypo name='cross' size={20} style={{color: Theme.colors.primary, bottom: 1, right: 0.5 }} />
        </TouchableOpacity>
        <Text numberOfLines={1} adjustsFontSizeToFit style={{fontSize: 15}}>No Email address is registered in your Account.</Text>
        <Text numberOfLines={1} adjustsFontSizeToFit style={{fontSize: 15, marginBottom: 20}}>Update your Profile to receive an Email receipt.</Text>

        <TouchableOpacity onPress={update} style={{marginBottom: 5, alignSelf: 'center', width: 200, alignItems: 'center', borderRadius: 10, borderWidth: 1, borderColor: Theme.colors.primary, paddingVertical: 5}}>
          <Text style={{color: Theme.colors.primary, fontSize: 15}}>Update Profile</Text>
        </TouchableOpacity>

        <TouchableOpacity onPress={proceed} style={{marginBottom: 15, alignSelf: 'center', width: 200, alignItems: 'center', backgroundColor: Theme.colors.primary, borderRadius: 10, borderWidth: 1, borderColor: Theme.colors.primary, paddingVertical: 5}}>
          <Text style={{ color: Theme.colors.white, fontSize: 15}}>Proceed without Updating</Text>
        </TouchableOpacity>
      </View>
    )
  }

  const onPress = async () => {
    const isGuest = await DB.get("is_guest");
    const user = await DB.profile();

    if(isGuest) {
      return dispatch(openModal({
        open: true,
        title: "Warning",
        body: `You won't be able to access some\nof the pages unless you will enroll your\ncard or login.`,
        yesText: "Okay",
        yesButtonOnly: true,
        theme: app_theme
      }));
    }; 

    if(!user.data.email) {
      return dispatch(openModal({
        open: true,
        children: noEmailContainer(),
        theme: app_theme
      }));
    }

    navigation.navigation.navigate('Payatpump');
  }

  return (
    <TouchableOpacity onPress={onPress}
      style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Elements.icon name={'activepayatpump'} size={45} resizeMode={'contain'} marginBottom={-4} />
    </TouchableOpacity>
  )
}

const payatpumpOption = (navigation) => {
  return {
    tabBarLabel: 'Pay at Pump',
    tabBarButton: () => PayatpumpTab(navigation)
  }
}

const tabBarOptions = {
  activeTintColor: '#E74610',
  inactiveTintColor: 'gray',
  style: {
    borderColor: 'transparent',
    border: 0,
    elevation: 0,
    paddingTop: Platform.OS == 'ios' ? 5 : 5,
  }
}

const Home = () => {
  const navigation = useNavigation();
  const Stack = createStackNavigator();
  
  const navOptions = () => ({
    headerShown: false
  })
  
  return (
    <Stack.Navigator initialRouteName="Home"  > 
      <Stack.Screen name="Home" key="Home" component={HomeScreen} options={navOptions}  />
      <Stack.Screen name="IQAir" key="IQAir" component={IQAir} initialParams={{navigation: navigation}} options={navOptions} />
    </Stack.Navigator>
  )
}

export default function App(navigation) {
  return (
      <Tab.Navigator initialRouteName="Home" backBehavior="initialRoute" screenOptions={screenOptions} tabBarOptions={tabBarOptions} >
        <Tab.Screen name="Home" component={Home} options={{ tabBarLabel: 'Home', headerShown: false }} />
        <Tab.Screen name="Promos" component={PromosScreen} options={{ tabBarLabel: 'Promos', headerShown: false }} />
        {/* <Tab.Screen name="Payatpump" component={PayatpumpScreen} options={payatpumpOption(navigation)} /> */}
        <Tab.Screen name="Stations" component={StationsScreen} options={{ tabBarLabel: 'Stations', headerShown: false }} />
        <Tab.Screen name="Rewards" component={RewardsScreen} options={{ tabBarLabel: 'Rewards', headerShown: false }} />
      </Tab.Navigator>
  );
}