Skip to content

C
clone_excelso
Commit f51b347a authored by Wahyu Adjie Prasetyo's avatar Wahyu Adjie Prasetyo
Browse files
Options

Auth js

parent 67c55620
Hide whitespace changes
Inline Side-by-side
Showing with 125 additions and 108 deletions
view/Auth.js
View file @ f51b347a
......@@ -55,6 +55,7 @@ import WelcomeLog from './WelcomeLog';
import RatingOrder from './RatingOrder';
import UseBalance from './UseBalance';
import PaymentCode from './PaymentCode';
import UpdateVersion from './UpdateVersion';
enableScreens();
......@@ -70,8 +71,8 @@ const BottomNavigation = ({ state, descriptors, navigation }) => {
options.tabBarLabel !== undefined
? options.tabBarLabel
: options.title !== undefined
? options.title
: route.name;
? options.title
: route.name;
const isFocused = state.index === index;
......@@ -93,7 +94,7 @@ const BottomNavigation = ({ state, descriptors, navigation }) => {
target: route.key,
});
};
let icon = require('../assets/icon/icon-home.png')
if (label === 'HOME') {
icon = require('../assets/icon/icon-home.png')
......@@ -118,11 +119,11 @@ const BottomNavigation = ({ state, descriptors, navigation }) => {
testID={options.tabBarTestID}
onPress={onPress}
onLongPress={onLongPress}
style={{ flex: 1, alignItems: 'center', backgroundColor: 'white', borderTopWidth:1, borderTopColor: '#f0f0f0' }}
style={{ flex: 1, alignItems: 'center', backgroundColor: 'white', borderTopWidth: 1, borderTopColor: '#f0f0f0' }}
>
<Image source={icon} style={{ height: 50, width: 50, tintColor: isFocused ? '#CFB368' : 'gray'}} />
<Image source={icon} style={{ height: 50, width: 50, tintColor: isFocused ? '#CFB368' : 'gray' }} />
</TouchableOpacity>
);
})}
......@@ -130,72 +131,72 @@ const BottomNavigation = ({ state, descriptors, navigation }) => {
)
}
function HomePage({navigation}) {
function HomePage({ navigation }) {
return (
<Tab.Navigator tabBar={props => <BottomNavigation {...props}/>}
// screenOptions={({ route }) => ({
// tabBarIcon: ({ focused, color, size }) => {
// let iconName;
// if (route.name === 'HOME') {
// iconName = focused ? 'ios-home' : 'ios-home'
// } else if (route.name === 'MENU') {
// iconName = focused ? 'ios-paper' : 'ios-paper';
// } else if (route.name === 'REWARDS') {
// iconName = focused ? 'ios-gift' : 'ios-gift';
// } else if (route.name === 'ORDER') {
// iconName = focused ? 'md-cart' : 'md-cart';
// } else if (route.name === 'OUTLETS') {
// iconName = focused ? 'ios-cafe' : 'ios-cafe';
// } else if (route.name === 'ACCOUNT') {
// iconName = focused ? 'account' : 'account';
// return <MaterialCommunityIcons name={iconName} size={size} color={color} />
// }
// // You can return any component that you like here!
// return <Ionicons name={iconName} size={size} color={color} />;
// },
// })}
// screenOptions={({ route }) => ({
// tabBarIcon: ({ focused, color, size }) => {
// let iconName;
// console.log('name', route.name)
// console.log('focused', focused)
// console.log('color', color)
// console.log('size', size)
// // console.log('nav', navigation)
// if (route.name === 'HOME') {
// // iconName = focused ? 'ios-home' : 'ios-home'
// return <Image source={require('../assets/icon/icon-home.png')} style={{ height: 50, width: 50 }} tintColor={focused ? '#CFB368' : 'gray'} />
// } else if (route.name === 'MENU') {
// // iconName = focused ? 'ios-paper' : 'ios-paper';
// return <Image source={require('../assets/icon/icon-menu.png')} style={{ height: 50, width: 50 }} tintColor={focused ? '#CFB368' : 'gray'} />
// } else if (route.name === 'REWARDS') {
// // iconName = focused ? 'ios-gift' : 'ios-gift';
// return <Image source={require('../assets/icon/icon-rewards.png')} style={{ height: 50, width: 50 }} tintColor={focused ? '#CFB368' : 'gray'} />
// } else if (route.name === 'ORDER') {
// // iconName = focused ? 'md-cart' : 'md-cart';
// return <Image source={require('../assets/icon/icon-order.png')} style={{ height: 50, width: 50 }} tintColor={focused ? '#CFB368' : 'gray'} />
// } else if (route.name === 'OUTLETS') {
// // iconName = focused ? 'ios-cafe' : 'ios-cafe';
// return <Image source={require('../assets/icon/icon-outlets.png')} style={{ height: 50, width: 50 }} tintColor={focused ? '#CFB368' : 'gray'} />
// } else if (route.name === 'ACCOUNT') {
// // iconName = focused ? 'account' : 'account';
// return <Image source={require('../assets/icon/icon-account.png')} style={{ height: 50, width: 50 }} tintColor={focused ? '#CFB368' : 'gray'} />
// }
// // You can return any component that you like here!
// return <Ionicons name={iconName} size={size} color={color} />;
// },
// })}
// tabBarOptions={{ activeTintColor: '#CFB368', inactiveTintColor: 'gray', showLabel: false }}
<Tab.Navigator tabBar={props => <BottomNavigation {...props} />}
// screenOptions={({ route }) => ({
// tabBarIcon: ({ focused, color, size }) => {
// let iconName;
// if (route.name === 'HOME') {
// iconName = focused ? 'ios-home' : 'ios-home'
// } else if (route.name === 'MENU') {
// iconName = focused ? 'ios-paper' : 'ios-paper';
// } else if (route.name === 'REWARDS') {
// iconName = focused ? 'ios-gift' : 'ios-gift';
// } else if (route.name === 'ORDER') {
// iconName = focused ? 'md-cart' : 'md-cart';
// } else if (route.name === 'OUTLETS') {
// iconName = focused ? 'ios-cafe' : 'ios-cafe';
// } else if (route.name === 'ACCOUNT') {
// iconName = focused ? 'account' : 'account';
// return <MaterialCommunityIcons name={iconName} size={size} color={color} />
// }
// // You can return any component that you like here!
// return <Ionicons name={iconName} size={size} color={color} />;
// },
// })}
// screenOptions={({ route }) => ({
// tabBarIcon: ({ focused, color, size }) => {
// let iconName;
// console.log('name', route.name)
// console.log('focused', focused)
// console.log('color', color)
// console.log('size', size)
// // console.log('nav', navigation)
// if (route.name === 'HOME') {
// // iconName = focused ? 'ios-home' : 'ios-home'
// return <Image source={require('../assets/icon/icon-home.png')} style={{ height: 50, width: 50 }} tintColor={focused ? '#CFB368' : 'gray'} />
// } else if (route.name === 'MENU') {
// // iconName = focused ? 'ios-paper' : 'ios-paper';
// return <Image source={require('../assets/icon/icon-menu.png')} style={{ height: 50, width: 50 }} tintColor={focused ? '#CFB368' : 'gray'} />
// } else if (route.name === 'REWARDS') {
// // iconName = focused ? 'ios-gift' : 'ios-gift';
// return <Image source={require('../assets/icon/icon-rewards.png')} style={{ height: 50, width: 50 }} tintColor={focused ? '#CFB368' : 'gray'} />
// } else if (route.name === 'ORDER') {
// // iconName = focused ? 'md-cart' : 'md-cart';
// return <Image source={require('../assets/icon/icon-order.png')} style={{ height: 50, width: 50 }} tintColor={focused ? '#CFB368' : 'gray'} />
// } else if (route.name === 'OUTLETS') {
// // iconName = focused ? 'ios-cafe' : 'ios-cafe';
// return <Image source={require('../assets/icon/icon-outlets.png')} style={{ height: 50, width: 50 }} tintColor={focused ? '#CFB368' : 'gray'} />
// } else if (route.name === 'ACCOUNT') {
// // iconName = focused ? 'account' : 'account';
// return <Image source={require('../assets/icon/icon-account.png')} style={{ height: 50, width: 50 }} tintColor={focused ? '#CFB368' : 'gray'} />
// }
// // You can return any component that you like here!
// return <Ionicons name={iconName} size={size} color={color} />;
// },
// })}
// tabBarOptions={{ activeTintColor: '#CFB368', inactiveTintColor: 'gray', showLabel: false }}
>
<Tab.Screen name="HOME" component={Home} />
......@@ -282,7 +283,7 @@ class Auth extends React.Component {
textAlign: 'center'
}, title: 'EMAIL CONFIRMATION'
}} />
<Stack.Screen name="Login" component={Login} options={{headerShown:false}} />
<Stack.Screen name="Login" component={Login} options={{ headerShown: false }} />
<Stack.Screen name="LoginWelcome" component={WelcomeLog} options={{
headerShown: false,
}} />
......@@ -388,19 +389,19 @@ class Auth extends React.Component {
title: 'TRANSFER BALANCE'
}} />
<Stack.Screen name="Register" component={Register} />
<Stack.Screen name="Email Confirmation" component={EmailConfirmation} options={{
headerStyle: { backgroundColor: '#CFB368' },
headerTitleContainerStyle: { alignContent: 'center' },
headerTitleAlign: 'center',
headerTintColor: '#fff',
headerTitleStyle: {
alignSelf: 'center',
fontFamily: 'Gotham-Black',
fontSize: 20,
color: 'white',
textAlign: 'center'
}, title: 'EMAIL CONFIRMATION'
}} />
<Stack.Screen name="Email Confirmation" component={EmailConfirmation} options={{
headerStyle: { backgroundColor: '#CFB368' },
headerTitleContainerStyle: { alignContent: 'center' },
headerTitleAlign: 'center',
headerTintColor: '#fff',
headerTitleStyle: {
alignSelf: 'center',
fontFamily: 'Gotham-Black',
fontSize: 20,
color: 'white',
textAlign: 'center'
}, title: 'EMAIL CONFIRMATION'
}} />
<Stack.Screen name="Upgrade Premium" component={UpgradePremium}
options={{
headerStyle: { backgroundColor: '#CFB368' },
......@@ -536,6 +537,22 @@ class Auth extends React.Component {
}, title: 'RATING ORDER'
}}
/>
<Stack.Screen name="UpdateVersion" component={UpdateVersion}
options={{
headerStyle: { backgroundColor: '#CFB368' },
headerTitleContainerStyle: { alignContent: 'center' },
headerTitleAlign: 'center',
headerTintColor: '#fff',
headerTitleStyle: {
alignSelf: 'center',
fontFamily: 'Gotham-Black',
fontSize: 20,
color: 'white',
textAlign: 'center'
}, title: 'UPDATE VERSION'
}}
/>
<Stack.Screen name="UseBalance" component={UseBalance}
options={{
headerStyle: { backgroundColor: '#CFB368' },
......@@ -624,7 +641,7 @@ class Auth extends React.Component {
<Stack.Screen name="Confirm Mobile" component={ConfirmMobile} />
<Stack.Screen name="Balance" component={Balance} />
<Stack.Screen name="Redeem Code" component={RedeemCode}
options={({ navigation }) => ({
options={({ navigation }) => ({
headerStyle: { backgroundColor: "#CFB368" },
headerBackTitleStyle: { color: 'white' },
headerTintColor: '#fff',
......@@ -667,17 +684,17 @@ class Auth extends React.Component {
{/* <Stack.Screen name="Email Confirmation" component={EmailConfirmation} /> */}
<Stack.Screen name="News Detail" component={NewsDetail} options={{
headerStyle: { backgroundColor: "#CFB368" },
headerBackTitleStyle: { color: 'white' },
headerTintColor: '#fff',
headerTitleAlign: 'center',
headerTitleStyle: {
fontFamily: 'Gotham-Black',
color: 'white',
fontSize: 20,
},
title: 'NEWS DETAIL'
}} />
headerStyle: { backgroundColor: "#CFB368" },
headerBackTitleStyle: { color: 'white' },
headerTintColor: '#fff',
headerTitleAlign: 'center',
headerTitleStyle: {
fontFamily: 'Gotham-Black',
color: 'white',
fontSize: 20,
},
title: 'NEWS DETAIL'
}} />
<Stack.Screen name="CONFIRM YOUR ORDER" component={MenuConfirmation}
options={{
headerStyle: { backgroundColor: "#CFB368" },
......@@ -706,17 +723,17 @@ class Auth extends React.Component {
title: 'REGISTER'
}} />
<Stack.Screen name="TopUpInfo" component={TopUpInfo} options={{
headerStyle: { backgroundColor: "#CFB368" },
headerBackTitleStyle: { color: 'white' },
headerTintColor: '#fff',
headerTitleAlign: 'center',
headerTitleStyle: {
fontFamily: 'Gotham-Black',
color: 'white',
fontSize: 20,
},
title: 'TOPUP INFO '
}} />
headerStyle: { backgroundColor: "#CFB368" },
headerBackTitleStyle: { color: 'white' },
headerTintColor: '#fff',
headerTitleAlign: 'center',
headerTitleStyle: {
fontFamily: 'Gotham-Black',
color: 'white',
fontSize: 20,
},
title: 'TOPUP INFO '
}} />
<Stack.Screen name="Reward Detail" component={RewardDetail}
options={{
headerStyle: { backgroundColor: "#CFB368" },
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment