Examples on Documentation need updating

[c0dezer019]

In the Advanced-parallax example, it imports Animated.SharedValue, though apparently that is deprecated. Also, there is no exported member for TAnimationStyle, as it looks like that it is no longer relevant?

[dosubot]

🤖

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

• example/website/pages/Examples/advanced-parallax.mdx
• example/bare/package.json

---

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.