This content originally appeared on DEV Community and was authored by Amit Kumar
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! 🚀
This content originally appeared on DEV Community and was authored by Amit Kumar
Amit Kumar | Sciencx (2025-03-02T13:43:08+00:00) Building a Beautiful Carousel with Left-Right Partial Visibility in React Native. Retrieved from https://www.scien.cx/2025/03/02/building-a-beautiful-carousel-with-left-right-partial-visibility-in-react-native/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.