React Native: Creating Carousel using FlatList

Carousel is a popular way of showing multiple piece of content on the screen without using much space.

Here, we’ll create a simple carousel using FlatList in react-native.

Fetching Data:

We’ll use The MovieDatabase Api to load a set of images that will be shown in our carousel.

Creating Item Layout:

We’ll then create a simple layout that FlatList will use to render images on the screen.

The Home Screen:

We’ll use useState hook to store the fetched data and also the status whether it has been loaded or not.

Also, we’ll use useEffect hook and call the fetchMovieData function inside it so that it’ll only be called once, when components have been rendered.

We’ll create a reference of FlatList and then call its scrollToIndex function inside setInterval so that after every 3 seconds the item present on the screen changes automatically.

So, this was simple illustration of how we can create carousel in react-native. Do let me know if I couldn’t make myself clear or if there’s better way of creating the same.

Happy Coding !