Master React Native Segment Control

Last update: 2025-04-24

Type

Quick Win

Membership

🆓

Tech

TypeScript

The Segment Control component is a versatile UI element in React Native that allows users to switch between different views or options. It’s particularly useful for filtering content or toggling between different states in your app.

In this guide, you’ll learn everything about implementing and customizing the Segment Control with practical examples.

Basic Segment Control Usage

Let’s start by installing the required package:

Command

npx expo install @react-native-segmented-control/segmented-control

Now let’s look at a basic implementation:

import React, { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import SegmentedControl from '@react-native-segmented-control/segmented-control';

export default function App() {
	const [selectedIndex, setSelectedIndex] = useState(0);

	return (
		<View style={styles.container}>
			<SegmentedControl
				values={['First', 'Second', 'Third']}
				selectedIndex={selectedIndex}
				onChange={(event) => {
					setSelectedIndex(event.nativeEvent.selectedSegmentIndex);
				}}
			/>

			<View style={styles.content}>
				{selectedIndex === 0 && <Text>First Tab Content</Text>}
				{selectedIndex === 1 && <Text>Second Tab Content</Text>}
				{selectedIndex === 2 && <Text>Third Tab Content</Text>}
			</View>
		</View>
	);
}

const styles = StyleSheet.create({
	container: {
		flex: 1,
		padding: 16
	},
	content: {
		marginTop: 20
	}
});

In this example:

We import the SegmentedControl component
Set up state to track the selected index
Render different content based on the selected segment
Handle segment changes with the onChange event

Customizing the Segment Control

The Segment Control can be customized in various ways:

import React, { useState } from 'react';
import { View, StyleSheet } from 'react-native';
import SegmentedControl from '@react-native-segmented-control/segmented-control';

export default function App() {
	const [selectedIndex, setSelectedIndex] = useState(0);

	return (
		<View style={styles.container}>
			<SegmentedControl
				values={['Option 1', 'Option 2', 'Option 3']}
				selectedIndex={selectedIndex}
				onChange={(event) => {
					setSelectedIndex(event.nativeEvent.selectedSegmentIndex);
				}}
				// Customization props
				tintColor="#007AFF"
				backgroundColor="#f8f8f8"
				fontStyle={{ color: '#333' }}
				activeFontStyle={{ color: '#fff' }}
				style={{ height: 40 }}
				enabled={true}
			/>
		</View>
	);
}

const styles = StyleSheet.create({
	container: {
		flex: 1,
		padding: 16
	}
});

Key customization options include:

tintColor: Color of the selected segment
backgroundColor: Background color of the control
fontStyle: Style for unselected segment text
activeFontStyle: Style for selected segment text
enabled: Enable/disable the control
style: Container style for the control

Practical Example: Content Filter

Here’s a practical example using Segment Control to filter a list of items:

import React, { useState } from 'react';
import { View, Text, StyleSheet, FlatList } from 'react-native';
import SegmentedControl from '@react-native-segmented-control/segmented-control';

const data = {
	all: [
		{ id: '1', title: 'Item 1' },
		{ id: '2', title: 'Item 2' },
		{ id: '3', title: 'Item 3' }
	],
	active: [
		{ id: '1', title: 'Item 1' },
		{ id: '2', title: 'Item 2' }
	],
	completed: [{ id: '3', title: 'Item 3' }]
};

export default function App() {
	const [selectedIndex, setSelectedIndex] = useState(0);
	const segments = ['All', 'Active', 'Completed'];

	const getFilteredData = () => {
		switch (selectedIndex) {
			case 0:
				return data.all;
			case 1:
				return data.active;
			case 2:
				return data.completed;
			default:
				return data.all;
		}
	};

	const renderItem = ({ item }) => (
		<View style={styles.item}>
			<Text>{item.title}</Text>
		</View>
	);

	return (
		<View style={styles.container}>
			<SegmentedControl
				values={segments}
				selectedIndex={selectedIndex}
				onChange={(event) => {
					setSelectedIndex(event.nativeEvent.selectedSegmentIndex);
				}}
				style={styles.segment}
			/>

			<FlatList
				data={getFilteredData()}
				renderItem={renderItem}
				keyExtractor={(item) => item.id}
				style={styles.list}
			/>
		</View>
	);
}

const styles = StyleSheet.create({
	container: {
		flex: 1,
		padding: 16
	},
	segment: {
		marginBottom: 20
	},
	list: {
		flex: 1
	},
	item: {
		padding: 15,
		borderBottomWidth: 1,
		borderBottomColor: '#eee'
	}
});

This example demonstrates:

Integration with FlatList
Filtering data based on segment selection
Proper styling and layout

Best Practices

State Management
- Keep segment state in the parent component
- Use meaningful segment names
- Handle state changes efficiently
User Experience
- Provide immediate feedback on selection
- Keep segment labels concise
- Ensure touch targets are large enough
Performance
- Memoize filtered data when necessary
- Avoid unnecessary re-renders
- Use appropriate data structures
Styling
- Maintain consistent styling with your app theme
- Consider platform-specific designs
- Ensure good contrast for readability

Conclusion

The Segment Control is a powerful component for creating intuitive navigation and filtering interfaces in React Native apps. With these examples and best practices, you can:

Create basic segmented controls
Customize appearance and behavior
Implement practical filtering solutions
Follow best practices for optimal user experience

Remember to consider your use case carefully and choose appropriate segments that make sense for your users.

Want to learn more about React Native UI components? Check out our Zero to Hero React Native Mission where we dive deep into building professional React Native applications!

Simon Grimm