diff --git a/types/react-navigation/index.d.ts b/types/react-navigation/index.d.ts index 10e43eb056..e71a368455 100644 --- a/types/react-navigation/index.d.ts +++ b/types/react-navigation/index.d.ts @@ -27,6 +27,7 @@ import { Animated, TextStyle, ViewStyle, + StyleProp, } from 'react-native'; // @todo when we split types into common, native and web, @@ -45,7 +46,7 @@ export interface HeaderProps extends NavigationSceneRendererProps { getScreenDetails: (navigationScene: NavigationScene) => NavigationScreenDetails< NavigationStackScreenOptions >; - style: ViewStyle; + style: StyleProp; } /** @@ -252,7 +253,7 @@ export interface NavigationUriAction extends NavigationUriActionPayload { export interface NavigationStackViewConfig { mode?: 'card' | 'modal'; headerMode?: HeaderMode; - cardStyle?: ViewStyle; + cardStyle?: StyleProp; transitionConfig?: () => TransitionConfig; onTransitionStart?: () => void; onTransitionEnd?: () => void; @@ -261,15 +262,15 @@ export interface NavigationStackViewConfig { export type NavigationStackScreenOptions = NavigationScreenOptions & { header?: (React.ReactElement | ((headerProps: HeaderProps) => React.ReactElement)) | null; headerTitle?: string | React.ReactElement; - headerTitleStyle?: TextStyle; + headerTitleStyle?: StyleProp; headerTintColor?: string; headerLeft?: React.ReactElement; headerBackTitle?: string | null; headerTruncatedBackTitle?: string; - headerBackTitleStyle?: TextStyle; + headerBackTitleStyle?: StyleProp; headerPressColorAndroid?: string; headerRight?: React.ReactElement; - headerStyle?: ViewStyle; + headerStyle?: StyleProp; gesturesEnabled?: boolean; }; @@ -508,7 +509,7 @@ interface NavigationContainerProps { nextNavigationState: NavigationState, action: NavigationAction, ) => void; - style?: ViewStyle; + style?: StyleProp; } export interface NavigationContainer extends React.ComponentClass< @@ -542,7 +543,7 @@ export interface DrawerViewConfig { drawerPosition: 'left' | 'right'; contentComponent: (props: any) => React.ReactElement | React.ComponentClass; contentOptions?: any; - style?: ViewStyle; + style?: StyleProp; } export interface DrawerNavigatorConfig extends NavigationTabRouterConfig, DrawerViewConfig { containerConfig?: any; @@ -551,8 +552,8 @@ export interface DrawerNavigatorConfig extends NavigationTabRouterConfig, Drawer activeBackgroundColor?: string, inactiveTintColor?: string, inactiveBackgroundColor?: string, - style?: ViewStyle, - labelStyle?: TextStyle, + style?: StyleProp, + labelStyle?: StyleProp, }; } @@ -575,8 +576,8 @@ export interface TabViewConfig { inactiveTintColor?: string, inactiveBackgroundColor?: string, showLabel?: boolean, - style?: ViewStyle, - labelStyle?: TextStyle, + style?: StyleProp, + labelStyle?: StyleProp, // Top showIcon?: boolean, @@ -584,8 +585,8 @@ export interface TabViewConfig { pressColor?: string, pressOpacity?: number, scrollEnabled?: boolean, - tabStyle?: ViewStyle, - indicatorStyle?: ViewStyle + tabStyle?: StyleProp, + indicatorStyle?: StyleProp, }; swipeEnabled?: boolean; animationEnabled?: boolean; @@ -631,7 +632,7 @@ interface TransitionerProps { transitionProps: NavigationTransitionProps, prevTransitionProps?: NavigationTransitionProps ) => any; - style?: ViewStyle; + style?: StyleProp; } interface TransitionerState { @@ -724,7 +725,7 @@ export interface HeaderBackButtonProps { onPress?: () => void; pressColorAndroid?: string; title?: string; - titleStyle?: TextStyle; + titleStyle?: StyleProp; tintColor?: string; truncatedTitle?: string; width?: number; diff --git a/types/react-navigation/react-navigation-tests.tsx b/types/react-navigation/react-navigation-tests.tsx index cfed35d9e1..ef29bac820 100644 --- a/types/react-navigation/react-navigation-tests.tsx +++ b/types/react-navigation/react-navigation-tests.tsx @@ -165,7 +165,7 @@ function renderBasicTabNavigator(): JSX.Element { return ( { }} - style={viewStyle} + style={[viewStyle, undefined]} // Test that we are using StyleProp /> ); }