fix: style types (callstack#3623)

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') && (