diff --git a/native/chat/chat-header.react.js b/native/chat/chat-header.react.js --- a/native/chat/chat-header.react.js +++ b/native/chat/chat-header.react.js @@ -1,6 +1,10 @@ // @flow -import type { StackHeaderProps } from '@react-navigation/stack'; +import type { + StackHeaderProps, + StackNavigationHelpers, + StackOptions, +} from '@react-navigation/stack'; import * as React from 'react'; import Header from '../navigation/header.react'; @@ -10,8 +14,12 @@ const activeTabSelector = createActiveTabSelector(ChatRouteName); -const ChatHeader: React.ComponentType = React.memo( - function ChatHeader(props: StackHeaderProps) { +const ChatHeader: React.ComponentType< + StackHeaderProps, StackOptions>, +> = React.memo, StackOptions>>( + function ChatHeader( + props: StackHeaderProps, StackOptions>, + ) { const navContext = React.useContext(NavContext); const activeTab = activeTabSelector(navContext); return
; diff --git a/native/chat/chat.react.js b/native/chat/chat.react.js --- a/native/chat/chat.react.js +++ b/native/chat/chat.react.js @@ -17,7 +17,12 @@ type StackNavigationHelpers, type ParamListBase, } from '@react-navigation/native'; -import { StackView, type StackHeaderProps } from '@react-navigation/stack'; +import { + StackView, + type StackHeaderProps, + type StackNavigationHelpers as StackStackNavigationHelpers, + type StackOptions as StackStackOptions, +} from '@react-navigation/stack'; import invariant from 'invariant'; import * as React from 'react'; import { Platform, View } from 'react-native'; @@ -192,10 +197,15 @@ ExtraStackNavigatorProps, >(ChatNavigator); -const header = (props: CoreStackHeaderProps) => { +const header = ( + props: CoreStackHeaderProps, StackOptions>, +) => { // Flow has trouble reconciling identical types between different libdefs, // and flow-typed has no way for one libdef to depend on another - const castProps: StackHeaderProps = (props: any); + const castProps: StackHeaderProps< + StackStackNavigationHelpers<>, + StackStackOptions, + > = (props: any); return ; }; const headerBackButton = props => ; diff --git a/native/chat/message-list-header-title.react.js b/native/chat/message-list-header-title.react.js --- a/native/chat/message-list-header-title.react.js +++ b/native/chat/message-list-header-title.react.js @@ -2,7 +2,7 @@ import { HeaderTitle, - type StackHeaderTitleInputProps, + type HeaderTitleInputProps, } from '@react-navigation/elements'; import * as React from 'react'; import { View, Platform } from 'react-native'; @@ -21,7 +21,7 @@ +navigate: $PropertyType, 'navigate'>, +isSearchEmpty: boolean, +areSettingsEnabled: boolean, - ...StackHeaderTitleInputProps, + ...HeaderTitleInputProps, }; type Props = { ...BaseProps, diff --git a/native/flow-typed/npm/@react-navigation/bottom-tabs_v6.x.x.js b/native/flow-typed/npm/@react-navigation/bottom-tabs_v6.x.x.js --- a/native/flow-typed/npm/@react-navigation/bottom-tabs_v6.x.x.js +++ b/native/flow-typed/npm/@react-navigation/bottom-tabs_v6.x.x.js @@ -1329,21 +1329,35 @@ |}, |}; - declare export type StackHeaderProps = {| - +navigation: StackNavigationHelpers<>, + declare export type HeaderProps = {| + +navigation: T, +route: RouteProp<>, - +options: StackOptions, + +options: U, +layout: {| +width: number, +height: number |}, + |}; + + declare export type StackHeaderProps = {| + ...HeaderProps, +progress: AnimatedInterpolation, +back?: {| +title: string |}, +styleInterpolator: StackHeaderStyleInterpolator, |}; + declare export type HeaderButtonProps = $Partial<{| + +tintColor: string, + +pressColor: string, + +pressOpacity: number, + |}>; + + declare export type StackHeaderButtonProps = $Partial<{| + ...HeaderButtonProps, + +canGoBack: boolean, + |}>; + declare export type StackHeaderLeftButtonProps = $Partial<{| + ...StackHeaderButtonProps, +onPress: (() => void), - +pressColorAndroid: string; +backImage: (props: {| tintColor: string |}) => React$Node, - +tintColor: string, +label: string, +truncatedLabel: string, +labelVisible: boolean, @@ -1352,10 +1366,19 @@ +onLabelLayout: LayoutEvent => void, +screenLayout: {| +width: number, +height: number |}, +titleLayout: {| +width: number, +height: number |}, - +canGoBack: boolean, + +disabled: boolean, + +accessibilityLabel: string, + +style: ViewStyleProp, |}>; - declare type StackHeaderTitleInputBase = { + declare export type HeaderLeftButtonProps = $Partial<{| + +tintColor: string, + +pressColor: string, + +pressOpacity: number, + +labelVisible: boolean, + |}>; + + declare type HeaderTitleInputBase = { +onLayout: LayoutEvent => void, +children: string, +allowFontScaling: ?boolean, @@ -1364,8 +1387,32 @@ ... }; - declare export type StackHeaderTitleInputProps = - $Exact; + declare export type HeaderTitleInputProps = + $Exact; + + declare export type HeaderCommonOptions = $Partial<{| + +header: T => React$Node, + +headerShown: boolean, + + +headerTitle: string | ( HeaderTitleInputProps => React$Node), + +headerTitleAlign: 'left' | 'center', + +headerTitleStyle: AnimatedTextStyleProp, + +headerTitleContainerStyle: ViewStyleProp, + +headerTintColor: string, + +headerTitleAllowFontScaling: boolean, + +headerLeft: U => React$Node, + +headerLeftContainerStyle: ViewStyleProp, + +headerRight: V => React$Node, + +headerRightContainerStyle: ViewStyleProp, + +headerBackground: ({| style: ViewStyleProp |}) => React$Node, + +headerStyle: ViewStyleProp, + +headerTransparent: boolean, + +headerStatusBarHeight: number, + +headerShadowVisible: boolean, + +headerBackgroundContainerStyle: ViewStyleProp, + +headerPressColor: string, + +headerPressOpacity: number, + |}>; declare export type StackOptions = $Partial<{| +title: string, @@ -1384,30 +1431,19 @@ // Transition ...TransitionPreset, // Header - +header: StackHeaderProps => React$Node, - +headerShown: boolean, + ...HeaderCommonOptions< + StackHeaderProps, StackOptions>, + StackHeaderLeftButtonProps, + StackHeaderButtonProps, + >, +headerMode: 'float' | 'screen', - +headerTitle: string | (StackHeaderTitleInputProps => React$Node), - +headerTitleAlign: 'left' | 'center', - +headerTitleStyle: AnimatedTextStyleProp, - +headerTitleContainerStyle: ViewStyleProp, - +headerTintColor: string, - +headerTitleAllowFontScaling: boolean, +headerBackAllowFontScaling: boolean, +headerBackTitle: string | null, +headerBackTitleStyle: TextStyleProp, +headerBackTitleVisible: boolean, +headerTruncatedBackTitle: string, - +headerLeft: StackHeaderLeftButtonProps => React$Node, - +headerLeftContainerStyle: ViewStyleProp, - +headerRight: {| tintColor?: string |} => React$Node, - +headerRightContainerStyle: ViewStyleProp, +headerBackImage: $PropertyType, - +headerPressColorAndroid: string, - +headerBackground: ({| style: ViewStyleProp |}) => React$Node, - +headerStyle: ViewStyleProp, - +headerTransparent: boolean, - +headerStatusBarHeight: number, + +headerBackAccessibilityLabel: string, |}>; /** @@ -1553,8 +1589,12 @@ +tabBarLabelPosition: 'beside-icon' | 'below-icon', +tabBarStyle: ViewStyleProp, +unmountOnBlur: boolean, - +headerShown: boolean, +lazy: boolean, + ...HeaderCommonOptions< + HeaderProps, BottomTabOptions>, + HeaderLeftButtonProps, + HeaderButtonProps, + >, |}>; /** @@ -2002,7 +2042,11 @@ +swipeMinDistance: number, +keyboardDismissMode: 'on-drag' | 'none', +unmountOnBlur: boolean, - +headerShown: boolean, + ...HeaderCommonOptions< + HeaderProps, DrawerOptions>, + HeaderLeftButtonProps, + HeaderButtonProps, + >, |}>; /** diff --git a/native/flow-typed/npm/@react-navigation/devtools_v6.x.x.js b/native/flow-typed/npm/@react-navigation/devtools_v6.x.x.js --- a/native/flow-typed/npm/@react-navigation/devtools_v6.x.x.js +++ b/native/flow-typed/npm/@react-navigation/devtools_v6.x.x.js @@ -1329,21 +1329,35 @@ |}, |}; - declare export type StackHeaderProps = {| - +navigation: StackNavigationHelpers<>, + declare export type HeaderProps = {| + +navigation: T, +route: RouteProp<>, - +options: StackOptions, + +options: U, +layout: {| +width: number, +height: number |}, + |}; + + declare export type StackHeaderProps = {| + ...HeaderProps, +progress: AnimatedInterpolation, +back?: {| +title: string |}, +styleInterpolator: StackHeaderStyleInterpolator, |}; + declare export type HeaderButtonProps = $Partial<{| + +tintColor: string, + +pressColor: string, + +pressOpacity: number, + |}>; + + declare export type StackHeaderButtonProps = $Partial<{| + ...HeaderButtonProps, + +canGoBack: boolean, + |}>; + declare export type StackHeaderLeftButtonProps = $Partial<{| + ...StackHeaderButtonProps, +onPress: (() => void), - +pressColorAndroid: string; +backImage: (props: {| tintColor: string |}) => React$Node, - +tintColor: string, +label: string, +truncatedLabel: string, +labelVisible: boolean, @@ -1352,10 +1366,19 @@ +onLabelLayout: LayoutEvent => void, +screenLayout: {| +width: number, +height: number |}, +titleLayout: {| +width: number, +height: number |}, - +canGoBack: boolean, + +disabled: boolean, + +accessibilityLabel: string, + +style: ViewStyleProp, |}>; - declare type StackHeaderTitleInputBase = { + declare export type HeaderLeftButtonProps = $Partial<{| + +tintColor: string, + +pressColor: string, + +pressOpacity: number, + +labelVisible: boolean, + |}>; + + declare type HeaderTitleInputBase = { +onLayout: LayoutEvent => void, +children: string, +allowFontScaling: ?boolean, @@ -1364,8 +1387,32 @@ ... }; - declare export type StackHeaderTitleInputProps = - $Exact; + declare export type HeaderTitleInputProps = + $Exact; + + declare export type HeaderCommonOptions = $Partial<{| + +header: T => React$Node, + +headerShown: boolean, + + +headerTitle: string | ( HeaderTitleInputProps => React$Node), + +headerTitleAlign: 'left' | 'center', + +headerTitleStyle: AnimatedTextStyleProp, + +headerTitleContainerStyle: ViewStyleProp, + +headerTintColor: string, + +headerTitleAllowFontScaling: boolean, + +headerLeft: U => React$Node, + +headerLeftContainerStyle: ViewStyleProp, + +headerRight: V => React$Node, + +headerRightContainerStyle: ViewStyleProp, + +headerBackground: ({| style: ViewStyleProp |}) => React$Node, + +headerStyle: ViewStyleProp, + +headerTransparent: boolean, + +headerStatusBarHeight: number, + +headerShadowVisible: boolean, + +headerBackgroundContainerStyle: ViewStyleProp, + +headerPressColor: string, + +headerPressOpacity: number, + |}>; declare export type StackOptions = $Partial<{| +title: string, @@ -1384,30 +1431,19 @@ // Transition ...TransitionPreset, // Header - +header: StackHeaderProps => React$Node, - +headerShown: boolean, + ...HeaderCommonOptions< + StackHeaderProps, StackOptions>, + StackHeaderLeftButtonProps, + StackHeaderButtonProps, + >, +headerMode: 'float' | 'screen', - +headerTitle: string | (StackHeaderTitleInputProps => React$Node), - +headerTitleAlign: 'left' | 'center', - +headerTitleStyle: AnimatedTextStyleProp, - +headerTitleContainerStyle: ViewStyleProp, - +headerTintColor: string, - +headerTitleAllowFontScaling: boolean, +headerBackAllowFontScaling: boolean, +headerBackTitle: string | null, +headerBackTitleStyle: TextStyleProp, +headerBackTitleVisible: boolean, +headerTruncatedBackTitle: string, - +headerLeft: StackHeaderLeftButtonProps => React$Node, - +headerLeftContainerStyle: ViewStyleProp, - +headerRight: {| tintColor?: string |} => React$Node, - +headerRightContainerStyle: ViewStyleProp, +headerBackImage: $PropertyType, - +headerPressColorAndroid: string, - +headerBackground: ({| style: ViewStyleProp |}) => React$Node, - +headerStyle: ViewStyleProp, - +headerTransparent: boolean, - +headerStatusBarHeight: number, + +headerBackAccessibilityLabel: string, |}>; /** @@ -1553,8 +1589,12 @@ +tabBarLabelPosition: 'beside-icon' | 'below-icon', +tabBarStyle: ViewStyleProp, +unmountOnBlur: boolean, - +headerShown: boolean, +lazy: boolean, + ...HeaderCommonOptions< + HeaderProps, BottomTabOptions>, + HeaderLeftButtonProps, + HeaderButtonProps, + >, |}>; /** @@ -2002,7 +2042,11 @@ +swipeMinDistance: number, +keyboardDismissMode: 'on-drag' | 'none', +unmountOnBlur: boolean, - +headerShown: boolean, + ...HeaderCommonOptions< + HeaderProps, DrawerOptions>, + HeaderLeftButtonProps, + HeaderButtonProps, + >, |}>; /** diff --git a/native/flow-typed/npm/@react-navigation/drawer_v6.x.x.js b/native/flow-typed/npm/@react-navigation/drawer_v6.x.x.js --- a/native/flow-typed/npm/@react-navigation/drawer_v6.x.x.js +++ b/native/flow-typed/npm/@react-navigation/drawer_v6.x.x.js @@ -1329,21 +1329,35 @@ |}, |}; - declare export type StackHeaderProps = {| - +navigation: StackNavigationHelpers<>, + declare export type HeaderProps = {| + +navigation: T, +route: RouteProp<>, - +options: StackOptions, + +options: U, +layout: {| +width: number, +height: number |}, + |}; + + declare export type StackHeaderProps = {| + ...HeaderProps, +progress: AnimatedInterpolation, +back?: {| +title: string |}, +styleInterpolator: StackHeaderStyleInterpolator, |}; + declare export type HeaderButtonProps = $Partial<{| + +tintColor: string, + +pressColor: string, + +pressOpacity: number, + |}>; + + declare export type StackHeaderButtonProps = $Partial<{| + ...HeaderButtonProps, + +canGoBack: boolean, + |}>; + declare export type StackHeaderLeftButtonProps = $Partial<{| + ...StackHeaderButtonProps, +onPress: (() => void), - +pressColorAndroid: string; +backImage: (props: {| tintColor: string |}) => React$Node, - +tintColor: string, +label: string, +truncatedLabel: string, +labelVisible: boolean, @@ -1352,10 +1366,19 @@ +onLabelLayout: LayoutEvent => void, +screenLayout: {| +width: number, +height: number |}, +titleLayout: {| +width: number, +height: number |}, - +canGoBack: boolean, + +disabled: boolean, + +accessibilityLabel: string, + +style: ViewStyleProp, |}>; - declare type StackHeaderTitleInputBase = { + declare export type HeaderLeftButtonProps = $Partial<{| + +tintColor: string, + +pressColor: string, + +pressOpacity: number, + +labelVisible: boolean, + |}>; + + declare type HeaderTitleInputBase = { +onLayout: LayoutEvent => void, +children: string, +allowFontScaling: ?boolean, @@ -1364,8 +1387,32 @@ ... }; - declare export type StackHeaderTitleInputProps = - $Exact; + declare export type HeaderTitleInputProps = + $Exact; + + declare export type HeaderCommonOptions = $Partial<{| + +header: T => React$Node, + +headerShown: boolean, + + +headerTitle: string | ( HeaderTitleInputProps => React$Node), + +headerTitleAlign: 'left' | 'center', + +headerTitleStyle: AnimatedTextStyleProp, + +headerTitleContainerStyle: ViewStyleProp, + +headerTintColor: string, + +headerTitleAllowFontScaling: boolean, + +headerLeft: U => React$Node, + +headerLeftContainerStyle: ViewStyleProp, + +headerRight: V => React$Node, + +headerRightContainerStyle: ViewStyleProp, + +headerBackground: ({| style: ViewStyleProp |}) => React$Node, + +headerStyle: ViewStyleProp, + +headerTransparent: boolean, + +headerStatusBarHeight: number, + +headerShadowVisible: boolean, + +headerBackgroundContainerStyle: ViewStyleProp, + +headerPressColor: string, + +headerPressOpacity: number, + |}>; declare export type StackOptions = $Partial<{| +title: string, @@ -1384,30 +1431,19 @@ // Transition ...TransitionPreset, // Header - +header: StackHeaderProps => React$Node, - +headerShown: boolean, + ...HeaderCommonOptions< + StackHeaderProps, StackOptions>, + StackHeaderLeftButtonProps, + StackHeaderButtonProps, + >, +headerMode: 'float' | 'screen', - +headerTitle: string | (StackHeaderTitleInputProps => React$Node), - +headerTitleAlign: 'left' | 'center', - +headerTitleStyle: AnimatedTextStyleProp, - +headerTitleContainerStyle: ViewStyleProp, - +headerTintColor: string, - +headerTitleAllowFontScaling: boolean, +headerBackAllowFontScaling: boolean, +headerBackTitle: string | null, +headerBackTitleStyle: TextStyleProp, +headerBackTitleVisible: boolean, +headerTruncatedBackTitle: string, - +headerLeft: StackHeaderLeftButtonProps => React$Node, - +headerLeftContainerStyle: ViewStyleProp, - +headerRight: {| tintColor?: string |} => React$Node, - +headerRightContainerStyle: ViewStyleProp, +headerBackImage: $PropertyType, - +headerPressColorAndroid: string, - +headerBackground: ({| style: ViewStyleProp |}) => React$Node, - +headerStyle: ViewStyleProp, - +headerTransparent: boolean, - +headerStatusBarHeight: number, + +headerBackAccessibilityLabel: string, |}>; /** @@ -1553,8 +1589,12 @@ +tabBarLabelPosition: 'beside-icon' | 'below-icon', +tabBarStyle: ViewStyleProp, +unmountOnBlur: boolean, - +headerShown: boolean, +lazy: boolean, + ...HeaderCommonOptions< + HeaderProps, BottomTabOptions>, + HeaderLeftButtonProps, + HeaderButtonProps, + >, |}>; /** @@ -2002,7 +2042,11 @@ +swipeMinDistance: number, +keyboardDismissMode: 'on-drag' | 'none', +unmountOnBlur: boolean, - +headerShown: boolean, + ...HeaderCommonOptions< + HeaderProps, DrawerOptions>, + HeaderLeftButtonProps, + HeaderButtonProps, + >, |}>; /** diff --git a/native/flow-typed/npm/@react-navigation/elements_v1.x.x.js b/native/flow-typed/npm/@react-navigation/elements_v1.x.x.js --- a/native/flow-typed/npm/@react-navigation/elements_v1.x.x.js +++ b/native/flow-typed/npm/@react-navigation/elements_v1.x.x.js @@ -1326,21 +1326,35 @@ |}, |}; - declare export type StackHeaderProps = {| - +navigation: StackNavigationHelpers<>, + declare export type HeaderProps = {| + +navigation: T, +route: RouteProp<>, - +options: StackOptions, + +options: U, +layout: {| +width: number, +height: number |}, + |}; + + declare export type StackHeaderProps = {| + ...HeaderProps, +progress: AnimatedInterpolation, +back?: {| +title: string |}, +styleInterpolator: StackHeaderStyleInterpolator, |}; + declare export type HeaderButtonProps = $Partial<{| + +tintColor: string, + +pressColor: string, + +pressOpacity: number, + |}>; + + declare export type StackHeaderButtonProps = $Partial<{| + ...HeaderButtonProps, + +canGoBack: boolean, + |}>; + declare export type StackHeaderLeftButtonProps = $Partial<{| + ...StackHeaderButtonProps, +onPress: (() => void), - +pressColorAndroid: string; +backImage: (props: {| tintColor: string |}) => React$Node, - +tintColor: string, +label: string, +truncatedLabel: string, +labelVisible: boolean, @@ -1349,10 +1363,19 @@ +onLabelLayout: LayoutEvent => void, +screenLayout: {| +width: number, +height: number |}, +titleLayout: {| +width: number, +height: number |}, - +canGoBack: boolean, + +disabled: boolean, + +accessibilityLabel: string, + +style: ViewStyleProp, |}>; - declare type StackHeaderTitleInputBase = { + declare export type HeaderLeftButtonProps = $Partial<{| + +tintColor: string, + +pressColor: string, + +pressOpacity: number, + +labelVisible: boolean, + |}>; + + declare type HeaderTitleInputBase = { +onLayout: LayoutEvent => void, +children: string, +allowFontScaling: ?boolean, @@ -1361,8 +1384,32 @@ ... }; - declare export type StackHeaderTitleInputProps = - $Exact; + declare export type HeaderTitleInputProps = + $Exact; + + declare export type HeaderCommonOptions = $Partial<{| + +header: T => React$Node, + +headerShown: boolean, + + +headerTitle: string | ( HeaderTitleInputProps => React$Node), + +headerTitleAlign: 'left' | 'center', + +headerTitleStyle: AnimatedTextStyleProp, + +headerTitleContainerStyle: ViewStyleProp, + +headerTintColor: string, + +headerTitleAllowFontScaling: boolean, + +headerLeft: U => React$Node, + +headerLeftContainerStyle: ViewStyleProp, + +headerRight: V => React$Node, + +headerRightContainerStyle: ViewStyleProp, + +headerBackground: ({| style: ViewStyleProp |}) => React$Node, + +headerStyle: ViewStyleProp, + +headerTransparent: boolean, + +headerStatusBarHeight: number, + +headerShadowVisible: boolean, + +headerBackgroundContainerStyle: ViewStyleProp, + +headerPressColor: string, + +headerPressOpacity: number, + |}>; declare export type StackOptions = $Partial<{| +title: string, @@ -1381,30 +1428,19 @@ // Transition ...TransitionPreset, // Header - +header: StackHeaderProps => React$Node, - +headerShown: boolean, + ...HeaderCommonOptions< + StackHeaderProps, StackOptions>, + StackHeaderLeftButtonProps, + StackHeaderButtonProps, + >, +headerMode: 'float' | 'screen', - +headerTitle: string | (StackHeaderTitleInputProps => React$Node), - +headerTitleAlign: 'left' | 'center', - +headerTitleStyle: AnimatedTextStyleProp, - +headerTitleContainerStyle: ViewStyleProp, - +headerTintColor: string, - +headerTitleAllowFontScaling: boolean, +headerBackAllowFontScaling: boolean, +headerBackTitle: string | null, +headerBackTitleStyle: TextStyleProp, +headerBackTitleVisible: boolean, +headerTruncatedBackTitle: string, - +headerLeft: StackHeaderLeftButtonProps => React$Node, - +headerLeftContainerStyle: ViewStyleProp, - +headerRight: {| tintColor?: string |} => React$Node, - +headerRightContainerStyle: ViewStyleProp, +headerBackImage: $PropertyType, - +headerPressColorAndroid: string, - +headerBackground: ({| style: ViewStyleProp |}) => React$Node, - +headerStyle: ViewStyleProp, - +headerTransparent: boolean, - +headerStatusBarHeight: number, + +headerBackAccessibilityLabel: string, |}>; /** @@ -1550,8 +1586,12 @@ +tabBarLabelPosition: 'beside-icon' | 'below-icon', +tabBarStyle: ViewStyleProp, +unmountOnBlur: boolean, - +headerShown: boolean, +lazy: boolean, + ...HeaderCommonOptions< + HeaderProps, BottomTabOptions>, + HeaderLeftButtonProps, + HeaderButtonProps, + >, |}>; /** @@ -1999,7 +2039,11 @@ +swipeMinDistance: number, +keyboardDismissMode: 'on-drag' | 'none', +unmountOnBlur: boolean, - +headerShown: boolean, + ...HeaderCommonOptions< + HeaderProps, DrawerOptions>, + HeaderLeftButtonProps, + HeaderButtonProps, + >, |}>; /** @@ -2217,7 +2261,7 @@ * Header components */ - declare export type StackHeaderTitleProps = $Partial; + declare export type StackHeaderTitleProps = $Partial; declare export var HeaderTitle: React$ComponentType; declare export type HeaderBackButtonProps = $Partial<{| diff --git a/native/flow-typed/npm/@react-navigation/material-top-tabs_v6.x.x.js b/native/flow-typed/npm/@react-navigation/material-top-tabs_v6.x.x.js --- a/native/flow-typed/npm/@react-navigation/material-top-tabs_v6.x.x.js +++ b/native/flow-typed/npm/@react-navigation/material-top-tabs_v6.x.x.js @@ -1329,21 +1329,35 @@ |}, |}; - declare export type StackHeaderProps = {| - +navigation: StackNavigationHelpers<>, + declare export type HeaderProps = {| + +navigation: T, +route: RouteProp<>, - +options: StackOptions, + +options: U, +layout: {| +width: number, +height: number |}, + |}; + + declare export type StackHeaderProps = {| + ...HeaderProps, +progress: AnimatedInterpolation, +back?: {| +title: string |}, +styleInterpolator: StackHeaderStyleInterpolator, |}; + declare export type HeaderButtonProps = $Partial<{| + +tintColor: string, + +pressColor: string, + +pressOpacity: number, + |}>; + + declare export type StackHeaderButtonProps = $Partial<{| + ...HeaderButtonProps, + +canGoBack: boolean, + |}>; + declare export type StackHeaderLeftButtonProps = $Partial<{| + ...StackHeaderButtonProps, +onPress: (() => void), - +pressColorAndroid: string; +backImage: (props: {| tintColor: string |}) => React$Node, - +tintColor: string, +label: string, +truncatedLabel: string, +labelVisible: boolean, @@ -1352,10 +1366,19 @@ +onLabelLayout: LayoutEvent => void, +screenLayout: {| +width: number, +height: number |}, +titleLayout: {| +width: number, +height: number |}, - +canGoBack: boolean, + +disabled: boolean, + +accessibilityLabel: string, + +style: ViewStyleProp, |}>; - declare type StackHeaderTitleInputBase = { + declare export type HeaderLeftButtonProps = $Partial<{| + +tintColor: string, + +pressColor: string, + +pressOpacity: number, + +labelVisible: boolean, + |}>; + + declare type HeaderTitleInputBase = { +onLayout: LayoutEvent => void, +children: string, +allowFontScaling: ?boolean, @@ -1364,8 +1387,32 @@ ... }; - declare export type StackHeaderTitleInputProps = - $Exact; + declare export type HeaderTitleInputProps = + $Exact; + + declare export type HeaderCommonOptions = $Partial<{| + +header: T => React$Node, + +headerShown: boolean, + + +headerTitle: string | ( HeaderTitleInputProps => React$Node), + +headerTitleAlign: 'left' | 'center', + +headerTitleStyle: AnimatedTextStyleProp, + +headerTitleContainerStyle: ViewStyleProp, + +headerTintColor: string, + +headerTitleAllowFontScaling: boolean, + +headerLeft: U => React$Node, + +headerLeftContainerStyle: ViewStyleProp, + +headerRight: V => React$Node, + +headerRightContainerStyle: ViewStyleProp, + +headerBackground: ({| style: ViewStyleProp |}) => React$Node, + +headerStyle: ViewStyleProp, + +headerTransparent: boolean, + +headerStatusBarHeight: number, + +headerShadowVisible: boolean, + +headerBackgroundContainerStyle: ViewStyleProp, + +headerPressColor: string, + +headerPressOpacity: number, + |}>; declare export type StackOptions = $Partial<{| +title: string, @@ -1384,30 +1431,19 @@ // Transition ...TransitionPreset, // Header - +header: StackHeaderProps => React$Node, - +headerShown: boolean, + ...HeaderCommonOptions< + StackHeaderProps, StackOptions>, + StackHeaderLeftButtonProps, + StackHeaderButtonProps, + >, +headerMode: 'float' | 'screen', - +headerTitle: string | (StackHeaderTitleInputProps => React$Node), - +headerTitleAlign: 'left' | 'center', - +headerTitleStyle: AnimatedTextStyleProp, - +headerTitleContainerStyle: ViewStyleProp, - +headerTintColor: string, - +headerTitleAllowFontScaling: boolean, +headerBackAllowFontScaling: boolean, +headerBackTitle: string | null, +headerBackTitleStyle: TextStyleProp, +headerBackTitleVisible: boolean, +headerTruncatedBackTitle: string, - +headerLeft: StackHeaderLeftButtonProps => React$Node, - +headerLeftContainerStyle: ViewStyleProp, - +headerRight: {| tintColor?: string |} => React$Node, - +headerRightContainerStyle: ViewStyleProp, +headerBackImage: $PropertyType, - +headerPressColorAndroid: string, - +headerBackground: ({| style: ViewStyleProp |}) => React$Node, - +headerStyle: ViewStyleProp, - +headerTransparent: boolean, - +headerStatusBarHeight: number, + +headerBackAccessibilityLabel: string, |}>; /** @@ -1553,8 +1589,12 @@ +tabBarLabelPosition: 'beside-icon' | 'below-icon', +tabBarStyle: ViewStyleProp, +unmountOnBlur: boolean, - +headerShown: boolean, +lazy: boolean, + ...HeaderCommonOptions< + HeaderProps, BottomTabOptions>, + HeaderLeftButtonProps, + HeaderButtonProps, + >, |}>; /** @@ -2002,7 +2042,11 @@ +swipeMinDistance: number, +keyboardDismissMode: 'on-drag' | 'none', +unmountOnBlur: boolean, - +headerShown: boolean, + ...HeaderCommonOptions< + HeaderProps, DrawerOptions>, + HeaderLeftButtonProps, + HeaderButtonProps, + >, |}>; /** diff --git a/native/flow-typed/npm/@react-navigation/native_v6.x.x.js b/native/flow-typed/npm/@react-navigation/native_v6.x.x.js --- a/native/flow-typed/npm/@react-navigation/native_v6.x.x.js +++ b/native/flow-typed/npm/@react-navigation/native_v6.x.x.js @@ -1329,21 +1329,35 @@ |}, |}; - declare export type StackHeaderProps = {| - +navigation: StackNavigationHelpers<>, + declare export type HeaderProps = {| + +navigation: T, +route: RouteProp<>, - +options: StackOptions, + +options: U, +layout: {| +width: number, +height: number |}, + |}; + + declare export type StackHeaderProps = {| + ...HeaderProps, +progress: AnimatedInterpolation, +back?: {| +title: string |}, +styleInterpolator: StackHeaderStyleInterpolator, |}; + declare export type HeaderButtonProps = $Partial<{| + +tintColor: string, + +pressColor: string, + +pressOpacity: number, + |}>; + + declare export type StackHeaderButtonProps = $Partial<{| + ...HeaderButtonProps, + +canGoBack: boolean, + |}>; + declare export type StackHeaderLeftButtonProps = $Partial<{| + ...StackHeaderButtonProps, +onPress: (() => void), - +pressColorAndroid: string; +backImage: (props: {| tintColor: string |}) => React$Node, - +tintColor: string, +label: string, +truncatedLabel: string, +labelVisible: boolean, @@ -1352,10 +1366,19 @@ +onLabelLayout: LayoutEvent => void, +screenLayout: {| +width: number, +height: number |}, +titleLayout: {| +width: number, +height: number |}, - +canGoBack: boolean, + +disabled: boolean, + +accessibilityLabel: string, + +style: ViewStyleProp, |}>; - declare type StackHeaderTitleInputBase = { + declare export type HeaderLeftButtonProps = $Partial<{| + +tintColor: string, + +pressColor: string, + +pressOpacity: number, + +labelVisible: boolean, + |}>; + + declare type HeaderTitleInputBase = { +onLayout: LayoutEvent => void, +children: string, +allowFontScaling: ?boolean, @@ -1364,8 +1387,32 @@ ... }; - declare export type StackHeaderTitleInputProps = - $Exact; + declare export type HeaderTitleInputProps = + $Exact; + + declare export type HeaderCommonOptions = $Partial<{| + +header: T => React$Node, + +headerShown: boolean, + + +headerTitle: string | ( HeaderTitleInputProps => React$Node), + +headerTitleAlign: 'left' | 'center', + +headerTitleStyle: AnimatedTextStyleProp, + +headerTitleContainerStyle: ViewStyleProp, + +headerTintColor: string, + +headerTitleAllowFontScaling: boolean, + +headerLeft: U => React$Node, + +headerLeftContainerStyle: ViewStyleProp, + +headerRight: V => React$Node, + +headerRightContainerStyle: ViewStyleProp, + +headerBackground: ({| style: ViewStyleProp |}) => React$Node, + +headerStyle: ViewStyleProp, + +headerTransparent: boolean, + +headerStatusBarHeight: number, + +headerShadowVisible: boolean, + +headerBackgroundContainerStyle: ViewStyleProp, + +headerPressColor: string, + +headerPressOpacity: number, + |}>; declare export type StackOptions = $Partial<{| +title: string, @@ -1384,30 +1431,19 @@ // Transition ...TransitionPreset, // Header - +header: StackHeaderProps => React$Node, - +headerShown: boolean, + ...HeaderCommonOptions< + StackHeaderProps, StackOptions>, + StackHeaderLeftButtonProps, + StackHeaderButtonProps, + >, +headerMode: 'float' | 'screen', - +headerTitle: string | (StackHeaderTitleInputProps => React$Node), - +headerTitleAlign: 'left' | 'center', - +headerTitleStyle: AnimatedTextStyleProp, - +headerTitleContainerStyle: ViewStyleProp, - +headerTintColor: string, - +headerTitleAllowFontScaling: boolean, +headerBackAllowFontScaling: boolean, +headerBackTitle: string | null, +headerBackTitleStyle: TextStyleProp, +headerBackTitleVisible: boolean, +headerTruncatedBackTitle: string, - +headerLeft: StackHeaderLeftButtonProps => React$Node, - +headerLeftContainerStyle: ViewStyleProp, - +headerRight: {| tintColor?: string |} => React$Node, - +headerRightContainerStyle: ViewStyleProp, +headerBackImage: $PropertyType, - +headerPressColorAndroid: string, - +headerBackground: ({| style: ViewStyleProp |}) => React$Node, - +headerStyle: ViewStyleProp, - +headerTransparent: boolean, - +headerStatusBarHeight: number, + +headerBackAccessibilityLabel: string, |}>; /** @@ -1553,8 +1589,12 @@ +tabBarLabelPosition: 'beside-icon' | 'below-icon', +tabBarStyle: ViewStyleProp, +unmountOnBlur: boolean, - +headerShown: boolean, +lazy: boolean, + ...HeaderCommonOptions< + HeaderProps, BottomTabOptions>, + HeaderLeftButtonProps, + HeaderButtonProps, + >, |}>; /** @@ -2002,7 +2042,11 @@ +swipeMinDistance: number, +keyboardDismissMode: 'on-drag' | 'none', +unmountOnBlur: boolean, - +headerShown: boolean, + ...HeaderCommonOptions< + HeaderProps, DrawerOptions>, + HeaderLeftButtonProps, + HeaderButtonProps, + >, |}>; /** diff --git a/native/flow-typed/npm/@react-navigation/stack_v6.x.x.js b/native/flow-typed/npm/@react-navigation/stack_v6.x.x.js --- a/native/flow-typed/npm/@react-navigation/stack_v6.x.x.js +++ b/native/flow-typed/npm/@react-navigation/stack_v6.x.x.js @@ -1329,21 +1329,35 @@ |}, |}; - declare export type StackHeaderProps = {| - +navigation: StackNavigationHelpers<>, + declare export type HeaderProps = {| + +navigation: T, +route: RouteProp<>, - +options: StackOptions, + +options: U, +layout: {| +width: number, +height: number |}, + |}; + + declare export type StackHeaderProps = {| + ...HeaderProps, +progress: AnimatedInterpolation, +back?: {| +title: string |}, +styleInterpolator: StackHeaderStyleInterpolator, |}; + declare export type HeaderButtonProps = $Partial<{| + +tintColor: string, + +pressColor: string, + +pressOpacity: number, + |}>; + + declare export type StackHeaderButtonProps = $Partial<{| + ...HeaderButtonProps, + +canGoBack: boolean, + |}>; + declare export type StackHeaderLeftButtonProps = $Partial<{| + ...StackHeaderButtonProps, +onPress: (() => void), - +pressColorAndroid: string; +backImage: (props: {| tintColor: string |}) => React$Node, - +tintColor: string, +label: string, +truncatedLabel: string, +labelVisible: boolean, @@ -1352,10 +1366,19 @@ +onLabelLayout: LayoutEvent => void, +screenLayout: {| +width: number, +height: number |}, +titleLayout: {| +width: number, +height: number |}, - +canGoBack: boolean, + +disabled: boolean, + +accessibilityLabel: string, + +style: ViewStyleProp, + |}>; + + declare export type HeaderLeftButtonProps = $Partial<{| + +tintColor: string, + +pressColor: string, + +pressOpacity: number, + +labelVisible: boolean, |}>; - declare type StackHeaderTitleInputBase = { + declare type HeaderTitleInputBase = { +onLayout: LayoutEvent => void, +children: string, +allowFontScaling: ?boolean, @@ -1364,8 +1387,32 @@ ... }; - declare export type StackHeaderTitleInputProps = - $Exact; + declare export type HeaderTitleInputProps = + $Exact; + + declare export type HeaderCommonOptions = $Partial<{| + +header: T => React$Node, + +headerShown: boolean, + + +headerTitle: string | ( HeaderTitleInputProps => React$Node), + +headerTitleAlign: 'left' | 'center', + +headerTitleStyle: AnimatedTextStyleProp, + +headerTitleContainerStyle: ViewStyleProp, + +headerTintColor: string, + +headerTitleAllowFontScaling: boolean, + +headerLeft: U => React$Node, + +headerLeftContainerStyle: ViewStyleProp, + +headerRight: V => React$Node, + +headerRightContainerStyle: ViewStyleProp, + +headerBackground: ({| style: ViewStyleProp |}) => React$Node, + +headerStyle: ViewStyleProp, + +headerTransparent: boolean, + +headerStatusBarHeight: number, + +headerShadowVisible: boolean, + +headerBackgroundContainerStyle: ViewStyleProp, + +headerPressColor: string, + +headerPressOpacity: number, + |}>; declare export type StackOptions = $Partial<{| +title: string, @@ -1384,30 +1431,19 @@ // Transition ...TransitionPreset, // Header - +header: StackHeaderProps => React$Node, - +headerShown: boolean, + ...HeaderCommonOptions< + StackHeaderProps, StackOptions>, + StackHeaderLeftButtonProps, + StackHeaderButtonProps, + >, +headerMode: 'float' | 'screen', - +headerTitle: string | (StackHeaderTitleInputProps => React$Node), - +headerTitleAlign: 'left' | 'center', - +headerTitleStyle: AnimatedTextStyleProp, - +headerTitleContainerStyle: ViewStyleProp, - +headerTintColor: string, - +headerTitleAllowFontScaling: boolean, +headerBackAllowFontScaling: boolean, +headerBackTitle: string | null, +headerBackTitleStyle: TextStyleProp, +headerBackTitleVisible: boolean, +headerTruncatedBackTitle: string, - +headerLeft: StackHeaderLeftButtonProps => React$Node, - +headerLeftContainerStyle: ViewStyleProp, - +headerRight: {| tintColor?: string |} => React$Node, - +headerRightContainerStyle: ViewStyleProp, +headerBackImage: $PropertyType, - +headerPressColorAndroid: string, - +headerBackground: ({| style: ViewStyleProp |}) => React$Node, - +headerStyle: ViewStyleProp, - +headerTransparent: boolean, - +headerStatusBarHeight: number, + +headerBackAccessibilityLabel: string, |}>; /** @@ -1553,8 +1589,12 @@ +tabBarLabelPosition: 'beside-icon' | 'below-icon', +tabBarStyle: ViewStyleProp, +unmountOnBlur: boolean, - +headerShown: boolean, +lazy: boolean, + ...HeaderCommonOptions< + HeaderProps, BottomTabOptions>, + HeaderLeftButtonProps, + HeaderButtonProps, + >, |}>; /** @@ -2002,7 +2042,11 @@ +swipeMinDistance: number, +keyboardDismissMode: 'on-drag' | 'none', +unmountOnBlur: boolean, - +headerShown: boolean, + ...HeaderCommonOptions< + HeaderProps, DrawerOptions>, + HeaderLeftButtonProps, + HeaderButtonProps, + >, |}>; /** @@ -2236,7 +2280,10 @@ * Header components */ - declare export var Header: React$ComponentType; + declare export var Header: React$ComponentType< + StackHeaderProps, + StackOptions> + >; /** * Style/animation options diff --git a/native/navigation/header.react.js b/native/navigation/header.react.js --- a/native/navigation/header.react.js +++ b/native/navigation/header.react.js @@ -1,12 +1,17 @@ // @flow -import { Header, type StackHeaderProps } from '@react-navigation/stack'; +import { Header } from '@react-navigation/stack'; +import type { + StackNavigationHelpers, + StackOptions, + StackHeaderProps, +} from '@react-navigation/stack'; import * as React from 'react'; import DisconnectedBar from './disconnected-bar.react'; type Props = { - ...StackHeaderProps, + ...StackHeaderProps, StackOptions>, +activeTab: boolean, }; export default function CustomHeader(props: Props): React.Node { diff --git a/native/profile/profile-header.react.js b/native/profile/profile-header.react.js --- a/native/profile/profile-header.react.js +++ b/native/profile/profile-header.react.js @@ -1,6 +1,10 @@ // @flow -import type { StackHeaderProps } from '@react-navigation/stack'; +import type { + StackHeaderProps, + StackNavigationHelpers, + StackOptions, +} from '@react-navigation/stack'; import * as React from 'react'; import Header from '../navigation/header.react'; @@ -10,8 +14,12 @@ const activeTabSelector = createActiveTabSelector(ProfileRouteName); -const ProfileHeader: React.ComponentType = React.memo( - function ProfileHeader(props: StackHeaderProps) { +const ProfileHeader: React.ComponentType< + StackHeaderProps, StackOptions>, +> = React.memo, StackOptions>>( + function ProfileHeader( + props: StackHeaderProps, StackOptions>, + ) { const navContext = React.useContext(NavContext); const activeTab = activeTabSelector(navContext); return
; diff --git a/native/profile/profile.react.js b/native/profile/profile.react.js --- a/native/profile/profile.react.js +++ b/native/profile/profile.react.js @@ -6,6 +6,7 @@ type StackNavigationHelpers, type StackHeaderProps, } from '@react-navigation/stack'; +import type { StackOptions } from '@react-navigation/stack'; import * as React from 'react'; import { View } from 'react-native'; @@ -37,7 +38,9 @@ import ProfileScreen from './profile-screen.react'; import RelationshipList from './relationship-list.react'; -const header = (props: StackHeaderProps) => ; +const header = ( + props: StackHeaderProps, StackOptions>, +) => ; const headerBackButton = props => ; const profileScreenOptions = { headerTitle: 'Profile' }; const editPasswordOptions = { headerTitle: 'Change password' };