Custom tab bars in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

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>
  );
}

A navigation.goBack(route.name)

B navigation.navigate(route.name)

C navigation.push(route.name)

D navigation.popToTop(route.name)

💡 Hint

Think about how to switch tabs by name using navigation.

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

intermediate

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>
  );
}

A <Button key={route.key} title={route.name} onPress={navigation.navigate(route.name)} />

B <View key={route.key} onPress={() => navigation.navigate(route.name)}><Text>{route.name}</Text></View>

C <TouchableOpacity key={route.key} accessibilityRole="button" onPress={() => navigation.navigate(route.name)}><Text>{route.name}</Text></TouchableOpacity>

D <TouchableHighlight key={route.key} onPress={navigation.navigate(route.name)}><Text>{route.name}</Text></TouchableHighlight>

💡 Hint

TouchableOpacity supports onPress and accessibilityRole for buttons.

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

advanced

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>;
}

A useEffect(() => { /* update UI */ }, [state.index])

B useRef(() => { /* update UI */ }, [state.index])

C useCallback(() => { /* update UI */ }, [])

D useMemo(() => { /* update UI */ }, [])

💡 Hint

You want to run code when the selected tab index changes.

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.

❓ navigation

advanced

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>
  );
}

A navigation.goBack(); navigation.emit({ type: 'tabPress', target: route.key });

B navigation.navigate(route.name); navigation.emit({ type: 'tabPress', target: route.key });

C navigation.dispatch({ type: 'tabPress', target: route.key }); navigation.navigate(route.name);

D const event = navigation.emit({ type: 'tabPress', target: route.key, canPreventDefault: true }); if (!event.defaultPrevented) navigation.navigate(route.name);

💡 Hint

Emit tabPress event and check if default was prevented before navigating.

You emit a tabPress event with canPreventDefault: true. If event.defaultPrevented is false, you navigate. This allows other listeners to cancel navigation.

🧠 Conceptual

expert

Why Use Custom Tab Bars Instead of Default?

What is the main reason developers create custom tab bars in React Native apps?

A To fully control the tab bar appearance and behavior beyond default styles

B Because default tab bars do not support navigation

C To improve app performance by avoiding built-in components

D Because custom tab bars automatically handle accessibility without extra work

💡 Hint

Think about customization needs beyond what default tab bars offer.

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.