Custom tab bars in React Native - Mini App: Build & Ship

Build: CustomTabBarScreen

A screen with a custom tab bar at the bottom that lets users switch between Home, Search, and Profile tabs. The selected tab is highlighted.

Target UI

┌─────────────────────────────┐
│                             │
│        [Content Area]        │
│                             │
│                             │
│                             │
│                             │
│                             │
│                             │
├─────────────────────────────┤
│ Home | Search | Profile     │
│  (icon) (icon)  (icon)      │
│  [selected tab highlighted] │
└─────────────────────────────┘

Create a bottom tab bar with three tabs: Home, Search, Profile

Each tab shows an icon and label

Highlight the selected tab with a different color

Switch content area text to match selected tab

Use TouchableOpacity for tab buttons

Manage selected tab state with React useState hook

Starter Code

React Native

import React, { useState } from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';

export default function CustomTabBarScreen() {
  const [selectedTab, setSelectedTab] = useState('Home');

  return (
    <View style={styles.container}>
      {/* TODO: Add content area showing selected tab name */}

      {/* TODO: Add custom tab bar with 3 tabs */}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'space-between',
    paddingBottom: 20
  }
});

Task 1

Task 2

Task 3

Task 4

Task 5

Solution

React Native

import React, { useState } from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';

export default function CustomTabBarScreen() {
  const [selectedTab, setSelectedTab] = useState('Home');

  const tabs = [
    { key: 'Home', label: 'Home', icon: '🏠' },
    { key: 'Search', label: 'Search', icon: '🔍' },
    { key: 'Profile', label: 'Profile', icon: '👤' }
  ];

  return (
    <View style={styles.container}>
      <View style={styles.content}>
        <Text style={styles.contentText}>You are on the {selectedTab} tab</Text>
      </View>

      <View style={styles.tabBar}>
        {tabs.map(tab => {
          const isSelected = selectedTab === tab.key;
          return (
            <TouchableOpacity
              key={tab.key}
              style={styles.tabButton}
              onPress={() => setSelectedTab(tab.key)}
              accessibilityRole="button"
              accessibilityState={{ selected: isSelected }}
              accessibilityLabel={`${tab.label} tab`}
            >
              <Text style={[styles.icon, isSelected && styles.selected]}>{tab.icon}</Text>
              <Text style={[styles.label, isSelected && styles.selected]}>{tab.label}</Text>
            </TouchableOpacity>
          );
        })}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'space-between',
    paddingBottom: 20,
    backgroundColor: '#fff'
  },
  content: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  contentText: {
    fontSize: 24,
    color: '#333'
  },
  tabBar: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    borderTopWidth: 1,
    borderTopColor: '#ccc',
    paddingVertical: 10,
    backgroundColor: '#f9f9f9'
  },
  tabButton: {
    alignItems: 'center'
  },
  icon: {
    fontSize: 24,
    color: '#666'
  },
  label: {
    fontSize: 12,
    color: '#666',
    marginTop: 4
  },
  selected: {
    color: '#007AFF',
    fontWeight: '600'
  }
});

This solution uses React Native's useState hook to keep track of the selected tab. We define an array of tabs with keys, labels, and emoji icons for simplicity.

The content area shows a text that updates based on the selected tab.

The custom tab bar is a View with three TouchableOpacity buttons. Each button shows an icon and label. When a tab is selected, its icon and label change color to blue (#007AFF) and become bold to highlight it.

Accessibility roles and states are added for better screen reader support.

This approach is simple and clear for beginners to understand how to build a custom tab bar without external libraries.

Final Result

Completed Screen

┌─────────────────────────────┐
│                             │
│   You are on the Home tab   │
│                             │
│                             │
│                             │
│                             │
│                             │
│                             │
├─────────────────────────────┤
│ 🏠 Home | 🔍 Search | 👤 Profile │
│  [blue & bold]   normal    normal │
└─────────────────────────────┘

Tapping a tab changes the content text to 'You are on the [TabName] tab'.

The tapped tab's icon and label turn blue and bold to show selection.

Other tabs revert to normal gray color.

Stretch Goal

Add a smooth fade animation when switching tabs content

💡 Hint

Use React Native's Animated API or the LayoutAnimation module to animate the content text opacity on tab change