React Native FlatLists

The React Native FlatList is a very useful component for rendering a refined list of all your data that you are trying to display. It’s most commonly used when displaying a list of contacts or news article headlines. A basic overview of how the components are rendered is that one file will fetch your data and pass it down to your components as a prop. From there the component that receives that props uses them to render your desired data onto your components. Let’s walk through a quick example building out a flatlist that renders some news articles.

For this project, we’ll be getting data from the News API. When creating a new react native project with expo you’ll find that there’s a directory called Screens with multiple components ready to go. From there begin to fetch your data. Once you’ve done so setState and begin to build out your components.

const [news, setNews] = useState([]);
useEffect( () => {
  const url = NEWS_URL + NEWS_API_KEY;
   const fetchNews = async () => {
      try {
        const response = await fetch(url);
        const newsData = await response.json()
        setNews(newsData.articles)
       } catch (e) {
     console.log(e)
    }
 }
fetchNews()
}, [])

Now that you have your data ready and stored in state lets render our components and pass our data down to them.

return (
   <View style={styles.container}>
      <FlatList
      style ={{width: '100%'}}
      data={news}
      renderItem={({ item }) => <NewsListItem newsList={item} />}
      keyExtractor={(item, index) => item.id}
      />
  </View>
);

The NewsListItem component that’s receiving the newsList prop was imported from our Components. From here go over to your components folder and create two files. The first will be called index.tsx and the second will be style.tsx. Inside your index.tsx file you’ll use your props to create each individual component in the flatlist.

<View style={styles.container}>
  <View style={styles.midContainer}>
     <Text numberOfLines={2} style={styles.title}>{newsList.title}   
     </Text>
     <Text numberOfLines={4} style={styles.description}>  
     {newsList.description}</Text>
     <Text style={styles.name}>{newsList.source.name}</Text>
  </View>
</View>

Now inside your style.tsx folder enter the following code to style the component.

import { StyleSheet } from 'react-native';
const styles = StyleSheet.create({
container: {
  flexDirection: 'row',
  width: "100%",
  justifyContent: 'space-between',
  },
  midContainer: {
  justifyContent: 'space-between',
  padding: 10,
  },
  title: {
  fontWeight: 'bold',
  fontSize: 16,
  },
  name: { 
  fontSize: 16,
  fontWeight: 'bold', 
   color: 'grey',
  },
  description: {
  fontStyle: 'italic',
  fontSize: 14,
  fontWeight: '200',
  },
});
export default styles;

Once your styles are complete make sure to import it into index.tsx. Once your components are all set head on back to your Screen directory where you initially fetched your data and enter the following to add some styling to your flatlist.

const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
padding: 10,
},
});

Now after making sure that you’ve imported all the required modules and components you can go ahead and take a look at your app and it should look something like this.

Here’s a screenshot from one of my own personal projects that includes a tab that has some news about Bitcoin.

In the future if you’d like to allow for some functionality like clicking on the article titles and being taken to a screen displaying the article’s content I would suggest adding a TouchableWithoutFeedback component that calls an onPress function. Inside that function utilize useNavigation which can be imported like so

import { useNavigation } from '@react-navigation/native';

to pass your props over to your component that will render the article. Thank you for reading and good luck in your future projects!