Examples on Documentation need updating

🤖

Hey @c0dezer019, good to see you again! Hope you've been coding greatness. Let's dive into this issue you've raised.

Thank you for bringing this to our attention. You're correct that the Animated.SharedValue has been deprecated and replaced with the useSharedValue hook. Also, TAnimationStyle is no longer exported from the library. Here's the updated code for the Advanced-parallax example:

import * as React from "react";
import { View } from "react-native";
import { interpolate, interpolateColor, useAnimatedStyle, useSharedValue } from "react-native-reanimated";
import Carousel from "react-native-reanimated-carousel";

import { SBItem } from "../../components/SBItem";
import SButton from "../../components/SButton";
import { ElementsText, window } from "../../constants";

const PAGE_WIDTH = window.width;

interface ItemProps {
  index: number
  animationValue: number
}
const CustomItem: React.FC<ItemProps> = ({ index, animationValue }) => {
  const maskStyle = useAnimatedStyle(() => {
    const backgroundColor = interpolateColor(
      animationValue,
      [-1, 0, 1],
      ["#000000dd", "transparent", "#000000dd"],
    );

    return {
      backgroundColor,
    };
  }, [animationValue]);
return (
    <View style={{ flex: 1 }}>
      <SBItem key={index} index={index} style={{ borderRadius: 0 }} />
      <Animated.View
        pointerEvents="none"
        style={[
          {
            position: "absolute",
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
          },
          maskStyle,
        ]}
      />
    </View>
  );
};

type TAnimationStyle = (value: number) => {
  transform: { translateX: number }[];
  zIndex: number;
};

function Index() {
  const [isAutoPlay, setIsAutoPlay] = React.useState(false);
  const animationStyle: TAnimationStyle = React.useCallback(
    (value: number) => {
      "worklet";

      const zIndex = interpolate(value, [-1, 0, 1], [10, 20, 30]);
      const translateX = interpolate(
        value,
        [-2, 0, 1],
        [-PAGE_WIDTH, 0, PAGE_WIDTH],
      );

      return {
        transform: [{ translateX }],
        zIndex,
      };
    },
    [],
  );

  return (
    <View style={{ flex: 1 }}>
      <Carousel
        loop={true}
        autoPlay={isAutoPlay}
        style={{ width: PAGE_WIDTH, height: 240 }}
        width={PAGE_WIDTH}
        data={[...new Array(6).keys()]}
        renderItem={({ index, animationValue }) => {
          return (
            <CustomItem
              key={index}
              index={index}
              animationValue={animationValue}
            />
          );
        }}
        customAnimation={animationStyle}
        scrollAnimationDuration={1200}
      />
      <SButton
        onPress={() => {
          setIsAutoPlay(!isAutoPlay);
        }}
      >
        {ElementsText.AUTOPLAY}:{`${isAutoPlay}`}
      </SButton>
    </View>
  );
}

export default Index;

In this updated code, Animated.SharedValue is replaced with useSharedValue and TAnimationStyle is defined in the component itself. You can find the updated example in the example/website/pages/Examples/advanced-parallax.mdx file.

As for the exact version of react-native-reanimated that deprecated the Animated.SharedValue and introduced the useSharedValue hook, it's not explicitly mentioned in the provided context. However, the project is currently using react-native-reanimated version "~3.2.0", and the useSharedValue hook is available in this version. The exact version where the transition happened is not specified in the given context. You can refer to the example/bare/package.json file for more details.

I hope this helps! If you have any other questions or need further clarification, feel free to ask.

-Dosu

Sources

This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

If you want to continue the conversation, start your reply with @dosu-bot.

dohooo / react-native-reanimated-carousel

Examples on Documentation need updating #538

Sources