Support animatedProps and fix createAnimatedComponent typing (#1590)

Add support for animatedProps and fix createAnimatedComponent typing
software-mansion · Feb 4, 2021 · 2c00a5f · 2c00a5f
1 parent d77fb64
commit 2c00a5f
Show file tree

Hide file tree

Showing 2 changed files with 91 additions and 37 deletions.
diff --git a/react-native-reanimated-tests.tsx b/react-native-reanimated-tests.tsx
@@ -1,11 +1,12 @@
 /* eslint-disable */
-import React, { useState } from 'react';
-import { StyleSheet, Button, View } from 'react-native';
+import React, { useState, useCallback } from 'react';
+import { StyleSheet, Button, View, Image, FlatListProps } from 'react-native';
 import {
   PanGestureHandler,
   PinchGestureHandlerGestureEvent,
   PinchGestureHandler,
   PanGestureHandlerGestureEvent,
+  FlatList,
 } from 'react-native-gesture-handler';
 import Animated, {
   useSharedValue,
@@ -35,6 +36,78 @@ import Animated, {
   useAnimatedProps,
 } from 'react-native-reanimated';
 
+class Path extends React.Component<{ fill?: string }> {
+  render() {
+    return null;
+  }
+}
+
+type Item = {
+  id: number;
+};
+
+const AnimatedPath = Animated.createAnimatedComponent(Path);
+const AnimatedImage = Animated.createAnimatedComponent(Image);
+const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);
+const AnimatedTypedFlatList = Animated.createAnimatedComponent<FlatListProps<Item[]>>(FlatList);
+
+function CreateAnimatedComponentTest1() {
+  const animatedProps = useAnimatedProps(() => ({ fill: 'blue' }));
+  return (
+    <AnimatedPath animatedProps={animatedProps} />
+  )
+}
+
+function CreateAnimatedComponentTest2() {
+  const animatedProps = useAnimatedProps(() => ({ fill2: 'blue' }));
+  return (
+    // @ts-expect-error
+    <AnimatedPath animatedProps={animatedProps} />
+  )
+}
+
+function CreateAnimatedComponentTest3() {
+  const animatedProps = useAnimatedProps(() => ({ pointerEvents: 'none' } as const));
+  return (
+    <Animated.View animatedProps={animatedProps}>
+      <AnimatedPath />
+    </Animated.View>
+  )
+}
+
+function CreateAnimatedFlatList() {
+  const renderItem = useCallback(
+    ({item, index}: {item: Item[]; index: number}) => {
+      if (Math.random()) {
+        return null;
+      }
+      return (
+        <View style={{width: 100}}>
+        </View>
+      );
+    },
+    [
+    ],
+  );
+  return (
+    <>
+      <AnimatedTypedFlatList
+        style={{ flex: 1 }}
+        data={[]}
+        renderItem={renderItem}
+      />
+      <AnimatedFlatList
+        // @ts-expect-error
+        style={{ flex: 1, red: false }}
+        data={[]}
+        renderItem={() => null}
+      />
+      <AnimatedImage style={{ flex: 1 }} source={{ uri: "" }} />
+    </>
+  )
+}
+
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,
@@ -338,10 +411,7 @@ function CancelAnimationTest() {
 // withDelay
 function WithDelayTest() {
   const x = useSharedValue(0);
-  const gestureHandler = useAnimatedGestureHandler<
-    PanGestureHandlerGestureEvent,
-    { startX: number }
-  >({
+  const gestureHandler = useAnimatedGestureHandler<PanGestureHandlerGestureEvent, { startX: number }>({
     onStart: (_, _ctx) => {
       cancelAnimation(x);
     },
@@ -371,10 +441,7 @@ function WithDelayTest() {
 // withRepeat
 function WithRepeatTest() {
   const x = useSharedValue(0);
-  const gestureHandler = useAnimatedGestureHandler<
-    PanGestureHandlerGestureEvent,
-    { startX: number }
-  >({
+  const gestureHandler = useAnimatedGestureHandler<PanGestureHandlerGestureEvent, { startX: number }>({
     onStart: (_, _ctx) => {
       cancelAnimation(x);
     },
@@ -404,10 +471,7 @@ function WithRepeatTest() {
 // withSequence
 function WithSequenceTest() {
   const x = useSharedValue(0);
-  const gestureHandler = useAnimatedGestureHandler<
-    PanGestureHandlerGestureEvent,
-    { startX: number }
-  >({
+  const gestureHandler = useAnimatedGestureHandler<PanGestureHandlerGestureEvent, { startX: number }>({
     onStart: (_, _ctx) => {
       cancelAnimation(x);
     },

diff --git a/react-native-reanimated.d.ts b/react-native-reanimated.d.ts
@@ -2,13 +2,7 @@
 // TypeScript Version: 2.8
 
 declare module 'react-native-reanimated' {
-  import {
-    ComponentClass,
-    ReactNode,
-    Component,
-    RefObject,
-    ComponentType,
-  } from 'react';
+  import { ComponentClass, ReactNode, Component, RefObject, ComponentType, ComponentProps } from 'react';
   import {
     ViewProps,
     TextProps,
@@ -200,7 +194,7 @@ declare module 'react-native-reanimated' {
     };
     export type AnimatedTransform = (AdaptTransforms<TransformStyleTypes>)[];
 
-    export type AnimateStyle<S extends object> = {
+    export type AnimateStyle<S> = {
       [K in keyof S]: K extends 'transform'
         ? AnimatedTransform
         : (S[K] extends ReadonlyArray<any>
@@ -218,15 +212,12 @@ declare module 'react-native-reanimated' {
     };
 
     export type AnimateProps<
-      S extends object,
-      P extends {
-        style?: StyleProp<S>;
-      }
+      P extends object
     > = {
       [K in keyof P]: K extends 'style'
-        ? StyleProp<AnimateStyle<S>>
+        ? StyleProp<AnimateStyle<P[K]>>
         : P[K] | AnimatedNode<P[K]>;
-    };
+    } & { animatedProps?: AnimateProps<P> };
 
     type CodeProps = {
       exec?: AnimatedNode<number>;
@@ -235,26 +226,25 @@ declare module 'react-native-reanimated' {
     };
 
     // components
-    export class View extends Component<AnimateProps<ViewStyle, ViewProps>> {
+    export class View extends Component<AnimateProps<ViewProps>> {
       getNode(): ReactNativeView;
     }
-    export class Text extends Component<AnimateProps<TextStyle, TextProps>> {
+    export class Text extends Component<AnimateProps<TextProps>> {
       getNode(): ReactNativeText;
     }
-    export class Image extends Component<AnimateProps<ImageStyle, ImageProps>> {
+    export class Image extends Component<AnimateProps<ImageProps>> {
       getNode(): ReactNativeImage;
     }
     export class ScrollView extends Component<
-      AnimateProps<ViewStyle, ScrollViewProps>
+      AnimateProps<ScrollViewProps>
     > {
       getNode(): ReactNativeScrollView;
     }
     export class Code extends Component<CodeProps> {}
-    export function createAnimatedComponent<
-      S extends object,
-      P extends { style?: StyleProp<S> }
-    >(component: ComponentType<P>): ComponentType<AnimateProps<S, P>>;
-
+    export function createAnimatedComponent<P>(
+      component: ComponentClass<P>
+    ): ComponentType<AnimateProps<P>>;
+
     // classes
     export {
       AnimatedClock as Clock,