fix: style types (#3623)

Author: DimitarNestorov

package.json

@@ -64,6 +64,7 @@
     "@types/react-dom": "^18.0.8",
     "@types/react-native": "^0.70.6",
     "@types/react-native-vector-icons": "^6.4.1",
+    "@types/react-test-renderer": "^18.0.0",
     "@typescript-eslint/eslint-plugin": "^5.41.0",
     "@typescript-eslint/parser": "^5.41.0",
     "all-contributors-cli": "^6.24.0",
@@ -99,8 +100,8 @@
   "peerDependencies": {
     "react": "*",
     "react-native": "*",
-    "react-native-vector-icons": "*",
-    "react-native-safe-area-context": "*"
+    "react-native-safe-area-context": "*",
+    "react-native-vector-icons": "*"
   },
   "husky": {
     "hooks": {
@@ -117,6 +118,9 @@
       "@testing-library/jest-native/extend-expect"
     ],
     "cacheDirectory": "./cache/jest",
+    "testPathIgnorePatterns": [
+      "\\.d\\.ts$"
+    ],
     "modulePathIgnorePatterns": [
       "<rootDir>/example/node_modules",
       "<rootDir>/lib/"

src/components/Appbar/Appbar.tsx

@@ -1,5 +1,13 @@
 import * as React from 'react';
-import { Platform, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+import {
+  Animated,
+  Platform,
+  StyleProp,
+  StyleSheet,
+  View,
+  ViewStyle,
+  ColorValue,
+} from 'react-native';
 
 import color from 'color';
 
@@ -18,7 +26,10 @@ import {
   renderAppbarContent,
 } from './utils';
 
-export type Props = Partial<React.ComponentPropsWithRef<typeof View>> & {
+export type Props = Omit<
+  Partial<React.ComponentPropsWithRef<typeof View>>,
+  'style'
+> & {
   /**
    * Whether the background color is a dark color. A dark appbar will render light text and vice-versa.
    */
@@ -55,7 +66,7 @@ export type Props = Partial<React.ComponentPropsWithRef<typeof View>> & {
    * @optional
    */
   theme?: ThemeProp;
-  style?: StyleProp<ViewStyle>;
+  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
 };
 
 /**
@@ -160,11 +171,15 @@ const Appbar = ({
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
   const { isV3 } = theme;
+  const flattenedStyle = StyleSheet.flatten(style);
   const {
     backgroundColor: customBackground,
     elevation = isV3 ? (elevated ? 2 : 0) : 4,
     ...restStyle
-  }: ViewStyle = StyleSheet.flatten(style) || {};
+  } = (flattenedStyle || {}) as Exclude<typeof flattenedStyle, number> & {
+    elevation?: number;
+    backgroundColor?: ColorValue;
+  };
 
   let isDark: boolean;
 

src/components/Appbar/AppbarAction.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { StyleProp, ViewStyle, View } from 'react-native';
+import type { StyleProp, ViewStyle, View, Animated } from 'react-native';
 
 import color from 'color';
 import type { ThemeProp } from 'src/types';
@@ -41,7 +41,7 @@ export type Props = React.ComponentPropsWithoutRef<typeof IconButton> & {
    * Whether it's the leading button.
    */
   isLeading?: boolean;
-  style?: StyleProp<ViewStyle>;
+  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
   ref?: React.RefObject<View>;
   /**
    * @optional

src/components/Appbar/AppbarBackAction.tsx

@@ -4,6 +4,7 @@ import type {
   StyleProp,
   ViewStyle,
   View,
+  Animated,
 } from 'react-native';
 
 import { forwardRef } from '../../utils/forwardRef';
@@ -35,7 +36,7 @@ export type Props = $Omit<
    * Function to execute on press.
    */
   onPress?: (e: GestureResponderEvent) => void;
-  style?: StyleProp<ViewStyle>;
+  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
   ref?: React.RefObject<View>;
 };
 

src/components/Appbar/AppbarHeader.tsx

@@ -1,5 +1,13 @@
 import * as React from 'react';
-import { Platform, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+import {
+  Animated,
+  ColorValue,
+  Platform,
+  StyleProp,
+  StyleSheet,
+  View,
+  ViewStyle,
+} from 'react-native';
 
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
@@ -48,7 +56,7 @@ export type Props = React.ComponentProps<typeof Appbar> & {
    * @optional
    */
   theme?: ThemeProp;
-  style?: StyleProp<ViewStyle>;
+  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
 };
 
 /**
@@ -112,13 +120,19 @@ const AppbarHeader = ({
   const theme = useInternalTheme(themeOverrides);
   const { isV3 } = theme;
 
+  const flattenedStyle = StyleSheet.flatten(style);
   const {
     height = isV3 ? modeAppbarHeight[mode] : DEFAULT_APPBAR_HEIGHT,
     elevation = isV3 ? (elevated ? 2 : 0) : 4,
     backgroundColor: customBackground,
     zIndex = isV3 && elevated ? 1 : 0,
     ...restStyle
-  }: ViewStyle = StyleSheet.flatten(style) || {};
+  } = (flattenedStyle || {}) as Exclude<typeof flattenedStyle, number> & {
+    height?: number;
+    elevation?: number;
+    backgroundColor?: ColorValue;
+    zIndex?: number;
+  };
 
   const backgroundColor = getAppbarColor(
     theme,
@@ -131,18 +145,16 @@ const AppbarHeader = ({
 
   return (
     <View
-      style={
-        [
-          {
-            backgroundColor,
-            zIndex,
-            elevation,
-            paddingTop: statusBarHeight ?? top,
-            paddingHorizontal: Math.max(left, right),
-          },
-          shadow(elevation),
-        ] as StyleProp<ViewStyle>
-      }
+      style={[
+        {
+          backgroundColor,
+          zIndex,
+          elevation,
+          paddingTop: statusBarHeight ?? top,
+          paddingHorizontal: Math.max(left, right),
+        },
+        shadow(elevation) as ViewStyle,
+      ]}
     >
       <Appbar
         style={[{ height, backgroundColor }, styles.appbar, restStyle]}

src/components/Appbar/utils.ts

@@ -44,7 +44,7 @@ type RenderAppbarContentProps = {
   isDark: boolean;
   shouldCenterContent?: boolean;
   isV3: boolean;
-  renderOnly?: React.ComponentType<any>[];
+  renderOnly?: (React.ComponentType<any> | false)[];
   renderExcept?: React.ComponentType<any>[];
   mode?: AppbarModes;
   theme?: ThemeProp;
@@ -65,7 +65,7 @@ export const modeTextVariant = {
   medium: 'headlineSmall',
   large: 'headlineMedium',
   'center-aligned': 'titleLarge',
-};
+} as const;
 
 export const renderAppbarContent = ({
   children,

src/components/Banner.tsx

@@ -37,7 +37,7 @@ export type Props = $RemoveChildren<typeof Surface> & {
   actions?: Array<
     {
       label: string;
-    } & Omit<React.ComponentProps<typeof Button>, 'children'>
+    } & $RemoveChildren<typeof Button>
   >;
   /**
    * Style of banner's inner content.
@@ -49,7 +49,7 @@ export type Props = $RemoveChildren<typeof Surface> & {
    * Changes Banner shadow and background on iOS and Android.
    */
   elevation?: 0 | 1 | 2 | 3 | 4 | 5 | Animated.Value;
-  style?: StyleProp<ViewStyle>;
+  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
   ref?: React.RefObject<View>;
   /**
    * @optional

src/components/BottomNavigation/BottomNavigation.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import {
   Animated,
+  ColorValue,
   EasingFunction,
   Platform,
   StyleProp,
@@ -255,7 +256,7 @@ export type Props = {
    * barStyle={{ backgroundColor: '#694fad' }}
    * ```
    */
-  barStyle?: StyleProp<ViewStyle>;
+  barStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
   /**
    * Specifies the largest possible scale a label font can reach.
    */
@@ -620,8 +621,11 @@ const BottomNavigation = ({
   const { routes } = navigationState;
   const { colors, dark: isDarkTheme, mode, isV3 } = theme;
 
-  const { backgroundColor: customBackground, elevation = 4 }: ViewStyle =
-    StyleSheet.flatten(barStyle) || {};
+  const { backgroundColor: customBackground, elevation = 4 } =
+    (StyleSheet.flatten(barStyle) || {}) as {
+      elevation?: number;
+      backgroundColor?: ColorValue;
+    };
 
   const approxBackgroundColor = customBackground
     ? customBackground
@@ -758,29 +762,28 @@ const BottomNavigation = ({
       </View>
       <Surface
         {...(theme.isV3 && { elevation: 0 })}
-        style={
-          [
-            !theme.isV3 && { elevation: 4 },
-            styles.bar,
-            keyboardHidesNavigationBar
-              ? {
-                  // When the keyboard is shown, slide down the navigation bar
-                  transform: [
-                    {
-                      translateY: visibleAnim.interpolate({
-                        inputRange: [0, 1],
-                        outputRange: [layout.height, 0],
-                      }),
-                    },
-                  ],
-                  // Absolutely position the navigation bar so that the content is below it
-                  // This is needed to avoid gap at bottom when the navigation bar is hidden
-                  position: keyboardVisible ? 'absolute' : null,
-                }
-              : null,
-            barStyle,
-          ] as StyleProp<ViewStyle>
-        }
+        testID={`${testID}-surface`}
+        style={[
+          !theme.isV3 && styles.elevation,
+          styles.bar,
+          keyboardHidesNavigationBar // eslint-disable-next-line react-native/no-inline-styles
+            ? {
+                // When the keyboard is shown, slide down the navigation bar
+                transform: [
+                  {
+                    translateY: visibleAnim.interpolate({
+                      inputRange: [0, 1],
+                      outputRange: [layout.height, 0],
+                    }),
+                  },
+                ],
+                // Absolutely position the navigation bar so that the content is below it
+                // This is needed to avoid gap at bottom when the navigation bar is hidden
+                position: keyboardVisible ? 'absolute' : undefined,
+              }
+            : null,
+          barStyle,
+        ]}
         pointerEvents={
           layout.measured
             ? keyboardHidesNavigationBar && keyboardVisible
@@ -1233,4 +1236,7 @@ const styles = StyleSheet.create({
     borderRadius: OUTLINE_WIDTH / 4,
     alignSelf: 'center',
   },
+  elevation: {
+    elevation: 4,
+  },
 });

src/components/Button/Button.tsx

@@ -106,7 +106,7 @@ export type Props = React.ComponentProps<typeof Surface> & {
    * Use this prop to apply custom height and width and to set the icon on the right with `flexDirection: 'row-reverse'`.
    */
   contentStyle?: StyleProp<ViewStyle>;
-  style?: StyleProp<ViewStyle>;
+  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
   /**
    * Style for the button text.
    */
@@ -292,6 +292,7 @@ const Button = ({
   return (
     <Surface
       {...rest}
+      testID={`${testID}-container`}
       style={
         [
           styles.button,

src/components/Card/Card.tsx

@@ -67,7 +67,7 @@ export type Props = React.ComponentProps<typeof Surface> & {
    * Changes Card shadow and background on iOS and Android.
    */
   elevation?: 0 | 1 | 2 | 3 | 4 | 5 | Animated.Value;
-  style?: StyleProp<ViewStyle>;
+  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
   /**
    * @optional
    */
@@ -248,6 +248,7 @@ const Card = ({
       {...(isV3 && {
         elevation: isMode('elevated') ? computedElevation : 0,
       })}
+      testID={`${testID}-container`}
       {...rest}
     >
       {isMode('outlined') && (