Swipeable container style props do not accept AnimatedValue

[kendallroth]

Description

Swipeable component prop definitions for containerStyle and childrenContainerStyle props are wrong, and produce type errors when trying to pass AnimatedValue (which should be accepted by Animated.View).

const heightAnim = useRef(new Animated.Value(0)).current;

<Swipeable
  // Type error
  containerStyle={{ height: heightAnim }}
>
  {children}
</Swipeable>

Type '{ height: Animated.Value | undefined; }' is not assignable to type 'StyleProp<ViewStyle>'.
  Types of property 'height' are incompatible.
    Type 'Value | undefined' is not assignable to type 'string | number | undefined'.
      Type 'Value' is not assignable to type 'string | number | undefined'.
        Type 'Value' is not assignable to type 'number'.

The definition in Swipeable.tsx seems like it should be using something like Animated.AnimatedProps<ViewStyle>; however, I was not able to get this to work via monkey-patching 🤷? Both components the style props are intended for are Animated.View component, yet the type definitions prevent actually utilizing them...

/**
   * Style object for the container (`Animated.View`), for example to override
   * `overflow: 'hidden'`.
   */
  containerStyle?: StyleProp<ViewStyle>;

  /**
   * Style object for the children container (`Animated.View`), for example to
   * apply `flex: 1`
   */
  childrenContainerStyle?: StyleProp<ViewStyle>;

Steps To Reproduce

1. Create animated value and apply to containerStyle or childrenContainerStyle of Swipeable component
2. Notice type error

Expected behavior

Should not throw type error

Actual behavior

Throws type error (see above)

Snack or minimal code example

N/A

Package versions

• React: 17.0.1
• React Native: 0.64.3
• React Native Gesture Handler: 1.10.2

[kendallroth]

Ah, I did not realize that I would also need to update the Swipeable.d.ts file (in addition to Swipeable.tsx), setting both containerStyle and childrenContainerStyle prop types to Animated.AnimatedProps<ViewStyle>.

Attaching patchfile in case it is useful to others...I was not sure if this was the best solution (or only place necessary)...

EDIT: Updated patch file to support Animated view style objects or arrays.

diff --git a/node_modules/react-native-gesture-handler/lib/typescript/components/Swipeable.d.ts b/node_modules/react-native-gesture-handler/lib/typescript/components/Swipeable.d.ts
index 60237c7..3186c20 100644
--- a/node_modules/react-native-gesture-handler/lib/typescript/components/Swipeable.d.ts
+++ b/node_modules/react-native-gesture-handler/lib/typescript/components/Swipeable.d.ts
@@ -43,8 +43,8 @@ interface SwipeableProps extends Pick<PanGestureHandlerProps, SwipeableExcludes>
     renderRightActions?: (progressAnimatedValue: Animated.AnimatedInterpolation, dragAnimatedValue: Animated.AnimatedInterpolation) => React.ReactNode;
     useNativeAnimations?: boolean;
     animationOptions?: Record<string, unknown>;
-    containerStyle?: StyleProp<ViewStyle>;
-    childrenContainerStyle?: StyleProp<ViewStyle>;
+    containerStyle?: Animated.WithAnimatedObject<ViewStyle> | Animated.WithAnimatedArray<ViewStyle>;
+    childrenContainerStyle?: Animated.WithAnimatedObject<ViewStyle> | Animated.WithAnimatedArray<ViewStyle>;
 }
 declare type SwipeableState = {
     dragX: Animated.Value;
diff --git a/node_modules/react-native-gesture-handler/src/components/Swipeable.tsx b/node_modules/react-native-gesture-handler/src/components/Swipeable.tsx
index 77c6084..c989b98 100644
--- a/node_modules/react-native-gesture-handler/src/components/Swipeable.tsx
+++ b/node_modules/react-native-gesture-handler/src/components/Swipeable.tsx
@@ -79,8 +79,8 @@ interface SwipeableProps
   ) => React.ReactNode;
   useNativeAnimations?: boolean;
   animationOptions?: Record<string, unknown>;
-  containerStyle?: StyleProp<ViewStyle>;
-  childrenContainerStyle?: StyleProp<ViewStyle>;
+  containerStyle?: Animated.WithAnimatedObject<ViewStyle> | Animated.WithAnimatedArray<ViewStyle>;
+  childrenContainerStyle?: Animated.WithAnimatedObject<ViewStyle> | Animated.WithAnimatedArray<ViewStyle>;
 }

 type SwipeableState = {