Adjust Parallax View to Show More of Previous/Next Slides

[Seokkitdo]

Hello! I’m using react-native-reanimated-carousel in parallax mode, and I’d like to make the previous and next slides more visible on the edges of the viewport (see screenshot). Is there any prop or setting that lets me control how much of the adjacent items are shown?

For example, I’d like to:

Reduce the horizontal padding or increase the preview width of neighbouring slides

Keep the central slide fully in view while still showing more of the items on either side

Any pointers on which props to tweak (e.g. width, panGestureHandlerOffsetX, loopClonesPerSide, etc.) or how to achieve this effect would be greatly appreciated.

Thank you!

[dosubot]

Hello @Seokkitdo! I'm Dosu, a bot here to help you solve bugs, answer questions, and become a contributor while you wait for a human maintainer. Let's get started on your issue!

To adjust the react-native-reanimated-carousel in parallax mode to show more of the previous and next slides on the edges of the viewport, you can modify the parallaxScrollingOffset and parallaxAdjacentItemScale in the parallaxLayout function. Here's how you can adjust these parameters:

const modeConfig = {
  parallaxScrollingOffset: 50, // Adjust this value to control the offset of previous/next items
  parallaxScrollingScale: 0.9, // Adjust this value to control the scale of the central item
  parallaxAdjacentItemScale: 0.81, // Adjust this value to control the scale of adjacent items
};

const parallaxLayout = (baseConfig, modeConfig) => {
  const { size, vertical } = baseConfig;
  const {
    parallaxScrollingOffset = 100,
    parallaxScrollingScale = 0.8,
    parallaxAdjacentItemScale = parallaxScrollingScale ** 2,
  } = modeConfig;

  return (value) => {
    "worklet";
    const translate = interpolate(
      value,
      [-1, 0, 1],
      [-size + parallaxScrollingOffset, 0, size - parallaxScrollingOffset]
    );

    const zIndex = interpolate(value, [-1, 0, 1], [0, size, 0], Extrapolation.CLAMP);

    const scale = interpolate(
      value,
      [-1, 0, 1],
      [parallaxAdjacentItemScale, parallaxScrollingScale, parallaxAdjacentItemScale],
      Extrapolation.CLAMP
    );

    return {
      transform: [
        vertical
          ? {
              translateY: translate,
            }
          : {
              translateX: translate,
            },
        {
          scale,
        },
      ],
      zIndex,
    };
  };
};

These changes will allow more of the previous and next slides to be visible on the edges of the viewport by reducing the offset and adjusting the scale of the adjacent items. You can further tweak these values to achieve the desired effect ^[1][2].

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Bug Report | Other}

[Seokkitdo]

@dosu
parallaxAdjacentItemScale works well.

I’d like to:

Decrease the width of each image item so that more of the next/previous slides peek in

Keep the active (focused) slide perfectly centered in the viewport

Right now my setup looks like this:

import React, {useRef, useState} from 'react';
import {
  ScrollView,
  Dimensions,
  View,
  StyleSheet,
  TouchableOpacity,
} from 'react-native';

import {Image, P} from 'src/components/atoms';
import Carousel from 'react-native-reanimated-carousel';
import ChevronRight from '@assets/images/icn_chevron_right_circle.svg';
import ChevronLeft from '@assets/images/icn_chevron_left_circle.svg';
import {RootStackScreenParams} from '../layout/RootStackNavigator';

type StackScreenProps = RootStackScreenParams<'카드뉴스 상세'>;

