Challenge - 5 Problems
Custom Tab Bar Master
Get all challenges correct to earn this badge!
Test your skills under time pressure!
❓ ui_behavior
intermediate2:00remaining
Custom Tab Bar Button Behavior
You have a custom tab bar in React Native. Which option correctly changes the tab when a custom button is pressed?
React Native
function CustomTabBar({ state, navigation }) {
return (
<View style={{ flexDirection: 'row' }}>
{state.routes.map((route, index) => (
<TouchableOpacity
key={route.key}
onPress={() => {
// What should go here?
}}
>
<Text>{route.name}</Text>
</TouchableOpacity>
))}
</View>
);
}Attempts:
2 left
💡 Hint
Think about how to switch tabs by name using navigation.
✗ Incorrect
To switch tabs in a tab navigator, you use navigation.navigate with the route name. push is for stack navigation, goBack and popToTop don't switch tabs.
📝 Syntax
intermediate2:00remaining
Correct JSX for Custom Tab Bar
Which option correctly renders a custom tab bar with accessible buttons in React Native?
React Native
function CustomTabBar({ state, navigation }) {
return (
<View style={{ flexDirection: 'row' }}>
{state.routes.map((route, index) => (
// Fill in the correct JSX here
))}
</View>
);
}Attempts:
2 left
💡 Hint
TouchableOpacity supports onPress and accessibilityRole for buttons.
✗ Incorrect
TouchableOpacity with accessibilityRole="button" and onPress as a function is correct. View does not handle onPress. onPress={navigation.navigate(route.name)} calls immediately, must be a function. Button requires title prop but onPress must be a function.
❓ lifecycle
advanced2:00remaining
Updating Custom Tab Bar on Navigation State Change
In a custom tab bar component, which React hook ensures the tab bar updates when the navigation state changes?
React Native
function CustomTabBar({ state, navigation }) {
// Which hook to use here?
return <View>{/* tab buttons */}</View>;
}Attempts:
2 left
💡 Hint
You want to run code when the selected tab index changes.
✗ Incorrect
useEffect with state.index in dependency array runs code when the active tab changes. useMemo and useCallback with empty arrays run only once. useRef does not accept dependencies.
advanced
2:00remaining
Handling Tab Press with Custom Behavior
You want to run custom code before switching tabs in a custom tab bar. Which option correctly intercepts the tab press event?
React Native
function CustomTabBar({ state, navigation }) {
return (
<View style={{ flexDirection: 'row' }}>
{state.routes.map((route, index) => {
const isFocused = state.index === index;
return (
<TouchableOpacity
key={route.key}
onPress={() => {
// Custom code here
}}
>
<Text>{route.name}</Text>
</TouchableOpacity>
);
})}
</View>
);
}Attempts:
2 left
💡 Hint
Emit tabPress event and check if default was prevented before navigating.
✗ Incorrect
You emit a tabPress event with canPreventDefault: true. If event.defaultPrevented is false, you navigate. This allows other listeners to cancel navigation.
🧠 Conceptual
expert2:00remaining
Why Use Custom Tab Bars Instead of Default?
What is the main reason developers create custom tab bars in React Native apps?
Attempts:
2 left
💡 Hint
Think about customization needs beyond what default tab bars offer.
✗ Incorrect
Custom tab bars let developers design unique looks and behaviors. Default tab bars support navigation and accessibility but have limited styling. Custom tab bars do not inherently improve performance or accessibility automatically.