Custom tab bars in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the component needed to create a custom tab bar in React Native.

React Native

import { [1] } from 'react-native';

Drag options to blanks, or click blank then click option'

AText

BButton

CView

DTabBar

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing TabBar which is not a React Native core component.

Using Button or Text which are not containers.

The View component is used as a container to build custom tab bars in React Native.

2fill in blank

medium

Complete the code to define a functional component named CustomTabBar.

React Native

const CustomTabBar = ([1]) => {
  return null;
};

Drag options to blanks, or click blank then click option'

Aprops

Bstate

Cnavigation

Dparams

Attempts:

3 left

💡 Hint

Common Mistakes

Using state or navigation as the argument instead of props.

Functional components receive props as their argument to access passed data.

3fill in blank

hard

Fix the error in the code to render a tab button with a label from props.

React Native

return (
  <View>
    <Text>[1]</Text>
  </View>
);

Drag options to blanks, or click blank then click option'

Aprops.label

Bprops.title

Clabel

Dthis.props.label

Attempts:

3 left

💡 Hint

Common Mistakes

Using this.props.label which is for class components.

Using label without props prefix.

Inside a functional component, props are accessed directly as props.label.

4fill in blank

hard

Fill both blanks to handle a press event on the tab button.

React Native

<TouchableOpacity onPress=[1]>
  <Text>[2]</Text>
</TouchableOpacity>

Drag options to blanks, or click blank then click option'

Aprops.onPress

Bprops.label

Cprops.title

DhandlePress

Attempts:

3 left

💡 Hint

Common Mistakes

Using a local function handlePress without defining it.

Using props.title instead of props.label for text.

The onPress event is handled by props.onPress, and the label text is props.label.

5fill in blank

hard

Fill all three blanks to create a custom tab bar that maps over routes and renders buttons.

React Native

const CustomTabBar = ({ state, descriptors, navigation }) => {
  return (
    <View style={{ flexDirection: '[1]' }}>
      {state.routes.map((route, index) => {
        const { options } = descriptors[route.key];
        const label = options.tabBarLabel ?? options.title ?? route.name;
        const isFocused = state.index === index;

        const onPress = () => {
          navigation.navigate(route.name);
        };

        return (
          <TouchableOpacity
            key={route.key}
            onPress={onPress}
            style={{ flex: 1, alignItems: '[2]' }}
          >
            <Text style={{ color: isFocused ? '[3]' : '#222' }}>
              {label}
            </Text>
          </TouchableOpacity>
        );
      })}
    </View>
  );
};

Drag options to blanks, or click blank then click option'

Arow

Bcenter

Cblue

Dcolumn

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'column' for flexDirection which stacks tabs vertically.

Using wrong alignment or color values.

The tab bar arranges buttons in a row. Buttons align items to center. The focused tab text color is blue.