Carousels are a fantastic way to showcase images, product listings, or content in a sleek, interactive manner. In this blog, we'll build a React Native Carousel that allows users to scroll horizontally while keeping partial visibility of the next and previous images—a design commonly seen in modern UI/UX.
What We'll Build
We will use FlatList to create a horizontally scrollable carousel where:
✔ The currently selected image is centered.
✔ The previous and next images remain partially visible.
✔ The scrolling feels smooth and snaps to each image perfectly.
import {Dimensions, FlatList, Image, StyleSheet, View} from 'react-native';
import React from 'react';
import {metaData} from '../../screens/CarouselBackgroundAnimation/data';
const {width} = Dimensions.get('screen');
const _imageWidth = width * 0.7;
const _imageHeight = _imageWidth * 1.76;
const _spacing = 12;
const CarouselWithLeftRightPartialVisible = () => {
return (
<View style={styles.container}>
<FlatList
data={metaData}
renderItem={(item, index) => <Photo item={item} index={index} />}
horizontal
style={{flexGrow: 0}}
pagingEnabled
snapToInterval={_imageWidth + _spacing}
decelerationRate={'fast'}
contentContainerStyle={{
gap: _spacing,
paddingHorizontal: (width - _imageWidth) / 2,
}}
showsHorizontalScrollIndicator={false}
/>
</View>
);
};
export default CarouselWithLeftRightPartialVisible;
const Photo = ({item, index}) => {
return (
<View
style={{
width: _imageWidth,
height: _imageHeight,
overflow: 'hidden',
borderRadius: 16,
}}>
<Image source={{uri: item.item}} style={{flex: 1, resizeMode: 'cover'}} />
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
});
Enhancements & Customization Ideas
Want to take it further? Here are some improvements:
🔹 Auto-scrolling: Add an interval to slide automatically.
🔹 Indicators: Show small dots to indicate the current position.
🔹 Animations: Use react-native-reanimated for smooth transitions.
🔹 Click Events: Allow users to tap and enlarge an image.
Conclusion
In this tutorial, we built a modern horizontal carousel in React Native with a partially visible left and right design. We used FlatList, snapToInterval, and simple styles to achieve a beautiful and smooth scrolling effect.
🚀 Try it in your own projects and tweak it to match your app's design!
👉 What’s next? Drop a comment if you want more tutorials on animations, gestures, or UI components in React Native. 🎨🔥
Happy coding! 🚀
Top comments (0)