const CardNewsDetail = ({navigation}: StackScreenProps) => {
  const screenWidth = Dimensions.get('window').width;
  const [activeIndex, setActiveIndex] = useState(0);
  const carouselRef = useRef(null);

  const images = [
    require('@assets/images/cardNews.png'),
    require('@assets/images/cardNews.png'),
    require('@assets/images/cardNews.png'),
    require('@assets/images/cardNews.png'),
    require('@assets/images/cardNews.png'),
  ];

  const goToPrevSlide = () => {
    if (carouselRef.current && activeIndex > 0) {
      carouselRef.current.scrollTo({index: activeIndex - 1, animated: true});
    }
  };

  const goToNextSlide = () => {
    if (carouselRef.current && activeIndex < images.length - 1) {
      carouselRef.current.scrollTo({index: activeIndex + 1, animated: true});
    }
  };

  const width = Dimensions.get('window').width;

  return (
    <ScrollView className="bg-yellow-300 " bounces={false}>
      <View className="flex justify-center items-center pb-4 bg-red-300">
        <View id="carousel-component" className="mx-0 pb-0 bg-blue-300">
          <Carousel
            ref={carouselRef}
            width={screenWidth}
            height={screenWidth * 1.183}
            data={images}
            scrollAnimationDuration={1000}
            onSnapToItem={index => setActiveIndex(index)}
            defaultIndex={0}
            loop={false}
            style={{width: width}}
            windowSize={3}
            overscrollEnabled={true}
            mode="parallax"
            modeConfig={{
              parallaxScrollingScale: 0.89,
              parallaxScrollingOffset: 54,
              parallaxAdjacentItemScale: 0.82,
            }}
            renderItem={({item, index}) => (
              <View style={[styles.carouselItemContainer]}>
                <View className="bg-green-300" style={styles.carouselItem}>
                  <Image
                    source={item}
                    style={{
                      width: '100%',
                      height: '100%',
                      borderRadius: 12,
                      objectFit: 'contain',
                    }}
                    resizeMode="cover"
                  />
                </View>
              </View>
            )}
          />

          {activeIndex > 0 && (
            <TouchableOpacity
              style={[styles.chevron, styles.leftChevron]}
              onPress={goToPrevSlide}
              className=""
              activeOpacity={1}>
              <ChevronLeft width={48} height={48} />
            </TouchableOpacity>
          )}

          {activeIndex < images.length - 1 && (
            <TouchableOpacity
              style={[styles.chevron, styles.rightChevron]}
              onPress={goToNextSlide}
              activeOpacity={1}>
              <ChevronRight width={48} height={48} />
            </TouchableOpacity>
          )}

          <View style={styles.indicatorContainer}>
            {images.map((_, index) => (
              <View
                key={index}
                style={[
                  styles.indicator,
                  activeIndex === index
                    ? styles.activeIndicator
                    : styles.inactiveIndicator,
                ]}
              />
            ))}
          </View>
        </View>
      </View>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  carouselItemContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  carouselItem: {
    width: '100%',
    height: '100%',
    borderRadius: 12,
    overflow: 'hidden',
    backgroundColor: 'white',
    shadowColor: '#000',
    shadowOffset: {width: 0, height: 2},
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
  },
  carouselImage: {
    width: '100%',
    height: '100%',
    borderRadius: 12,
  },
  indicatorContainer: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 20,
  },
  indicator: {
    width: 8,
    height: 8,
    borderRadius: 4,
    marginHorizontal: 4,
  },
  activeIndicator: {
    backgroundColor: '#E94057',
  },
  inactiveIndicator: {
    backgroundColor: '#E0E0E0',
  },
  chevron: {
    position: 'absolute',
    top: '45%',
    zIndex: 10,
    transform: [{translateY: -20}],
  },
  leftChevron: {
    left: 5,
  },
  rightChevron: {
    right: 5,
  },
});

export default CardNewsDetail;

I’ve tried tweaking width, parallaxScrollingOffset and the scale values, but the active item always snaps to fill the full width (windowWidth). What is the recommended way to:

Set a custom slide width (e.g. 80% of windowWidth)

Snap & center the active slide at that width

Still respect the parallax offsets/scaling for adjacent slides

Which props or wrapper styles control the item width vs. the carousel viewport width, and how can I combine that with parallax mode? Any sample code or pointers would be really helpful—thanks in advance!

[dosubot]

To set a custom slide width to 80% of the window width and ensure the active slide snaps and centers at that width while respecting the parallax offsets and scaling for adjacent slides, you can adjust the width property of the Carousel component and modify the animationStyle accordingly. Here's how you can achieve this:

1. Set the width property of the Carousel to 80% of the window width.
2. Adjust the animationStyle to ensure the active slide is centered and the parallax effects are applied correctly.

Here's a sample code snippet:

import React, { useRef, useState } from 'react';
import { ScrollView, Dimensions, View, StyleSheet, TouchableOpacity } from 'react-native';
import { Image } from 'src/components/atoms';
import Carousel from 'react-native-reanimated-carousel';
import ChevronRight from '@assets/images/icn_chevron_right_circle.svg';
import ChevronLeft from '@assets/images/icn_chevron_left_circle.svg';

