Building a Beautiful Carousel with Left-Right Partial Visibility in React Native

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! 🚀