Creating Image Slider with FlatList in React Native

Image Slider/Carousel components are often an appealing part of the mobile applications. We can get it through various libraries that provide the slider functionality but most of them customizations which make their use limited and unfit for our implementation. Here we will learn how to make an image slider with our basic FlatList component.

But Why FlatList?

• It has inbuilt functionality for a horizontal list
• It has inbuilt gesture handling and saves our gesture handling implementation
• It provides loading & rendering optimization of child views

We will make our FlatListSlider component highly customizable with the help of props. Let's decide on our props for our FlatListSlider Component:

We would also need Indicators for our FlatListSlider. So additional props for Indicator will be

Infinite scrolling list

We can add this feature by appending the list with the same items when the second last item of the list is visible. We can detect the current actual index by using the modulus.

currentIndex = index % Original length of list

We can detect the current visible index of the list with onViewableItemsChanged & viewabilityConfig implementation

AutoScroll Items in FlatList

For autoscrolling, we will be using setInterval to change the currentIndex of the list. We have created a ref slider for FlatList through which we will scroll the list.

We don't want the images to be partially visible. So when we scroll a bit the item should get fully scrolled out of the window and the new item must be visible fully. This can be achieved by calculating the width and separator width between items and multiplying by the active index to get the position to scroll to. The getItemLayout prop of FlatList gets this job done for us. The snaptoInterval helps use to avoid partial scroll of elements

const itemWidth = this.props.width;
const separatorWidth = this.props.separatorWidth;
const totalItemWidth = itemWidth + separatorWidth;
<FlatList
...
getItemLayout={(data, index) => ({
   length: totalItemWidth,
   offset: totalItemWidth * index,
   index,
})}
snapToInterval={totalItemWidth}
decelerationRate="fast"
bounces={false}
/>

Custom Child Component

We want to provide customizability to our users and so we are allowing to pass custom component for rendering children of the list by using the prop component for our FlatListSlider Component

We will need to pass the width of our custom component so as to calculate the positions for scrolling as discussed earlier.

const screenWidth = Math.round(Dimensions.get('window').width);
<FlatListSlider
   component={<Preview />}
   width={screenWidth}
   ...
/>

We can reuse this component and pass in additional props by using React.clone and we can pass this in our renderItem prop of our FlatList. By default, we will pass ChildItem component using the default props

static defaultProps = {
   ...
   component: <ChildItem/>,
};

Indicators

Indicators are basically used to indicate the total elements & current element. We will create a simple Indicator component and embed it in our FlatListSlider Component.

Our FlatListSlider Component Source code:

And our App.js

Wrapping Up

So finally our FlatListSlider Component will look like this. Some points to worth noting are

• Built from scratch with no out of the box components & Libraries hence will not bloat your app
• You can reuse this as a horizontal Slider along with Image Slider/Carousel
• Fully customizable with various props

You can refer my Github repo for the full source code

KPS250/React-Native-FlatList-Slider

Publishing NPM Module

I have now bundled this module into an npm library and you can find this on the link below.

react-native-flatlist-slider

Instead of copy-pasting the boilerplate code in every project, we can simplify the process by publishing the code as an npm module/library and integrate it into our project by simply installing it via command.

npm i react-native-flatlist-slider

Learn about npm publishing in my post → Publishing React Native Modules to NPM

Links:

• Learn how animation is implemented for Bottom Indicators → Layout Animations in React Native