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)