const CardNewsDetail = () => {
  const screenWidth = Dimensions.get('window').width;
  const [activeIndex, setActiveIndex] = useState(0);
  const carouselRef = useRef(null);

  const images = [
    require('@assets/images/cardNews.png'),
    require('@assets/images/cardNews.png'),
    require('@assets/images/cardNews.png'),
    require('@assets/images/cardNews.png'),
    require('@assets/images/cardNews.png'),
  ];

  const goToPrevSlide = () => {
    if (carouselRef.current && activeIndex > 0) {
      carouselRef.current.scrollTo({ index: activeIndex - 1, animated: true });
    }
  };

  const goToNextSlide = () => {
    if (carouselRef.current && activeIndex < images.length - 1) {
      carouselRef.current.scrollTo({ index: activeIndex + 1, animated: true });
    }
  };

  return (
    <ScrollView bounces={false}>
      <View style={styles.carouselContainer}>
        <Carousel
          ref={carouselRef}
          width={screenWidth * 0.8} // Set slide width to 80% of window width
          height={screenWidth * 1.183}
          data={images}
          scrollAnimationDuration={1000}
          onSnapToItem={index => setActiveIndex(index)}
          defaultIndex={0}
          loop={false}
          windowSize={3}
          overscrollEnabled={true}
          mode="parallax"
          modeConfig={{
            parallaxScrollingScale: 0.89,
            parallaxScrollingOffset: 54,
            parallaxAdjacentItemScale: 0.82,
          }}
          renderItem={({ item }) => (
            <View style={styles.carouselItemContainer}>
              <View style={styles.carouselItem}>
                <Image
                  source={item}
                  style={styles.carouselImage}
                  resizeMode="cover"
                />
              </View>
            </View>
          )}
        />

        {activeIndex > 0 && (
          <TouchableOpacity
            style={[styles.chevron, styles.leftChevron]}
            onPress={goToPrevSlide}
            activeOpacity={1}
          >
            <ChevronLeft width={48} height={48} />
          </TouchableOpacity>
        )}

        {activeIndex < images.length - 1 && (
          <TouchableOpacity
            style={[styles.chevron, styles.rightChevron]}
            onPress={goToNextSlide}
            activeOpacity={1}
          >
            <ChevronRight width={48} height={48} />
          </TouchableOpacity>
        )}

        <View style={styles.indicatorContainer}>
          {images.map((_, index) => (
            <View
              key={index}
              style={[
                styles.indicator,
                activeIndex === index ? styles.activeIndicator : styles.inactiveIndicator,
              ]}
            />
          ))}
        </View>
      </View>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  carouselContainer: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  carouselItemContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  carouselItem: {
    width: '100%',
    height: '100%',
    borderRadius: 12,
    overflow: 'hidden',
    backgroundColor: 'white',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
  },
  carouselImage: {
    width: '100%',
    height: '100%',
    borderRadius: 12,
  },
  indicatorContainer: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 20,
  },
  indicator: {
    width: 8,
    height: 8,
    borderRadius: 4,
    marginHorizontal: 4,
  },
  activeIndicator: {
    backgroundColor: '#E94057',
  },
  inactiveIndicator: {
    backgroundColor: '#E0E0E0',
  },
  chevron: {
    position: 'absolute',
    top: '45%',
    zIndex: 10,
    transform: [{ translateY: -20 }],
  },
  leftChevron: {
    left: 5,
  },
  rightChevron: {
    right: 5,
  },
});

export default CardNewsDetail;

This setup will allow the active slide to be centered at 80% of the window width, while the parallax effects for adjacent slides are maintained ^[1].

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Bug Report | Other}

[Seokkitdo]

@dosu
That code result like this image.
What I want is for the previous and next images visible on both sides to extend fully into the side margins. The code you provided removes the spacing between items and still doesn’t use the full screen width. The result I’m aiming for is exactly like in the second image.

[dosubot]

To achieve the effect where the previous and next images extend fully into the side margins while using the full screen width, you need to adjust the itemSize and sideItemWidth calculations. Here's how you can modify your setup:

1. Set itemSize to the full width of the screen (PAGE_WIDTH).
2. Adjust sideItemWidth to ensure that the side images extend fully into the margins.

Here's a sample code snippet:

import React, { useRef, useState } from 'react';
import { Dimensions, View, StyleSheet, TouchableOpacity } from 'react-native';
import { Image } from 'src/components/atoms';
import Carousel from 'react-native-reanimated-carousel';
import ChevronRight from '@assets/images/icn_chevron_right_circle.svg';
import ChevronLeft from '@assets/images/icn_chevron_left_circle.svg';

