React-native-reanimated Typescript props

[alakdam07]

I am really new in React native Animation world. I found one nice tutorial from youtube about React native Reanimated and make a Scrollable Bottom sheet. The Scrollable bottom sheet works perfect. But in the tutorial, it did not introduce Typescript. I want to implement Typescript for this project. I don't know what should I give props for the useSharedValue and useAnimatedGestureHandler's Context. Can anyone please help me to Implement Typescript for this project. Thank you in Advance.

I shared my code in Expo-snacks. Ps: In snacks it will only works in IOS or Android, in WebView it will throw an error.

This is the Animation component

import React from "react";
import {
  SafeAreaView,
  StyleSheet,
  Text,
  useWindowDimensions,
  View,
} from "react-native";
import Animated, {
  Extrapolate,
  interpolate,
  useAnimatedGestureHandler,
  useAnimatedStyle,
  withTiming,
} from "react-native-reanimated";
import {
  PanGestureHandler,
  PanGestureHandlerGestureEvent,
  TouchableOpacity,
} from "react-native-gesture-handler";

interface Props {
  panY: number; // I think it's not number, idk what 💁🏾
}

export default function BottomSheet({ panY }: Props) {
  const { height } = useWindowDimensions();

// THESE ARE ERROR I AM GETTING:

// 1. context.startY : Property 'startY' does not exist on type '{}'.
// 2. panY.value : Property 'value' does not exist on type 'number'.


  const gestureHandler =
    useAnimatedGestureHandler<PanGestureHandlerGestureEvent>(
      {
        onStart(_, context) {
          context.startY = panY.value;
        },
        onActive(event, context) {
          panY.value = context.startY + event.translationY;
        },
        onEnd() {
          if (panY.value < -height * 0.4) {
            panY.value = withTiming(-(height * 0.6));
          } else {
            panY.value = withTiming(0);
          }
        },
      },
      [height]
    );

  const animatedStyle = useAnimatedStyle(() => {
    return {
      transform: [
        {
          translateY: interpolate(panY.value, [-1, 0], [-1, 0], {
            extrapolateLeft: Extrapolate.EXTEND,
            extrapolateRight: Extrapolate.CLAMP,
          }),
        },
      ],
    };
  });

  return (
    <PanGestureHandler onGestureEvent={gestureHandler}>
      <Animated.View
        style={[styles.container, { top: height * 0.7 }, animatedStyle]}
      >
        <SafeAreaView style={styles.wrapper}>
          <View style={styles.content}>
            <Text style={styles.title}>Maison Paul Bocuse</Text>

            <View style={styles.fakeContent} />
          </View>
        </SafeAreaView>
      </Animated.View>
    </PanGestureHandler>
  );
}

const styles = StyleSheet.create({
  container: {
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    backgroundColor: "white",
    shadowColor: "black",
    shadowOffset: {
      height: -6,
      width: 0,
    },
    shadowOpacity: 0.1,
    shadowRadius: 5,
  },
  wrapper: {
    flex: 1,
  },
  content: {
    flex: 1,
    padding: 20,
  },
  title: {
    fontWeight: "400",
    fontSize: 22,
  },
  fakeContent: {
    flex: 1,
    height: 1000,
  },
});

This is the parent component where I am importing the Bottom sheet

import React from "react";
import {
  SafeAreaView,
  StatusBar,
  StyleSheet,
  useWindowDimensions,
  View,
} from "react-native";
import MapView from "react-native-maps";
import { useSharedValue } from "react-native-reanimated";

import BottomSheet from "./ActionSheet";

export default function App() {
  const { width, height } = useWindowDimensions();

  const y = useSharedValue(0); // WHAT SHOULD BE THE PROPS

  return (
    <View style={styles.container}>
      <StatusBar barStyle="dark-content" />
      <MapView
        initialRegion={{
          latitude: 35.679453,
          longitude: 139.6887197,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0922,
        }}
        style={{ width, height }}
      />
      <BottomSheet panY={y} />
    </View>
  );
}

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

[jgonet]

You can use Animated.SharedValue<T> to type shared values. Context can be provided as a second generic argument to useAnimatedGestureHandler() or inline. The second approach make it less verbose.

@@ -20,7 +20,7 @@ import {
 } from 'react-native-gesture-handler';

 interface Props {
-  panY: number; // I think it's not number, idk what 💁🏾
+  panY: Animated.SharedValue<number>;
 }

 export default function BottomSheet({ panY }: Props) {
@@ -31,7 +31,10 @@ export default function BottomSheet({ panY }: Props) {
   // 1. context.startY : Property 'startY' does not exist on type '{}'.
   // 2. panY.value : Property 'value' does not exist on type 'number'.

-  const gestureHandler = useAnimatedGestureHandler<PanGestureHandlerGestureEvent>(
+  const gestureHandler = useAnimatedGestureHandler<
+    PanGestureHandlerGestureEvent,
+    { startY: number }
+  >(
     {
       onStart(_, context) {
         context.startY = panY.value;

or

@@ -20,20 +20,19 @@ import {
 } from 'react-native-gesture-handler';

 interface Props {
-  panY: number; // I think it's not number, idk what 💁🏾t
+  panY: Animated.SharedValue<number>;
 }

 export default function BottomSheet({ panY }: Props) {
   const { height } = useWindowDimensions();
-
   // THESE ARE ERROR I AM GETTING:

   // 1. context.startY : Property 'startY' does not exist on type '{}'.
   // 2. panY.value : Property 'value' does not exist on type 'number'.

-  const gestureHandler = useAnimatedGestureHandler<PanGestureHandlerGestureEvent>(
+  const gestureHandler = useAnimatedGestureHandler(
     {
-      onStart(_, context) {
+      onStart(_, context: { startY: number }) {
         context.startY = panY.value;
       },
       onActive(event, context) {

Some tips:

• When you hover at a variable in Visual Studio Code (VSC) it shows its type. If you hover over y in const y = useSharedValue(0); it gives you the correct type: const y: Animated.SharedValue<number>. You can use it to type the props. Keep in mind that some libraries make their types more specific so you can get for example type like const y: Animated.SharedValue<0> but you can substitute 0 with number instead.
• Related to one above: if you ctrl/cmd click something imported from a library, VSC will take you to its type declaration. This is an easy way to learn how to correctly type your code.

[maxfahl]

Just check return type of the function in .../node_modules/react-native-reanimated/react-native-reanimated.d.ts

The type for useSharedValue is SharedValue<T> and the type for useAnimatedGestureHandler is OnGestureEvent<T>.

Pro tip: Using IntelliJ (as I am) or VSCode, you should be able to command (ctrl in wondows, I think) click the function call to go to the definition.