76 lines
3.1 KiB
JavaScript
76 lines
3.1 KiB
JavaScript
import * as React from 'react';
|
|
import { Platform, TouchableOpacity, Text } from 'react-native';
|
|
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
|
|
import Elements from '../../components/elements.js';
|
|
import Theme from '../../components/theme.style.js';
|
|
|
|
import HomeScreen from './home.js';
|
|
import PromosScreen from './promo/';
|
|
// import PayatpumpScreen from './../payatpump'; //disable temporarily
|
|
import StationsScreen from './station/';
|
|
import RewardsScreen from './rewards.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) => {
|
|
return (
|
|
<TouchableOpacity onPress={() => navigation.navigation.navigate('Payatpump')}
|
|
style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
|
|
<Elements.icon name={'activepayatpump'} size={45} resizeMode={'contain'} marginBottom={-4} />
|
|
<Text style={{ fontSize: 11, color: '#898989', marginBottom: 8 }}>Pay at Pump</Text>
|
|
</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,
|
|
}
|
|
}
|
|
|
|
export default function App(navigation) {
|
|
|
|
return (
|
|
<Tab.Navigator initialRouteName="Home" backBehavior="initialRoute" screenOptions={screenOptions} tabBarOptions={tabBarOptions} >
|
|
<Tab.Screen name="Home" component={HomeScreen} 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>
|
|
);
|
|
} |