const CardNewsDetail = () => {
  const PAGE_WIDTH = Dimensions.get('window').width;
  const [activeIndex, setActiveIndex] = useState(0);
  const carouselRef = useRef(null);

  const images = [
    require('@assets/images/cardNews.png'),
    require('@assets/images/cardNews.png'),
    require('@assets/images/cardNews.png'),
    require('@assets/images/cardNews.png'),
    require('@assets/images/cardNews.png'),
  ];

  const itemSize = PAGE_WIDTH; // Use full screen width for the main item
  const sideItemCount = 3;
  const sideItemWidth = PAGE_WIDTH / (2 * sideItemCount); // Adjust side item width

  const animationStyle = (value) => {
    "worklet";

    const itemOffsetInput = new Array(sideItemCount * 2 + 1)
      .fill(null)
      .map((_, index) => index - sideItemCount);

    const itemOffset = interpolate(
      value,
      itemOffsetInput,
      itemOffsetInput.map((item) => {
        if (item < 0) {
          return (-itemSize + sideItemWidth) * Math.abs(item);
        }

        if (item > 0) {
          return (itemSize - sideItemWidth) * (Math.abs(item) - 1);
        }

        return 0;
      })
    );

    const translate =
      interpolate(value, [-1, 0, 1], [-itemSize, 0, itemSize]) - itemOffset;

    const width = interpolate(
      value,
      [-1, 0, 1],
      [sideItemWidth, itemSize, sideItemWidth],
      Extrapolation.CLAMP
    );

    return {
      transform: [
        {
          translateX: translate,
        },
      ],
      width,
      overflow: "hidden",
    };
  };

  return (
    <View style={styles.carouselContainer}>
      <Carousel
        ref={carouselRef}
        width={itemSize}
        height={PAGE_WIDTH * 1.183}
        data={images}
        scrollAnimationDuration={1000}
        onSnapToItem={index => setActiveIndex(index)}
        defaultIndex={0}
        loop={false}
        windowSize={3}
        overscrollEnabled={true}
        mode="custom"
        customAnimation={animationStyle}
        renderItem={({ item }) => (
          <View style={styles.carouselItemContainer}>
            <View style={styles.carouselItem}>
              <Image
                source={item}
                style={styles.carouselImage}
                resizeMode="cover"
              />
            </View>
          </View>
        )}
      />

      {activeIndex > 0 && (
        <TouchableOpacity
          style={[styles.chevron, styles.leftChevron]}
          onPress={() => carouselRef.current.scrollTo({ index: activeIndex - 1, animated: true })}
          activeOpacity={1}
        >
          <ChevronLeft width={48} height={48} />
        </TouchableOpacity>
      )}

      {activeIndex < images.length - 1 && (
        <TouchableOpacity
          style={[styles.chevron, styles.rightChevron]}
          onPress={() => carouselRef.current.scrollTo({ index: activeIndex + 1, animated: true })}
          activeOpacity={1}
        >
          <ChevronRight width={48} height={48} />
        </TouchableOpacity>
      )}

      <View style={styles.indicatorContainer}>
        {images.map((_, index) => (
          <View
            key={index}
            style={[
              styles.indicator,
              activeIndex === index ? styles.activeIndicator : styles.inactiveIndicator,
            ]}
          />
        ))}
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  carouselContainer: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  carouselItemContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  carouselItem: {
    width: '100%',
    height: '100%',
    borderRadius: 12,
    overflow: 'hidden',
    backgroundColor: 'white',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
  },
  carouselImage: {
    width: '100%',
    height: '100%',
    borderRadius: 12,
  },
  indicatorContainer: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 20,
  },
  indicator: {
    width: 8,
    height: 8,
    borderRadius: 4,
    marginHorizontal: 4,
  },
  activeIndicator: {
    backgroundColor: '#E94057',
  },
  inactiveIndicator: {
    backgroundColor: '#E0E0E0',
  },
  chevron: {
    position: 'absolute',
    top: '45%',
    zIndex: 10,
    transform: [{ translateY: -20 }],
  },
  leftChevron: {
    left: 5,
  },
  rightChevron: {
    right: 5,
  },
});

export default CardNewsDetail;

This setup ensures that the main image uses the full screen width, and the side images extend fully into the side margins ^[1].

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Bug Report | Other}