FlatList Component Made Easy with React Native [In 14 Minutes] - 2022
📱 MOREALITY
💻 SUMMARY
Learn what the FlatList component is and how it works
Develop code to implement the FlatList component using React Native
Use iPhone simulator to display output to the device
Show Expo CLI usage to load the app on the simulator
Work through example variations to see how the FlatList component behaves
🌍 SOCIALS
Instagram - / moreality.dev
Facebook - / teammoreality
LinkedIn - / moreality
Twitter - / morealitydev
Discord - / discord
❤️ SUPPORT
Donate - https://www.buymeacoffee.com/richharvey
📚 RESOURCES
React Native Switch Doc - https://reactnative.dev/docs/switch
🕐 TIMESTAMPS
00:00 Introduction
00:30 Setup FlatList Component
02:00 Setting up Dummy Data
03:50 Creating renderItem Function
06:30 Adding StyleSheet and UI
11:00 Fixing Bug
12:40 Outro
Dummy Data:
const data = [
{
id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
title: 'First Item',
},
{
id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
title: 'Second Item',
},
{
id: '58694a0f-3da1-471f-bd96-145571e29d72',
title: 'Third Item',
},
];
🏷 TAGS
#react #reactnative #javascript