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 ( } horizontal style={{flexGrow: 0}} pagingEnabled snapToInterval={_imageWidth + _spacing} decelerationRate={'fast'} contentContainerStyle={{ gap: _spacing, paddingHorizontal: (width - _imageWidth) / 2, }} showsHorizontalScrollIndicator={false} /> ); }; export default CarouselWithLeftRightPartialVisible; const Photo = ({item, index}) => { return ( ); }; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, }); Enhancements & Customization Ideas Want to take it further? Here are some improvements:

Mar 2, 2025 - 15:28

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 (
    
       }
        horizontal
        style={{flexGrow: 0}}
        pagingEnabled
        snapToInterval={_imageWidth + _spacing}
        decelerationRate={'fast'}
        contentContainerStyle={{
          gap: _spacing,
          paddingHorizontal: (width - _imageWidth) / 2,
        }}
        showsHorizontalScrollIndicator={false}
      />
    
  );
};

export default CarouselWithLeftRightPartialVisible;

const Photo = ({item, index}) => {
  return (
    
      
    
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});