Skip to content

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

nambah di tab bar try catch

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