fix: updated types for styles (#616)

gorhom · Aug 31, 2021 · 7fa1453 · 7fa1453
1 parent 338da06
commit 7fa1453
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 21 deletions.
diff --git a/example/src/Dev.tsx b/example/src/Dev.tsx
@@ -99,7 +99,7 @@ const App = () => {
           style={styles.flatlist}
           contentContainerStyle={styles.flatlistContainer}
         />
-        <BottomSheetFooter appearanceBehavior={['fade', 'scale']}>
+        <BottomSheetFooter>
           <RectButton style={styles.footer}>
             <Text style={styles.footerText}>this is a footer!</Text>
           </RectButton>

diff --git a/src/components/bottomSheet/types.d.ts b/src/components/bottomSheet/types.d.ts
@@ -1,5 +1,5 @@
 import type React from 'react';
-import type { ViewStyle, Insets } from 'react-native';
+import type { ViewStyle, Insets, StyleProp } from 'react-native';
 import type Animated from 'react-native-reanimated';
 import type { PanGestureHandlerProps } from 'react-native-gesture-handler';
 import type { BottomSheetHandleProps } from '../bottomSheetHandle';
@@ -165,17 +165,19 @@ export interface BottomSheetProps
    * @type Animated.AnimateStyle<ViewStyle>
    * @default undefined
    */
-  style?: Animated.AnimateStyle<
-    Omit<
-      ViewStyle,
-      | 'flexDirection'
-      | 'position'
-      | 'top'
-      | 'left'
-      | 'bottom'
-      | 'right'
-      | 'opacity'
-      | 'transform'
+  style?: StyleProp<
+    Animated.AnimateStyle<
+      Omit<
+        ViewStyle,
+        | 'flexDirection'
+        | 'position'
+        | 'top'
+        | 'left'
+        | 'bottom'
+        | 'right'
+        | 'opacity'
+        | 'transform'
+      >
     >
   >;
   /**
@@ -184,24 +186,23 @@ export interface BottomSheetProps
    * @type ViewStyle
    * @default undefined
    */
-  backgroundStyle?: Omit<
-    ViewStyle,
-    'position' | 'top' | 'left' | 'bottom' | 'right'
+  backgroundStyle?: StyleProp<
+    Omit<ViewStyle, 'position' | 'top' | 'left' | 'bottom' | 'right'>
   >;
   /**
    * View style to be applied to the handle component.
    *
    * @type ViewStyle
    * @default undefined
    */
-  handleStyle?: ViewStyle;
+  handleStyle?: StyleProp<ViewStyle>;
   /**
    * View style to be applied to the handle indicator component.
    *
    * @type ViewStyle
    * @default undefined
    */
-  handleIndicatorStyle?: ViewStyle;
+  handleIndicatorStyle?: StyleProp<ViewStyle>;
   /**
    * Custom hook to provide pan gesture events handler, which will allow advance and
    * customize handling for pan gesture.

diff --git a/src/components/bottomSheetHandle/types.d.ts b/src/components/bottomSheetHandle/types.d.ts
@@ -1,5 +1,5 @@
 import type React from 'react';
-import type { ViewStyle } from 'react-native';
+import type { StyleProp, ViewStyle } from 'react-native';
 import type Animated from 'react-native-reanimated';
 import type { BottomSheetVariables } from '../../types';
 
@@ -11,13 +11,13 @@ export interface BottomSheetDefaultHandleProps extends BottomSheetHandleProps {
    * @type Animated.AnimateStyle<ViewStyle> | ViewStyle
    * @default undefined
    */
-  style?: ViewStyle | Animated.AnimateStyle<ViewStyle>;
+  style?: StyleProp<ViewStyle | Animated.AnimateStyle<ViewStyle>>;
   /**
    * View style to be applied to the handle indicator.
    * @type Animated.AnimateStyle<ViewStyle> | ViewStyle
    * @default undefined
    */
-  indicatorStyle?: ViewStyle | Animated.AnimateStyle<ViewStyle>;
+  indicatorStyle?: StyleProp<ViewStyle | Animated.AnimateStyle<ViewStyle>>;
   /**
    * Content to be added below the indicator.
    * @type React.ReactNode | React.ReactNode[];