In this tutorial, you’ll learn how to display and manage dynamic lists in React Native. Lists are a crucial part of any app, allowing you to show data sets efficiently. We will also cover how to implement scrolling behavior using ScrollView and FlatList. By the end of this tutorial, you’ll be able to render long lists of data and scroll through them.
What You Will Learn Today:
- Using
ScrollViewto handle scrollable content - Displaying a list of items using
FlatList - Rendering complex lists with custom components
- Optimizing list rendering with
FlatListfor large datasets
Step 1: Working with Scrollable Content Using ScrollView
The ScrollView component allows you to create scrollable views when content exceeds the screen size. Let’s start by rendering long content inside a ScrollView.
Modify HomeScreen.js to wrap the current content in a ScrollView:
import React, { useState } from 'react';
import { View, Text, TextInput, Button, ScrollView, StyleSheet } from 'react-native';
export default function HomeScreen({ navigation }) {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [errorMessage, setErrorMessage] = useState('');
const handlePress = () => {
if (!name || !email) {
setErrorMessage('Please enter both your name and email.');
} else {
setErrorMessage('');
navigation.navigate('Details', { name, email });
}
};
return (
<ScrollView contentContainerStyle={styles.container}>
<Text style={styles.title}>Welcome to the Home Screen</Text>
{errorMessage ? <Text style={styles.error}>{errorMessage}</Text> : null}
<TextInput
style={styles.input}
placeholder="Enter your name"
value={name}
onChangeText={setName}
/>
<TextInput
style={styles.input}
placeholder="Enter your email"
value={email}
onChangeText={setEmail}
keyboardType="email-address"
/>
<Button title="Go to Details" onPress={handlePress} />
{/* Long content here */}
<Text style={styles.longText}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec massa nec ligula cursus sagittis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies malesuada eros a vehicula.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vehicula, tortor in egestas aliquet, justo est ultricies risus.
{/* Repeat this text several times */}
</Text>
</ScrollView>
);
}
const styles = StyleSheet.create({
container: {
flexGrow: 1,
justifyContent: 'center',
alignItems: 'center',
padding: 20,
backgroundColor: '#f5f5f5',
},
title: {
fontSize: 24,
marginBottom: 20,
},
input: {
height: 40,
borderColor: 'gray',
borderWidth: 1,
width: '80%',
paddingHorizontal: 10,
marginBottom: 20,
},
error: {
color: 'red',
marginBottom: 10,
},
longText: {
marginTop: 20,
fontSize: 16,
textAlign: 'justify',
},
});Explanation:
- ScrollView: We wrapped all the content inside a
ScrollViewto make the view scrollable. ThecontentContainerStyleis used to ensure the inner views are styled correctly. - You can add long text (like in the example) or multiple components inside the
ScrollViewto make the content scrollable.
Step 2: Introducing Lists Using FlatList
React Native provides a powerful and efficient way to render lists using the FlatList component. Unlike ScrollView, FlatList is optimized for rendering large data sets by rendering only the visible items, improving performance.
Let’s start by displaying a list of items on the HomeScreen. Modify the HomeScreen.js to include a FlatList:
import React, { useState } from 'react';
import { View, Text, TextInput, Button, FlatList, StyleSheet } from 'react-native';
export default function HomeScreen({ navigation }) {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [errorMessage, setErrorMessage] = useState('');
const data = [
{ id: '1', name: 'Item 1' },
{ id: '2', name: 'Item 2' },
{ id: '3', name: 'Item 3' },
{ id: '4', name: 'Item 4' },
{ id: '5', name: 'Item 5' },
];
const handlePress = () => {
if (!name || !email) {
setErrorMessage('Please enter both your name and email.');
} else {
setErrorMessage('');
navigation.navigate('Details', { name, email });
}
};
return (
<View style={styles.container}>
<Text style={styles.title}>Welcome to the Home Screen</Text>
{errorMessage ? <Text style={styles.error}>{errorMessage}</Text> : null}
<TextInput
style={styles.input}
placeholder="Enter your name"
value={name}
onChangeText={setName}
/>
<TextInput
style={styles.input}
placeholder="Enter your email"
value={email}
onChangeText={setEmail}
keyboardType="email-address"
/>
<Button title="Go to Details" onPress={handlePress} />
<FlatList
data={data}
keyExtractor={(item) => item.id}
renderItem={({ item }) => (
<View style={styles.listItem}>
<Text style={styles.itemText}>{item.name}</Text>
</View>
)}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
padding: 20,
backgroundColor: '#f5f5f5',
},
title: {
fontSize: 24,
marginBottom: 20,
},
input: {
height: 40,
borderColor: 'gray',
borderWidth: 1,
width: '80%',
paddingHorizontal: 10,
marginBottom: 20,
},
error: {
color: 'red',
marginBottom: 10,
},
listItem: {
padding: 10,
backgroundColor: '#f9c2ff',
marginVertical: 8,
borderRadius: 10,
width: '100%',
},
itemText: {
fontSize: 16,
textAlign: 'center',
},
});Explanation:
- FlatList: Renders a list of items. We pass the
dataprop to supply the list items and therenderItemprop to specify how each item should be displayed. - keyExtractor: Provides a unique key for each item in the list, which helps React Native optimize rendering.
- The list is styled with custom colors and rounded borders for each item.
Step 3: Adding More Complex List Items
Let’s make the list items more complex by adding an additional field and customizing the display. Modify the data array to include more details for each item:
const data = [
{ id: '1', name: 'Item 1', description: 'This is the first item' },
{ id: '2', name: 'Item 2', description: 'This is the second item' },
{ id: '3', name: 'Item 3', description: 'This is the third item' },
{ id: '4', name: 'Item 4', description: 'This is the fourth item' },
{ id: '5', name: 'Item 5', description: 'This is the fifth item' },
];Update the renderItem function to display both the name and description:
<FlatList
data={data}
keyExtractor={(item) => item.id}
renderItem={({ item }) => (
<View style={styles.listItem}>
<Text style={styles.itemText}>{item.name}</Text>
<Text>{item.description}</Text>
</View>
)}
/>Now, each list item will display both the name and description fields.
Step 4: Optimizing Lists for Large Datasets
When dealing with larger datasets, it’s essential to make sure that the app remains performant. The FlatList component provides features such as lazy loading and item recycling, which ensures that only the visible items are rendered. Here are some tips for optimizing lists:
- Use getItemLayout
: If you know the height of your list items, usinggetItemLayout helps React Native optimize rendering by skipping unnecessary layout calculations. - Enable Pagination: For very large datasets, consider using pagination (loading data in chunks).
You can enable pagination in FlatList by using the onEndReached prop:
<FlatList
data={data}
keyExtractor={(item) => item.id}
renderItem={({ item }) => (
<View style={styles.listItem}>
<Text style={styles.itemText}>{item.name}</Text>
<Text>{item.description}</Text>
</View>
)}
onEndReached={() => {
// Load more data when the user reaches the end of the list
console.log('End of list reached!');
}}
onEndReachedThreshold={0.5}
/>Step 5: Testing the App
Run your app with npm start and test the new scrollable content and list features on your mobile device using the Expo Go app.
You should now see:
- A scrollable form with long content.
- A dynamic list of items rendered with
FlatList. - Additional item details (name and description) displayed for each list item.
Step 6: Recap and Summary
Today, you learned how to handle long content and lists in React Native. Here’s a quick summary of what you’ve done:
- Implemented scrollable views using
ScrollView. - Rendered dynamic lists of items using
FlatList. - Customized list items and displayed complex data.
- Optimized list rendering for better performance.
With these skills, you can now build rich, dynamic views that can handle long content and data sets!
Next Up: Day 6 – Fetching Data from APIs
In Day 6, we’ll focus on integrating external data by fetching content from APIs. You’ll learn how to fetch data from a remote source and dynamically render it in your app using the skills you’ve learned today.
Stay tuned for more exciting features tomorrow!
