How to implement a very basic Flatlist in React-Native

This is my FIRST story/article on “Medium” so i hope people will play nice ;) haha, I am a software developer in the UK and one of the technologies I am interested outside of my job is React-Native, so i wanted to start writing articles or tutorials about this topic to help others and to help my own understanding of React-Native too. This tutorial will just be a basic implementation of the “Flatlist” component found in React-Native as well as an explanation of what a “Flatlist” is, nothing more, nothing less, so let us begin.

We must first create a react native project, to do this open a terminal and locate to anywhere on your computer, I usually put my projects in the “downloads” folder and enter the command.

react-native init nameOfprojectgoeshere

This will begin to create a react native project including all the necessary files, once this is done, open your chosen code editor (I like VS code) and open the project folder within the editor. You should see a bunch of files with names like “App.js” and “package.json” on the left hand side, open “App.js”, this is where the code for our “FlatList” will go, to run the react-native app, use either the command “react-native run-ios” or react-native run-android”.

A “FlatList” is a component that displays a list of data in a structured and scrollable manner, it is an improvement on the “ScrollView” component in a number of ways including the method in which both of them renders data, “ScrollView”…