react native reanimated three items but one bigger as the neighbor-CodePudding

I want to make a flatlist with three items and the selected/current Index item should be bigger as the two items next to.

Current Code:

  const translateX = useSharedValue(0);

  const scrollHandler = useAnimatedScrollHandler({
    onScroll: (e) => {
      translateX.value = e.contentOffset.x;
    }
  })

  const animatedStyle = useAnimatedStyle(() => {
    const scale = interpolate(translateX.value, [width / 3, 0, width / 3], [0.2, 1, 0.2], Extrapolate.CLAMP);
    return {
      transform: [{
        scale
      }]
    }
  }, []);

  const renderI = ({ item }) => (
    <Animated.View style={[animatedStyle]}>
      <ProductCardAuto
        {...item}
        onPressProduct={() => handleNavigateToProduct(item)}
        onPressReviews={handleOpenModalReviews}
      />
    </Animated.View>
  )

    <Animated.FlatList
        data={mockProducts}
        renderItem={renderI}
        keyExtractor={(item) => item.id}
        snapToAlignment="start"
        decelerationRate={"normal"}
        onScroll={scrollHandler}
        horizontal
        snapToInterval={120}
    />

I am very thankful for your help. Idk what I am doing wrong. Maybe you can tell me what is wrong with it. it does not work its scale all items to 0.2 if I scroll

CodePudding user response：

kindof tried to make it acc to what you needed.

You can check this expo :

CodePudding user response：

Even if the question has been already answered, I would suggest another approach.

What worked for me is react-native-reanimated-carousel, which not only that is very easy to use and very customizable, but is also using react-native-reanimated and that means native performance and precise animations because it runs the animations on the UI thread rather than the JS thread.

EDIT: I noticed that you're actually looking for a reanimated answer, which is great!

Based on the library I showed you, I believe you're looking for a parallax horizontal.

Here's a link to the example: https://github.com/dohooo/react-native-reanimated-carousel/blob/main/exampleExpo/src/parallax/index.tsx