diff --git a/native/account/registration/registration-navigator.react.js b/native/account/registration/registration-navigator.react.js index 7665225c3..a607d9bdd 100644 --- a/native/account/registration/registration-navigator.react.js +++ b/native/account/registration/registration-navigator.react.js @@ -1,113 +1,113 @@ // @flow -import { - createStackNavigator, - type StackNavigationProp, - type StackNavigationHelpers, -} from '@react-navigation/stack'; +import type { + StackNavigationProp, + StackNavigationHelpers, +} from '@react-navigation/core'; +import { createStackNavigator } from '@react-navigation/stack'; import * as React from 'react'; import AvatarSelection from './avatar-selection.react.js'; import ConnectEthereum from './connect-ethereum.react.js'; import CoolOrNerdModeSelection from './cool-or-nerd-mode-selection.react.js'; import EmojiAvatarSelection from './emoji-avatar-selection.react.js'; import ExistingEthereumAccount from './existing-ethereum-account.react.js'; import KeyserverSelection from './keyserver-selection.react.js'; import PasswordSelection from './password-selection.react.js'; import RegistrationTerms from './registration-terms.react.js'; import UsernameSelection from './username-selection.react.js'; import RegistrationUserAvatarCameraModal from '../../media/registration-user-avatar-camera-modal.react.js'; import type { RootNavigationProp } from '../../navigation/root-navigator.react.js'; import { KeyserverSelectionRouteName, CoolOrNerdModeSelectionRouteName, ConnectEthereumRouteName, ExistingEthereumAccountRouteName, UsernameSelectionRouteName, PasswordSelectionRouteName, AvatarSelectionRouteName, EmojiAvatarSelectionRouteName, RegistrationUserAvatarCameraModalRouteName, RegistrationTermsRouteName, type ScreenParamList, type RegistrationParamList, } from '../../navigation/route-names.js'; export type RegistrationNavigationProp< RouteName: $Keys = $Keys, > = StackNavigationProp; const Registration = createStackNavigator< ScreenParamList, RegistrationParamList, StackNavigationHelpers, >(); const screenOptions = { headerTransparent: true, headerBackTitleVisible: false, headerTitle: '', headerTintColor: 'white', headerLeftContainerStyle: { paddingLeft: 12, }, }; const cameraScreenOptions = { headerShown: false, }; type Props = { +navigation: RootNavigationProp<'Registration'>, ... }; // eslint-disable-next-line no-unused-vars function RegistrationNavigator(props: Props): React.Node { return ( ); } export default RegistrationNavigator; diff --git a/native/chat/chat-header.react.js b/native/chat/chat-header.react.js index 2e2fde1e9..cf0f20abd 100644 --- a/native/chat/chat-header.react.js +++ b/native/chat/chat-header.react.js @@ -1,20 +1,20 @@ // @flow -import type { StackHeaderProps } from '@react-navigation/stack'; +import type { StackHeaderProps } from '@react-navigation/core'; import * as React from 'react'; import Header from '../navigation/header.react.js'; import { createActiveTabSelector } from '../navigation/nav-selectors.js'; import { NavContext } from '../navigation/navigation-context.js'; import { ChatRouteName } from '../navigation/route-names.js'; const activeTabSelector = createActiveTabSelector(ChatRouteName); const ChatHeader: React.ComponentType = React.memo(function ChatHeader(props: StackHeaderProps) { const navContext = React.useContext(NavContext); const activeTab = activeTabSelector(navContext); return
; }); export default ChatHeader; diff --git a/native/chat/chat-router.js b/native/chat/chat-router.js index a909a6456..ca294083a 100644 --- a/native/chat/chat-router.js +++ b/native/chat/chat-router.js @@ -1,188 +1,188 @@ // @flow import type { StackAction, Route, Router, StackRouterOptions, StackNavigationState, RouterConfigOptions, GenericNavigationAction, -} from '@react-navigation/native'; +} from '@react-navigation/core'; import { StackRouter, CommonActions } from '@react-navigation/native'; import type { MinimallyEncodedThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js'; import type { ThreadInfo } from 'lib/types/thread-types.js'; import { createNavigateToThreadAction } from './message-list-types.js'; import { clearScreensActionType, replaceWithThreadActionType, clearThreadsActionType, pushNewThreadActionType, } from '../navigation/action-types.js'; import { getRemoveEditMode } from '../navigation/nav-selectors.js'; import { removeScreensFromStack, getThreadIDFromRoute, } from '../navigation/navigation-utils.js'; import { ChatThreadListRouteName, ComposeSubchannelRouteName, } from '../navigation/route-names.js'; type ClearScreensAction = { +type: 'CLEAR_SCREENS', +payload: { +routeNames: $ReadOnlyArray, }, }; type ReplaceWithThreadAction = { +type: 'REPLACE_WITH_THREAD', +payload: { +threadInfo: ThreadInfo, }, }; type ClearThreadsAction = { +type: 'CLEAR_THREADS', +payload: { +threadIDs: $ReadOnlyArray, }, }; type PushNewThreadAction = { +type: 'PUSH_NEW_THREAD', +payload: { +threadInfo: ThreadInfo, }, }; export type ChatRouterNavigationAction = | StackAction | ClearScreensAction | ReplaceWithThreadAction | ClearThreadsAction | PushNewThreadAction; export type ChatRouterNavigationHelpers = { +clearScreens: (routeNames: $ReadOnlyArray) => void, +replaceWithThread: ( threadInfo: ThreadInfo | MinimallyEncodedThreadInfo, ) => void, +clearThreads: (threadIDs: $ReadOnlyArray) => void, +pushNewThread: (threadInfo: ThreadInfo | MinimallyEncodedThreadInfo) => void, }; function ChatRouter( routerOptions: StackRouterOptions, ): Router { const { getStateForAction: baseGetStateForAction, actionCreators: baseActionCreators, shouldActionChangeFocus: baseShouldActionChangeFocus, ...rest } = StackRouter(routerOptions); return { ...rest, getStateForAction: ( lastState: StackNavigationState, action: ChatRouterNavigationAction, options: RouterConfigOptions, ) => { if (action.type === clearScreensActionType) { const { routeNames } = action.payload; if (!lastState) { return lastState; } return removeScreensFromStack(lastState, (route: Route<>) => routeNames.includes(route.name) ? 'remove' : 'keep', ); } else if (action.type === replaceWithThreadActionType) { const { threadInfo } = action.payload; if (!lastState) { return lastState; } const clearedState = removeScreensFromStack( lastState, (route: Route<>) => route.name === ChatThreadListRouteName ? 'keep' : 'remove', ); const navigateAction = CommonActions.navigate( createNavigateToThreadAction({ threadInfo }), ); return baseGetStateForAction(clearedState, navigateAction, options); } else if (action.type === clearThreadsActionType) { const threadIDs = new Set(action.payload.threadIDs); if (!lastState) { return lastState; } return removeScreensFromStack(lastState, (route: Route<>) => threadIDs.has(getThreadIDFromRoute(route)) ? 'remove' : 'keep', ); } else if (action.type === pushNewThreadActionType) { const { threadInfo } = action.payload; if (!lastState) { return lastState; } const clearedState = removeScreensFromStack( lastState, (route: Route<>) => route.name === ComposeSubchannelRouteName ? 'remove' : 'break', ); const navigateAction = CommonActions.navigate( createNavigateToThreadAction({ threadInfo }), ); return baseGetStateForAction(clearedState, navigateAction, options); } else { const result = baseGetStateForAction(lastState, action, options); const removeEditMode = getRemoveEditMode(lastState); // We prevent navigating if the user is in edit mode. We don't block // navigating back here because it is handled by the `beforeRemove` // listener in the `ChatInputBar` component. if ( result !== null && result?.index && result.index > lastState.index && removeEditMode && removeEditMode(action) === 'ignore_action' ) { return lastState; } return result; } }, actionCreators: { ...baseActionCreators, clearScreens: (routeNames: $ReadOnlyArray) => ({ type: clearScreensActionType, payload: { routeNames, }, }), replaceWithThread: (threadInfo: ThreadInfo) => ({ type: replaceWithThreadActionType, payload: { threadInfo }, }: ReplaceWithThreadAction), clearThreads: (threadIDs: $ReadOnlyArray) => ({ type: clearThreadsActionType, payload: { threadIDs }, }), pushNewThread: (threadInfo: ThreadInfo) => ({ type: pushNewThreadActionType, payload: { threadInfo }, }: PushNewThreadAction), }, shouldActionChangeFocus: (action: GenericNavigationAction) => { if (action.type === replaceWithThreadActionType) { return true; } else if (action.type === pushNewThreadActionType) { return true; } else { return baseShouldActionChangeFocus(action); } }, }; } export default ChatRouter; diff --git a/native/chat/chat.react.js b/native/chat/chat.react.js index f5ad5c742..a9b51dffa 100644 --- a/native/chat/chat.react.js +++ b/native/chat/chat.react.js @@ -1,438 +1,438 @@ // @flow -import { - createMaterialTopTabNavigator, - type MaterialTopTabNavigationProp, -} from '@react-navigation/material-top-tabs'; +import type { + MaterialTopTabNavigationProp, + StackNavigationState, + StackOptions, + StackNavigationEventMap, + StackNavigatorProps, + ExtraStackNavigatorProps, + StackHeaderProps, + StackNavigationProp, + StackNavigationHelpers, + ParamListBase, +} from '@react-navigation/core'; +import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs'; import { createNavigatorFactory, useNavigationBuilder, - type StackNavigationState, - type StackOptions, - type StackNavigationEventMap, - type StackNavigatorProps, - type ExtraStackNavigatorProps, - type StackHeaderProps as CoreStackHeaderProps, - type StackNavigationProp, - type StackNavigationHelpers, - type ParamListBase, } from '@react-navigation/native'; -import { StackView, type StackHeaderProps } from '@react-navigation/stack'; +import { StackView } from '@react-navigation/stack'; import invariant from 'invariant'; import * as React from 'react'; import { Platform, View, useWindowDimensions } from 'react-native'; import { useSelector } from 'react-redux'; import ThreadDraftUpdater from 'lib/components/thread-draft-updater.react.js'; import { isLoggedIn } from 'lib/selectors/user-selectors.js'; import { threadIsPending } from 'lib/shared/thread-utils.js'; import BackgroundChatThreadList from './background-chat-thread-list.react.js'; import ChatHeader from './chat-header.react.js'; import ChatRouter, { type ChatRouterNavigationHelpers } from './chat-router.js'; import ComposeSubchannel from './compose-subchannel.react.js'; import ComposeThreadButton from './compose-thread-button.react.js'; import FullScreenThreadMediaGallery from './fullscreen-thread-media-gallery.react.js'; import HomeChatThreadList from './home-chat-thread-list.react.js'; import { MessageEditingContext } from './message-editing-context.react.js'; import MessageListContainer from './message-list-container.react.js'; import MessageListHeaderTitle from './message-list-header-title.react.js'; import MessageResultsScreen from './message-results-screen.react.js'; import MessageStorePruner from './message-store-pruner.react.js'; import DeleteThread from './settings/delete-thread.react.js'; import EmojiThreadAvatarCreation from './settings/emoji-thread-avatar-creation.react.js'; import ThreadSettings from './settings/thread-settings.react.js'; import ThreadScreenPruner from './thread-screen-pruner.react.js'; import ThreadSettingsButton from './thread-settings-button.react.js'; import ThreadSettingsHeaderTitle from './thread-settings-header-title.react.js'; import KeyboardAvoidingView from '../components/keyboard-avoiding-view.react.js'; import SWMansionIcon from '../components/swmansion-icon.react.js'; import { InputStateContext } from '../input/input-state.js'; import CommunityDrawerButton from '../navigation/community-drawer-button.react.js'; import type { CommunityDrawerNavigationProp } from '../navigation/community-drawer-navigator.react.js'; import HeaderBackButton from '../navigation/header-back-button.react.js'; import { defaultStackScreenOptions } from '../navigation/options.js'; import { ComposeSubchannelRouteName, DeleteThreadRouteName, ThreadSettingsRouteName, EmojiThreadAvatarCreationRouteName, FullScreenThreadMediaGalleryRouteName, MessageResultsScreenRouteName, MessageListRouteName, ChatThreadListRouteName, HomeChatThreadListRouteName, BackgroundChatThreadListRouteName, type ScreenParamList, type ChatParamList, type ChatTopTabsParamList, MessageSearchRouteName, ChangeRolesScreenRouteName, } from '../navigation/route-names.js'; import ChangeRolesHeaderLeftButton from '../roles/change-roles-header-left-button.react.js'; import ChangeRolesScreen from '../roles/change-roles-screen.react.js'; import MessageSearch from '../search/message-search.react.js'; import SearchHeader from '../search/search-header.react.js'; import SearchMessagesButton from '../search/search-messages-button.react.js'; import { useColors, useStyles } from '../themes/colors.js'; const unboundStyles = { keyboardAvoidingView: { flex: 1, }, view: { flex: 1, backgroundColor: 'listBackground', }, threadListHeaderStyle: { elevation: 0, shadowOffset: { width: 0, height: 0 }, borderBottomWidth: 0, backgroundColor: 'tabBarBackground', }, }; export type ChatTopTabsNavigationProp< RouteName: $Keys = $Keys, > = MaterialTopTabNavigationProp; const homeChatThreadListOptions = { title: 'Focused', // eslint-disable-next-line react/display-name tabBarIcon: ({ color }) => ( ), }; const backgroundChatThreadListOptions = { title: 'Background', // eslint-disable-next-line react/display-name tabBarIcon: ({ color }) => ( ), }; const ChatThreadsTopTab = createMaterialTopTabNavigator(); function ChatThreadsComponent(): React.Node { const colors = useColors(); const { tabBarBackground, tabBarAccent } = colors; const screenOptions = React.useMemo( () => ({ tabBarShowIcon: true, tabBarStyle: { backgroundColor: tabBarBackground, }, tabBarItemStyle: { flexDirection: 'row', }, tabBarIndicatorStyle: { borderColor: tabBarAccent, borderBottomWidth: 2, }, }), [tabBarAccent, tabBarBackground], ); return ( ); } export type ChatNavigationHelpers = { ...$Exact>, ...ChatRouterNavigationHelpers, }; type ChatNavigatorProps = StackNavigatorProps>; function ChatNavigator({ initialRouteName, children, screenOptions, defaultScreenOptions, screenListeners, id, ...rest }: ChatNavigatorProps) { const { state, descriptors, navigation } = useNavigationBuilder(ChatRouter, { id, initialRouteName, children, screenOptions, defaultScreenOptions, screenListeners, }); // Clear ComposeSubchannel screens after each message is sent. If a user goes // to ComposeSubchannel to create a new thread, but finds an existing one and // uses it instead, we can assume the intent behind opening ComposeSubchannel // is resolved const inputState = React.useContext(InputStateContext); invariant(inputState, 'InputState should be set in ChatNavigator'); const clearComposeScreensAfterMessageSend = React.useCallback(() => { navigation.clearScreens([ComposeSubchannelRouteName]); }, [navigation]); React.useEffect(() => { inputState.registerSendCallback(clearComposeScreensAfterMessageSend); return () => { inputState.unregisterSendCallback(clearComposeScreensAfterMessageSend); }; }, [inputState, clearComposeScreensAfterMessageSend]); return ( ); } const createChatNavigator = createNavigatorFactory< StackNavigationState, StackOptions, StackNavigationEventMap, ChatNavigationHelpers<>, ExtraStackNavigatorProps, >(ChatNavigator); -const header = (props: CoreStackHeaderProps) => { +const header = (props: StackHeaderProps) => { // 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); return ; }; const headerRightStyle = { flexDirection: 'row' }; const messageListOptions = ({ navigation, route }) => { const isSearchEmpty = !!route.params.searching && route.params.threadInfo.members.length === 1; const areSettingsEnabled = !threadIsPending(route.params.threadInfo.id) && !isSearchEmpty; return { // This is a render prop, not a component // eslint-disable-next-line react/display-name headerTitle: props => ( ), headerRight: areSettingsEnabled ? // This is a render prop, not a component // eslint-disable-next-line react/display-name () => ( ) : undefined, headerBackTitleVisible: false, headerTitleAlign: isSearchEmpty ? 'center' : 'left', headerLeftContainerStyle: { width: Platform.OS === 'ios' ? 32 : 40 }, headerTitleStyle: areSettingsEnabled ? { marginRight: 20 } : undefined, }; }; const composeThreadOptions = { headerTitle: 'Compose chat', headerBackTitleVisible: false, }; const threadSettingsOptions = ({ route }) => ({ // eslint-disable-next-line react/display-name headerTitle: props => ( ), headerBackTitleVisible: false, }); const emojiAvatarCreationOptions = { headerTitle: 'Emoji avatar selection', headerBackTitleVisible: false, }; const fullScreenThreadMediaGalleryOptions = { headerTitle: 'All Media', headerBackTitleVisible: false, }; const deleteThreadOptions = { headerTitle: 'Delete chat', headerBackTitleVisible: false, }; const messageSearchOptions = { // eslint-disable-next-line react/display-name headerTitle: () => , headerBackTitleVisible: false, headerTitleContainerStyle: { width: '100%', }, }; const messageResultsScreenOptions = { headerTitle: 'Pinned Messages', headerBackTitleVisible: false, }; const changeRolesScreenOptions = ({ route }) => ({ // eslint-disable-next-line react/display-name headerLeft: headerLeftProps => ( ), headerTitle: 'Change Role', presentation: 'modal', }); export type ChatNavigationProp< RouteName: $Keys = $Keys, > = { ...StackNavigationProp, ...ChatRouterNavigationHelpers, }; const Chat = createChatNavigator< ScreenParamList, ChatParamList, ChatNavigationHelpers, >(); type Props = { +navigation: CommunityDrawerNavigationProp<'TabNavigator'>, ... }; export default function ChatComponent(props: Props): React.Node { const styles = useStyles(unboundStyles); const colors = useColors(); const loggedIn = useSelector(isLoggedIn); let draftUpdater = null; if (loggedIn) { draftUpdater = ; } const headerLeftButton = React.useCallback( headerProps => { if (headerProps.canGoBack) { return ; } return ; }, [props.navigation], ); const messageEditingContext = React.useContext(MessageEditingContext); const editState = messageEditingContext?.editState; const editMode = !!editState?.editedMessage; const { width: screenWidth } = useWindowDimensions(); const screenOptions = React.useMemo( () => ({ ...defaultStackScreenOptions, header, headerLeft: headerLeftButton, headerStyle: { backgroundColor: colors.tabBarBackground, borderBottomWidth: 1, }, gestureEnabled: true, gestureResponseDistance: editMode ? 0 : screenWidth, }), [colors.tabBarBackground, headerLeftButton, screenWidth, editMode], ); const chatThreadListOptions = React.useCallback( ({ navigation }) => ({ headerTitle: 'Inbox', headerRight: Platform.OS === 'ios' ? () => : undefined, headerBackTitleVisible: false, headerStyle: styles.threadListHeaderStyle, }), [styles.threadListHeaderStyle], ); return ( {draftUpdater} ); } diff --git a/native/chat/message-list-header-title.react.js b/native/chat/message-list-header-title.react.js index 0694152fd..2cb02d980 100644 --- a/native/chat/message-list-header-title.react.js +++ b/native/chat/message-list-header-title.react.js @@ -1,108 +1,106 @@ // @flow -import { - HeaderTitle, - type HeaderTitleInputProps, -} from '@react-navigation/elements'; +import type { HeaderTitleInputProps } from '@react-navigation/core'; +import { HeaderTitle } from '@react-navigation/elements'; import * as React from 'react'; import { View } from 'react-native'; import type { MinimallyEncodedThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js'; import type { ThreadInfo } from 'lib/types/thread-types.js'; import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.js'; import { firstLine } from 'lib/utils/string-utils.js'; import type { ChatNavigationProp } from './chat.react.js'; import ThreadAvatar from '../avatars/thread-avatar.react.js'; import Button from '../components/button.react.js'; import { ThreadSettingsRouteName } from '../navigation/route-names.js'; import { useStyles } from '../themes/colors.js'; type BaseProps = { +threadInfo: ThreadInfo | MinimallyEncodedThreadInfo, +navigate: $PropertyType, 'navigate'>, +isSearchEmpty: boolean, +areSettingsEnabled: boolean, ...HeaderTitleInputProps, }; type Props = { ...BaseProps, +styles: typeof unboundStyles, +title: string, }; class MessageListHeaderTitle extends React.PureComponent { render() { const { threadInfo, navigate, isSearchEmpty, areSettingsEnabled, styles, title, ...rest } = this.props; let avatar; if (!isSearchEmpty) { avatar = ( ); } return ( ); } onPress = () => { const { threadInfo } = this.props; this.props.navigate<'ThreadSettings'>({ name: ThreadSettingsRouteName, params: { threadInfo }, key: `${ThreadSettingsRouteName}${threadInfo.id}`, }); }; } const unboundStyles = { avatarContainer: { marginRight: 8, }, button: { flex: 1, }, container: { flex: 1, flexDirection: 'row', alignItems: 'center', }, }; const ConnectedMessageListHeaderTitle: React.ComponentType = React.memo(function ConnectedMessageListHeaderTitle( props: BaseProps, ) { const styles = useStyles(unboundStyles); const { uiName } = useResolvedThreadInfo(props.threadInfo); const { isSearchEmpty } = props; const title = isSearchEmpty ? 'New Message' : uiName; return ; }); export default ConnectedMessageListHeaderTitle; diff --git a/native/chat/multimedia-message-multimedia.react.js b/native/chat/multimedia-message-multimedia.react.js index ae626f5dc..889c06cf6 100644 --- a/native/chat/multimedia-message-multimedia.react.js +++ b/native/chat/multimedia-message-multimedia.react.js @@ -1,239 +1,240 @@ // @flow -import { type LeafRoute, useRoute } from '@react-navigation/native'; +import type { LeafRoute } from '@react-navigation/core'; +import { useRoute } from '@react-navigation/native'; import invariant from 'invariant'; import * as React from 'react'; import { View, StyleSheet } from 'react-native'; import Animated from 'react-native-reanimated'; import { type MediaInfo } from 'lib/types/media-types.js'; import InlineMultimedia from './inline-multimedia.react.js'; import { getMediaKey } from './multimedia-message-utils.js'; import { type PendingMultimediaUpload } from '../input/input-state.js'; import { type KeyboardState, KeyboardContext, } from '../keyboard/keyboard-state.js'; import { OverlayContext, type OverlayContextType, } from '../navigation/overlay-context.js'; import { ImageModalRouteName } from '../navigation/route-names.js'; import { type Colors, useColors } from '../themes/colors.js'; import type { ChatMultimediaMessageInfoItem } from '../types/chat-types.js'; import type { VerticalBounds, LayoutCoordinates, } from '../types/layout-types.js'; import { type ViewStyle, type AnimatedStyleObj, AnimatedView, } from '../types/styles.js'; /* eslint-disable import/no-named-as-default-member */ const { Node, sub, interpolateNode, Extrapolate } = Animated; /* eslint-enable import/no-named-as-default-member */ type BaseProps = { +mediaInfo: MediaInfo, +item: ChatMultimediaMessageInfoItem, +verticalBounds: ?VerticalBounds, +style: ViewStyle, +postInProgress: boolean, +pendingUpload: ?PendingMultimediaUpload, +onPressMultimedia?: ( mediaInfo: MediaInfo, initialCoordinates: LayoutCoordinates, ) => void, +clickable: boolean, +setClickable: boolean => void, }; type Props = { ...BaseProps, +route: LeafRoute<>, // Redux state +colors: Colors, // withKeyboardState +keyboardState: ?KeyboardState, // withOverlayContext +overlayContext: ?OverlayContextType, }; type State = { +opacity: number | Node, }; class MultimediaMessageMultimedia extends React.PureComponent { view: ?React.ElementRef; constructor(props: Props) { super(props); this.state = { opacity: this.getOpacity(), }; } static getOverlayContext(props: Props) { const { overlayContext } = props; invariant( overlayContext, 'MultimediaMessageMultimedia should have OverlayContext', ); return overlayContext; } static getModalOverlayPosition(props: Props) { const overlayContext = MultimediaMessageMultimedia.getOverlayContext(props); const { visibleOverlays } = overlayContext; for (const overlay of visibleOverlays) { if ( overlay.routeName === ImageModalRouteName && overlay.presentedFrom === props.route.key && overlay.routeKey === getMediaKey(props.item, props.mediaInfo) ) { return overlay.position; } } return undefined; } getOpacity() { const overlayPosition = MultimediaMessageMultimedia.getModalOverlayPosition( this.props, ); if (!overlayPosition) { return 1; } return sub( 1, interpolateNode(overlayPosition, { inputRange: [0.1, 0.11], outputRange: [0, 1], extrapolate: Extrapolate.CLAMP, }), ); } componentDidUpdate(prevProps: Props) { const overlayPosition = MultimediaMessageMultimedia.getModalOverlayPosition( this.props, ); const prevOverlayPosition = MultimediaMessageMultimedia.getModalOverlayPosition(prevProps); if (overlayPosition !== prevOverlayPosition) { this.setState({ opacity: this.getOpacity() }); } const scrollIsDisabled = MultimediaMessageMultimedia.getOverlayContext(this.props) .scrollBlockingModalStatus !== 'closed'; const scrollWasDisabled = MultimediaMessageMultimedia.getOverlayContext(prevProps) .scrollBlockingModalStatus !== 'closed'; if (!scrollIsDisabled && scrollWasDisabled) { this.props.setClickable(true); } } render() { const { opacity } = this.state; const animatedWrapperStyle: AnimatedStyleObj = { opacity }; const wrapperStyles = [ styles.container, animatedWrapperStyle, this.props.style, ]; const { mediaInfo, pendingUpload, postInProgress } = this.props; return ( ); } onLayout = () => {}; viewRef = (view: ?React.ElementRef) => { this.view = view; }; onPress = () => { if (!this.props.clickable) { return; } if (this.dismissKeyboardIfShowing()) { return; } const { view, props: { verticalBounds }, } = this; if (!view || !verticalBounds) { return; } const measureCallback = this.props.onPressMultimedia; if (!measureCallback) { return; } this.props.setClickable(false); const overlayContext = MultimediaMessageMultimedia.getOverlayContext( this.props, ); overlayContext.setScrollBlockingModalStatus('open'); view.measure((x, y, width, height, pageX, pageY) => { const coordinates = { x: pageX, y: pageY, width, height }; measureCallback(this.props.mediaInfo, coordinates); }); }; dismissKeyboardIfShowing = () => { const { keyboardState } = this.props; return !!(keyboardState && keyboardState.dismissKeyboardIfShowing()); }; } const styles = StyleSheet.create({ container: { flex: 1, overflow: 'hidden', }, expand: { flex: 1, }, }); const ConnectedMultimediaMessageMultimedia: React.ComponentType = React.memo(function ConnectedMultimediaMessageMultimedia( props: BaseProps, ) { const colors = useColors(); const keyboardState = React.useContext(KeyboardContext); const overlayContext = React.useContext(OverlayContext); const route = useRoute(); return ( ); }); export default ConnectedMultimediaMessageMultimedia; diff --git a/native/chat/multimedia-message.react.js b/native/chat/multimedia-message.react.js index c64913281..3bc68cd3e 100644 --- a/native/chat/multimedia-message.react.js +++ b/native/chat/multimedia-message.react.js @@ -1,254 +1,254 @@ // @flow import type { LeafRoute, NavigationProp, ParamListBase, -} from '@react-navigation/native'; +} from '@react-navigation/core'; import { useNavigation, useRoute } from '@react-navigation/native'; import * as React from 'react'; import { View } from 'react-native'; import { messageKey } from 'lib/shared/message-utils.js'; import { useCanCreateSidebarFromMessage } from 'lib/shared/thread-utils.js'; import type { MediaInfo } from 'lib/types/media-types.js'; import ComposedMessage from './composed-message.react.js'; import { InnerMultimediaMessage } from './inner-multimedia-message.react.js'; import { getMediaKey, multimediaMessageSendFailed, } from './multimedia-message-utils.js'; import { getMessageTooltipKey } from './utils.js'; import { ChatContext, type ChatContextType } from '../chat/chat-context.js'; import { OverlayContext } from '../navigation/overlay-context.js'; import type { OverlayContextType } from '../navigation/overlay-context.js'; import { ImageModalRouteName, MultimediaMessageTooltipModalRouteName, VideoPlaybackModalRouteName, } from '../navigation/route-names.js'; import { fixedTooltipHeight } from '../tooltip/tooltip.react.js'; import type { ChatMultimediaMessageInfoItem } from '../types/chat-types.js'; import type { VerticalBounds, LayoutCoordinates, } from '../types/layout-types.js'; type BaseProps = { ...React.ElementConfig, +item: ChatMultimediaMessageInfoItem, +focused: boolean, +toggleFocus: (messageKey: string) => void, +verticalBounds: ?VerticalBounds, +canTogglePins: boolean, +shouldDisplayPinIndicator: boolean, }; type Props = { ...BaseProps, +navigation: NavigationProp, +route: LeafRoute<>, +overlayContext: ?OverlayContextType, +chatContext: ?ChatContextType, +canCreateSidebarFromMessage: boolean, }; type State = { +clickable: boolean, }; class MultimediaMessage extends React.PureComponent { state: State = { clickable: true, }; view: ?React.ElementRef; setClickable = (clickable: boolean) => { this.setState({ clickable }); }; onPressMultimedia = ( mediaInfo: MediaInfo, initialCoordinates: LayoutCoordinates, ) => { const { navigation, item, route, verticalBounds } = this.props; navigation.navigate<'VideoPlaybackModal' | 'ImageModal'>({ name: mediaInfo.type === 'video' || mediaInfo.type === 'encrypted_video' ? VideoPlaybackModalRouteName : ImageModalRouteName, key: getMediaKey(item, mediaInfo), params: { presentedFrom: route.key, mediaInfo, item, initialCoordinates, verticalBounds, }, }); }; visibleEntryIDs() { const result = []; if (this.props.canTogglePins) { this.props.item.isPinned ? result.push('unpin') : result.push('pin'); } if ( this.props.item.threadCreatedFromMessage || this.props.canCreateSidebarFromMessage ) { result.push('sidebar'); } if (!this.props.item.messageInfo.creator.isViewer) { result.push('report'); } return result; } onLayout = () => {}; viewRef = (view: ?React.ElementRef) => { this.view = view; }; onLongPress = () => { const visibleEntryIDs = this.visibleEntryIDs(); if (visibleEntryIDs.length === 0) { return; } const { view, props: { verticalBounds }, } = this; if (!view || !verticalBounds) { return; } if (!this.state.clickable) { return; } this.setClickable(false); const { item } = this.props; if (!this.props.focused) { this.props.toggleFocus(messageKey(item.messageInfo)); } this.props.overlayContext?.setScrollBlockingModalStatus('open'); view.measure((x, y, width, height, pageX, pageY) => { const coordinates = { x: pageX, y: pageY, width, height }; const multimediaTop = pageY; const multimediaBottom = pageY + height; const boundsTop = verticalBounds.y; const boundsBottom = verticalBounds.y + verticalBounds.height; const belowMargin = 20; const belowSpace = fixedTooltipHeight + belowMargin; const { isViewer } = item.messageInfo.creator; const aboveMargin = isViewer ? 30 : 50; const aboveSpace = fixedTooltipHeight + aboveMargin; let margin = belowMargin; if ( multimediaBottom + belowSpace > boundsBottom && multimediaTop - aboveSpace > boundsTop ) { margin = aboveMargin; } const currentInputBarHeight = this.props.chatContext?.chatInputBarHeights.get(item.threadInfo.id) ?? 0; this.props.navigation.navigate<'MultimediaMessageTooltipModal'>({ name: MultimediaMessageTooltipModalRouteName, params: { presentedFrom: this.props.route.key, item, initialCoordinates: coordinates, verticalBounds, tooltipLocation: 'fixed', margin, visibleEntryIDs, chatInputBarHeight: currentInputBarHeight, }, key: getMessageTooltipKey(item), }); }); }; canNavigateToSidebar() { return ( this.props.item.threadCreatedFromMessage || this.props.canCreateSidebarFromMessage ); } render() { const { item, focused, toggleFocus, verticalBounds, shouldDisplayPinIndicator, navigation, route, overlayContext, chatContext, canCreateSidebarFromMessage, canTogglePins, ...viewProps } = this.props; return ( ); } } const ConnectedMultimediaMessage: React.ComponentType = React.memo(function ConnectedMultimediaMessage(props: BaseProps) { const navigation = useNavigation(); const route = useRoute(); const overlayContext = React.useContext(OverlayContext); const chatContext = React.useContext(ChatContext); const canCreateSidebarFromMessage = useCanCreateSidebarFromMessage( props.item.threadInfo, props.item.messageInfo, ); return ( ); }); export default ConnectedMultimediaMessage; diff --git a/native/chat/thread-settings-header-title.react.js b/native/chat/thread-settings-header-title.react.js index 4c5af2a84..5c6daa642 100644 --- a/native/chat/thread-settings-header-title.react.js +++ b/native/chat/thread-settings-header-title.react.js @@ -1,27 +1,25 @@ // @flow -import { - HeaderTitle, - type HeaderTitleInputProps, -} from '@react-navigation/elements'; +import type { HeaderTitleInputProps } from '@react-navigation/core'; +import { HeaderTitle } from '@react-navigation/elements'; import * as React from 'react'; import type { MinimallyEncodedThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js'; import type { ThreadInfo } from 'lib/types/thread-types.js'; import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.js'; import { firstLine } from 'lib/utils/string-utils.js'; type Props = { +threadInfo: ThreadInfo | MinimallyEncodedThreadInfo, ...HeaderTitleInputProps, }; function ThreadSettingsHeaderTitle(props: Props): React.Node { const { threadInfo, ...rest } = props; const { uiName } = useResolvedThreadInfo(threadInfo); return {firstLine(uiName)}; } const MemoizedThreadSettingsHeaderTitle: React.ComponentType = React.memo(ThreadSettingsHeaderTitle); export default MemoizedThreadSettingsHeaderTitle; diff --git a/native/community-creation/community-creation-navigator.react.js b/native/community-creation/community-creation-navigator.react.js index 9d74021bf..3c7e2fc1e 100644 --- a/native/community-creation/community-creation-navigator.react.js +++ b/native/community-creation/community-creation-navigator.react.js @@ -1,75 +1,75 @@ // @flow -import { - createStackNavigator, - type StackNavigationProp, - type StackNavigationHelpers, -} from '@react-navigation/stack'; +import type { + StackNavigationProp, + StackNavigationHelpers, +} from '@react-navigation/core'; +import { createStackNavigator } from '@react-navigation/stack'; import * as React from 'react'; import CommunityConfiguration from './community-configuration.react.js'; import CommunityCreationMembers from './community-creation-members.react.js'; import type { RootNavigationProp } from '../navigation/root-navigator.react.js'; import { CommunityConfigurationRouteName, type ScreenParamList, type CommunityCreationParamList, CommunityCreationMembersRouteName, } from '../navigation/route-names.js'; import { useColors } from '../themes/colors.js'; export type CommunityCreationNavigationProp< RouteName: $Keys, > = StackNavigationProp; const CommunityCreation = createStackNavigator< ScreenParamList, CommunityCreationParamList, StackNavigationHelpers, >(); const communityConfigurationOptions = { headerTitle: 'Create a community', }; const communityCreationMembersOptions = { headerTitle: 'Add members', }; type Props = { +navigation: RootNavigationProp<'CommunityCreation'>, ... }; // eslint-disable-next-line no-unused-vars function CommunityCreationNavigator(props: Props): React.Node { const colors = useColors(); const communityCreationScreenOptions = React.useMemo( () => ({ headerTransparent: true, headerBackTitleVisible: false, headerTintColor: colors.panelForegroundLabel, headerLeftContainerStyle: { paddingLeft: 12, }, }), [colors.panelForegroundLabel], ); return ( ); } export default CommunityCreationNavigator; 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 index 48d7289f8..17562b124 100644 --- 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 @@ -1,2291 +1,44 @@ // flow-typed signature: 6070a4afddfa183e7c7bda53e69c0044 // flow-typed version: dc2d6a22c7/@react-navigation/bottom-tabs_v5.x.x/flow_>=v0.104.x declare module '@react-navigation/bottom-tabs' { - //--------------------------------------------------------------------------- - // SECTION 1: IDENTICAL TYPE DEFINITIONS - // This section is identical across all React Navigation libdefs and contains - // shared definitions. We wish we could make it DRY and import from a shared - // definition, but that isn't yet possible. - //--------------------------------------------------------------------------- - - /** - * We start with some definitions that we have copy-pasted from React Native - * source files. - */ - - // This is a bastardization of the true StyleObj type located in - // react-native/Libraries/StyleSheet/StyleSheetTypes. We unfortunately can't - // import that here, and it's too lengthy (and consequently too brittle) to - // copy-paste here either. - declare type StyleObj = - | null - | void - | number - | false - | '' - | $ReadOnlyArray - | { [name: string]: any, ... }; - declare type ViewStyleProp = StyleObj; - declare type TextStyleProp = StyleObj; - declare type AnimatedViewStyleProp = StyleObj; - declare type AnimatedTextStyleProp = StyleObj; - - // Vaguely copied from - // react-native/Libraries/Animated/src/animations/Animation.js - declare type EndResult = { finished: boolean, ... }; - declare type EndCallback = (result: EndResult) => void; - declare interface Animation { - start( - fromValue: number, - onUpdate: (value: number) => void, - onEnd: ?EndCallback, - previousAnimation: ?Animation, - animatedValue: AnimatedValue, - ): void; - stop(): void; - } - declare type AnimationConfig = { - isInteraction?: boolean, - useNativeDriver: boolean, - onComplete?: ?EndCallback, - iterations?: number, - ... - }; - - // Vaguely copied from - // react-native/Libraries/Animated/src/nodes/AnimatedTracking.js - declare interface AnimatedTracking { - constructor( - value: AnimatedValue, - parent: any, - animationClass: any, - animationConfig: Object, - callback?: ?EndCallback, - ): void; - update(): void; - } - - // Vaguely copied from - // react-native/Libraries/Animated/src/nodes/AnimatedValue.js - declare type ValueListenerCallback = (state: { value: number, ... }) => void; - declare interface AnimatedValue { - constructor(value: number): void; - setValue(value: number): void; - setOffset(offset: number): void; - flattenOffset(): void; - extractOffset(): void; - addListener(callback: ValueListenerCallback): string; - removeListener(id: string): void; - removeAllListeners(): void; - stopAnimation(callback?: ?(value: number) => void): void; - resetAnimation(callback?: ?(value: number) => void): void; - interpolate(config: InterpolationConfigType): AnimatedInterpolation; - animate(animation: Animation, callback: ?EndCallback): void; - stopTracking(): void; - track(tracking: AnimatedTracking): void; - } - - // Copied from - // react-native/Libraries/Animated/src/animations/TimingAnimation.js - declare type TimingAnimationConfigSingle = AnimationConfig & { - toValue: number | AnimatedValue, - easing?: (value: number) => number, - duration?: number, - delay?: number, - ... - }; - - // Copied from - // react-native/Libraries/Animated/src/animations/SpringAnimation.js - declare type SpringAnimationConfigSingle = AnimationConfig & { - toValue: number | AnimatedValue, - overshootClamping?: boolean, - restDisplacementThreshold?: number, - restSpeedThreshold?: number, - velocity?: number, - bounciness?: number, - speed?: number, - tension?: number, - friction?: number, - stiffness?: number, - damping?: number, - mass?: number, - delay?: number, - ... - }; - - // Copied from react-native/Libraries/Types/CoreEventTypes.js - declare type SyntheticEvent = $ReadOnly<{| - bubbles: ?boolean, - cancelable: ?boolean, - currentTarget: number, - defaultPrevented: ?boolean, - dispatchConfig: $ReadOnly<{| - registrationName: string, - |}>, - eventPhase: ?number, - preventDefault: () => void, - isDefaultPrevented: () => boolean, - stopPropagation: () => void, - isPropagationStopped: () => boolean, - isTrusted: ?boolean, - nativeEvent: T, - persist: () => void, - target: ?number, - timeStamp: number, - type: ?string, - |}>; - declare type Layout = $ReadOnly<{| - x: number, - y: number, - width: number, - height: number, - |}>; - declare type LayoutEvent = SyntheticEvent< - $ReadOnly<{| - layout: Layout, - |}>, - >; - declare type BlurEvent = SyntheticEvent< - $ReadOnly<{| - target: number, - |}>, - >; - declare type FocusEvent = SyntheticEvent< - $ReadOnly<{| - target: number, - |}>, - >; - declare type ResponderSyntheticEvent = $ReadOnly<{| - ...SyntheticEvent, - touchHistory: $ReadOnly<{| - indexOfSingleActiveTouch: number, - mostRecentTimeStamp: number, - numberActiveTouches: number, - touchBank: $ReadOnlyArray< - $ReadOnly<{| - touchActive: boolean, - startPageX: number, - startPageY: number, - startTimeStamp: number, - currentPageX: number, - currentPageY: number, - currentTimeStamp: number, - previousPageX: number, - previousPageY: number, - previousTimeStamp: number, - |}>, - >, - |}>, - |}>; - declare type PressEvent = ResponderSyntheticEvent< - $ReadOnly<{| - changedTouches: $ReadOnlyArray<$PropertyType>, - force: number, - identifier: number, - locationX: number, - locationY: number, - pageX: number, - pageY: number, - target: ?number, - timestamp: number, - touches: $ReadOnlyArray<$PropertyType>, - |}>, - >; - - // Vaguely copied from - // react-native/Libraries/Animated/src/nodes/AnimatedInterpolation.js - declare type ExtrapolateType = 'extend' | 'identity' | 'clamp'; - declare type InterpolationConfigType = { - inputRange: Array, - outputRange: Array | Array, - easing?: (input: number) => number, - extrapolate?: ExtrapolateType, - extrapolateLeft?: ExtrapolateType, - extrapolateRight?: ExtrapolateType, - ... - }; - declare interface AnimatedInterpolation { - interpolate(config: InterpolationConfigType): AnimatedInterpolation; - } - - // Copied from react-native/Libraries/Components/View/ViewAccessibility.js - declare type AccessibilityRole = - | 'none' - | 'button' - | 'link' - | 'search' - | 'image' - | 'keyboardkey' - | 'text' - | 'adjustable' - | 'imagebutton' - | 'header' - | 'summary' - | 'alert' - | 'checkbox' - | 'combobox' - | 'menu' - | 'menubar' - | 'menuitem' - | 'progressbar' - | 'radio' - | 'radiogroup' - | 'scrollbar' - | 'spinbutton' - | 'switch' - | 'tab' - | 'tablist' - | 'timer' - | 'toolbar'; - declare type AccessibilityActionInfo = $ReadOnly<{ - name: string, - label?: string, - ... - }>; - declare type AccessibilityActionEvent = SyntheticEvent< - $ReadOnly<{actionName: string, ...}>, - >; - declare type AccessibilityState = { - disabled?: boolean, - selected?: boolean, - checked?: ?boolean | 'mixed', - busy?: boolean, - expanded?: boolean, - ... - }; - declare type AccessibilityValue = $ReadOnly<{| - min?: number, - max?: number, - now?: number, - text?: string, - |}>; - - // Copied from - // react-native/Libraries/Components/Touchable/TouchableWithoutFeedback.js - declare type Stringish = string; - declare type EdgeInsetsProp = $ReadOnly<$Partial>; - declare type TouchableWithoutFeedbackProps = $ReadOnly<{| - accessibilityActions?: ?$ReadOnlyArray, - accessibilityElementsHidden?: ?boolean, - accessibilityHint?: ?Stringish, - accessibilityIgnoresInvertColors?: ?boolean, - accessibilityLabel?: ?Stringish, - accessibilityLiveRegion?: ?('none' | 'polite' | 'assertive'), - accessibilityRole?: ?AccessibilityRole, - accessibilityState?: ?AccessibilityState, - accessibilityValue?: ?AccessibilityValue, - accessibilityViewIsModal?: ?boolean, - accessible?: ?boolean, - children?: ?React$Node, - delayLongPress?: ?number, - delayPressIn?: ?number, - delayPressOut?: ?number, - disabled?: ?boolean, - focusable?: ?boolean, - hitSlop?: ?EdgeInsetsProp, - importantForAccessibility?: ?('auto' | 'yes' | 'no' | 'no-hide-descendants'), - nativeID?: ?string, - onAccessibilityAction?: ?(event: AccessibilityActionEvent) => mixed, - onBlur?: ?(event: BlurEvent) => mixed, - onFocus?: ?(event: FocusEvent) => mixed, - onLayout?: ?(event: LayoutEvent) => mixed, - onLongPress?: ?(event: PressEvent) => mixed, - onPress?: ?(event: PressEvent) => mixed, - onPressIn?: ?(event: PressEvent) => mixed, - onPressOut?: ?(event: PressEvent) => mixed, - pressRetentionOffset?: ?EdgeInsetsProp, - rejectResponderTermination?: ?boolean, - testID?: ?string, - touchSoundDisabled?: ?boolean, - |}>; - - // Copied from react-native/Libraries/Image/ImageSource.js - declare type ImageURISource = $ReadOnly<{ - uri?: ?string, - bundle?: ?string, - method?: ?string, - headers?: ?Object, - body?: ?string, - cache?: ?('default' | 'reload' | 'force-cache' | 'only-if-cached'), - width?: ?number, - height?: ?number, - scale?: ?number, - ... - }>; - - /** - * The following is copied from react-native-gesture-handler's libdef - */ - - declare type StateUndetermined = 0; - declare type StateFailed = 1; - declare type StateBegan = 2; - declare type StateCancelled = 3; - declare type StateActive = 4; - declare type StateEnd = 5; - - declare type GestureHandlerState = - | StateUndetermined - | StateFailed - | StateBegan - | StateCancelled - | StateActive - | StateEnd; - - declare type $SyntheticEvent = { - +nativeEvent: $ReadOnly<$Exact>, - ... - }; - - declare type $Event = $SyntheticEvent<{ - handlerTag: number, - numberOfPointers: number, - state: GestureHandlerState, - oldState: GestureHandlerState, - ...$Exact, - ... - }>; - - declare type $EventHandlers = {| - onGestureEvent?: ($Event) => mixed, - onHandlerStateChange?: ($Event) => mixed, - onBegan?: ($Event) => mixed, - onFailed?: ($Event) => mixed, - onCancelled?: ($Event) => mixed, - onActivated?: ($Event) => mixed, - onEnded?: ($Event) => mixed, - |}; - - declare type HitSlop = - | number - | {| - left?: number, - top?: number, - right?: number, - bottom?: number, - vertical?: number, - horizontal?: number, - width?: number, - height?: number, - |} - | {| - width: number, - left: number, - |} - | {| - width: number, - right: number, - |} - | {| - height: number, - top: number, - |} - | {| - height: number, - bottom: number, - |}; - - declare type $GestureHandlerProps< - AdditionalProps: {...}, - ExtraEventsProps: {...} - > = $ReadOnly<{| - ...$Exact, - ...$EventHandlers, - id?: string, - enabled?: boolean, - waitFor?: React$Ref | Array>, - simultaneousHandlers?: React$Ref | Array>, - shouldCancelWhenOutside?: boolean, - minPointers?: number, - hitSlop?: HitSlop, - children?: React$Node, - |}>; - - declare type PanGestureHandlerProps = $GestureHandlerProps< - { - activeOffsetY?: number | [number, number], - activeOffsetX?: number | [number, number], - failOffsetY?: number | [number, number], - failOffsetX?: number | [number, number], - minDist?: number, - minVelocity?: number, - minVelocityX?: number, - minVelocityY?: number, - minPointers?: number, - maxPointers?: number, - avgTouches?: boolean, - ... - }, - { - x: number, - y: number, - absoluteX: number, - absoluteY: number, - translationX: number, - translationY: number, - velocityX: number, - velocityY: number, - ... - } - >; - - /** - * MAGIC - */ - - declare type $If = $Call< - ((true, Then, Else) => Then) & ((false, Then, Else) => Else), - Test, - Then, - Else, - >; - declare type $IsA = $Call< - (Y => true) & (mixed => false), - X, - >; - declare type $IsUndefined = $IsA; - - declare type $Partial = $ReadOnly<$Rest>; - - // If { ...T, ... } counts as a T, then we're inexact - declare type $IsExact = $Call< - (T => false) & (mixed => true), - { ...T, ... }, - >; - - /** - * Actions, state, etc. - */ - - declare export type ScreenParams = { +[key: string]: mixed, ... }; - - declare export type BackAction = {| - +type: 'GO_BACK', - +source?: string, - +target?: string, - |}; - declare export type NavigateAction = {| - +type: 'NAVIGATE', - +payload: - | {| +key: string, +params?: ScreenParams |} - | {| +name: string, +key?: string, +params?: ScreenParams |}, - +source?: string, - +target?: string, - |}; - declare export type ResetAction = {| - +type: 'RESET', - +payload: StaleNavigationState, - +source?: string, - +target?: string, - |}; - declare export type SetParamsAction = {| - +type: 'SET_PARAMS', - +payload: {| +params?: ScreenParams |}, - +source?: string, - +target?: string, - |}; - declare export type CommonAction = - | BackAction - | NavigateAction - | ResetAction - | SetParamsAction; - - declare type NavigateActionCreator = {| - (routeName: string, params?: ScreenParams): NavigateAction, - ( - | {| +key: string, +params?: ScreenParams |} - | {| +name: string, +key?: string, +params?: ScreenParams |}, - ): NavigateAction, - |}; - declare export type CommonActionsType = {| - +navigate: NavigateActionCreator, - +goBack: () => BackAction, - +reset: (state: PossiblyStaleNavigationState) => ResetAction, - +setParams: (params: ScreenParams) => SetParamsAction, - |}; - - declare export type GenericNavigationAction = {| - +type: string, - +payload?: { +[key: string]: mixed, ... }, - +source?: string, - +target?: string, - |}; - - declare export type LeafRoute = {| - +key: string, - +name: RouteName, - +params?: ScreenParams, - |}; - declare export type StateRoute = {| - ...LeafRoute, - +state: NavigationState | StaleNavigationState, - |}; - declare export type Route = - | LeafRoute - | StateRoute; - - declare export type NavigationState = {| - +key: string, - +index: number, - +routeNames: $ReadOnlyArray, - +history?: $ReadOnlyArray, - +routes: $ReadOnlyArray>, - +type: string, - +stale: false, - |}; - - declare export type StaleLeafRoute = {| - +key?: string, - +name: RouteName, - +params?: ScreenParams, - |}; - declare export type StaleStateRoute = {| - ...StaleLeafRoute, - +state: StaleNavigationState, - |}; - declare export type StaleRoute = - | StaleLeafRoute - | StaleStateRoute; - declare export type StaleNavigationState = {| - // It's possible to pass React Nav a StaleNavigationState with an undefined - // index, but React Nav will always return one with the index set. This is - // the same as for the type property below, but in the case of index we tend - // to rely on it being set more... - +index: number, - +history?: $ReadOnlyArray, - +routes: $ReadOnlyArray>, - +type?: string, - +stale?: true, - |}; - - declare export type PossiblyStaleNavigationState = - | NavigationState - | StaleNavigationState; - declare export type PossiblyStaleRoute = - | Route - | StaleRoute; - - /** - * Routers - */ - - declare type ActionCreators< - State: NavigationState, - Action: GenericNavigationAction, - > = { - +[key: string]: (...args: any) => (Action | State => Action), - ... - }; - - declare export type DefaultRouterOptions = { - +initialRouteName?: string, - ... - }; - - declare export type RouterFactory< - State: NavigationState, - Action: GenericNavigationAction, - RouterOptions: DefaultRouterOptions, - > = (options: RouterOptions) => Router; - - declare export type ParamListBase = { +[key: string]: ?ScreenParams, ... }; - - declare export type RouterConfigOptions = {| - +routeNames: $ReadOnlyArray, - +routeParamList: ParamListBase, - |}; - - declare export type Router< - State: NavigationState, - Action: GenericNavigationAction, - > = {| - +type: $PropertyType, - +getInitialState: (options: RouterConfigOptions) => State, - +getRehydratedState: ( - partialState: PossiblyStaleNavigationState, - options: RouterConfigOptions, - ) => State, - +getStateForRouteNamesChange: ( - state: State, - options: RouterConfigOptions, - ) => State, - +getStateForRouteFocus: (state: State, key: string) => State, - +getStateForAction: ( - state: State, - action: Action, - options: RouterConfigOptions, - ) => ?PossiblyStaleNavigationState; - +shouldActionChangeFocus: (action: GenericNavigationAction) => boolean, - +actionCreators?: ActionCreators, - |}; - - /** - * Stack actions and router - */ - - declare export type StackNavigationState = {| - ...NavigationState, - +type: 'stack', - |}; - - declare export type ReplaceAction = {| - +type: 'REPLACE', - +payload: {| +name: string, +key?: ?string, +params?: ScreenParams |}, - +source?: string, - +target?: string, - |}; - declare export type PushAction = {| - +type: 'PUSH', - +payload: {| +name: string, +key?: ?string, +params?: ScreenParams |}, - +source?: string, - +target?: string, - |}; - declare export type PopAction = {| - +type: 'POP', - +payload: {| +count: number |}, - +source?: string, - +target?: string, - |}; - declare export type PopToTopAction = {| - +type: 'POP_TO_TOP', - +source?: string, - +target?: string, - |}; - declare export type StackAction = - | CommonAction - | ReplaceAction - | PushAction - | PopAction - | PopToTopAction; - - declare export type StackActionsType = {| - +replace: (routeName: string, params?: ScreenParams) => ReplaceAction, - +push: (routeName: string, params?: ScreenParams) => PushAction, - +pop: (count?: number) => PopAction, - +popToTop: () => PopToTopAction, - |}; - - declare export type StackRouterOptions = $Exact; - - /** - * Tab actions and router - */ - - declare export type TabNavigationState = {| - ...NavigationState, - +type: 'tab', - +history: $ReadOnlyArray<{| type: 'route', key: string |}>, - |}; - - declare export type JumpToAction = {| - +type: 'JUMP_TO', - +payload: {| +name: string, +params?: ScreenParams |}, - +source?: string, - +target?: string, - |}; - declare export type TabAction = - | CommonAction - | JumpToAction; - - declare export type TabActionsType = {| - +jumpTo: string => JumpToAction, - |}; - - declare export type TabRouterOptions = {| - ...$Exact, - +backBehavior?: 'initialRoute' | 'order' | 'history' | 'none', - |}; - - /** - * Drawer actions and router - */ - - declare type DrawerHistoryEntry = - | {| +type: 'route', +key: string |} - | {| +type: 'drawer' |}; - declare export type DrawerNavigationState = {| - ...NavigationState, - +type: 'drawer', - +history: $ReadOnlyArray, - |}; - - declare export type OpenDrawerAction = {| - +type: 'OPEN_DRAWER', - +source?: string, - +target?: string, - |}; - declare export type CloseDrawerAction = {| - +type: 'CLOSE_DRAWER', - +source?: string, - +target?: string, - |}; - declare export type ToggleDrawerAction = {| - +type: 'TOGGLE_DRAWER', - +source?: string, - +target?: string, - |}; - declare export type DrawerAction = - | TabAction - | OpenDrawerAction - | CloseDrawerAction - | ToggleDrawerAction; - - declare export type DrawerActionsType = {| - ...TabActionsType, - +openDrawer: () => OpenDrawerAction, - +closeDrawer: () => CloseDrawerAction, - +toggleDrawer: () => ToggleDrawerAction, - |}; - - declare export type DrawerRouterOptions = {| - ...TabRouterOptions, - +defaultStatus?: 'open' | 'closed', - |}; - - /** - * Events - */ - - declare export type EventMapBase = { - +[name: string]: {| - +data?: mixed, - +canPreventDefault?: boolean, - |}, - ... - }; - declare type EventPreventDefaultProperties = $If< - Test, - {| +defaultPrevented: boolean, +preventDefault: () => void |}, - {| |}, - >; - declare type EventDataProperties = $If< - $IsUndefined, - {| |}, - {| +data: Data |}, - >; - declare type EventArg< - EventName: string, - CanPreventDefault: ?boolean = false, - Data = void, - > = {| - ...EventPreventDefaultProperties, - ...EventDataProperties, - +type: EventName, - +target?: string, - |}; - declare type GlobalEventMap = {| - +state: {| +data: {| +state: State |}, +canPreventDefault: false |}, - |}; - declare type EventMapCore = {| - ...GlobalEventMap, - +focus: {| +data: void, +canPreventDefault: false |}, - +blur: {| +data: void, +canPreventDefault: false |}, - +beforeRemove: {| - +data: {| +action: GenericNavigationAction |}, - +canPreventDefault: true, - |}, - |}; - declare type EventListenerCallback< - EventName: string, - State: PossiblyStaleNavigationState = NavigationState, - EventMap: EventMapBase = EventMapCore, - > = (e: EventArg< - EventName, - $PropertyType< - $ElementType< - {| ...EventMap, ...EventMapCore |}, - EventName, - >, - 'canPreventDefault', - >, - $PropertyType< - $ElementType< - {| ...EventMap, ...EventMapCore |}, - EventName, - >, - 'data', - >, - >) => mixed; - - /** - * Navigation prop - */ - - declare type PartialWithMergeProperty = $If< - $IsExact, - { ...$Partial, +merge: true }, - { ...$Partial, +merge: true, ... }, - >; - - declare type EitherExactOrPartialWithMergeProperty = - | ParamsType - | PartialWithMergeProperty; - - declare export type SimpleNavigate = - >( - routeName: DestinationRouteName, - params: EitherExactOrPartialWithMergeProperty< - $ElementType, - >, - ) => void; - - declare export type Navigate = - & SimpleNavigate - & >( - route: $If< - $IsUndefined<$ElementType>, - | {| +key: string |} - | {| +name: DestinationRouteName, +key?: string |}, - | {| - +key: string, - +params?: EitherExactOrPartialWithMergeProperty< - $ElementType, - >, - |} - | {| - +name: DestinationRouteName, - +key?: string, - +params?: EitherExactOrPartialWithMergeProperty< - $ElementType, - >, - |}, - >, - ) => void; - - declare type CoreNavigationHelpers< - ParamList: ParamListBase, - State: PossiblyStaleNavigationState = PossiblyStaleNavigationState, - EventMap: EventMapBase = EventMapCore, - > = { - +navigate: Navigate, - +dispatch: ( - action: - | GenericNavigationAction - | (State => GenericNavigationAction), - ) => void, - +reset: PossiblyStaleNavigationState => void, - +goBack: () => void, - +isFocused: () => boolean, - +canGoBack: () => boolean, - +getId: () => string | void, - +getParent: >(id?: string) => ?Parent, - +getState: () => NavigationState, - +addListener: |}, - >>( - name: EventName, - callback: EventListenerCallback, - ) => () => void, - +removeListener: |}, - >>( - name: EventName, - callback: EventListenerCallback, - ) => void, - ... - }; - - declare export type NavigationHelpers< - ParamList: ParamListBase, - State: PossiblyStaleNavigationState = PossiblyStaleNavigationState, - EventMap: EventMapBase = EventMapCore, - > = { - ...$Exact>, - +setParams: (params: ScreenParams) => void, - ... - }; - - declare type SetParamsInput< - ParamList: ParamListBase, - RouteName: $Keys = $Keys, - > = $If< - $IsUndefined<$ElementType>, - empty, - $Partial<$NonMaybeType<$ElementType>>, - >; - - declare export type NavigationProp< - ParamList: ParamListBase, - RouteName: $Keys = $Keys, - State: PossiblyStaleNavigationState = PossiblyStaleNavigationState, - ScreenOptions: {...} = {...}, - EventMap: EventMapBase = EventMapCore, - > = { - ...$Exact>, - +setOptions: (options: $Partial) => void, - +setParams: (params: SetParamsInput) => void, - ... - }; - - /** - * CreateNavigator - */ - - declare export type RouteProp< - ParamList: ParamListBase = ParamListBase, - RouteName: $Keys = $Keys, - > = {| - ...LeafRoute, - +params: $ElementType, - +path?: string, - |}; - - declare type ScreenOptionsProp< - ScreenOptions: {...}, - RouteParam, - NavHelpers, - > = - | ScreenOptions - | ({| +route: RouteParam, +navigation: NavHelpers |}) => ScreenOptions; - declare export type ScreenListeners< - State: NavigationState = NavigationState, - EventMap: EventMapBase = EventMapCore, - > = $ObjMapi< - {| [name: $Keys]: empty |}, - >(K, empty) => EventListenerCallback, - >; - declare type ScreenListenersProp< - ScreenListenersParam: {...}, - RouteParam, - NavHelpers, - > = - | ScreenListenersParam - | ({| +route: RouteParam, +navigation: NavHelpers |}) => ScreenListenersParam; - - declare type BaseScreenProps< - ParamList: ParamListBase, - NavProp, - RouteName: $Keys = $Keys, - State: NavigationState = NavigationState, - ScreenOptions: {...} = {...}, - EventMap: EventMapBase = EventMapCore, - > = {| - +name: RouteName, - +options?: ScreenOptionsProp< - ScreenOptions, - RouteProp, - NavProp, - >, - +listeners?: ScreenListenersProp< - ScreenListeners, - RouteProp, - NavProp, - >, - +initialParams?: $Partial<$ElementType>, - +getId?: ({ - +params: $ElementType, - }) => string | void, - +navigationKey?: string, - |}; - - declare export type ScreenProps< - ParamList: ParamListBase, - NavProp, - RouteName: $Keys = $Keys, - State: NavigationState = NavigationState, - ScreenOptions: {...} = {...}, - EventMap: EventMapBase = EventMapCore, - > = - | {| - ...BaseScreenProps< - ParamList, - NavProp, - RouteName, - State, - ScreenOptions, - EventMap, - >, - +component: React$ComponentType<{| - +route: RouteProp, - +navigation: NavProp, - |}>, - |} - | {| - ...BaseScreenProps< - ParamList, - NavProp, - RouteName, - State, - ScreenOptions, - EventMap, - >, - +getComponent: () => React$ComponentType<{| - +route: RouteProp, - +navigation: NavProp, - |}>, - |} - | {| - ...BaseScreenProps< - ParamList, - NavProp, - RouteName, - State, - ScreenOptions, - EventMap, - >, - +children: ({| - +route: RouteProp, - +navigation: NavProp, - |}) => React$Node, - |}; - - declare export type ScreenComponent< - GlobalParamList: ParamListBase, - ParamList: ParamListBase, - State: NavigationState = NavigationState, - ScreenOptions: {...} = {...}, - EventMap: EventMapBase = EventMapCore, - > = < - RouteName: $Keys, - NavProp: NavigationProp< - GlobalParamList, - RouteName, - State, - ScreenOptions, - EventMap, - >, - >(props: ScreenProps< - ParamList, - NavProp, - RouteName, - State, - ScreenOptions, - EventMap, - >) => React$Node; - - declare type ScreenOptionsProps< - ScreenOptions: {...}, - RouteParam, - NavHelpers, - > = {| - +screenOptions?: ScreenOptionsProp, - |}; - declare type ScreenListenersProps< - ScreenListenersParam: {...}, - RouteParam, - NavHelpers, - > = {| - +screenListeners?: ScreenListenersProp< - ScreenListenersParam, - RouteParam, - NavHelpers, - >, - |}; - declare export type ExtraNavigatorPropsBase = { - ...$Exact, - +id?: string, - +children?: React$Node, - ... - }; - declare export type NavigatorProps< - ScreenOptions: {...}, - ScreenListenersParam, - RouteParam, - NavHelpers, - ExtraNavigatorProps: ExtraNavigatorPropsBase, - > = { - ...$Exact, - ...ScreenOptionsProps, - ...ScreenListenersProps, - +defaultScreenOptions?: - | ScreenOptions - | ({| - +route: RouteParam, - +navigation: NavHelpers, - +options: ScreenOptions, - |}) => ScreenOptions, - ... - }; - declare export type NavigatorPropsBase< - ScreenOptions: {...}, - ScreenListenersParam: {...}, - NavHelpers, - > = NavigatorProps< - ScreenOptions, - ScreenListenersParam, - RouteProp<>, - NavHelpers, - ExtraNavigatorPropsBase, - >; - - declare export type CreateNavigator< - State: NavigationState, - ScreenOptions: {...}, - EventMap: EventMapBase, - ExtraNavigatorProps: ExtraNavigatorPropsBase, - > = < - GlobalParamList: ParamListBase, - ParamList: ParamListBase, - NavHelpers: NavigationHelpers< - GlobalParamList, - State, - EventMap, - >, - >() => {| - +Screen: ScreenComponent< - GlobalParamList, - ParamList, - State, - ScreenOptions, - EventMap, - >, - +Navigator: React$ComponentType<$Exact, - RouteProp, - NavHelpers, - ExtraNavigatorProps, - >>>, - +Group: React$ComponentType<{| - ...ScreenOptionsProps, NavHelpers>, - +children: React$Node, - +navigationKey?: string, - |}>, - |}; - - declare export type CreateNavigatorFactory = < - State: NavigationState, - ScreenOptions: {...}, - EventMap: EventMapBase, - NavHelpers: NavigationHelpers< - ParamListBase, - State, - EventMap, - >, - ExtraNavigatorProps: ExtraNavigatorPropsBase, - >( - navigator: React$ComponentType<$Exact, - RouteProp<>, - NavHelpers, - ExtraNavigatorProps, - >>>, - ) => CreateNavigator; - - - /** - * useNavigationBuilder - */ - - declare export type Descriptor< - NavHelpers, - ScreenOptions: {...} = {...}, - > = {| - +render: () => React$Node, - +options: $ReadOnly, - +navigation: NavHelpers, - |}; - - declare export type UseNavigationBuilder = < - State: NavigationState, - Action: GenericNavigationAction, - ScreenOptions: {...}, - RouterOptions: DefaultRouterOptions, - NavHelpers, - EventMap: EventMapBase, - ExtraNavigatorProps: ExtraNavigatorPropsBase, - >( - routerFactory: RouterFactory, - options: $Exact, - RouteProp<>, - NavHelpers, - ExtraNavigatorProps, - >>, - ) => {| - +id?: string, - +state: State, - +descriptors: {| +[key: string]: Descriptor |}, - +navigation: NavHelpers, - |}; - - /** - * EdgeInsets - */ - - declare type EdgeInsets = {| - +top: number, - +right: number, - +bottom: number, - +left: number, - |}; - - /** - * TransitionPreset - */ - - declare export type TransitionSpec = - | {| - animation: 'spring', - config: $Diff< - SpringAnimationConfigSingle, - { toValue: number | AnimatedValue, ... }, - >, - |} - | {| - animation: 'timing', - config: $Diff< - TimingAnimationConfigSingle, - { toValue: number | AnimatedValue, ... }, - >, - |}; - - declare export type StackCardInterpolationProps = {| - +current: {| - +progress: AnimatedInterpolation, - |}, - +next?: {| - +progress: AnimatedInterpolation, - |}, - +index: number, - +closing: AnimatedInterpolation, - +swiping: AnimatedInterpolation, - +inverted: AnimatedInterpolation, - +layouts: {| - +screen: {| +width: number, +height: number |}, - |}, - +insets: EdgeInsets, - |}; - declare export type StackCardInterpolatedStyle = {| - containerStyle?: AnimatedViewStyleProp, - cardStyle?: AnimatedViewStyleProp, - overlayStyle?: AnimatedViewStyleProp, - shadowStyle?: AnimatedViewStyleProp, - |}; - declare export type StackCardStyleInterpolator = ( - props: StackCardInterpolationProps, - ) => StackCardInterpolatedStyle; - - declare export type StackHeaderInterpolationProps = {| - +current: {| - +progress: AnimatedInterpolation, - |}, - +next?: {| - +progress: AnimatedInterpolation, - |}, - +layouts: {| - +header: {| +width: number, +height: number |}, - +screen: {| +width: number, +height: number |}, - +title?: {| +width: number, +height: number |}, - +leftLabel?: {| +width: number, +height: number |}, - |}, - |}; - declare export type StackHeaderInterpolatedStyle = {| - leftLabelStyle?: AnimatedViewStyleProp, - leftButtonStyle?: AnimatedViewStyleProp, - rightButtonStyle?: AnimatedViewStyleProp, - titleStyle?: AnimatedViewStyleProp, - backgroundStyle?: AnimatedViewStyleProp, - |}; - declare export type StackHeaderStyleInterpolator = ( - props: StackHeaderInterpolationProps, - ) => StackHeaderInterpolatedStyle; - - declare type GestureDirection = - | 'horizontal' - | 'horizontal-inverted' - | 'vertical' - | 'vertical-inverted'; - - declare export type TransitionPreset = {| - +gestureDirection: GestureDirection, - +transitionSpec: {| - +open: TransitionSpec, - +close: TransitionSpec, - |}, - +cardStyleInterpolator: StackCardStyleInterpolator, - +headerStyleInterpolator: StackHeaderStyleInterpolator, - |}; - - /** - * Header common options - */ - - declare export type SceneProgress = {| - +current: AnimatedInterpolation, - +next?: AnimatedInterpolation, - +previous?: AnimatedInterpolation, - |}; - - declare export type HeaderProps = {| - +navigation: NavProp, - +route: RouteProp<>, - +options: ScreenOptions, - +layout: {| +width: number, +height: number |}, - |}; - - declare export type HeaderButtonProps = $Partial<{| - +tintColor: string, - +pressColor: string, - +pressOpacity: number, - |}>; - - declare export type HeaderLeftButtonProps = $Partial<{| - ...HeaderButtonProps, - +labelVisible: boolean, - |}>; - - declare type HeaderTitleInputBase = { - +onLayout: LayoutEvent => void, - +children: string, - +allowFontScaling: ?boolean, - +tintColor: ?string, - +style: ?AnimatedTextStyleProp, - ... - }; - - declare export type HeaderTitleInputProps = - $Exact; - - declare export type HeaderCommonOptions< - NavHeaderProps, - NavHeaderLeftProps, - NavHeaderRightProps, - > = $Partial<{| - +header: NavHeaderProps => React$Node, - +headerShown: boolean, - +headerTitle: string | ( HeaderTitleInputProps => React$Node), - +headerTitleAlign: 'left' | 'center', - +headerTitleStyle: AnimatedTextStyleProp, - +headerTitleContainerStyle: AnimatedViewStyleProp, - +headerTintColor: string, - +headerTitleAllowFontScaling: boolean, - +headerLeft: NavHeaderLeftProps => React$Node, - +headerLeftContainerStyle: AnimatedViewStyleProp, - +headerRight: NavHeaderRightProps => React$Node, - +headerRightContainerStyle: AnimatedViewStyleProp, - +headerBackground: ({| style: AnimatedViewStyleProp |}) => React$Node, - +headerStyle: AnimatedViewStyleProp, - +headerTransparent: boolean, - +headerStatusBarHeight: number, - +headerShadowVisible: boolean, - +headerBackgroundContainerStyle: AnimatedViewStyleProp, - +headerPressColor: string, - +headerPressOpacity: number, - |}>; - - /** - * Stack options - */ - - declare export type StackDescriptor = Descriptor< - StackNavigationHelpers<>, - StackOptions, - >; - - declare type Scene = {| - +route: T, - +descriptor: StackDescriptor, - +progress: SceneProgress, - |}; - - declare export type StackHeaderProps = {| - ...HeaderProps, StackOptions>, - +progress: SceneProgress, - +back?: {| +title: string |}, - +styleInterpolator: StackHeaderStyleInterpolator, - |}; - - declare export type StackHeaderButtonProps = $Partial<{| - ...HeaderButtonProps, - +canGoBack: boolean, - |}>; - - declare export type StackHeaderLeftButtonProps = $Partial<{| - ...StackHeaderButtonProps, - +onPress: (() => void), - +backImage: (props: {| tintColor: string |}) => React$Node, - +label: string, - +truncatedLabel: string, - +labelVisible: boolean, - +labelStyle: AnimatedTextStyleProp, - +allowFontScaling: boolean, - +onLabelLayout: LayoutEvent => void, - +screenLayout: {| +width: number, +height: number |}, - +titleLayout: {| +width: number, +height: number |}, - +disabled: boolean, - +accessibilityLabel: string, - +style: ViewStyleProp, - |}>; - - declare export type StackOptions = $Partial<{| - +title: string, - +cardShadowEnabled: boolean, - +cardOverlayEnabled: boolean, - +cardOverlay: {| style: ViewStyleProp |} => React$Node, - +cardStyle: ViewStyleProp, - +animationEnabled: boolean, - +animationTypeForReplace: 'push' | 'pop', - +gestureEnabled: boolean, - +gestureResponseDistance: number, - +gestureVelocityImpact: number, - +safeAreaInsets: $Partial, - +keyboardHandlingEnabled: boolean, - +presentation: 'card' | 'modal' | 'transparentModal', - // Transition - ...TransitionPreset, - // Header - ...HeaderCommonOptions< - StackHeaderProps, - StackHeaderLeftButtonProps, - StackHeaderButtonProps, - >, - +headerMode: 'float' | 'screen', - +headerBackAllowFontScaling: boolean, - +headerBackTitle: string | null, - +headerBackTitleStyle: TextStyleProp, - +headerBackTitleVisible: boolean, - +headerTruncatedBackTitle: string, - +headerBackImage: $PropertyType, - +headerBackAccessibilityLabel: string, - |}>; - - /** - * Stack navigation prop - */ - - declare export type StackNavigationEventMap = {| - ...EventMapCore, - +transitionStart: {| - +data: {| +closing: boolean |}, - +canPreventDefault: false, - |}, - +transitionEnd: {| - +data: {| +closing: boolean |}, - +canPreventDefault: false, - |}, - +gestureStart: {| +data: void, +canPreventDefault: false |}, - +gestureEnd: {| +data: void, +canPreventDefault: false |}, - +gestureCancel: {| +data: void, +canPreventDefault: false |}, - |}; - - declare type StackExtraNavigationHelpers< - ParamList: ParamListBase = ParamListBase, - > = {| - +replace: SimpleNavigate, - +push: SimpleNavigate, - +pop: (count?: number) => void, - +popToTop: () => void, - |}; - - declare export type StackNavigationHelpers< - ParamList: ParamListBase = ParamListBase, - EventMap: EventMapBase = StackNavigationEventMap, - > = { - ...$Exact>, - ...StackExtraNavigationHelpers, - ... - }; - - declare export type StackNavigationProp< - ParamList: ParamListBase = ParamListBase, - RouteName: $Keys = $Keys, - Options: {...} = StackOptions, - EventMap: EventMapBase = StackNavigationEventMap, - > = {| - ...$Exact>, - ...StackExtraNavigationHelpers, - |}; - - /** - * Miscellaneous stack exports - */ - - declare type StackNavigationConfig = {| - +detachInactiveScreens?: boolean, - |}; - - declare export type ExtraStackNavigatorProps = {| - ...$Exact, - ...StackRouterOptions, - ...StackNavigationConfig, - |}; - - declare export type StackNavigatorProps< - NavHelpers: StackNavigationHelpers<> = StackNavigationHelpers<>, - > = $Exact, - RouteProp<>, - NavHelpers, - ExtraStackNavigatorProps, - >>; - - /** - * Bottom tab options - */ - - declare export type BottomTabBarButtonProps = {| - ...$Diff< - TouchableWithoutFeedbackProps, - {| onPress?: ?(event: PressEvent) => mixed |}, - >, - +to?: string, - +children: React$Node, - +onPress?: (MouseEvent | PressEvent) => void, - |}; - - declare export type TabBarVisibilityAnimationConfig = - | {| - +animation: 'spring', - +config?: $Diff< - SpringAnimationConfigSingle, - { toValue: number | AnimatedValue, useNativeDriver: boolean, ... }, - >, - |} - | {| - +animation: 'timing', - +config?: $Diff< - TimingAnimationConfigSingle, - { toValue: number | AnimatedValue, useNativeDriver: boolean, ... }, - >, - |}; - - declare export type BottomTabOptions = $Partial<{| - +title: string, - +tabBarLabel: - | string - | ({| focused: boolean, color: string |}) => React$Node, - +tabBarIcon: ({| - focused: boolean, - color: string, - size: number, - |}) => React$Node, - +tabBarBadge: number | string, - +tabBarBadgeStyle: TextStyleProp, - +tabBarAccessibilityLabel: string, - +tabBarTestID: string, - +tabBarVisibilityAnimationConfig: $Partial<{| - +show: TabBarVisibilityAnimationConfig, - +hide: TabBarVisibilityAnimationConfig, - |}>, - +tabBarButton: BottomTabBarButtonProps => React$Node, - +tabBarHideOnKeyboard: boolean, - +tabBarActiveTintColor: string, - +tabBarInactiveTintColor: string, - +tabBarActiveBackgroundColor: string, - +tabBarInactiveBackgroundColor: string, - +tabBarAllowFontScaling: boolean, - +tabBarShowLabel: boolean, - +tabBarLabelStyle: TextStyleProp, - +tabBarIconStyle: TextStyleProp, - +tabBarItemStyle: ViewStyleProp, - +tabBarLabelPosition: 'beside-icon' | 'below-icon', - +tabBarStyle: ViewStyleProp, - +unmountOnBlur: boolean, - +lazy: boolean, - ...HeaderCommonOptions< - HeaderProps, BottomTabOptions>, - HeaderLeftButtonProps, - HeaderButtonProps, - >, - |}>; - - /** - * Bottom tab navigation prop - */ - - declare export type BottomTabNavigationEventMap = {| - ...EventMapCore, - +tabPress: {| +data: void, +canPreventDefault: true |}, - +tabLongPress: {| +data: void, +canPreventDefault: false |}, - |}; - - declare type TabExtraNavigationHelpers< - ParamList: ParamListBase = ParamListBase, - > = {| - +jumpTo: SimpleNavigate, - |}; - - declare export type BottomTabNavigationHelpers< - ParamList: ParamListBase = ParamListBase, - EventMap: EventMapBase = BottomTabNavigationEventMap, - > = { - ...$Exact>, - ...TabExtraNavigationHelpers, - ... - }; - - declare export type BottomTabNavigationProp< - ParamList: ParamListBase = ParamListBase, - RouteName: $Keys = $Keys, - Options: {...} = BottomTabOptions, - EventMap: EventMapBase = BottomTabNavigationEventMap, - > = {| - ...$Exact>, - ...TabExtraNavigationHelpers, - |}; - - /** - * Miscellaneous bottom tab exports - */ - - declare export type BottomTabDescriptor = Descriptor< - BottomTabNavigationHelpers<>, - BottomTabOptions, - >; - - declare type BottomTabNavigationBuilderResult = {| - +state: TabNavigationState, - +navigation: BottomTabNavigationHelpers<>, - +descriptors: {| +[key: string]: BottomTabDescriptor |}, - |}; - - declare export type BottomTabBarProps = BottomTabNavigationBuilderResult; - - declare type BottomTabNavigationConfig = {| - +tabBar?: BottomTabBarProps => React$Node, - +safeAreaInsets?: $Partial, - +detachInactiveScreens?: boolean, - |}; - - declare export type ExtraBottomTabNavigatorProps = {| - ...$Exact, - ...TabRouterOptions, - ...BottomTabNavigationConfig, - |}; - - declare export type BottomTabNavigatorProps< - NavHelpers: BottomTabNavigationHelpers<> = BottomTabNavigationHelpers<>, - > = $Exact, - RouteProp<>, - NavHelpers, + BottomTabNavigationEventMap, ExtraBottomTabNavigatorProps, - >>; - - /** - * Material bottom tab options - */ - - declare export type MaterialBottomTabOptions = $Partial<{| - +title: string, - +tabBarColor: string, - +tabBarLabel: string, - +tabBarIcon: - | string - | ({| +focused: boolean, +color: string |}) => React$Node, - +tabBarBadge: boolean | number | string, - +tabBarAccessibilityLabel: string, - +tabBarTestID: string, - |}>; - - /** - * Material bottom tab navigation prop - */ - - declare export type MaterialBottomTabNavigationEventMap = {| - ...EventMapCore, - +tabPress: {| +data: void, +canPreventDefault: true |}, - |}; - - declare export type MaterialBottomTabNavigationHelpers< - ParamList: ParamListBase = ParamListBase, - EventMap: EventMapBase = MaterialBottomTabNavigationEventMap, - > = { - ...$Exact>, - ...TabExtraNavigationHelpers, - ... - }; - - declare export type MaterialBottomTabNavigationProp< - ParamList: ParamListBase = ParamListBase, - RouteName: $Keys = $Keys, - Options: {...} = MaterialBottomTabOptions, - EventMap: EventMapBase = MaterialBottomTabNavigationEventMap, - > = {| - ...$Exact>, - ...TabExtraNavigationHelpers, - |}; - - /** - * Miscellaneous material bottom tab exports - */ - - declare export type PaperFont = {| - +fontFamily: string, - +fontWeight?: - | 'normal' - | 'bold' - | '100' - | '200' - | '300' - | '400' - | '500' - | '600' - | '700' - | '800' - | '900', - |}; - - declare export type PaperFonts = {| - +regular: PaperFont, - +medium: PaperFont, - +light: PaperFont, - +thin: PaperFont, - |}; - - declare export type PaperTheme = {| - +dark: boolean, - +mode?: 'adaptive' | 'exact', - +roundness: number, - +colors: {| - +primary: string, - +background: string, - +surface: string, - +accent: string, - +error: string, - +text: string, - +onSurface: string, - +onBackground: string, - +disabled: string, - +placeholder: string, - +backdrop: string, - +notification: string, - |}, - +fonts: PaperFonts, - +animation: {| - +scale: number, - |}, - |}; - - declare export type PaperRoute = {| - +key: string, - +title?: string, - +icon?: any, - +badge?: string | number | boolean, - +color?: string, - +accessibilityLabel?: string, - +testID?: string, - |}; - - declare export type PaperTouchableProps = {| - ...TouchableWithoutFeedbackProps, - +key: string, - +route: PaperRoute, - +children: React$Node, - +borderless?: boolean, - +centered?: boolean, - +rippleColor?: string, - |}; - - declare export type MaterialBottomTabNavigationConfig = {| - +shifting?: boolean, - +labeled?: boolean, - +renderTouchable?: PaperTouchableProps => React$Node, - +activeColor?: string, - +inactiveColor?: string, - +sceneAnimationEnabled?: boolean, - +keyboardHidesNavigationBar?: boolean, - +barStyle?: ViewStyleProp, - +style?: ViewStyleProp, - +theme?: PaperTheme, - |}; - - declare export type ExtraMaterialBottomTabNavigatorProps = {| - ...$Exact, - ...TabRouterOptions, - ...MaterialBottomTabNavigationConfig, - |}; - - declare export type MaterialBottomTabNavigatorProps< - NavHelpers: MaterialBottomTabNavigationHelpers<> = - MaterialBottomTabNavigationHelpers<>, - > = $Exact, - RouteProp<>, - NavHelpers, - ExtraMaterialBottomTabNavigatorProps, - >>; - - /** - * Material top tab options - */ - - declare export type MaterialTopTabOptions = $Partial<{| - +title: string, - +tabBarLabel: - | string - | ({| +focused: boolean, +color: string |}) => React$Node, - +tabBarIcon: ({| +focused: boolean, +color: string |}) => React$Node, - +tabBarAccessibilityLabel: string, - +tabBarTestID: string, - +tabBarActiveTintColor: string, - +tabBarInactiveTintColor: string, - +tabBarPressColor: string, - +tabBarPressOpacity: number, - +tabBarShowLabel: boolean, - +tabBarShowIcon: boolean, - +tabBarAllowFontScaling: boolean, - +tabBarBounces: boolean, - +tabBarScrollEnabled: boolean, - +tabBarIconStyle: ViewStyleProp, - +tabBarLabelStyle: TextStyleProp, - +tabBarItemStyle: ViewStyleProp, - +tabBarIndicatorStyle: ViewStyleProp, - +tabBarIndicatorContainerStyle: ViewStyleProp, - +tabBarContentContainerStyle: ViewStyleProp, - +tabBarStyle: ViewStyleProp, - +tabBarBadge: () => React$Node, - +tabBarIndicator: MaterialTopTabBarIndicatorProps => React$Node, - +lazy: boolean, - +lazyPlaceholder: ({| +route: Route<> |}) => React$Node, - |}>; - - /** - * Material top tab navigation prop - */ - - declare export type MaterialTopTabNavigationEventMap = {| - ...EventMapCore, - +tabPress: {| +data: void, +canPreventDefault: true |}, - +tabLongPress: {| +data: void, +canPreventDefault: false |}, - +swipeStart: {| +data: void, +canPreventDefault: false |}, - +swipeEnd: {| +data: void, +canPreventDefault: false |}, - |}; - - declare export type MaterialTopTabNavigationHelpers< - ParamList: ParamListBase = ParamListBase, - EventMap: EventMapBase = MaterialTopTabNavigationEventMap, - > = { - ...$Exact>, - ...TabExtraNavigationHelpers, - ... - }; - - declare export type MaterialTopTabNavigationProp< - ParamList: ParamListBase = ParamListBase, - RouteName: $Keys = $Keys, - Options: {...} = MaterialTopTabOptions, - EventMap: EventMapBase = MaterialTopTabNavigationEventMap, - > = {| - ...$Exact>, - ...TabExtraNavigationHelpers, - |}; - - /** - * Miscellaneous material top tab exports - */ - - declare type MaterialTopTabPagerCommonProps = {| - +keyboardDismissMode: 'none' | 'on-drag' | 'auto', - +swipeEnabled: boolean, - +swipeVelocityImpact?: number, - +springVelocityScale?: number, - +springConfig: $Partial<{| - +damping: number, - +mass: number, - +stiffness: number, - +restSpeedThreshold: number, - +restDisplacementThreshold: number, - |}>, - +timingConfig: $Partial<{| - +duration: number, - |}>, - |}; - - declare export type MaterialTopTabPagerProps = {| - ...MaterialTopTabPagerCommonProps, - +onSwipeStart?: () => void, - +onSwipeEnd?: () => void, - +onIndexChange: (index: number) => void, - +navigationState: TabNavigationState, - +layout: {| +width: number, +height: number |}, - +removeClippedSubviews: boolean, - +children: ({| - +addListener: (type: 'enter', listener: number => void) => void, - +removeListener: (type: 'enter', listener: number => void) => void, - +position: any, // Reanimated.Node - +render: React$Node => React$Node, - +jumpTo: string => void, - |}) => React$Node, - +gestureHandlerProps: PanGestureHandlerProps, - |}; - - declare export type MaterialTopTabBarIndicatorProps = {| - +state: TabNavigationState, - +width: string, - +style?: ViewStyleProp, - +getTabWidth: number => number, - |}; - - declare export type MaterialTopTabDescriptor = Descriptor< - MaterialBottomTabNavigationHelpers<>, - MaterialBottomTabOptions, - >; - - declare type MaterialTopTabNavigationBuilderResult = {| - +state: TabNavigationState, - +navigation: MaterialTopTabNavigationHelpers<>, - +descriptors: {| +[key: string]: MaterialTopTabDescriptor |}, - |}; - - declare export type MaterialTopTabBarProps = {| - ...MaterialTopTabNavigationBuilderResult, - +layout: {| +width: number, +height: number |}, - +position: any, // Reanimated.Node - +jumpTo: string => void, - |}; - - declare export type MaterialTopTabNavigationConfig = {| - ...$Partial, - +position?: any, // Reanimated.Value - +tabBarPosition?: 'top' | 'bottom', - +initialLayout?: $Partial<{| +width: number, +height: number |}>, - +lazyPreloadDistance?: number, - +removeClippedSubviews?: boolean, - +sceneContainerStyle?: ViewStyleProp, - +style?: ViewStyleProp, - +gestureHandlerProps?: PanGestureHandlerProps, - +pager?: MaterialTopTabPagerProps => React$Node, - +tabBar?: MaterialTopTabBarProps => React$Node, - |}; - - declare export type ExtraMaterialTopTabNavigatorProps = {| - ...$Exact, - ...TabRouterOptions, - ...MaterialTopTabNavigationConfig, - |}; - - declare export type MaterialTopTabNavigatorProps< - NavHelpers: MaterialTopTabNavigationHelpers<> = - MaterialTopTabNavigationHelpers<>, - > = $Exact, - RouteProp<>, - NavHelpers, - ExtraMaterialTopTabNavigatorProps, - >>; - - /** - * Drawer options - */ - - declare export type DrawerOptions = $Partial<{| - +title: string, - +lazy: boolean, - +drawerLabel: - | string - | ({| +color: string, +focused: boolean |}) => React$Node, - +drawerIcon: ({| - +color: string, - +size: number, - +focused: boolean, - |}) => React$Node, - +drawerActiveTintColor: string, - +drawerActiveBackgroundColor: string, - +drawerInactiveTintColor: string, - +drawerInactiveBackgroundColor: string, - +drawerItemStyle: ViewStyleProp, - +drawerLabelStyle: TextStyleProp, - +drawerContentContainerStyle: ViewStyleProp, - +drawerContentStyle: ViewStyleProp, - +drawerStyle: ViewStyleProp, - +drawerPosition: 'left' | 'right', - +drawerType: 'front' | 'back' | 'slide' | 'permanent', - +drawerHideStatusBarOnOpen: boolean, - +drawerStatusBarAnimation: 'slide' | 'none' | 'fade', - +overlayColor: string, - +sceneContainerStyle: ViewStyleProp, - +gestureHandlerProps: PanGestureHandlerProps, - +swipeEnabled: boolean, - +swipeEdgeWidth: number, - +swipeMinDistance: number, - +keyboardDismissMode: 'on-drag' | 'none', - +unmountOnBlur: boolean, - ...HeaderCommonOptions< - HeaderProps, DrawerOptions>, - HeaderLeftButtonProps, - HeaderButtonProps, - >, - |}>; - - /** - * Drawer navigation prop - */ - - declare export type DrawerNavigationEventMap = - EventMapCore; - - declare type DrawerExtraNavigationHelpers< - ParamList: ParamListBase = ParamListBase, - > = {| - +jumpTo: SimpleNavigate, - +openDrawer: () => void, - +closeDrawer: () => void, - +toggleDrawer: () => void, - |}; - - declare export type DrawerNavigationHelpers< - ParamList: ParamListBase = ParamListBase, - EventMap: EventMapBase = DrawerNavigationEventMap, - > = { - ...$Exact>, - ...DrawerExtraNavigationHelpers, - ... - }; - - declare export type DrawerNavigationProp< - ParamList: ParamListBase = ParamListBase, - RouteName: $Keys = $Keys, - Options: {...} = DrawerOptions, - EventMap: EventMapBase = DrawerNavigationEventMap, - > = {| - ...$Exact>, - ...DrawerExtraNavigationHelpers, - |}; - - /** - * Miscellaneous drawer exports - */ - - declare export type DrawerDescriptor = Descriptor< - DrawerNavigationHelpers<>, - DrawerOptions, - >; - - declare type DrawerNavigationBuilderResult = {| - +state: DrawerNavigationState, - +navigation: DrawerNavigationHelpers<>, - +descriptors: {| +[key: string]: DrawerDescriptor |}, - |}; - - declare export type DrawerNavigationConfig = {| - +drawerContent?: DrawerNavigationBuilderResult => React$Node, - +detachInactiveScreens?: boolean, - +useLegacyImplementation?: boolean, - |}; - - declare export type ExtraDrawerNavigatorProps = {| - ...$Exact, - ...DrawerRouterOptions, - ...DrawerNavigationConfig, - |}; - - declare export type DrawerNavigatorProps< - NavHelpers: DrawerNavigationHelpers<> = DrawerNavigationHelpers<>, - > = $Exact, - RouteProp<>, - NavHelpers, - ExtraDrawerNavigatorProps, - >>; - - /** - * BaseNavigationContainer - */ - - declare export type BaseNavigationContainerProps = {| - +children: React$Node, - +initialState?: PossiblyStaleNavigationState, - +onStateChange?: (state: ?PossiblyStaleNavigationState) => void, - +independent?: boolean, - |}; - - declare export type ContainerEventMap = {| - ...GlobalEventMap, - +options: {| - +data: {| +options: { +[key: string]: mixed, ... } |}, - +canPreventDefault: false, - |}, - +__unsafe_action__: {| - +data: {| - +action: GenericNavigationAction, - +noop: boolean, - |}, - +canPreventDefault: false, - |}, - |}; - - declare export type BaseNavigationContainerInterface = {| - ...$Exact>, - +resetRoot: (state?: PossiblyStaleNavigationState) => void, - +getRootState: () => NavigationState, - +getCurrentRoute: () => RouteProp<> | void, - +getCurrentOptions: () => Object | void, - +isReady: () => boolean, - |}; - - declare type BaseNavigationContainerInterfaceRef = {| - ...BaseNavigationContainerInterface, - +current: BaseNavigationContainerInterface | null, - |}; - - /** - * State utils - */ - - declare export type GetStateFromPath = ( - path: string, - options?: LinkingConfig, - ) => PossiblyStaleNavigationState; - - declare export type GetPathFromState = ( - state?: ?PossiblyStaleNavigationState, - options?: LinkingConfig, - ) => string; - - declare export type GetFocusedRouteNameFromRoute = - PossiblyStaleRoute => ?string; - - /** - * Linking - */ - - declare export type ScreenLinkingConfig = {| - +path?: string, - +exact?: boolean, - +parse?: {| +[param: string]: string => mixed |}, - +stringify?: {| +[param: string]: mixed => string |}, - +screens?: ScreenLinkingConfigMap, - +initialRouteName?: string, - |}; - - declare export type ScreenLinkingConfigMap = {| - +[routeName: string]: string | ScreenLinkingConfig, - |}; - - declare export type LinkingConfig = {| - +initialRouteName?: string, - +screens: ScreenLinkingConfigMap, - |}; - - declare export type LinkingOptions = {| - +enabled?: boolean, - +prefixes: $ReadOnlyArray, - +config?: LinkingConfig, - +getStateFromPath?: GetStateFromPath, - +getPathFromState?: GetPathFromState, - |}; - - /** - * NavigationContainer - */ - - declare export type Theme = {| - +dark: boolean, - +colors: {| - +primary: string, - +background: string, - +card: string, - +text: string, - +border: string, - |}, - |}; - - declare export type NavigationContainerType = React$AbstractComponent< - {| - ...BaseNavigationContainerProps, - +theme?: Theme, - +linking?: LinkingOptions, - +fallback?: React$Node, - +onReady?: () => mixed, - |}, - BaseNavigationContainerInterface, - >; - - //--------------------------------------------------------------------------- - // SECTION 2: EXPORTED MODULE - // This section defines the module exports and contains exported types that - // are not present in any other React Navigation libdef. - //--------------------------------------------------------------------------- + BottomTabBarProps, + BottomTabNavigationConfig, + BottomTabNavigationBuilderResult, + } from '@react-navigation/core'; /** * createBottomTabNavigator */ declare export var createBottomTabNavigator: CreateNavigator< TabNavigationState, BottomTabOptions, BottomTabNavigationEventMap, ExtraBottomTabNavigatorProps, >; /** * BottomTabBar */ declare export var BottomTabBar: React$ComponentType; /** * BottomTabView */ declare export type BottomTabViewProps = {| ...BottomTabNavigationConfig, ...BottomTabNavigationBuilderResult, |}; declare export var BottomTabView: React$ComponentType; } diff --git a/native/flow-typed/npm/@react-navigation/core_v6.x.x.js b/native/flow-typed/npm/@react-navigation/core_v6.x.x.js index d2bf15825..7072c959c 100644 --- a/native/flow-typed/npm/@react-navigation/core_v6.x.x.js +++ b/native/flow-typed/npm/@react-navigation/core_v6.x.x.js @@ -1,2350 +1,2345 @@ // flow-typed signature: 080655bdcaa9b716925932d980dfc4fb // flow-typed version: 9a968c602c/@react-navigation/core_v5.x.x/flow_>=v0.201.x declare module '@react-navigation/core' { //--------------------------------------------------------------------------- // SECTION 1: IDENTICAL TYPE DEFINITIONS - // This section is identical across all React Navigation libdefs and contains - // shared definitions. We wish we could make it DRY and import from a shared - // definition, but that isn't yet possible. //--------------------------------------------------------------------------- /** * We start with some definitions that we have copy-pasted from React Native * source files. */ // This is a bastardization of the true StyleObj type located in // react-native/Libraries/StyleSheet/StyleSheetTypes. We unfortunately can't // import that here, and it's too lengthy (and consequently too brittle) to // copy-paste here either. declare type StyleObj = | null | void | number | false | '' | $ReadOnlyArray | { [name: string]: any, ... }; - declare type ViewStyleProp = StyleObj; - declare type TextStyleProp = StyleObj; - declare type AnimatedViewStyleProp = StyleObj; + declare export type ViewStyleProp = StyleObj; + declare export type TextStyleProp = StyleObj; + declare export type AnimatedViewStyleProp = StyleObj; declare type AnimatedTextStyleProp = StyleObj; // Vaguely copied from // react-native/Libraries/Animated/src/animations/Animation.js declare type EndResult = { finished: boolean, ... }; declare type EndCallback = (result: EndResult) => void; declare interface Animation { start( fromValue: number, onUpdate: (value: number) => void, onEnd: ?EndCallback, previousAnimation: ?Animation, animatedValue: AnimatedValue, ): void; stop(): void; } declare type AnimationConfig = { isInteraction?: boolean, useNativeDriver: boolean, onComplete?: ?EndCallback, iterations?: number, ... }; // Vaguely copied from // react-native/Libraries/Animated/src/nodes/AnimatedTracking.js declare interface AnimatedTracking { constructor( value: AnimatedValue, parent: any, animationClass: any, animationConfig: Object, callback?: ?EndCallback, ): void; update(): void; } // Vaguely copied from // react-native/Libraries/Animated/src/nodes/AnimatedValue.js declare type ValueListenerCallback = (state: { value: number, ... }) => void; declare interface AnimatedValue { constructor(value: number): void; setValue(value: number): void; setOffset(offset: number): void; flattenOffset(): void; extractOffset(): void; addListener(callback: ValueListenerCallback): string; removeListener(id: string): void; removeAllListeners(): void; stopAnimation(callback?: ?(value: number) => void): void; resetAnimation(callback?: ?(value: number) => void): void; interpolate(config: InterpolationConfigType): AnimatedInterpolation; animate(animation: Animation, callback: ?EndCallback): void; stopTracking(): void; track(tracking: AnimatedTracking): void; } // Copied from // react-native/Libraries/Animated/src/animations/TimingAnimation.js declare type TimingAnimationConfigSingle = AnimationConfig & { toValue: number | AnimatedValue, easing?: (value: number) => number, duration?: number, delay?: number, ... }; // Copied from // react-native/Libraries/Animated/src/animations/SpringAnimation.js declare type SpringAnimationConfigSingle = AnimationConfig & { toValue: number | AnimatedValue, overshootClamping?: boolean, restDisplacementThreshold?: number, restSpeedThreshold?: number, velocity?: number, bounciness?: number, speed?: number, tension?: number, friction?: number, stiffness?: number, damping?: number, mass?: number, delay?: number, ... }; // Copied from react-native/Libraries/Types/CoreEventTypes.js declare type SyntheticEvent = $ReadOnly<{| bubbles: ?boolean, cancelable: ?boolean, currentTarget: number, defaultPrevented: ?boolean, dispatchConfig: $ReadOnly<{| registrationName: string, |}>, eventPhase: ?number, preventDefault: () => void, isDefaultPrevented: () => boolean, stopPropagation: () => void, isPropagationStopped: () => boolean, isTrusted: ?boolean, nativeEvent: T, persist: () => void, target: ?number, timeStamp: number, type: ?string, |}>; declare type Layout = $ReadOnly<{| x: number, y: number, width: number, height: number, |}>; declare type LayoutEvent = SyntheticEvent< $ReadOnly<{| layout: Layout, |}>, >; declare type BlurEvent = SyntheticEvent< $ReadOnly<{| target: number, |}>, >; declare type FocusEvent = SyntheticEvent< $ReadOnly<{| target: number, |}>, >; declare type ResponderSyntheticEvent = $ReadOnly<{| ...SyntheticEvent, touchHistory: $ReadOnly<{| indexOfSingleActiveTouch: number, mostRecentTimeStamp: number, numberActiveTouches: number, touchBank: $ReadOnlyArray< $ReadOnly<{| touchActive: boolean, startPageX: number, startPageY: number, startTimeStamp: number, currentPageX: number, currentPageY: number, currentTimeStamp: number, previousPageX: number, previousPageY: number, previousTimeStamp: number, |}>, >, |}>, |}>; - declare type PressEvent = ResponderSyntheticEvent< + declare export type PressEvent = ResponderSyntheticEvent< $ReadOnly<{| changedTouches: $ReadOnlyArray<$PropertyType>, force: number, identifier: number, locationX: number, locationY: number, pageX: number, pageY: number, target: ?number, timestamp: number, touches: $ReadOnlyArray<$PropertyType>, |}>, >; // Vaguely copied from // react-native/Libraries/Animated/src/nodes/AnimatedInterpolation.js declare type ExtrapolateType = 'extend' | 'identity' | 'clamp'; declare type InterpolationConfigType = { inputRange: Array, outputRange: Array | Array, easing?: (input: number) => number, extrapolate?: ExtrapolateType, extrapolateLeft?: ExtrapolateType, extrapolateRight?: ExtrapolateType, ... }; declare interface AnimatedInterpolation { interpolate(config: InterpolationConfigType): AnimatedInterpolation; } // Copied from react-native/Libraries/Components/View/ViewAccessibility.js declare type AccessibilityRole = | 'none' | 'button' | 'link' | 'search' | 'image' | 'keyboardkey' | 'text' | 'adjustable' | 'imagebutton' | 'header' | 'summary' | 'alert' | 'checkbox' | 'combobox' | 'menu' | 'menubar' | 'menuitem' | 'progressbar' | 'radio' | 'radiogroup' | 'scrollbar' | 'spinbutton' | 'switch' | 'tab' | 'tablist' | 'timer' | 'toolbar'; declare type AccessibilityActionInfo = $ReadOnly<{ name: string, label?: string, ... }>; declare type AccessibilityActionEvent = SyntheticEvent< $ReadOnly<{actionName: string, ...}>, >; declare type AccessibilityState = { disabled?: boolean, selected?: boolean, checked?: ?boolean | 'mixed', busy?: boolean, expanded?: boolean, ... }; declare type AccessibilityValue = $ReadOnly<{| min?: number, max?: number, now?: number, text?: string, |}>; // Copied from // react-native/Libraries/Components/Touchable/TouchableWithoutFeedback.js declare type Stringish = string; declare type EdgeInsetsProp = $ReadOnly<$Partial>; declare type TouchableWithoutFeedbackProps = $ReadOnly<{| accessibilityActions?: ?$ReadOnlyArray, accessibilityElementsHidden?: ?boolean, accessibilityHint?: ?Stringish, accessibilityIgnoresInvertColors?: ?boolean, accessibilityLabel?: ?Stringish, accessibilityLiveRegion?: ?('none' | 'polite' | 'assertive'), accessibilityRole?: ?AccessibilityRole, accessibilityState?: ?AccessibilityState, accessibilityValue?: ?AccessibilityValue, accessibilityViewIsModal?: ?boolean, accessible?: ?boolean, children?: ?React$Node, delayLongPress?: ?number, delayPressIn?: ?number, delayPressOut?: ?number, disabled?: ?boolean, focusable?: ?boolean, hitSlop?: ?EdgeInsetsProp, importantForAccessibility?: ?('auto' | 'yes' | 'no' | 'no-hide-descendants'), nativeID?: ?string, onAccessibilityAction?: ?(event: AccessibilityActionEvent) => mixed, onBlur?: ?(event: BlurEvent) => mixed, onFocus?: ?(event: FocusEvent) => mixed, onLayout?: ?(event: LayoutEvent) => mixed, onLongPress?: ?(event: PressEvent) => mixed, onPress?: ?(event: PressEvent) => mixed, onPressIn?: ?(event: PressEvent) => mixed, onPressOut?: ?(event: PressEvent) => mixed, pressRetentionOffset?: ?EdgeInsetsProp, rejectResponderTermination?: ?boolean, testID?: ?string, touchSoundDisabled?: ?boolean, |}>; // Copied from react-native/Libraries/Image/ImageSource.js - declare type ImageURISource = $ReadOnly<{ + declare export type ImageURISource = $ReadOnly<{ uri?: ?string, bundle?: ?string, method?: ?string, headers?: ?Object, body?: ?string, cache?: ?('default' | 'reload' | 'force-cache' | 'only-if-cached'), width?: ?number, height?: ?number, scale?: ?number, ... }>; /** * The following is copied from react-native-gesture-handler's libdef */ declare type StateUndetermined = 0; declare type StateFailed = 1; declare type StateBegan = 2; declare type StateCancelled = 3; declare type StateActive = 4; declare type StateEnd = 5; declare type GestureHandlerState = | StateUndetermined | StateFailed | StateBegan | StateCancelled | StateActive | StateEnd; declare type $SyntheticEvent = { +nativeEvent: $ReadOnly<$Exact>, ... }; declare type $Event = $SyntheticEvent<{ handlerTag: number, numberOfPointers: number, state: GestureHandlerState, oldState: GestureHandlerState, ...$Exact, ... }>; declare type $EventHandlers = {| onGestureEvent?: ($Event) => mixed, onHandlerStateChange?: ($Event) => mixed, onBegan?: ($Event) => mixed, onFailed?: ($Event) => mixed, onCancelled?: ($Event) => mixed, onActivated?: ($Event) => mixed, onEnded?: ($Event) => mixed, |}; declare type HitSlop = | number | {| left?: number, top?: number, right?: number, bottom?: number, vertical?: number, horizontal?: number, width?: number, height?: number, |} | {| width: number, left: number, |} | {| width: number, right: number, |} | {| height: number, top: number, |} | {| height: number, bottom: number, |}; declare type $GestureHandlerProps< AdditionalProps: {...}, ExtraEventsProps: {...} > = $ReadOnly<{| ...$Exact, ...$EventHandlers, id?: string, enabled?: boolean, waitFor?: React$Ref | Array>, simultaneousHandlers?: React$Ref | Array>, shouldCancelWhenOutside?: boolean, minPointers?: number, hitSlop?: HitSlop, children?: React$Node, |}>; - declare type PanGestureHandlerProps = $GestureHandlerProps< + declare export type PanGestureHandlerProps = $GestureHandlerProps< { activeOffsetY?: number | [number, number], activeOffsetX?: number | [number, number], failOffsetY?: number | [number, number], failOffsetX?: number | [number, number], minDist?: number, minVelocity?: number, minVelocityX?: number, minVelocityY?: number, minPointers?: number, maxPointers?: number, avgTouches?: boolean, ... }, { x: number, y: number, absoluteX: number, absoluteY: number, translationX: number, translationY: number, velocityX: number, velocityY: number, ... } >; /** * MAGIC */ declare type $If = $Call< ((true, Then, Else) => Then) & ((false, Then, Else) => Else), Test, Then, Else, >; declare type $IsA = $Call< (Y => true) & (mixed => false), X, >; declare type $IsUndefined = $IsA; declare type $Partial = $ReadOnly<$Rest>; // If { ...T, ... } counts as a T, then we're inexact declare type $IsExact = $Call< (T => false) & (mixed => true), { ...T, ... }, >; /** * Actions, state, etc. */ declare export type ScreenParams = { +[key: string]: mixed, ... }; declare export type BackAction = {| +type: 'GO_BACK', +source?: string, +target?: string, |}; declare export type NavigateAction = {| +type: 'NAVIGATE', +payload: | {| +key: string, +params?: ScreenParams |} | {| +name: string, +key?: string, +params?: ScreenParams |}, +source?: string, +target?: string, |}; declare export type ResetAction = {| +type: 'RESET', +payload: StaleNavigationState, +source?: string, +target?: string, |}; declare export type SetParamsAction = {| +type: 'SET_PARAMS', +payload: {| +params?: ScreenParams |}, +source?: string, +target?: string, |}; declare export type CommonAction = | BackAction | NavigateAction | ResetAction | SetParamsAction; declare type NavigateActionCreator = {| (routeName: string, params?: ScreenParams): NavigateAction, ( | {| +key: string, +params?: ScreenParams |} | {| +name: string, +key?: string, +params?: ScreenParams |}, ): NavigateAction, |}; declare export type CommonActionsType = {| +navigate: NavigateActionCreator, +goBack: () => BackAction, +reset: (state: PossiblyStaleNavigationState) => ResetAction, +setParams: (params: ScreenParams) => SetParamsAction, |}; declare export type GenericNavigationAction = {| +type: string, +payload?: { +[key: string]: mixed, ... }, +source?: string, +target?: string, |}; declare export type LeafRoute = {| +key: string, +name: RouteName, +params?: ScreenParams, |}; declare export type StateRoute = {| ...LeafRoute, +state: NavigationState | StaleNavigationState, |}; declare export type Route = | LeafRoute | StateRoute; declare export type NavigationState = {| +key: string, +index: number, +routeNames: $ReadOnlyArray, +history?: $ReadOnlyArray, +routes: $ReadOnlyArray>, +type: string, +stale: false, |}; declare export type StaleLeafRoute = {| +key?: string, +name: RouteName, +params?: ScreenParams, |}; declare export type StaleStateRoute = {| ...StaleLeafRoute, +state: StaleNavigationState, |}; declare export type StaleRoute = | StaleLeafRoute | StaleStateRoute; declare export type StaleNavigationState = {| // It's possible to pass React Nav a StaleNavigationState with an undefined // index, but React Nav will always return one with the index set. This is // the same as for the type property below, but in the case of index we tend // to rely on it being set more... +index: number, +history?: $ReadOnlyArray, +routes: $ReadOnlyArray>, +type?: string, +stale?: true, |}; declare export type PossiblyStaleNavigationState = | NavigationState | StaleNavigationState; declare export type PossiblyStaleRoute = | Route | StaleRoute; /** * Routers */ declare type ActionCreators< State: NavigationState, Action: GenericNavigationAction, > = { +[key: string]: (...args: any) => (Action | State => Action), ... }; declare export type DefaultRouterOptions = { +initialRouteName?: string, ... }; declare export type RouterFactory< State: NavigationState, Action: GenericNavigationAction, RouterOptions: DefaultRouterOptions, > = (options: RouterOptions) => Router; declare export type ParamListBase = { +[key: string]: ?ScreenParams, ... }; declare export type RouterConfigOptions = {| +routeNames: $ReadOnlyArray, +routeParamList: ParamListBase, |}; declare export type Router< State: NavigationState, Action: GenericNavigationAction, > = {| +type: $PropertyType, +getInitialState: (options: RouterConfigOptions) => State, +getRehydratedState: ( partialState: PossiblyStaleNavigationState, options: RouterConfigOptions, ) => State, +getStateForRouteNamesChange: ( state: State, options: RouterConfigOptions, ) => State, +getStateForRouteFocus: (state: State, key: string) => State, +getStateForAction: ( state: State, action: Action, options: RouterConfigOptions, ) => ?PossiblyStaleNavigationState; +shouldActionChangeFocus: (action: GenericNavigationAction) => boolean, +actionCreators?: ActionCreators, |}; /** * Stack actions and router */ declare export type StackNavigationState = {| ...NavigationState, +type: 'stack', |}; declare export type ReplaceAction = {| +type: 'REPLACE', +payload: {| +name: string, +key?: ?string, +params?: ScreenParams |}, +source?: string, +target?: string, |}; declare export type PushAction = {| +type: 'PUSH', +payload: {| +name: string, +key?: ?string, +params?: ScreenParams |}, +source?: string, +target?: string, |}; declare export type PopAction = {| +type: 'POP', +payload: {| +count: number |}, +source?: string, +target?: string, |}; declare export type PopToTopAction = {| +type: 'POP_TO_TOP', +source?: string, +target?: string, |}; declare export type StackAction = | CommonAction | ReplaceAction | PushAction | PopAction | PopToTopAction; declare export type StackActionsType = {| +replace: (routeName: string, params?: ScreenParams) => ReplaceAction, +push: (routeName: string, params?: ScreenParams) => PushAction, +pop: (count?: number) => PopAction, +popToTop: () => PopToTopAction, |}; declare export type StackRouterOptions = $Exact; /** * Tab actions and router */ declare export type TabNavigationState = {| ...NavigationState, +type: 'tab', +history: $ReadOnlyArray<{| type: 'route', key: string |}>, |}; declare export type JumpToAction = {| +type: 'JUMP_TO', +payload: {| +name: string, +params?: ScreenParams |}, +source?: string, +target?: string, |}; declare export type TabAction = | CommonAction | JumpToAction; declare export type TabActionsType = {| +jumpTo: string => JumpToAction, |}; declare export type TabRouterOptions = {| ...$Exact, +backBehavior?: 'initialRoute' | 'order' | 'history' | 'none', |}; /** * Drawer actions and router */ declare type DrawerHistoryEntry = | {| +type: 'route', +key: string |} | {| +type: 'drawer' |}; declare export type DrawerNavigationState = {| ...NavigationState, +type: 'drawer', +history: $ReadOnlyArray, |}; declare export type OpenDrawerAction = {| +type: 'OPEN_DRAWER', +source?: string, +target?: string, |}; declare export type CloseDrawerAction = {| +type: 'CLOSE_DRAWER', +source?: string, +target?: string, |}; declare export type ToggleDrawerAction = {| +type: 'TOGGLE_DRAWER', +source?: string, +target?: string, |}; declare export type DrawerAction = | TabAction | OpenDrawerAction | CloseDrawerAction | ToggleDrawerAction; declare export type DrawerActionsType = {| ...TabActionsType, +openDrawer: () => OpenDrawerAction, +closeDrawer: () => CloseDrawerAction, +toggleDrawer: () => ToggleDrawerAction, |}; declare export type DrawerRouterOptions = {| ...TabRouterOptions, +defaultStatus?: 'open' | 'closed', |}; /** * Events */ declare export type EventMapBase = { +[name: string]: {| +data?: mixed, +canPreventDefault?: boolean, |}, ... }; declare type EventPreventDefaultProperties = $If< Test, {| +defaultPrevented: boolean, +preventDefault: () => void |}, {| |}, >; declare type EventDataProperties = $If< $IsUndefined, {| |}, {| +data: Data |}, >; declare type EventArg< EventName: string, CanPreventDefault: ?boolean = false, Data = void, > = {| ...EventPreventDefaultProperties, ...EventDataProperties, +type: EventName, +target?: string, |}; declare type GlobalEventMap = {| +state: {| +data: {| +state: State |}, +canPreventDefault: false |}, |}; declare type EventMapCore = {| ...GlobalEventMap, +focus: {| +data: void, +canPreventDefault: false |}, +blur: {| +data: void, +canPreventDefault: false |}, +beforeRemove: {| +data: {| +action: GenericNavigationAction |}, +canPreventDefault: true, |}, |}; declare type EventListenerCallback< EventName: string, State: PossiblyStaleNavigationState = NavigationState, EventMap: EventMapBase = EventMapCore, > = (e: EventArg< EventName, $PropertyType< $ElementType< {| ...EventMap, ...EventMapCore |}, EventName, >, 'canPreventDefault', >, $PropertyType< $ElementType< {| ...EventMap, ...EventMapCore |}, EventName, >, 'data', >, >) => mixed; /** * Navigation prop */ declare type PartialWithMergeProperty = $If< $IsExact, { ...$Partial, +merge: true }, { ...$Partial, +merge: true, ... }, >; declare type EitherExactOrPartialWithMergeProperty = | ParamsType | PartialWithMergeProperty; declare export type SimpleNavigate = >( routeName: DestinationRouteName, params: EitherExactOrPartialWithMergeProperty< $ElementType, >, ) => void; declare export type Navigate = & SimpleNavigate & >( route: $If< $IsUndefined<$ElementType>, | {| +key: string |} | {| +name: DestinationRouteName, +key?: string |}, | {| +key: string, +params?: EitherExactOrPartialWithMergeProperty< $ElementType, >, |} | {| +name: DestinationRouteName, +key?: string, +params?: EitherExactOrPartialWithMergeProperty< $ElementType, >, |}, >, ) => void; declare type CoreNavigationHelpers< ParamList: ParamListBase, State: PossiblyStaleNavigationState = PossiblyStaleNavigationState, EventMap: EventMapBase = EventMapCore, > = { +navigate: Navigate, +dispatch: ( action: | GenericNavigationAction | (State => GenericNavigationAction), ) => void, +reset: PossiblyStaleNavigationState => void, +goBack: () => void, +isFocused: () => boolean, +canGoBack: () => boolean, +getId: () => string | void, +getParent: >(id?: string) => ?Parent, +getState: () => NavigationState, +addListener: |}, >>( name: EventName, callback: EventListenerCallback, ) => () => void, +removeListener: |}, >>( name: EventName, callback: EventListenerCallback, ) => void, ... }; declare export type NavigationHelpers< ParamList: ParamListBase, State: PossiblyStaleNavigationState = PossiblyStaleNavigationState, EventMap: EventMapBase = EventMapCore, > = { ...$Exact>, +setParams: (params: ScreenParams) => void, ... }; declare type SetParamsInput< ParamList: ParamListBase, RouteName: $Keys = $Keys, > = $If< $IsUndefined<$ElementType>, empty, $Partial<$NonMaybeType<$ElementType>>, >; declare export type NavigationProp< ParamList: ParamListBase, RouteName: $Keys = $Keys, State: PossiblyStaleNavigationState = PossiblyStaleNavigationState, ScreenOptions: {...} = {...}, EventMap: EventMapBase = EventMapCore, > = { ...$Exact>, +setOptions: (options: $Partial) => void, +setParams: (params: SetParamsInput) => void, ... }; /** * CreateNavigator */ declare export type RouteProp< ParamList: ParamListBase = ParamListBase, RouteName: $Keys = $Keys, > = {| ...LeafRoute, +params: $ElementType, +path?: string, |}; declare type ScreenOptionsProp< ScreenOptions: {...}, RouteParam, NavHelpers, > = | ScreenOptions | ({| +route: RouteParam, +navigation: NavHelpers |}) => ScreenOptions; declare export type ScreenListeners< State: NavigationState = NavigationState, EventMap: EventMapBase = EventMapCore, > = $ObjMapi< {| [name: $Keys]: empty |}, >(K, empty) => EventListenerCallback, >; declare type ScreenListenersProp< ScreenListenersParam: {...}, RouteParam, NavHelpers, > = | ScreenListenersParam | ({| +route: RouteParam, +navigation: NavHelpers |}) => ScreenListenersParam; declare type BaseScreenProps< ParamList: ParamListBase, NavProp, RouteName: $Keys = $Keys, State: NavigationState = NavigationState, ScreenOptions: {...} = {...}, EventMap: EventMapBase = EventMapCore, > = {| +name: RouteName, +options?: ScreenOptionsProp< ScreenOptions, RouteProp, NavProp, >, +listeners?: ScreenListenersProp< ScreenListeners, RouteProp, NavProp, >, +initialParams?: $Partial<$ElementType>, +getId?: ({ +params: $ElementType, }) => string | void, +navigationKey?: string, |}; declare export type ScreenProps< ParamList: ParamListBase, NavProp, RouteName: $Keys = $Keys, State: NavigationState = NavigationState, ScreenOptions: {...} = {...}, EventMap: EventMapBase = EventMapCore, > = | {| ...BaseScreenProps< ParamList, NavProp, RouteName, State, ScreenOptions, EventMap, >, +component: React$ComponentType<{| +route: RouteProp, +navigation: NavProp, |}>, |} | {| ...BaseScreenProps< ParamList, NavProp, RouteName, State, ScreenOptions, EventMap, >, +getComponent: () => React$ComponentType<{| +route: RouteProp, +navigation: NavProp, |}>, |} | {| ...BaseScreenProps< ParamList, NavProp, RouteName, State, ScreenOptions, EventMap, >, +children: ({| +route: RouteProp, +navigation: NavProp, |}) => React$Node, |}; declare export type ScreenComponent< GlobalParamList: ParamListBase, ParamList: ParamListBase, State: NavigationState = NavigationState, ScreenOptions: {...} = {...}, EventMap: EventMapBase = EventMapCore, > = < RouteName: $Keys, NavProp: NavigationProp< GlobalParamList, RouteName, State, ScreenOptions, EventMap, >, >(props: ScreenProps< ParamList, NavProp, RouteName, State, ScreenOptions, EventMap, >) => React$Node; declare type ScreenOptionsProps< ScreenOptions: {...}, RouteParam, NavHelpers, > = {| +screenOptions?: ScreenOptionsProp, |}; declare type ScreenListenersProps< ScreenListenersParam: {...}, RouteParam, NavHelpers, > = {| +screenListeners?: ScreenListenersProp< ScreenListenersParam, RouteParam, NavHelpers, >, |}; declare export type ExtraNavigatorPropsBase = { ...$Exact, +id?: string, +children?: React$Node, ... }; declare export type NavigatorProps< ScreenOptions: {...}, ScreenListenersParam, RouteParam, NavHelpers, ExtraNavigatorProps: ExtraNavigatorPropsBase, > = { ...$Exact, ...ScreenOptionsProps, ...ScreenListenersProps, +defaultScreenOptions?: | ScreenOptions | ({| +route: RouteParam, +navigation: NavHelpers, +options: ScreenOptions, |}) => ScreenOptions, ... }; declare export type NavigatorPropsBase< ScreenOptions: {...}, ScreenListenersParam: {...}, NavHelpers, > = NavigatorProps< ScreenOptions, ScreenListenersParam, RouteProp<>, NavHelpers, ExtraNavigatorPropsBase, >; declare export type CreateNavigator< State: NavigationState, ScreenOptions: {...}, EventMap: EventMapBase, ExtraNavigatorProps: ExtraNavigatorPropsBase, > = < GlobalParamList: ParamListBase, ParamList: ParamListBase, NavHelpers: NavigationHelpers< GlobalParamList, State, EventMap, >, >() => {| +Screen: ScreenComponent< GlobalParamList, ParamList, State, ScreenOptions, EventMap, >, +Navigator: React$ComponentType<$Exact, RouteProp, NavHelpers, ExtraNavigatorProps, >>>, +Group: React$ComponentType<{| ...ScreenOptionsProps, NavHelpers>, +children: React$Node, +navigationKey?: string, |}>, |}; declare export type CreateNavigatorFactory = < State: NavigationState, ScreenOptions: {...}, EventMap: EventMapBase, NavHelpers: NavigationHelpers< ParamListBase, State, EventMap, >, ExtraNavigatorProps: ExtraNavigatorPropsBase, >( navigator: React$ComponentType<$Exact, RouteProp<>, NavHelpers, ExtraNavigatorProps, >>>, ) => CreateNavigator; /** * useNavigationBuilder */ declare export type Descriptor< NavHelpers, ScreenOptions: {...} = {...}, > = {| +render: () => React$Node, +options: $ReadOnly, +navigation: NavHelpers, |}; declare export type UseNavigationBuilder = < State: NavigationState, Action: GenericNavigationAction, ScreenOptions: {...}, RouterOptions: DefaultRouterOptions, NavHelpers, EventMap: EventMapBase, ExtraNavigatorProps: ExtraNavigatorPropsBase, >( routerFactory: RouterFactory, options: $Exact, RouteProp<>, NavHelpers, ExtraNavigatorProps, >>, ) => {| +id?: string, +state: State, +descriptors: {| +[key: string]: Descriptor |}, +navigation: NavHelpers, |}; /** * EdgeInsets */ declare type EdgeInsets = {| +top: number, +right: number, +bottom: number, +left: number, |}; /** * TransitionPreset */ declare export type TransitionSpec = | {| animation: 'spring', config: $Diff< SpringAnimationConfigSingle, { toValue: number | AnimatedValue, ... }, >, |} | {| animation: 'timing', config: $Diff< TimingAnimationConfigSingle, { toValue: number | AnimatedValue, ... }, >, |}; declare export type StackCardInterpolationProps = {| +current: {| +progress: AnimatedInterpolation, |}, +next?: {| +progress: AnimatedInterpolation, |}, +index: number, +closing: AnimatedInterpolation, +swiping: AnimatedInterpolation, +inverted: AnimatedInterpolation, +layouts: {| +screen: {| +width: number, +height: number |}, |}, +insets: EdgeInsets, |}; declare export type StackCardInterpolatedStyle = {| containerStyle?: AnimatedViewStyleProp, cardStyle?: AnimatedViewStyleProp, overlayStyle?: AnimatedViewStyleProp, shadowStyle?: AnimatedViewStyleProp, |}; declare export type StackCardStyleInterpolator = ( props: StackCardInterpolationProps, ) => StackCardInterpolatedStyle; declare export type StackHeaderInterpolationProps = {| +current: {| +progress: AnimatedInterpolation, |}, +next?: {| +progress: AnimatedInterpolation, |}, +layouts: {| +header: {| +width: number, +height: number |}, +screen: {| +width: number, +height: number |}, +title?: {| +width: number, +height: number |}, +leftLabel?: {| +width: number, +height: number |}, |}, |}; declare export type StackHeaderInterpolatedStyle = {| leftLabelStyle?: AnimatedViewStyleProp, leftButtonStyle?: AnimatedViewStyleProp, rightButtonStyle?: AnimatedViewStyleProp, titleStyle?: AnimatedViewStyleProp, backgroundStyle?: AnimatedViewStyleProp, |}; declare export type StackHeaderStyleInterpolator = ( props: StackHeaderInterpolationProps, ) => StackHeaderInterpolatedStyle; declare type GestureDirection = | 'horizontal' | 'horizontal-inverted' | 'vertical' | 'vertical-inverted'; declare export type TransitionPreset = {| +gestureDirection: GestureDirection, +transitionSpec: {| +open: TransitionSpec, +close: TransitionSpec, |}, +cardStyleInterpolator: StackCardStyleInterpolator, +headerStyleInterpolator: StackHeaderStyleInterpolator, |}; /** * Header common options */ declare export type SceneProgress = {| +current: AnimatedInterpolation, +next?: AnimatedInterpolation, +previous?: AnimatedInterpolation, |}; declare export type HeaderProps = {| +navigation: NavProp, +route: RouteProp<>, +options: ScreenOptions, +layout: {| +width: number, +height: number |}, |}; declare export type HeaderButtonProps = $Partial<{| +tintColor: string, +pressColor: string, +pressOpacity: number, |}>; declare export type HeaderLeftButtonProps = $Partial<{| ...HeaderButtonProps, +labelVisible: boolean, |}>; - declare type HeaderTitleInputBase = { + declare export type HeaderTitleInputBase = { +onLayout: LayoutEvent => void, +children: string, +allowFontScaling: ?boolean, +tintColor: ?string, +style: ?AnimatedTextStyleProp, ... }; declare export type HeaderTitleInputProps = $Exact; declare export type HeaderCommonOptions< NavHeaderProps, NavHeaderLeftProps, NavHeaderRightProps, > = $Partial<{| +header: NavHeaderProps => React$Node, +headerShown: boolean, +headerTitle: string | ( HeaderTitleInputProps => React$Node), +headerTitleAlign: 'left' | 'center', +headerTitleStyle: AnimatedTextStyleProp, +headerTitleContainerStyle: AnimatedViewStyleProp, +headerTintColor: string, +headerTitleAllowFontScaling: boolean, +headerLeft: NavHeaderLeftProps => React$Node, +headerLeftContainerStyle: AnimatedViewStyleProp, +headerRight: NavHeaderRightProps => React$Node, +headerRightContainerStyle: AnimatedViewStyleProp, +headerBackground: ({| style: AnimatedViewStyleProp |}) => React$Node, +headerStyle: AnimatedViewStyleProp, +headerTransparent: boolean, +headerStatusBarHeight: number, +headerShadowVisible: boolean, +headerBackgroundContainerStyle: AnimatedViewStyleProp, +headerPressColor: string, +headerPressOpacity: number, |}>; /** * Stack options */ declare export type StackDescriptor = Descriptor< StackNavigationHelpers<>, StackOptions, >; declare type Scene = {| +route: T, +descriptor: StackDescriptor, +progress: SceneProgress, |}; declare export type StackHeaderProps = {| ...HeaderProps, StackOptions>, +progress: SceneProgress, +back?: {| +title: string |}, +styleInterpolator: StackHeaderStyleInterpolator, |}; declare export type StackHeaderButtonProps = $Partial<{| ...HeaderButtonProps, +canGoBack: boolean, |}>; declare export type StackHeaderLeftButtonProps = $Partial<{| ...StackHeaderButtonProps, +onPress: (() => void), +backImage: (props: {| tintColor: string |}) => React$Node, +label: string, +truncatedLabel: string, +labelVisible: boolean, +labelStyle: AnimatedTextStyleProp, +allowFontScaling: boolean, +onLabelLayout: LayoutEvent => void, +screenLayout: {| +width: number, +height: number |}, +titleLayout: {| +width: number, +height: number |}, +disabled: boolean, +accessibilityLabel: string, +style: ViewStyleProp, |}>; declare export type StackOptions = $Partial<{| +title: string, +cardShadowEnabled: boolean, +cardOverlayEnabled: boolean, +cardOverlay: {| style: ViewStyleProp |} => React$Node, +cardStyle: ViewStyleProp, +animationEnabled: boolean, +animationTypeForReplace: 'push' | 'pop', +gestureEnabled: boolean, +gestureResponseDistance: number, +gestureVelocityImpact: number, +safeAreaInsets: $Partial, +keyboardHandlingEnabled: boolean, +presentation: 'card' | 'modal' | 'transparentModal', // Transition ...TransitionPreset, // Header ...HeaderCommonOptions< StackHeaderProps, StackHeaderLeftButtonProps, StackHeaderButtonProps, >, +headerMode: 'float' | 'screen', +headerBackAllowFontScaling: boolean, +headerBackTitle: string | null, +headerBackTitleStyle: TextStyleProp, +headerBackTitleVisible: boolean, +headerTruncatedBackTitle: string, +headerBackImage: $PropertyType, +headerBackAccessibilityLabel: string, |}>; /** * Stack navigation prop */ declare export type StackNavigationEventMap = {| ...EventMapCore, +transitionStart: {| +data: {| +closing: boolean |}, +canPreventDefault: false, |}, +transitionEnd: {| +data: {| +closing: boolean |}, +canPreventDefault: false, |}, +gestureStart: {| +data: void, +canPreventDefault: false |}, +gestureEnd: {| +data: void, +canPreventDefault: false |}, +gestureCancel: {| +data: void, +canPreventDefault: false |}, |}; declare type StackExtraNavigationHelpers< ParamList: ParamListBase = ParamListBase, > = {| +replace: SimpleNavigate, +push: SimpleNavigate, +pop: (count?: number) => void, +popToTop: () => void, |}; declare export type StackNavigationHelpers< ParamList: ParamListBase = ParamListBase, EventMap: EventMapBase = StackNavigationEventMap, > = { ...$Exact>, ...StackExtraNavigationHelpers, ... }; declare export type StackNavigationProp< ParamList: ParamListBase = ParamListBase, RouteName: $Keys = $Keys, Options: {...} = StackOptions, EventMap: EventMapBase = StackNavigationEventMap, > = {| ...$Exact>, ...StackExtraNavigationHelpers, |}; /** * Miscellaneous stack exports */ - declare type StackNavigationConfig = {| + declare export type StackNavigationConfig = {| +detachInactiveScreens?: boolean, |}; declare export type ExtraStackNavigatorProps = {| ...$Exact, ...StackRouterOptions, ...StackNavigationConfig, |}; declare export type StackNavigatorProps< NavHelpers: StackNavigationHelpers<> = StackNavigationHelpers<>, > = $Exact, RouteProp<>, NavHelpers, ExtraStackNavigatorProps, >>; /** * Bottom tab options */ declare export type BottomTabBarButtonProps = {| ...$Diff< TouchableWithoutFeedbackProps, {| onPress?: ?(event: PressEvent) => mixed |}, >, +to?: string, +children: React$Node, +onPress?: (MouseEvent | PressEvent) => void, |}; declare export type TabBarVisibilityAnimationConfig = | {| +animation: 'spring', +config?: $Diff< SpringAnimationConfigSingle, { toValue: number | AnimatedValue, useNativeDriver: boolean, ... }, >, |} | {| +animation: 'timing', +config?: $Diff< TimingAnimationConfigSingle, { toValue: number | AnimatedValue, useNativeDriver: boolean, ... }, >, |}; declare export type BottomTabOptions = $Partial<{| +title: string, +tabBarLabel: | string | ({| focused: boolean, color: string |}) => React$Node, +tabBarIcon: ({| focused: boolean, color: string, size: number, |}) => React$Node, +tabBarBadge: number | string, +tabBarBadgeStyle: TextStyleProp, +tabBarAccessibilityLabel: string, +tabBarTestID: string, +tabBarVisibilityAnimationConfig: $Partial<{| +show: TabBarVisibilityAnimationConfig, +hide: TabBarVisibilityAnimationConfig, |}>, +tabBarButton: BottomTabBarButtonProps => React$Node, +tabBarHideOnKeyboard: boolean, +tabBarActiveTintColor: string, +tabBarInactiveTintColor: string, +tabBarActiveBackgroundColor: string, +tabBarInactiveBackgroundColor: string, +tabBarAllowFontScaling: boolean, +tabBarShowLabel: boolean, +tabBarLabelStyle: TextStyleProp, +tabBarIconStyle: TextStyleProp, +tabBarItemStyle: ViewStyleProp, +tabBarLabelPosition: 'beside-icon' | 'below-icon', +tabBarStyle: ViewStyleProp, +unmountOnBlur: boolean, +lazy: boolean, ...HeaderCommonOptions< HeaderProps, BottomTabOptions>, HeaderLeftButtonProps, HeaderButtonProps, >, |}>; /** * Bottom tab navigation prop */ declare export type BottomTabNavigationEventMap = {| ...EventMapCore, +tabPress: {| +data: void, +canPreventDefault: true |}, +tabLongPress: {| +data: void, +canPreventDefault: false |}, |}; declare type TabExtraNavigationHelpers< ParamList: ParamListBase = ParamListBase, > = {| +jumpTo: SimpleNavigate, |}; declare export type BottomTabNavigationHelpers< ParamList: ParamListBase = ParamListBase, EventMap: EventMapBase = BottomTabNavigationEventMap, > = { ...$Exact>, ...TabExtraNavigationHelpers, ... }; declare export type BottomTabNavigationProp< ParamList: ParamListBase = ParamListBase, RouteName: $Keys = $Keys, Options: {...} = BottomTabOptions, EventMap: EventMapBase = BottomTabNavigationEventMap, > = {| ...$Exact>, ...TabExtraNavigationHelpers, |}; /** * Miscellaneous bottom tab exports */ declare export type BottomTabDescriptor = Descriptor< BottomTabNavigationHelpers<>, BottomTabOptions, >; - declare type BottomTabNavigationBuilderResult = {| + declare export type BottomTabNavigationBuilderResult = {| +state: TabNavigationState, +navigation: BottomTabNavigationHelpers<>, +descriptors: {| +[key: string]: BottomTabDescriptor |}, |}; declare export type BottomTabBarProps = BottomTabNavigationBuilderResult; - declare type BottomTabNavigationConfig = {| + declare export type BottomTabNavigationConfig = {| +tabBar?: BottomTabBarProps => React$Node, +safeAreaInsets?: $Partial, +detachInactiveScreens?: boolean, |}; declare export type ExtraBottomTabNavigatorProps = {| ...$Exact, ...TabRouterOptions, ...BottomTabNavigationConfig, |}; declare export type BottomTabNavigatorProps< NavHelpers: BottomTabNavigationHelpers<> = BottomTabNavigationHelpers<>, > = $Exact, RouteProp<>, NavHelpers, ExtraBottomTabNavigatorProps, >>; /** * Material bottom tab options */ declare export type MaterialBottomTabOptions = $Partial<{| +title: string, +tabBarColor: string, +tabBarLabel: string, +tabBarIcon: | string | ({| +focused: boolean, +color: string |}) => React$Node, +tabBarBadge: boolean | number | string, +tabBarAccessibilityLabel: string, +tabBarTestID: string, |}>; /** * Material bottom tab navigation prop */ declare export type MaterialBottomTabNavigationEventMap = {| ...EventMapCore, +tabPress: {| +data: void, +canPreventDefault: true |}, |}; declare export type MaterialBottomTabNavigationHelpers< ParamList: ParamListBase = ParamListBase, EventMap: EventMapBase = MaterialBottomTabNavigationEventMap, > = { ...$Exact>, ...TabExtraNavigationHelpers, ... }; declare export type MaterialBottomTabNavigationProp< ParamList: ParamListBase = ParamListBase, RouteName: $Keys = $Keys, Options: {...} = MaterialBottomTabOptions, EventMap: EventMapBase = MaterialBottomTabNavigationEventMap, > = {| ...$Exact>, ...TabExtraNavigationHelpers, |}; /** * Miscellaneous material bottom tab exports */ declare export type PaperFont = {| +fontFamily: string, +fontWeight?: | 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900', |}; declare export type PaperFonts = {| +regular: PaperFont, +medium: PaperFont, +light: PaperFont, +thin: PaperFont, |}; declare export type PaperTheme = {| +dark: boolean, +mode?: 'adaptive' | 'exact', +roundness: number, +colors: {| +primary: string, +background: string, +surface: string, +accent: string, +error: string, +text: string, +onSurface: string, +onBackground: string, +disabled: string, +placeholder: string, +backdrop: string, +notification: string, |}, +fonts: PaperFonts, +animation: {| +scale: number, |}, |}; declare export type PaperRoute = {| +key: string, +title?: string, +icon?: any, +badge?: string | number | boolean, +color?: string, +accessibilityLabel?: string, +testID?: string, |}; declare export type PaperTouchableProps = {| ...TouchableWithoutFeedbackProps, +key: string, +route: PaperRoute, +children: React$Node, +borderless?: boolean, +centered?: boolean, +rippleColor?: string, |}; declare export type MaterialBottomTabNavigationConfig = {| +shifting?: boolean, +labeled?: boolean, +renderTouchable?: PaperTouchableProps => React$Node, +activeColor?: string, +inactiveColor?: string, +sceneAnimationEnabled?: boolean, +keyboardHidesNavigationBar?: boolean, +barStyle?: ViewStyleProp, +style?: ViewStyleProp, +theme?: PaperTheme, |}; declare export type ExtraMaterialBottomTabNavigatorProps = {| ...$Exact, ...TabRouterOptions, ...MaterialBottomTabNavigationConfig, |}; declare export type MaterialBottomTabNavigatorProps< NavHelpers: MaterialBottomTabNavigationHelpers<> = MaterialBottomTabNavigationHelpers<>, > = $Exact, RouteProp<>, NavHelpers, ExtraMaterialBottomTabNavigatorProps, >>; /** * Material top tab options */ declare export type MaterialTopTabOptions = $Partial<{| +title: string, +tabBarLabel: | string | ({| +focused: boolean, +color: string |}) => React$Node, +tabBarIcon: ({| +focused: boolean, +color: string |}) => React$Node, +tabBarAccessibilityLabel: string, +tabBarTestID: string, +tabBarActiveTintColor: string, +tabBarInactiveTintColor: string, +tabBarPressColor: string, +tabBarPressOpacity: number, +tabBarShowLabel: boolean, +tabBarShowIcon: boolean, +tabBarAllowFontScaling: boolean, +tabBarBounces: boolean, +tabBarScrollEnabled: boolean, +tabBarIconStyle: ViewStyleProp, +tabBarLabelStyle: TextStyleProp, +tabBarItemStyle: ViewStyleProp, +tabBarIndicatorStyle: ViewStyleProp, +tabBarIndicatorContainerStyle: ViewStyleProp, +tabBarContentContainerStyle: ViewStyleProp, +tabBarStyle: ViewStyleProp, +tabBarBadge: () => React$Node, +tabBarIndicator: MaterialTopTabBarIndicatorProps => React$Node, +lazy: boolean, +lazyPlaceholder: ({| +route: Route<> |}) => React$Node, |}>; /** * Material top tab navigation prop */ declare export type MaterialTopTabNavigationEventMap = {| ...EventMapCore, +tabPress: {| +data: void, +canPreventDefault: true |}, +tabLongPress: {| +data: void, +canPreventDefault: false |}, +swipeStart: {| +data: void, +canPreventDefault: false |}, +swipeEnd: {| +data: void, +canPreventDefault: false |}, |}; declare export type MaterialTopTabNavigationHelpers< ParamList: ParamListBase = ParamListBase, EventMap: EventMapBase = MaterialTopTabNavigationEventMap, > = { ...$Exact>, ...TabExtraNavigationHelpers, ... }; declare export type MaterialTopTabNavigationProp< ParamList: ParamListBase = ParamListBase, RouteName: $Keys = $Keys, Options: {...} = MaterialTopTabOptions, EventMap: EventMapBase = MaterialTopTabNavigationEventMap, > = {| ...$Exact>, ...TabExtraNavigationHelpers, |}; /** * Miscellaneous material top tab exports */ declare type MaterialTopTabPagerCommonProps = {| +keyboardDismissMode: 'none' | 'on-drag' | 'auto', +swipeEnabled: boolean, +swipeVelocityImpact?: number, +springVelocityScale?: number, +springConfig: $Partial<{| +damping: number, +mass: number, +stiffness: number, +restSpeedThreshold: number, +restDisplacementThreshold: number, |}>, +timingConfig: $Partial<{| +duration: number, |}>, |}; declare export type MaterialTopTabPagerProps = {| ...MaterialTopTabPagerCommonProps, +onSwipeStart?: () => void, +onSwipeEnd?: () => void, +onIndexChange: (index: number) => void, +navigationState: TabNavigationState, +layout: {| +width: number, +height: number |}, +removeClippedSubviews: boolean, +children: ({| +addListener: (type: 'enter', listener: number => void) => void, +removeListener: (type: 'enter', listener: number => void) => void, +position: any, // Reanimated.Node +render: React$Node => React$Node, +jumpTo: string => void, |}) => React$Node, +gestureHandlerProps: PanGestureHandlerProps, |}; declare export type MaterialTopTabBarIndicatorProps = {| +state: TabNavigationState, +width: string, +style?: ViewStyleProp, +getTabWidth: number => number, |}; declare export type MaterialTopTabDescriptor = Descriptor< MaterialBottomTabNavigationHelpers<>, MaterialBottomTabOptions, >; - declare type MaterialTopTabNavigationBuilderResult = {| + declare export type MaterialTopTabNavigationBuilderResult = {| +state: TabNavigationState, +navigation: MaterialTopTabNavigationHelpers<>, +descriptors: {| +[key: string]: MaterialTopTabDescriptor |}, |}; declare export type MaterialTopTabBarProps = {| ...MaterialTopTabNavigationBuilderResult, +layout: {| +width: number, +height: number |}, +position: any, // Reanimated.Node +jumpTo: string => void, |}; declare export type MaterialTopTabNavigationConfig = {| ...$Partial, +position?: any, // Reanimated.Value +tabBarPosition?: 'top' | 'bottom', +initialLayout?: $Partial<{| +width: number, +height: number |}>, +lazyPreloadDistance?: number, +removeClippedSubviews?: boolean, +sceneContainerStyle?: ViewStyleProp, +style?: ViewStyleProp, +gestureHandlerProps?: PanGestureHandlerProps, +pager?: MaterialTopTabPagerProps => React$Node, +tabBar?: MaterialTopTabBarProps => React$Node, |}; declare export type ExtraMaterialTopTabNavigatorProps = {| ...$Exact, ...TabRouterOptions, ...MaterialTopTabNavigationConfig, |}; declare export type MaterialTopTabNavigatorProps< NavHelpers: MaterialTopTabNavigationHelpers<> = MaterialTopTabNavigationHelpers<>, > = $Exact, RouteProp<>, NavHelpers, ExtraMaterialTopTabNavigatorProps, >>; /** * Drawer options */ declare export type DrawerOptions = $Partial<{| +title: string, +lazy: boolean, +drawerLabel: | string | ({| +color: string, +focused: boolean |}) => React$Node, +drawerIcon: ({| +color: string, +size: number, +focused: boolean, |}) => React$Node, +drawerActiveTintColor: string, +drawerActiveBackgroundColor: string, +drawerInactiveTintColor: string, +drawerInactiveBackgroundColor: string, +drawerItemStyle: ViewStyleProp, +drawerLabelStyle: TextStyleProp, +drawerContentContainerStyle: ViewStyleProp, +drawerContentStyle: ViewStyleProp, +drawerStyle: ViewStyleProp, +drawerPosition: 'left' | 'right', +drawerType: 'front' | 'back' | 'slide' | 'permanent', +drawerHideStatusBarOnOpen: boolean, +drawerStatusBarAnimation: 'slide' | 'none' | 'fade', +overlayColor: string, +sceneContainerStyle: ViewStyleProp, +gestureHandlerProps: PanGestureHandlerProps, +swipeEnabled: boolean, +swipeEdgeWidth: number, +swipeMinDistance: number, +keyboardDismissMode: 'on-drag' | 'none', +unmountOnBlur: boolean, ...HeaderCommonOptions< HeaderProps, DrawerOptions>, HeaderLeftButtonProps, HeaderButtonProps, >, |}>; /** * Drawer navigation prop */ declare export type DrawerNavigationEventMap = EventMapCore; declare type DrawerExtraNavigationHelpers< ParamList: ParamListBase = ParamListBase, > = {| +jumpTo: SimpleNavigate, +openDrawer: () => void, +closeDrawer: () => void, +toggleDrawer: () => void, |}; declare export type DrawerNavigationHelpers< ParamList: ParamListBase = ParamListBase, EventMap: EventMapBase = DrawerNavigationEventMap, > = { ...$Exact>, ...DrawerExtraNavigationHelpers, ... }; declare export type DrawerNavigationProp< ParamList: ParamListBase = ParamListBase, RouteName: $Keys = $Keys, Options: {...} = DrawerOptions, EventMap: EventMapBase = DrawerNavigationEventMap, > = {| ...$Exact>, ...DrawerExtraNavigationHelpers, |}; /** * Miscellaneous drawer exports */ declare export type DrawerDescriptor = Descriptor< DrawerNavigationHelpers<>, DrawerOptions, >; - declare type DrawerNavigationBuilderResult = {| + declare export type DrawerNavigationBuilderResult = {| +state: DrawerNavigationState, +navigation: DrawerNavigationHelpers<>, +descriptors: {| +[key: string]: DrawerDescriptor |}, |}; declare export type DrawerNavigationConfig = {| +drawerContent?: DrawerNavigationBuilderResult => React$Node, +detachInactiveScreens?: boolean, +useLegacyImplementation?: boolean, |}; declare export type ExtraDrawerNavigatorProps = {| ...$Exact, ...DrawerRouterOptions, ...DrawerNavigationConfig, |}; declare export type DrawerNavigatorProps< NavHelpers: DrawerNavigationHelpers<> = DrawerNavigationHelpers<>, > = $Exact, RouteProp<>, NavHelpers, ExtraDrawerNavigatorProps, >>; /** * BaseNavigationContainer */ declare export type BaseNavigationContainerProps = {| +children: React$Node, +initialState?: PossiblyStaleNavigationState, +onStateChange?: (state: ?PossiblyStaleNavigationState) => void, +independent?: boolean, |}; declare export type ContainerEventMap = {| ...GlobalEventMap, +options: {| +data: {| +options: { +[key: string]: mixed, ... } |}, +canPreventDefault: false, |}, +__unsafe_action__: {| +data: {| +action: GenericNavigationAction, +noop: boolean, |}, +canPreventDefault: false, |}, |}; declare export type BaseNavigationContainerInterface = {| ...$Exact>, +resetRoot: (state?: PossiblyStaleNavigationState) => void, +getRootState: () => NavigationState, +getCurrentRoute: () => RouteProp<> | void, +getCurrentOptions: () => Object | void, +isReady: () => boolean, |}; - declare type BaseNavigationContainerInterfaceRef = {| + declare export type BaseNavigationContainerInterfaceRef = {| ...BaseNavigationContainerInterface, +current: BaseNavigationContainerInterface | null, |}; /** * State utils */ declare export type GetStateFromPath = ( path: string, options?: LinkingConfig, ) => PossiblyStaleNavigationState; declare export type GetPathFromState = ( state?: ?PossiblyStaleNavigationState, options?: LinkingConfig, ) => string; declare export type GetFocusedRouteNameFromRoute = PossiblyStaleRoute => ?string; /** * Linking */ declare export type ScreenLinkingConfig = {| +path?: string, +exact?: boolean, +parse?: {| +[param: string]: string => mixed |}, +stringify?: {| +[param: string]: mixed => string |}, +screens?: ScreenLinkingConfigMap, +initialRouteName?: string, |}; declare export type ScreenLinkingConfigMap = {| +[routeName: string]: string | ScreenLinkingConfig, |}; declare export type LinkingConfig = {| +initialRouteName?: string, +screens: ScreenLinkingConfigMap, |}; declare export type LinkingOptions = {| +enabled?: boolean, +prefixes: $ReadOnlyArray, +config?: LinkingConfig, +getStateFromPath?: GetStateFromPath, +getPathFromState?: GetPathFromState, |}; /** * NavigationContainer */ declare export type Theme = {| +dark: boolean, +colors: {| +primary: string, +background: string, +card: string, +text: string, +border: string, |}, |}; declare export type NavigationContainerType = React$AbstractComponent< {| ...BaseNavigationContainerProps, +theme?: Theme, +linking?: LinkingOptions, +fallback?: React$Node, +onReady?: () => mixed, |}, BaseNavigationContainerInterface, >; //--------------------------------------------------------------------------- // SECTION 2: EXPORTED MODULE - // This section defines the module exports and contains exported types that - // are not present in any other React Navigation libdef. //--------------------------------------------------------------------------- /** * Actions and routers */ declare export var CommonActions: CommonActionsType; declare export var StackActions: StackActionsType; declare export var TabActions: TabActionsType; declare export var DrawerActions: DrawerActionsType; declare export var BaseRouter: RouterFactory< NavigationState, CommonAction, DefaultRouterOptions, >; declare export var StackRouter: RouterFactory< StackNavigationState, StackAction, StackRouterOptions, >; declare export var TabRouter: RouterFactory< TabNavigationState, TabAction, TabRouterOptions, >; declare export var DrawerRouter: RouterFactory< DrawerNavigationState, DrawerAction, DrawerRouterOptions, >; /** * Navigator utils */ declare export var BaseNavigationContainer: React$AbstractComponent< BaseNavigationContainerProps, BaseNavigationContainerInterface, >; declare export var createNavigatorFactory: CreateNavigatorFactory; declare export var useNavigationBuilder: UseNavigationBuilder; declare export var NavigationHelpersContext: React$Context< ?NavigationHelpers, >; /** * Navigation prop / route accessors */ declare export var NavigationContext: React$Context< ?NavigationProp, >; declare export function useNavigation(): NavigationProp; declare export var NavigationRouteContext: React$Context>; declare export function useRoute(): LeafRoute<>; declare export function useNavigationState( selector: NavigationState => T, ): T; /** * Focus utils */ declare export function useFocusEffect( effect: () => ?(() => mixed), ): void; declare export function useIsFocused(): boolean; /** * State utils */ declare export var getStateFromPath: GetStateFromPath; declare export var getPathFromState: GetPathFromState; declare export function getActionFromState( state: PossiblyStaleNavigationState, ): ?NavigateAction; declare export var getFocusedRouteNameFromRoute: GetFocusedRouteNameFromRoute; } 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 index 8fe886c2b..e5ad3b27e 100644 --- a/native/flow-typed/npm/@react-navigation/devtools_v6.x.x.js +++ b/native/flow-typed/npm/@react-navigation/devtools_v6.x.x.js @@ -1,2268 +1,10 @@ // flow-typed signature: c98b7550ee0851a8d0707331178800d8 // flow-typed version: dc2d6a22c7/@react-navigation/devtools_v5.x.x/flow_>=v0.104.x declare module '@react-navigation/devtools' { - //--------------------------------------------------------------------------- - // SECTION 1: IDENTICAL TYPE DEFINITIONS - // This section is identical across all React Navigation libdefs and contains - // shared definitions. We wish we could make it DRY and import from a shared - // definition, but that isn't yet possible. - //--------------------------------------------------------------------------- - - /** - * We start with some definitions that we have copy-pasted from React Native - * source files. - */ - - // This is a bastardization of the true StyleObj type located in - // react-native/Libraries/StyleSheet/StyleSheetTypes. We unfortunately can't - // import that here, and it's too lengthy (and consequently too brittle) to - // copy-paste here either. - declare type StyleObj = - | null - | void - | number - | false - | '' - | $ReadOnlyArray - | { [name: string]: any, ... }; - declare type ViewStyleProp = StyleObj; - declare type TextStyleProp = StyleObj; - declare type AnimatedViewStyleProp = StyleObj; - declare type AnimatedTextStyleProp = StyleObj; - - // Vaguely copied from - // react-native/Libraries/Animated/src/animations/Animation.js - declare type EndResult = { finished: boolean, ... }; - declare type EndCallback = (result: EndResult) => void; - declare interface Animation { - start( - fromValue: number, - onUpdate: (value: number) => void, - onEnd: ?EndCallback, - previousAnimation: ?Animation, - animatedValue: AnimatedValue, - ): void; - stop(): void; - } - declare type AnimationConfig = { - isInteraction?: boolean, - useNativeDriver: boolean, - onComplete?: ?EndCallback, - iterations?: number, - ... - }; - - // Vaguely copied from - // react-native/Libraries/Animated/src/nodes/AnimatedTracking.js - declare interface AnimatedTracking { - constructor( - value: AnimatedValue, - parent: any, - animationClass: any, - animationConfig: Object, - callback?: ?EndCallback, - ): void; - update(): void; - } - - // Vaguely copied from - // react-native/Libraries/Animated/src/nodes/AnimatedValue.js - declare type ValueListenerCallback = (state: { value: number, ... }) => void; - declare interface AnimatedValue { - constructor(value: number): void; - setValue(value: number): void; - setOffset(offset: number): void; - flattenOffset(): void; - extractOffset(): void; - addListener(callback: ValueListenerCallback): string; - removeListener(id: string): void; - removeAllListeners(): void; - stopAnimation(callback?: ?(value: number) => void): void; - resetAnimation(callback?: ?(value: number) => void): void; - interpolate(config: InterpolationConfigType): AnimatedInterpolation; - animate(animation: Animation, callback: ?EndCallback): void; - stopTracking(): void; - track(tracking: AnimatedTracking): void; - } - - // Copied from - // react-native/Libraries/Animated/src/animations/TimingAnimation.js - declare type TimingAnimationConfigSingle = AnimationConfig & { - toValue: number | AnimatedValue, - easing?: (value: number) => number, - duration?: number, - delay?: number, - ... - }; - - // Copied from - // react-native/Libraries/Animated/src/animations/SpringAnimation.js - declare type SpringAnimationConfigSingle = AnimationConfig & { - toValue: number | AnimatedValue, - overshootClamping?: boolean, - restDisplacementThreshold?: number, - restSpeedThreshold?: number, - velocity?: number, - bounciness?: number, - speed?: number, - tension?: number, - friction?: number, - stiffness?: number, - damping?: number, - mass?: number, - delay?: number, - ... - }; - - // Copied from react-native/Libraries/Types/CoreEventTypes.js - declare type SyntheticEvent = $ReadOnly<{| - bubbles: ?boolean, - cancelable: ?boolean, - currentTarget: number, - defaultPrevented: ?boolean, - dispatchConfig: $ReadOnly<{| - registrationName: string, - |}>, - eventPhase: ?number, - preventDefault: () => void, - isDefaultPrevented: () => boolean, - stopPropagation: () => void, - isPropagationStopped: () => boolean, - isTrusted: ?boolean, - nativeEvent: T, - persist: () => void, - target: ?number, - timeStamp: number, - type: ?string, - |}>; - declare type Layout = $ReadOnly<{| - x: number, - y: number, - width: number, - height: number, - |}>; - declare type LayoutEvent = SyntheticEvent< - $ReadOnly<{| - layout: Layout, - |}>, - >; - declare type BlurEvent = SyntheticEvent< - $ReadOnly<{| - target: number, - |}>, - >; - declare type FocusEvent = SyntheticEvent< - $ReadOnly<{| - target: number, - |}>, - >; - declare type ResponderSyntheticEvent = $ReadOnly<{| - ...SyntheticEvent, - touchHistory: $ReadOnly<{| - indexOfSingleActiveTouch: number, - mostRecentTimeStamp: number, - numberActiveTouches: number, - touchBank: $ReadOnlyArray< - $ReadOnly<{| - touchActive: boolean, - startPageX: number, - startPageY: number, - startTimeStamp: number, - currentPageX: number, - currentPageY: number, - currentTimeStamp: number, - previousPageX: number, - previousPageY: number, - previousTimeStamp: number, - |}>, - >, - |}>, - |}>; - declare type PressEvent = ResponderSyntheticEvent< - $ReadOnly<{| - changedTouches: $ReadOnlyArray<$PropertyType>, - force: number, - identifier: number, - locationX: number, - locationY: number, - pageX: number, - pageY: number, - target: ?number, - timestamp: number, - touches: $ReadOnlyArray<$PropertyType>, - |}>, - >; - - // Vaguely copied from - // react-native/Libraries/Animated/src/nodes/AnimatedInterpolation.js - declare type ExtrapolateType = 'extend' | 'identity' | 'clamp'; - declare type InterpolationConfigType = { - inputRange: Array, - outputRange: Array | Array, - easing?: (input: number) => number, - extrapolate?: ExtrapolateType, - extrapolateLeft?: ExtrapolateType, - extrapolateRight?: ExtrapolateType, - ... - }; - declare interface AnimatedInterpolation { - interpolate(config: InterpolationConfigType): AnimatedInterpolation; - } - - // Copied from react-native/Libraries/Components/View/ViewAccessibility.js - declare type AccessibilityRole = - | 'none' - | 'button' - | 'link' - | 'search' - | 'image' - | 'keyboardkey' - | 'text' - | 'adjustable' - | 'imagebutton' - | 'header' - | 'summary' - | 'alert' - | 'checkbox' - | 'combobox' - | 'menu' - | 'menubar' - | 'menuitem' - | 'progressbar' - | 'radio' - | 'radiogroup' - | 'scrollbar' - | 'spinbutton' - | 'switch' - | 'tab' - | 'tablist' - | 'timer' - | 'toolbar'; - declare type AccessibilityActionInfo = $ReadOnly<{ - name: string, - label?: string, - ... - }>; - declare type AccessibilityActionEvent = SyntheticEvent< - $ReadOnly<{actionName: string, ...}>, - >; - declare type AccessibilityState = { - disabled?: boolean, - selected?: boolean, - checked?: ?boolean | 'mixed', - busy?: boolean, - expanded?: boolean, - ... - }; - declare type AccessibilityValue = $ReadOnly<{| - min?: number, - max?: number, - now?: number, - text?: string, - |}>; - - // Copied from - // react-native/Libraries/Components/Touchable/TouchableWithoutFeedback.js - declare type Stringish = string; - declare type EdgeInsetsProp = $ReadOnly<$Partial>; - declare type TouchableWithoutFeedbackProps = $ReadOnly<{| - accessibilityActions?: ?$ReadOnlyArray, - accessibilityElementsHidden?: ?boolean, - accessibilityHint?: ?Stringish, - accessibilityIgnoresInvertColors?: ?boolean, - accessibilityLabel?: ?Stringish, - accessibilityLiveRegion?: ?('none' | 'polite' | 'assertive'), - accessibilityRole?: ?AccessibilityRole, - accessibilityState?: ?AccessibilityState, - accessibilityValue?: ?AccessibilityValue, - accessibilityViewIsModal?: ?boolean, - accessible?: ?boolean, - children?: ?React$Node, - delayLongPress?: ?number, - delayPressIn?: ?number, - delayPressOut?: ?number, - disabled?: ?boolean, - focusable?: ?boolean, - hitSlop?: ?EdgeInsetsProp, - importantForAccessibility?: ?('auto' | 'yes' | 'no' | 'no-hide-descendants'), - nativeID?: ?string, - onAccessibilityAction?: ?(event: AccessibilityActionEvent) => mixed, - onBlur?: ?(event: BlurEvent) => mixed, - onFocus?: ?(event: FocusEvent) => mixed, - onLayout?: ?(event: LayoutEvent) => mixed, - onLongPress?: ?(event: PressEvent) => mixed, - onPress?: ?(event: PressEvent) => mixed, - onPressIn?: ?(event: PressEvent) => mixed, - onPressOut?: ?(event: PressEvent) => mixed, - pressRetentionOffset?: ?EdgeInsetsProp, - rejectResponderTermination?: ?boolean, - testID?: ?string, - touchSoundDisabled?: ?boolean, - |}>; - - // Copied from react-native/Libraries/Image/ImageSource.js - declare type ImageURISource = $ReadOnly<{ - uri?: ?string, - bundle?: ?string, - method?: ?string, - headers?: ?Object, - body?: ?string, - cache?: ?('default' | 'reload' | 'force-cache' | 'only-if-cached'), - width?: ?number, - height?: ?number, - scale?: ?number, - ... - }>; - - /** - * The following is copied from react-native-gesture-handler's libdef - */ - - declare type StateUndetermined = 0; - declare type StateFailed = 1; - declare type StateBegan = 2; - declare type StateCancelled = 3; - declare type StateActive = 4; - declare type StateEnd = 5; - - declare type GestureHandlerState = - | StateUndetermined - | StateFailed - | StateBegan - | StateCancelled - | StateActive - | StateEnd; - - declare type $SyntheticEvent = { - +nativeEvent: $ReadOnly<$Exact>, - ... - }; - - declare type $Event = $SyntheticEvent<{ - handlerTag: number, - numberOfPointers: number, - state: GestureHandlerState, - oldState: GestureHandlerState, - ...$Exact, - ... - }>; - - declare type $EventHandlers = {| - onGestureEvent?: ($Event) => mixed, - onHandlerStateChange?: ($Event) => mixed, - onBegan?: ($Event) => mixed, - onFailed?: ($Event) => mixed, - onCancelled?: ($Event) => mixed, - onActivated?: ($Event) => mixed, - onEnded?: ($Event) => mixed, - |}; - - declare type HitSlop = - | number - | {| - left?: number, - top?: number, - right?: number, - bottom?: number, - vertical?: number, - horizontal?: number, - width?: number, - height?: number, - |} - | {| - width: number, - left: number, - |} - | {| - width: number, - right: number, - |} - | {| - height: number, - top: number, - |} - | {| - height: number, - bottom: number, - |}; - - declare type $GestureHandlerProps< - AdditionalProps: {...}, - ExtraEventsProps: {...} - > = $ReadOnly<{| - ...$Exact, - ...$EventHandlers, - id?: string, - enabled?: boolean, - waitFor?: React$Ref | Array>, - simultaneousHandlers?: React$Ref | Array>, - shouldCancelWhenOutside?: boolean, - minPointers?: number, - hitSlop?: HitSlop, - children?: React$Node, - |}>; - - declare type PanGestureHandlerProps = $GestureHandlerProps< - { - activeOffsetY?: number | [number, number], - activeOffsetX?: number | [number, number], - failOffsetY?: number | [number, number], - failOffsetX?: number | [number, number], - minDist?: number, - minVelocity?: number, - minVelocityX?: number, - minVelocityY?: number, - minPointers?: number, - maxPointers?: number, - avgTouches?: boolean, - ... - }, - { - x: number, - y: number, - absoluteX: number, - absoluteY: number, - translationX: number, - translationY: number, - velocityX: number, - velocityY: number, - ... - } - >; - - /** - * MAGIC - */ - - declare type $If = $Call< - ((true, Then, Else) => Then) & ((false, Then, Else) => Else), - Test, - Then, - Else, - >; - declare type $IsA = $Call< - (Y => true) & (mixed => false), - X, - >; - declare type $IsUndefined = $IsA; - - declare type $Partial = $ReadOnly<$Rest>; - - // If { ...T, ... } counts as a T, then we're inexact - declare type $IsExact = $Call< - (T => false) & (mixed => true), - { ...T, ... }, - >; - - /** - * Actions, state, etc. - */ - - declare export type ScreenParams = { +[key: string]: mixed, ... }; - - declare export type BackAction = {| - +type: 'GO_BACK', - +source?: string, - +target?: string, - |}; - declare export type NavigateAction = {| - +type: 'NAVIGATE', - +payload: - | {| +key: string, +params?: ScreenParams |} - | {| +name: string, +key?: string, +params?: ScreenParams |}, - +source?: string, - +target?: string, - |}; - declare export type ResetAction = {| - +type: 'RESET', - +payload: StaleNavigationState, - +source?: string, - +target?: string, - |}; - declare export type SetParamsAction = {| - +type: 'SET_PARAMS', - +payload: {| +params?: ScreenParams |}, - +source?: string, - +target?: string, - |}; - declare export type CommonAction = - | BackAction - | NavigateAction - | ResetAction - | SetParamsAction; - - declare type NavigateActionCreator = {| - (routeName: string, params?: ScreenParams): NavigateAction, - ( - | {| +key: string, +params?: ScreenParams |} - | {| +name: string, +key?: string, +params?: ScreenParams |}, - ): NavigateAction, - |}; - declare export type CommonActionsType = {| - +navigate: NavigateActionCreator, - +goBack: () => BackAction, - +reset: (state: PossiblyStaleNavigationState) => ResetAction, - +setParams: (params: ScreenParams) => SetParamsAction, - |}; - - declare export type GenericNavigationAction = {| - +type: string, - +payload?: { +[key: string]: mixed, ... }, - +source?: string, - +target?: string, - |}; - - declare export type LeafRoute = {| - +key: string, - +name: RouteName, - +params?: ScreenParams, - |}; - declare export type StateRoute = {| - ...LeafRoute, - +state: NavigationState | StaleNavigationState, - |}; - declare export type Route = - | LeafRoute - | StateRoute; - - declare export type NavigationState = {| - +key: string, - +index: number, - +routeNames: $ReadOnlyArray, - +history?: $ReadOnlyArray, - +routes: $ReadOnlyArray>, - +type: string, - +stale: false, - |}; - - declare export type StaleLeafRoute = {| - +key?: string, - +name: RouteName, - +params?: ScreenParams, - |}; - declare export type StaleStateRoute = {| - ...StaleLeafRoute, - +state: StaleNavigationState, - |}; - declare export type StaleRoute = - | StaleLeafRoute - | StaleStateRoute; - declare export type StaleNavigationState = {| - // It's possible to pass React Nav a StaleNavigationState with an undefined - // index, but React Nav will always return one with the index set. This is - // the same as for the type property below, but in the case of index we tend - // to rely on it being set more... - +index: number, - +history?: $ReadOnlyArray, - +routes: $ReadOnlyArray>, - +type?: string, - +stale?: true, - |}; - - declare export type PossiblyStaleNavigationState = - | NavigationState - | StaleNavigationState; - declare export type PossiblyStaleRoute = - | Route - | StaleRoute; - - /** - * Routers - */ - - declare type ActionCreators< - State: NavigationState, - Action: GenericNavigationAction, - > = { - +[key: string]: (...args: any) => (Action | State => Action), - ... - }; - - declare export type DefaultRouterOptions = { - +initialRouteName?: string, - ... - }; - - declare export type RouterFactory< - State: NavigationState, - Action: GenericNavigationAction, - RouterOptions: DefaultRouterOptions, - > = (options: RouterOptions) => Router; - - declare export type ParamListBase = { +[key: string]: ?ScreenParams, ... }; - - declare export type RouterConfigOptions = {| - +routeNames: $ReadOnlyArray, - +routeParamList: ParamListBase, - |}; - - declare export type Router< - State: NavigationState, - Action: GenericNavigationAction, - > = {| - +type: $PropertyType, - +getInitialState: (options: RouterConfigOptions) => State, - +getRehydratedState: ( - partialState: PossiblyStaleNavigationState, - options: RouterConfigOptions, - ) => State, - +getStateForRouteNamesChange: ( - state: State, - options: RouterConfigOptions, - ) => State, - +getStateForRouteFocus: (state: State, key: string) => State, - +getStateForAction: ( - state: State, - action: Action, - options: RouterConfigOptions, - ) => ?PossiblyStaleNavigationState; - +shouldActionChangeFocus: (action: GenericNavigationAction) => boolean, - +actionCreators?: ActionCreators, - |}; - - /** - * Stack actions and router - */ - - declare export type StackNavigationState = {| - ...NavigationState, - +type: 'stack', - |}; - - declare export type ReplaceAction = {| - +type: 'REPLACE', - +payload: {| +name: string, +key?: ?string, +params?: ScreenParams |}, - +source?: string, - +target?: string, - |}; - declare export type PushAction = {| - +type: 'PUSH', - +payload: {| +name: string, +key?: ?string, +params?: ScreenParams |}, - +source?: string, - +target?: string, - |}; - declare export type PopAction = {| - +type: 'POP', - +payload: {| +count: number |}, - +source?: string, - +target?: string, - |}; - declare export type PopToTopAction = {| - +type: 'POP_TO_TOP', - +source?: string, - +target?: string, - |}; - declare export type StackAction = - | CommonAction - | ReplaceAction - | PushAction - | PopAction - | PopToTopAction; - - declare export type StackActionsType = {| - +replace: (routeName: string, params?: ScreenParams) => ReplaceAction, - +push: (routeName: string, params?: ScreenParams) => PushAction, - +pop: (count?: number) => PopAction, - +popToTop: () => PopToTopAction, - |}; - - declare export type StackRouterOptions = $Exact; - - /** - * Tab actions and router - */ - - declare export type TabNavigationState = {| - ...NavigationState, - +type: 'tab', - +history: $ReadOnlyArray<{| type: 'route', key: string |}>, - |}; - - declare export type JumpToAction = {| - +type: 'JUMP_TO', - +payload: {| +name: string, +params?: ScreenParams |}, - +source?: string, - +target?: string, - |}; - declare export type TabAction = - | CommonAction - | JumpToAction; - - declare export type TabActionsType = {| - +jumpTo: string => JumpToAction, - |}; - - declare export type TabRouterOptions = {| - ...$Exact, - +backBehavior?: 'initialRoute' | 'order' | 'history' | 'none', - |}; - - /** - * Drawer actions and router - */ - - declare type DrawerHistoryEntry = - | {| +type: 'route', +key: string |} - | {| +type: 'drawer' |}; - declare export type DrawerNavigationState = {| - ...NavigationState, - +type: 'drawer', - +history: $ReadOnlyArray, - |}; - - declare export type OpenDrawerAction = {| - +type: 'OPEN_DRAWER', - +source?: string, - +target?: string, - |}; - declare export type CloseDrawerAction = {| - +type: 'CLOSE_DRAWER', - +source?: string, - +target?: string, - |}; - declare export type ToggleDrawerAction = {| - +type: 'TOGGLE_DRAWER', - +source?: string, - +target?: string, - |}; - declare export type DrawerAction = - | TabAction - | OpenDrawerAction - | CloseDrawerAction - | ToggleDrawerAction; - - declare export type DrawerActionsType = {| - ...TabActionsType, - +openDrawer: () => OpenDrawerAction, - +closeDrawer: () => CloseDrawerAction, - +toggleDrawer: () => ToggleDrawerAction, - |}; - - declare export type DrawerRouterOptions = {| - ...TabRouterOptions, - +defaultStatus?: 'open' | 'closed', - |}; - - /** - * Events - */ - - declare export type EventMapBase = { - +[name: string]: {| - +data?: mixed, - +canPreventDefault?: boolean, - |}, - ... - }; - declare type EventPreventDefaultProperties = $If< - Test, - {| +defaultPrevented: boolean, +preventDefault: () => void |}, - {| |}, - >; - declare type EventDataProperties = $If< - $IsUndefined, - {| |}, - {| +data: Data |}, - >; - declare type EventArg< - EventName: string, - CanPreventDefault: ?boolean = false, - Data = void, - > = {| - ...EventPreventDefaultProperties, - ...EventDataProperties, - +type: EventName, - +target?: string, - |}; - declare type GlobalEventMap = {| - +state: {| +data: {| +state: State |}, +canPreventDefault: false |}, - |}; - declare type EventMapCore = {| - ...GlobalEventMap, - +focus: {| +data: void, +canPreventDefault: false |}, - +blur: {| +data: void, +canPreventDefault: false |}, - +beforeRemove: {| - +data: {| +action: GenericNavigationAction |}, - +canPreventDefault: true, - |}, - |}; - declare type EventListenerCallback< - EventName: string, - State: PossiblyStaleNavigationState = NavigationState, - EventMap: EventMapBase = EventMapCore, - > = (e: EventArg< - EventName, - $PropertyType< - $ElementType< - {| ...EventMap, ...EventMapCore |}, - EventName, - >, - 'canPreventDefault', - >, - $PropertyType< - $ElementType< - {| ...EventMap, ...EventMapCore |}, - EventName, - >, - 'data', - >, - >) => mixed; - - /** - * Navigation prop - */ - - declare type PartialWithMergeProperty = $If< - $IsExact, - { ...$Partial, +merge: true }, - { ...$Partial, +merge: true, ... }, - >; - - declare type EitherExactOrPartialWithMergeProperty = - | ParamsType - | PartialWithMergeProperty; - - declare export type SimpleNavigate = - >( - routeName: DestinationRouteName, - params: EitherExactOrPartialWithMergeProperty< - $ElementType, - >, - ) => void; - - declare export type Navigate = - & SimpleNavigate - & >( - route: $If< - $IsUndefined<$ElementType>, - | {| +key: string |} - | {| +name: DestinationRouteName, +key?: string |}, - | {| - +key: string, - +params?: EitherExactOrPartialWithMergeProperty< - $ElementType, - >, - |} - | {| - +name: DestinationRouteName, - +key?: string, - +params?: EitherExactOrPartialWithMergeProperty< - $ElementType, - >, - |}, - >, - ) => void; - - declare type CoreNavigationHelpers< - ParamList: ParamListBase, - State: PossiblyStaleNavigationState = PossiblyStaleNavigationState, - EventMap: EventMapBase = EventMapCore, - > = { - +navigate: Navigate, - +dispatch: ( - action: - | GenericNavigationAction - | (State => GenericNavigationAction), - ) => void, - +reset: PossiblyStaleNavigationState => void, - +goBack: () => void, - +isFocused: () => boolean, - +canGoBack: () => boolean, - +getId: () => string | void, - +getParent: >(id?: string) => ?Parent, - +getState: () => NavigationState, - +addListener: |}, - >>( - name: EventName, - callback: EventListenerCallback, - ) => () => void, - +removeListener: |}, - >>( - name: EventName, - callback: EventListenerCallback, - ) => void, - ... - }; - - declare export type NavigationHelpers< - ParamList: ParamListBase, - State: PossiblyStaleNavigationState = PossiblyStaleNavigationState, - EventMap: EventMapBase = EventMapCore, - > = { - ...$Exact>, - +setParams: (params: ScreenParams) => void, - ... - }; - - declare type SetParamsInput< - ParamList: ParamListBase, - RouteName: $Keys = $Keys, - > = $If< - $IsUndefined<$ElementType>, - empty, - $Partial<$NonMaybeType<$ElementType>>, - >; - - declare export type NavigationProp< - ParamList: ParamListBase, - RouteName: $Keys = $Keys, - State: PossiblyStaleNavigationState = PossiblyStaleNavigationState, - ScreenOptions: {...} = {...}, - EventMap: EventMapBase = EventMapCore, - > = { - ...$Exact>, - +setOptions: (options: $Partial) => void, - +setParams: (params: SetParamsInput) => void, - ... - }; - - /** - * CreateNavigator - */ - - declare export type RouteProp< - ParamList: ParamListBase = ParamListBase, - RouteName: $Keys = $Keys, - > = {| - ...LeafRoute, - +params: $ElementType, - +path?: string, - |}; - - declare type ScreenOptionsProp< - ScreenOptions: {...}, - RouteParam, - NavHelpers, - > = - | ScreenOptions - | ({| +route: RouteParam, +navigation: NavHelpers |}) => ScreenOptions; - declare export type ScreenListeners< - State: NavigationState = NavigationState, - EventMap: EventMapBase = EventMapCore, - > = $ObjMapi< - {| [name: $Keys]: empty |}, - >(K, empty) => EventListenerCallback, - >; - declare type ScreenListenersProp< - ScreenListenersParam: {...}, - RouteParam, - NavHelpers, - > = - | ScreenListenersParam - | ({| +route: RouteParam, +navigation: NavHelpers |}) => ScreenListenersParam; - - declare type BaseScreenProps< - ParamList: ParamListBase, - NavProp, - RouteName: $Keys = $Keys, - State: NavigationState = NavigationState, - ScreenOptions: {...} = {...}, - EventMap: EventMapBase = EventMapCore, - > = {| - +name: RouteName, - +options?: ScreenOptionsProp< - ScreenOptions, - RouteProp, - NavProp, - >, - +listeners?: ScreenListenersProp< - ScreenListeners, - RouteProp, - NavProp, - >, - +initialParams?: $Partial<$ElementType>, - +getId?: ({ - +params: $ElementType, - }) => string | void, - +navigationKey?: string, - |}; - - declare export type ScreenProps< - ParamList: ParamListBase, - NavProp, - RouteName: $Keys = $Keys, - State: NavigationState = NavigationState, - ScreenOptions: {...} = {...}, - EventMap: EventMapBase = EventMapCore, - > = - | {| - ...BaseScreenProps< - ParamList, - NavProp, - RouteName, - State, - ScreenOptions, - EventMap, - >, - +component: React$ComponentType<{| - +route: RouteProp, - +navigation: NavProp, - |}>, - |} - | {| - ...BaseScreenProps< - ParamList, - NavProp, - RouteName, - State, - ScreenOptions, - EventMap, - >, - +getComponent: () => React$ComponentType<{| - +route: RouteProp, - +navigation: NavProp, - |}>, - |} - | {| - ...BaseScreenProps< - ParamList, - NavProp, - RouteName, - State, - ScreenOptions, - EventMap, - >, - +children: ({| - +route: RouteProp, - +navigation: NavProp, - |}) => React$Node, - |}; - - declare export type ScreenComponent< - GlobalParamList: ParamListBase, - ParamList: ParamListBase, - State: NavigationState = NavigationState, - ScreenOptions: {...} = {...}, - EventMap: EventMapBase = EventMapCore, - > = < - RouteName: $Keys, - NavProp: NavigationProp< - GlobalParamList, - RouteName, - State, - ScreenOptions, - EventMap, - >, - >(props: ScreenProps< - ParamList, - NavProp, - RouteName, - State, - ScreenOptions, - EventMap, - >) => React$Node; - - declare type ScreenOptionsProps< - ScreenOptions: {...}, - RouteParam, - NavHelpers, - > = {| - +screenOptions?: ScreenOptionsProp, - |}; - declare type ScreenListenersProps< - ScreenListenersParam: {...}, - RouteParam, - NavHelpers, - > = {| - +screenListeners?: ScreenListenersProp< - ScreenListenersParam, - RouteParam, - NavHelpers, - >, - |}; - declare export type ExtraNavigatorPropsBase = { - ...$Exact, - +id?: string, - +children?: React$Node, - ... - }; - declare export type NavigatorProps< - ScreenOptions: {...}, - ScreenListenersParam, - RouteParam, - NavHelpers, - ExtraNavigatorProps: ExtraNavigatorPropsBase, - > = { - ...$Exact, - ...ScreenOptionsProps, - ...ScreenListenersProps, - +defaultScreenOptions?: - | ScreenOptions - | ({| - +route: RouteParam, - +navigation: NavHelpers, - +options: ScreenOptions, - |}) => ScreenOptions, - ... - }; - declare export type NavigatorPropsBase< - ScreenOptions: {...}, - ScreenListenersParam: {...}, - NavHelpers, - > = NavigatorProps< - ScreenOptions, - ScreenListenersParam, - RouteProp<>, - NavHelpers, - ExtraNavigatorPropsBase, - >; - - declare export type CreateNavigator< - State: NavigationState, - ScreenOptions: {...}, - EventMap: EventMapBase, - ExtraNavigatorProps: ExtraNavigatorPropsBase, - > = < - GlobalParamList: ParamListBase, - ParamList: ParamListBase, - NavHelpers: NavigationHelpers< - GlobalParamList, - State, - EventMap, - >, - >() => {| - +Screen: ScreenComponent< - GlobalParamList, - ParamList, - State, - ScreenOptions, - EventMap, - >, - +Navigator: React$ComponentType<$Exact, - RouteProp, - NavHelpers, - ExtraNavigatorProps, - >>>, - +Group: React$ComponentType<{| - ...ScreenOptionsProps, NavHelpers>, - +children: React$Node, - +navigationKey?: string, - |}>, - |}; - - declare export type CreateNavigatorFactory = < - State: NavigationState, - ScreenOptions: {...}, - EventMap: EventMapBase, - NavHelpers: NavigationHelpers< - ParamListBase, - State, - EventMap, - >, - ExtraNavigatorProps: ExtraNavigatorPropsBase, - >( - navigator: React$ComponentType<$Exact, - RouteProp<>, - NavHelpers, - ExtraNavigatorProps, - >>>, - ) => CreateNavigator; - - - /** - * useNavigationBuilder - */ - - declare export type Descriptor< - NavHelpers, - ScreenOptions: {...} = {...}, - > = {| - +render: () => React$Node, - +options: $ReadOnly, - +navigation: NavHelpers, - |}; - - declare export type UseNavigationBuilder = < - State: NavigationState, - Action: GenericNavigationAction, - ScreenOptions: {...}, - RouterOptions: DefaultRouterOptions, - NavHelpers, - EventMap: EventMapBase, - ExtraNavigatorProps: ExtraNavigatorPropsBase, - >( - routerFactory: RouterFactory, - options: $Exact, - RouteProp<>, - NavHelpers, - ExtraNavigatorProps, - >>, - ) => {| - +id?: string, - +state: State, - +descriptors: {| +[key: string]: Descriptor |}, - +navigation: NavHelpers, - |}; - - /** - * EdgeInsets - */ - - declare type EdgeInsets = {| - +top: number, - +right: number, - +bottom: number, - +left: number, - |}; - - /** - * TransitionPreset - */ - - declare export type TransitionSpec = - | {| - animation: 'spring', - config: $Diff< - SpringAnimationConfigSingle, - { toValue: number | AnimatedValue, ... }, - >, - |} - | {| - animation: 'timing', - config: $Diff< - TimingAnimationConfigSingle, - { toValue: number | AnimatedValue, ... }, - >, - |}; - - declare export type StackCardInterpolationProps = {| - +current: {| - +progress: AnimatedInterpolation, - |}, - +next?: {| - +progress: AnimatedInterpolation, - |}, - +index: number, - +closing: AnimatedInterpolation, - +swiping: AnimatedInterpolation, - +inverted: AnimatedInterpolation, - +layouts: {| - +screen: {| +width: number, +height: number |}, - |}, - +insets: EdgeInsets, - |}; - declare export type StackCardInterpolatedStyle = {| - containerStyle?: AnimatedViewStyleProp, - cardStyle?: AnimatedViewStyleProp, - overlayStyle?: AnimatedViewStyleProp, - shadowStyle?: AnimatedViewStyleProp, - |}; - declare export type StackCardStyleInterpolator = ( - props: StackCardInterpolationProps, - ) => StackCardInterpolatedStyle; - - declare export type StackHeaderInterpolationProps = {| - +current: {| - +progress: AnimatedInterpolation, - |}, - +next?: {| - +progress: AnimatedInterpolation, - |}, - +layouts: {| - +header: {| +width: number, +height: number |}, - +screen: {| +width: number, +height: number |}, - +title?: {| +width: number, +height: number |}, - +leftLabel?: {| +width: number, +height: number |}, - |}, - |}; - declare export type StackHeaderInterpolatedStyle = {| - leftLabelStyle?: AnimatedViewStyleProp, - leftButtonStyle?: AnimatedViewStyleProp, - rightButtonStyle?: AnimatedViewStyleProp, - titleStyle?: AnimatedViewStyleProp, - backgroundStyle?: AnimatedViewStyleProp, - |}; - declare export type StackHeaderStyleInterpolator = ( - props: StackHeaderInterpolationProps, - ) => StackHeaderInterpolatedStyle; - - declare type GestureDirection = - | 'horizontal' - | 'horizontal-inverted' - | 'vertical' - | 'vertical-inverted'; - - declare export type TransitionPreset = {| - +gestureDirection: GestureDirection, - +transitionSpec: {| - +open: TransitionSpec, - +close: TransitionSpec, - |}, - +cardStyleInterpolator: StackCardStyleInterpolator, - +headerStyleInterpolator: StackHeaderStyleInterpolator, - |}; - - /** - * Header common options - */ - - declare export type SceneProgress = {| - +current: AnimatedInterpolation, - +next?: AnimatedInterpolation, - +previous?: AnimatedInterpolation, - |}; - - declare export type HeaderProps = {| - +navigation: NavProp, - +route: RouteProp<>, - +options: ScreenOptions, - +layout: {| +width: number, +height: number |}, - |}; - - declare export type HeaderButtonProps = $Partial<{| - +tintColor: string, - +pressColor: string, - +pressOpacity: number, - |}>; - - declare export type HeaderLeftButtonProps = $Partial<{| - ...HeaderButtonProps, - +labelVisible: boolean, - |}>; - - declare type HeaderTitleInputBase = { - +onLayout: LayoutEvent => void, - +children: string, - +allowFontScaling: ?boolean, - +tintColor: ?string, - +style: ?AnimatedTextStyleProp, - ... - }; - - declare export type HeaderTitleInputProps = - $Exact; - - declare export type HeaderCommonOptions< - NavHeaderProps, - NavHeaderLeftProps, - NavHeaderRightProps, - > = $Partial<{| - +header: NavHeaderProps => React$Node, - +headerShown: boolean, - +headerTitle: string | ( HeaderTitleInputProps => React$Node), - +headerTitleAlign: 'left' | 'center', - +headerTitleStyle: AnimatedTextStyleProp, - +headerTitleContainerStyle: AnimatedViewStyleProp, - +headerTintColor: string, - +headerTitleAllowFontScaling: boolean, - +headerLeft: NavHeaderLeftProps => React$Node, - +headerLeftContainerStyle: AnimatedViewStyleProp, - +headerRight: NavHeaderRightProps => React$Node, - +headerRightContainerStyle: AnimatedViewStyleProp, - +headerBackground: ({| style: AnimatedViewStyleProp |}) => React$Node, - +headerStyle: AnimatedViewStyleProp, - +headerTransparent: boolean, - +headerStatusBarHeight: number, - +headerShadowVisible: boolean, - +headerBackgroundContainerStyle: AnimatedViewStyleProp, - +headerPressColor: string, - +headerPressOpacity: number, - |}>; - - /** - * Stack options - */ - - declare export type StackDescriptor = Descriptor< - StackNavigationHelpers<>, - StackOptions, - >; - - declare type Scene = {| - +route: T, - +descriptor: StackDescriptor, - +progress: SceneProgress, - |}; - - declare export type StackHeaderProps = {| - ...HeaderProps, StackOptions>, - +progress: SceneProgress, - +back?: {| +title: string |}, - +styleInterpolator: StackHeaderStyleInterpolator, - |}; - - declare export type StackHeaderButtonProps = $Partial<{| - ...HeaderButtonProps, - +canGoBack: boolean, - |}>; - - declare export type StackHeaderLeftButtonProps = $Partial<{| - ...StackHeaderButtonProps, - +onPress: (() => void), - +backImage: (props: {| tintColor: string |}) => React$Node, - +label: string, - +truncatedLabel: string, - +labelVisible: boolean, - +labelStyle: AnimatedTextStyleProp, - +allowFontScaling: boolean, - +onLabelLayout: LayoutEvent => void, - +screenLayout: {| +width: number, +height: number |}, - +titleLayout: {| +width: number, +height: number |}, - +disabled: boolean, - +accessibilityLabel: string, - +style: ViewStyleProp, - |}>; - - declare export type StackOptions = $Partial<{| - +title: string, - +cardShadowEnabled: boolean, - +cardOverlayEnabled: boolean, - +cardOverlay: {| style: ViewStyleProp |} => React$Node, - +cardStyle: ViewStyleProp, - +animationEnabled: boolean, - +animationTypeForReplace: 'push' | 'pop', - +gestureEnabled: boolean, - +gestureResponseDistance: number, - +gestureVelocityImpact: number, - +safeAreaInsets: $Partial, - +keyboardHandlingEnabled: boolean, - +presentation: 'card' | 'modal' | 'transparentModal', - // Transition - ...TransitionPreset, - // Header - ...HeaderCommonOptions< - StackHeaderProps, - StackHeaderLeftButtonProps, - StackHeaderButtonProps, - >, - +headerMode: 'float' | 'screen', - +headerBackAllowFontScaling: boolean, - +headerBackTitle: string | null, - +headerBackTitleStyle: TextStyleProp, - +headerBackTitleVisible: boolean, - +headerTruncatedBackTitle: string, - +headerBackImage: $PropertyType, - +headerBackAccessibilityLabel: string, - |}>; - - /** - * Stack navigation prop - */ - - declare export type StackNavigationEventMap = {| - ...EventMapCore, - +transitionStart: {| - +data: {| +closing: boolean |}, - +canPreventDefault: false, - |}, - +transitionEnd: {| - +data: {| +closing: boolean |}, - +canPreventDefault: false, - |}, - +gestureStart: {| +data: void, +canPreventDefault: false |}, - +gestureEnd: {| +data: void, +canPreventDefault: false |}, - +gestureCancel: {| +data: void, +canPreventDefault: false |}, - |}; - - declare type StackExtraNavigationHelpers< - ParamList: ParamListBase = ParamListBase, - > = {| - +replace: SimpleNavigate, - +push: SimpleNavigate, - +pop: (count?: number) => void, - +popToTop: () => void, - |}; - - declare export type StackNavigationHelpers< - ParamList: ParamListBase = ParamListBase, - EventMap: EventMapBase = StackNavigationEventMap, - > = { - ...$Exact>, - ...StackExtraNavigationHelpers, - ... - }; - - declare export type StackNavigationProp< - ParamList: ParamListBase = ParamListBase, - RouteName: $Keys = $Keys, - Options: {...} = StackOptions, - EventMap: EventMapBase = StackNavigationEventMap, - > = {| - ...$Exact>, - ...StackExtraNavigationHelpers, - |}; - - /** - * Miscellaneous stack exports - */ - - declare type StackNavigationConfig = {| - +detachInactiveScreens?: boolean, - |}; - - declare export type ExtraStackNavigatorProps = {| - ...$Exact, - ...StackRouterOptions, - ...StackNavigationConfig, - |}; - - declare export type StackNavigatorProps< - NavHelpers: StackNavigationHelpers<> = StackNavigationHelpers<>, - > = $Exact, - RouteProp<>, - NavHelpers, - ExtraStackNavigatorProps, - >>; - - /** - * Bottom tab options - */ - - declare export type BottomTabBarButtonProps = {| - ...$Diff< - TouchableWithoutFeedbackProps, - {| onPress?: ?(event: PressEvent) => mixed |}, - >, - +to?: string, - +children: React$Node, - +onPress?: (MouseEvent | PressEvent) => void, - |}; - - declare export type TabBarVisibilityAnimationConfig = - | {| - +animation: 'spring', - +config?: $Diff< - SpringAnimationConfigSingle, - { toValue: number | AnimatedValue, useNativeDriver: boolean, ... }, - >, - |} - | {| - +animation: 'timing', - +config?: $Diff< - TimingAnimationConfigSingle, - { toValue: number | AnimatedValue, useNativeDriver: boolean, ... }, - >, - |}; - - declare export type BottomTabOptions = $Partial<{| - +title: string, - +tabBarLabel: - | string - | ({| focused: boolean, color: string |}) => React$Node, - +tabBarIcon: ({| - focused: boolean, - color: string, - size: number, - |}) => React$Node, - +tabBarBadge: number | string, - +tabBarBadgeStyle: TextStyleProp, - +tabBarAccessibilityLabel: string, - +tabBarTestID: string, - +tabBarVisibilityAnimationConfig: $Partial<{| - +show: TabBarVisibilityAnimationConfig, - +hide: TabBarVisibilityAnimationConfig, - |}>, - +tabBarButton: BottomTabBarButtonProps => React$Node, - +tabBarHideOnKeyboard: boolean, - +tabBarActiveTintColor: string, - +tabBarInactiveTintColor: string, - +tabBarActiveBackgroundColor: string, - +tabBarInactiveBackgroundColor: string, - +tabBarAllowFontScaling: boolean, - +tabBarShowLabel: boolean, - +tabBarLabelStyle: TextStyleProp, - +tabBarIconStyle: TextStyleProp, - +tabBarItemStyle: ViewStyleProp, - +tabBarLabelPosition: 'beside-icon' | 'below-icon', - +tabBarStyle: ViewStyleProp, - +unmountOnBlur: boolean, - +lazy: boolean, - ...HeaderCommonOptions< - HeaderProps, BottomTabOptions>, - HeaderLeftButtonProps, - HeaderButtonProps, - >, - |}>; - - /** - * Bottom tab navigation prop - */ - - declare export type BottomTabNavigationEventMap = {| - ...EventMapCore, - +tabPress: {| +data: void, +canPreventDefault: true |}, - +tabLongPress: {| +data: void, +canPreventDefault: false |}, - |}; - - declare type TabExtraNavigationHelpers< - ParamList: ParamListBase = ParamListBase, - > = {| - +jumpTo: SimpleNavigate, - |}; - - declare export type BottomTabNavigationHelpers< - ParamList: ParamListBase = ParamListBase, - EventMap: EventMapBase = BottomTabNavigationEventMap, - > = { - ...$Exact>, - ...TabExtraNavigationHelpers, - ... - }; - - declare export type BottomTabNavigationProp< - ParamList: ParamListBase = ParamListBase, - RouteName: $Keys = $Keys, - Options: {...} = BottomTabOptions, - EventMap: EventMapBase = BottomTabNavigationEventMap, - > = {| - ...$Exact>, - ...TabExtraNavigationHelpers, - |}; - - /** - * Miscellaneous bottom tab exports - */ - - declare export type BottomTabDescriptor = Descriptor< - BottomTabNavigationHelpers<>, - BottomTabOptions, - >; - - declare type BottomTabNavigationBuilderResult = {| - +state: TabNavigationState, - +navigation: BottomTabNavigationHelpers<>, - +descriptors: {| +[key: string]: BottomTabDescriptor |}, - |}; - - declare export type BottomTabBarProps = BottomTabNavigationBuilderResult; - - declare type BottomTabNavigationConfig = {| - +tabBar?: BottomTabBarProps => React$Node, - +safeAreaInsets?: $Partial, - +detachInactiveScreens?: boolean, - |}; - - declare export type ExtraBottomTabNavigatorProps = {| - ...$Exact, - ...TabRouterOptions, - ...BottomTabNavigationConfig, - |}; - - declare export type BottomTabNavigatorProps< - NavHelpers: BottomTabNavigationHelpers<> = BottomTabNavigationHelpers<>, - > = $Exact, - RouteProp<>, - NavHelpers, - ExtraBottomTabNavigatorProps, - >>; - - /** - * Material bottom tab options - */ - - declare export type MaterialBottomTabOptions = $Partial<{| - +title: string, - +tabBarColor: string, - +tabBarLabel: string, - +tabBarIcon: - | string - | ({| +focused: boolean, +color: string |}) => React$Node, - +tabBarBadge: boolean | number | string, - +tabBarAccessibilityLabel: string, - +tabBarTestID: string, - |}>; - - /** - * Material bottom tab navigation prop - */ - - declare export type MaterialBottomTabNavigationEventMap = {| - ...EventMapCore, - +tabPress: {| +data: void, +canPreventDefault: true |}, - |}; - - declare export type MaterialBottomTabNavigationHelpers< - ParamList: ParamListBase = ParamListBase, - EventMap: EventMapBase = MaterialBottomTabNavigationEventMap, - > = { - ...$Exact>, - ...TabExtraNavigationHelpers, - ... - }; - - declare export type MaterialBottomTabNavigationProp< - ParamList: ParamListBase = ParamListBase, - RouteName: $Keys = $Keys, - Options: {...} = MaterialBottomTabOptions, - EventMap: EventMapBase = MaterialBottomTabNavigationEventMap, - > = {| - ...$Exact>, - ...TabExtraNavigationHelpers, - |}; - - /** - * Miscellaneous material bottom tab exports - */ - - declare export type PaperFont = {| - +fontFamily: string, - +fontWeight?: - | 'normal' - | 'bold' - | '100' - | '200' - | '300' - | '400' - | '500' - | '600' - | '700' - | '800' - | '900', - |}; - - declare export type PaperFonts = {| - +regular: PaperFont, - +medium: PaperFont, - +light: PaperFont, - +thin: PaperFont, - |}; - - declare export type PaperTheme = {| - +dark: boolean, - +mode?: 'adaptive' | 'exact', - +roundness: number, - +colors: {| - +primary: string, - +background: string, - +surface: string, - +accent: string, - +error: string, - +text: string, - +onSurface: string, - +onBackground: string, - +disabled: string, - +placeholder: string, - +backdrop: string, - +notification: string, - |}, - +fonts: PaperFonts, - +animation: {| - +scale: number, - |}, - |}; - - declare export type PaperRoute = {| - +key: string, - +title?: string, - +icon?: any, - +badge?: string | number | boolean, - +color?: string, - +accessibilityLabel?: string, - +testID?: string, - |}; - - declare export type PaperTouchableProps = {| - ...TouchableWithoutFeedbackProps, - +key: string, - +route: PaperRoute, - +children: React$Node, - +borderless?: boolean, - +centered?: boolean, - +rippleColor?: string, - |}; - - declare export type MaterialBottomTabNavigationConfig = {| - +shifting?: boolean, - +labeled?: boolean, - +renderTouchable?: PaperTouchableProps => React$Node, - +activeColor?: string, - +inactiveColor?: string, - +sceneAnimationEnabled?: boolean, - +keyboardHidesNavigationBar?: boolean, - +barStyle?: ViewStyleProp, - +style?: ViewStyleProp, - +theme?: PaperTheme, - |}; - - declare export type ExtraMaterialBottomTabNavigatorProps = {| - ...$Exact, - ...TabRouterOptions, - ...MaterialBottomTabNavigationConfig, - |}; - - declare export type MaterialBottomTabNavigatorProps< - NavHelpers: MaterialBottomTabNavigationHelpers<> = - MaterialBottomTabNavigationHelpers<>, - > = $Exact, - RouteProp<>, - NavHelpers, - ExtraMaterialBottomTabNavigatorProps, - >>; - - /** - * Material top tab options - */ - - declare export type MaterialTopTabOptions = $Partial<{| - +title: string, - +tabBarLabel: - | string - | ({| +focused: boolean, +color: string |}) => React$Node, - +tabBarIcon: ({| +focused: boolean, +color: string |}) => React$Node, - +tabBarAccessibilityLabel: string, - +tabBarTestID: string, - +tabBarActiveTintColor: string, - +tabBarInactiveTintColor: string, - +tabBarPressColor: string, - +tabBarPressOpacity: number, - +tabBarShowLabel: boolean, - +tabBarShowIcon: boolean, - +tabBarAllowFontScaling: boolean, - +tabBarBounces: boolean, - +tabBarScrollEnabled: boolean, - +tabBarIconStyle: ViewStyleProp, - +tabBarLabelStyle: TextStyleProp, - +tabBarItemStyle: ViewStyleProp, - +tabBarIndicatorStyle: ViewStyleProp, - +tabBarIndicatorContainerStyle: ViewStyleProp, - +tabBarContentContainerStyle: ViewStyleProp, - +tabBarStyle: ViewStyleProp, - +tabBarBadge: () => React$Node, - +tabBarIndicator: MaterialTopTabBarIndicatorProps => React$Node, - +lazy: boolean, - +lazyPlaceholder: ({| +route: Route<> |}) => React$Node, - |}>; - - /** - * Material top tab navigation prop - */ - - declare export type MaterialTopTabNavigationEventMap = {| - ...EventMapCore, - +tabPress: {| +data: void, +canPreventDefault: true |}, - +tabLongPress: {| +data: void, +canPreventDefault: false |}, - +swipeStart: {| +data: void, +canPreventDefault: false |}, - +swipeEnd: {| +data: void, +canPreventDefault: false |}, - |}; - - declare export type MaterialTopTabNavigationHelpers< - ParamList: ParamListBase = ParamListBase, - EventMap: EventMapBase = MaterialTopTabNavigationEventMap, - > = { - ...$Exact>, - ...TabExtraNavigationHelpers, - ... - }; - - declare export type MaterialTopTabNavigationProp< - ParamList: ParamListBase = ParamListBase, - RouteName: $Keys = $Keys, - Options: {...} = MaterialTopTabOptions, - EventMap: EventMapBase = MaterialTopTabNavigationEventMap, - > = {| - ...$Exact>, - ...TabExtraNavigationHelpers, - |}; - - /** - * Miscellaneous material top tab exports - */ - - declare type MaterialTopTabPagerCommonProps = {| - +keyboardDismissMode: 'none' | 'on-drag' | 'auto', - +swipeEnabled: boolean, - +swipeVelocityImpact?: number, - +springVelocityScale?: number, - +springConfig: $Partial<{| - +damping: number, - +mass: number, - +stiffness: number, - +restSpeedThreshold: number, - +restDisplacementThreshold: number, - |}>, - +timingConfig: $Partial<{| - +duration: number, - |}>, - |}; - - declare export type MaterialTopTabPagerProps = {| - ...MaterialTopTabPagerCommonProps, - +onSwipeStart?: () => void, - +onSwipeEnd?: () => void, - +onIndexChange: (index: number) => void, - +navigationState: TabNavigationState, - +layout: {| +width: number, +height: number |}, - +removeClippedSubviews: boolean, - +children: ({| - +addListener: (type: 'enter', listener: number => void) => void, - +removeListener: (type: 'enter', listener: number => void) => void, - +position: any, // Reanimated.Node - +render: React$Node => React$Node, - +jumpTo: string => void, - |}) => React$Node, - +gestureHandlerProps: PanGestureHandlerProps, - |}; - - declare export type MaterialTopTabBarIndicatorProps = {| - +state: TabNavigationState, - +width: string, - +style?: ViewStyleProp, - +getTabWidth: number => number, - |}; - - declare export type MaterialTopTabDescriptor = Descriptor< - MaterialBottomTabNavigationHelpers<>, - MaterialBottomTabOptions, - >; - - declare type MaterialTopTabNavigationBuilderResult = {| - +state: TabNavigationState, - +navigation: MaterialTopTabNavigationHelpers<>, - +descriptors: {| +[key: string]: MaterialTopTabDescriptor |}, - |}; - - declare export type MaterialTopTabBarProps = {| - ...MaterialTopTabNavigationBuilderResult, - +layout: {| +width: number, +height: number |}, - +position: any, // Reanimated.Node - +jumpTo: string => void, - |}; - - declare export type MaterialTopTabNavigationConfig = {| - ...$Partial, - +position?: any, // Reanimated.Value - +tabBarPosition?: 'top' | 'bottom', - +initialLayout?: $Partial<{| +width: number, +height: number |}>, - +lazyPreloadDistance?: number, - +removeClippedSubviews?: boolean, - +sceneContainerStyle?: ViewStyleProp, - +style?: ViewStyleProp, - +gestureHandlerProps?: PanGestureHandlerProps, - +pager?: MaterialTopTabPagerProps => React$Node, - +tabBar?: MaterialTopTabBarProps => React$Node, - |}; - - declare export type ExtraMaterialTopTabNavigatorProps = {| - ...$Exact, - ...TabRouterOptions, - ...MaterialTopTabNavigationConfig, - |}; - - declare export type MaterialTopTabNavigatorProps< - NavHelpers: MaterialTopTabNavigationHelpers<> = - MaterialTopTabNavigationHelpers<>, - > = $Exact, - RouteProp<>, - NavHelpers, - ExtraMaterialTopTabNavigatorProps, - >>; - - /** - * Drawer options - */ - - declare export type DrawerOptions = $Partial<{| - +title: string, - +lazy: boolean, - +drawerLabel: - | string - | ({| +color: string, +focused: boolean |}) => React$Node, - +drawerIcon: ({| - +color: string, - +size: number, - +focused: boolean, - |}) => React$Node, - +drawerActiveTintColor: string, - +drawerActiveBackgroundColor: string, - +drawerInactiveTintColor: string, - +drawerInactiveBackgroundColor: string, - +drawerItemStyle: ViewStyleProp, - +drawerLabelStyle: TextStyleProp, - +drawerContentContainerStyle: ViewStyleProp, - +drawerContentStyle: ViewStyleProp, - +drawerStyle: ViewStyleProp, - +drawerPosition: 'left' | 'right', - +drawerType: 'front' | 'back' | 'slide' | 'permanent', - +drawerHideStatusBarOnOpen: boolean, - +drawerStatusBarAnimation: 'slide' | 'none' | 'fade', - +overlayColor: string, - +sceneContainerStyle: ViewStyleProp, - +gestureHandlerProps: PanGestureHandlerProps, - +swipeEnabled: boolean, - +swipeEdgeWidth: number, - +swipeMinDistance: number, - +keyboardDismissMode: 'on-drag' | 'none', - +unmountOnBlur: boolean, - ...HeaderCommonOptions< - HeaderProps, DrawerOptions>, - HeaderLeftButtonProps, - HeaderButtonProps, - >, - |}>; - - /** - * Drawer navigation prop - */ - - declare export type DrawerNavigationEventMap = - EventMapCore; - - declare type DrawerExtraNavigationHelpers< - ParamList: ParamListBase = ParamListBase, - > = {| - +jumpTo: SimpleNavigate, - +openDrawer: () => void, - +closeDrawer: () => void, - +toggleDrawer: () => void, - |}; - - declare export type DrawerNavigationHelpers< - ParamList: ParamListBase = ParamListBase, - EventMap: EventMapBase = DrawerNavigationEventMap, - > = { - ...$Exact>, - ...DrawerExtraNavigationHelpers, - ... - }; - - declare export type DrawerNavigationProp< - ParamList: ParamListBase = ParamListBase, - RouteName: $Keys = $Keys, - Options: {...} = DrawerOptions, - EventMap: EventMapBase = DrawerNavigationEventMap, - > = {| - ...$Exact>, - ...DrawerExtraNavigationHelpers, - |}; - - /** - * Miscellaneous drawer exports - */ - - declare export type DrawerDescriptor = Descriptor< - DrawerNavigationHelpers<>, - DrawerOptions, - >; - - declare type DrawerNavigationBuilderResult = {| - +state: DrawerNavigationState, - +navigation: DrawerNavigationHelpers<>, - +descriptors: {| +[key: string]: DrawerDescriptor |}, - |}; - - declare export type DrawerNavigationConfig = {| - +drawerContent?: DrawerNavigationBuilderResult => React$Node, - +detachInactiveScreens?: boolean, - +useLegacyImplementation?: boolean, - |}; - - declare export type ExtraDrawerNavigatorProps = {| - ...$Exact, - ...DrawerRouterOptions, - ...DrawerNavigationConfig, - |}; - - declare export type DrawerNavigatorProps< - NavHelpers: DrawerNavigationHelpers<> = DrawerNavigationHelpers<>, - > = $Exact, - RouteProp<>, - NavHelpers, - ExtraDrawerNavigatorProps, - >>; - - /** - * BaseNavigationContainer - */ - - declare export type BaseNavigationContainerProps = {| - +children: React$Node, - +initialState?: PossiblyStaleNavigationState, - +onStateChange?: (state: ?PossiblyStaleNavigationState) => void, - +independent?: boolean, - |}; - - declare export type ContainerEventMap = {| - ...GlobalEventMap, - +options: {| - +data: {| +options: { +[key: string]: mixed, ... } |}, - +canPreventDefault: false, - |}, - +__unsafe_action__: {| - +data: {| - +action: GenericNavigationAction, - +noop: boolean, - |}, - +canPreventDefault: false, - |}, - |}; - - declare export type BaseNavigationContainerInterface = {| - ...$Exact>, - +resetRoot: (state?: PossiblyStaleNavigationState) => void, - +getRootState: () => NavigationState, - +getCurrentRoute: () => RouteProp<> | void, - +getCurrentOptions: () => Object | void, - +isReady: () => boolean, - |}; - - declare type BaseNavigationContainerInterfaceRef = {| - ...BaseNavigationContainerInterface, - +current: BaseNavigationContainerInterface | null, - |}; - - /** - * State utils - */ - - declare export type GetStateFromPath = ( - path: string, - options?: LinkingConfig, - ) => PossiblyStaleNavigationState; - - declare export type GetPathFromState = ( - state?: ?PossiblyStaleNavigationState, - options?: LinkingConfig, - ) => string; - - declare export type GetFocusedRouteNameFromRoute = - PossiblyStaleRoute => ?string; - - /** - * Linking - */ - - declare export type ScreenLinkingConfig = {| - +path?: string, - +exact?: boolean, - +parse?: {| +[param: string]: string => mixed |}, - +stringify?: {| +[param: string]: mixed => string |}, - +screens?: ScreenLinkingConfigMap, - +initialRouteName?: string, - |}; - - declare export type ScreenLinkingConfigMap = {| - +[routeName: string]: string | ScreenLinkingConfig, - |}; - - declare export type LinkingConfig = {| - +initialRouteName?: string, - +screens: ScreenLinkingConfigMap, - |}; - - declare export type LinkingOptions = {| - +enabled?: boolean, - +prefixes: $ReadOnlyArray, - +config?: LinkingConfig, - +getStateFromPath?: GetStateFromPath, - +getPathFromState?: GetPathFromState, - |}; - - /** - * NavigationContainer - */ - - declare export type Theme = {| - +dark: boolean, - +colors: {| - +primary: string, - +background: string, - +card: string, - +text: string, - +border: string, - |}, - |}; - - declare export type NavigationContainerType = React$AbstractComponent< - {| - ...BaseNavigationContainerProps, - +theme?: Theme, - +linking?: LinkingOptions, - +fallback?: React$Node, - +onReady?: () => mixed, - |}, - BaseNavigationContainerInterface, - >; - - //--------------------------------------------------------------------------- - // SECTION 2: EXPORTED MODULE - // This section defines the module exports and contains exported types that - // are not present in any other React Navigation libdef. - //--------------------------------------------------------------------------- - declare export function useReduxDevToolsExtension( container: { +current: ?React$ElementRef, ... }, ): void; } 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 index 241dc0475..6ce28d245 100644 --- a/native/flow-typed/npm/@react-navigation/drawer_v6.x.x.js +++ b/native/flow-typed/npm/@react-navigation/drawer_v6.x.x.js @@ -1,2350 +1,105 @@ // flow-typed signature: f4fe081e4162c0c8065878c02a1d3687 // flow-typed version: dc2d6a22c7/@react-navigation/drawer_v5.x.x/flow_>=v0.104.x declare module '@react-navigation/drawer' { - //--------------------------------------------------------------------------- - // SECTION 1: IDENTICAL TYPE DEFINITIONS - // This section is identical across all React Navigation libdefs and contains - // shared definitions. We wish we could make it DRY and import from a shared - // definition, but that isn't yet possible. - //--------------------------------------------------------------------------- - - /** - * We start with some definitions that we have copy-pasted from React Native - * source files. - */ - - // This is a bastardization of the true StyleObj type located in - // react-native/Libraries/StyleSheet/StyleSheetTypes. We unfortunately can't - // import that here, and it's too lengthy (and consequently too brittle) to - // copy-paste here either. - declare type StyleObj = - | null - | void - | number - | false - | '' - | $ReadOnlyArray - | { [name: string]: any, ... }; - declare type ViewStyleProp = StyleObj; - declare type TextStyleProp = StyleObj; - declare type AnimatedViewStyleProp = StyleObj; - declare type AnimatedTextStyleProp = StyleObj; - - // Vaguely copied from - // react-native/Libraries/Animated/src/animations/Animation.js - declare type EndResult = { finished: boolean, ... }; - declare type EndCallback = (result: EndResult) => void; - declare interface Animation { - start( - fromValue: number, - onUpdate: (value: number) => void, - onEnd: ?EndCallback, - previousAnimation: ?Animation, - animatedValue: AnimatedValue, - ): void; - stop(): void; - } - declare type AnimationConfig = { - isInteraction?: boolean, - useNativeDriver: boolean, - onComplete?: ?EndCallback, - iterations?: number, - ... - }; - - // Vaguely copied from - // react-native/Libraries/Animated/src/nodes/AnimatedTracking.js - declare interface AnimatedTracking { - constructor( - value: AnimatedValue, - parent: any, - animationClass: any, - animationConfig: Object, - callback?: ?EndCallback, - ): void; - update(): void; - } - - // Vaguely copied from - // react-native/Libraries/Animated/src/nodes/AnimatedValue.js - declare type ValueListenerCallback = (state: { value: number, ... }) => void; - declare interface AnimatedValue { - constructor(value: number): void; - setValue(value: number): void; - setOffset(offset: number): void; - flattenOffset(): void; - extractOffset(): void; - addListener(callback: ValueListenerCallback): string; - removeListener(id: string): void; - removeAllListeners(): void; - stopAnimation(callback?: ?(value: number) => void): void; - resetAnimation(callback?: ?(value: number) => void): void; - interpolate(config: InterpolationConfigType): AnimatedInterpolation; - animate(animation: Animation, callback: ?EndCallback): void; - stopTracking(): void; - track(tracking: AnimatedTracking): void; - } - - // Copied from - // react-native/Libraries/Animated/src/animations/TimingAnimation.js - declare type TimingAnimationConfigSingle = AnimationConfig & { - toValue: number | AnimatedValue, - easing?: (value: number) => number, - duration?: number, - delay?: number, - ... - }; - - // Copied from - // react-native/Libraries/Animated/src/animations/SpringAnimation.js - declare type SpringAnimationConfigSingle = AnimationConfig & { - toValue: number | AnimatedValue, - overshootClamping?: boolean, - restDisplacementThreshold?: number, - restSpeedThreshold?: number, - velocity?: number, - bounciness?: number, - speed?: number, - tension?: number, - friction?: number, - stiffness?: number, - damping?: number, - mass?: number, - delay?: number, - ... - }; - - // Copied from react-native/Libraries/Types/CoreEventTypes.js - declare type SyntheticEvent = $ReadOnly<{| - bubbles: ?boolean, - cancelable: ?boolean, - currentTarget: number, - defaultPrevented: ?boolean, - dispatchConfig: $ReadOnly<{| - registrationName: string, - |}>, - eventPhase: ?number, - preventDefault: () => void, - isDefaultPrevented: () => boolean, - stopPropagation: () => void, - isPropagationStopped: () => boolean, - isTrusted: ?boolean, - nativeEvent: T, - persist: () => void, - target: ?number, - timeStamp: number, - type: ?string, - |}>; - declare type Layout = $ReadOnly<{| - x: number, - y: number, - width: number, - height: number, - |}>; - declare type LayoutEvent = SyntheticEvent< - $ReadOnly<{| - layout: Layout, - |}>, - >; - declare type BlurEvent = SyntheticEvent< - $ReadOnly<{| - target: number, - |}>, - >; - declare type FocusEvent = SyntheticEvent< - $ReadOnly<{| - target: number, - |}>, - >; - declare type ResponderSyntheticEvent = $ReadOnly<{| - ...SyntheticEvent, - touchHistory: $ReadOnly<{| - indexOfSingleActiveTouch: number, - mostRecentTimeStamp: number, - numberActiveTouches: number, - touchBank: $ReadOnlyArray< - $ReadOnly<{| - touchActive: boolean, - startPageX: number, - startPageY: number, - startTimeStamp: number, - currentPageX: number, - currentPageY: number, - currentTimeStamp: number, - previousPageX: number, - previousPageY: number, - previousTimeStamp: number, - |}>, - >, - |}>, - |}>; - declare type PressEvent = ResponderSyntheticEvent< - $ReadOnly<{| - changedTouches: $ReadOnlyArray<$PropertyType>, - force: number, - identifier: number, - locationX: number, - locationY: number, - pageX: number, - pageY: number, - target: ?number, - timestamp: number, - touches: $ReadOnlyArray<$PropertyType>, - |}>, - >; - - // Vaguely copied from - // react-native/Libraries/Animated/src/nodes/AnimatedInterpolation.js - declare type ExtrapolateType = 'extend' | 'identity' | 'clamp'; - declare type InterpolationConfigType = { - inputRange: Array, - outputRange: Array | Array, - easing?: (input: number) => number, - extrapolate?: ExtrapolateType, - extrapolateLeft?: ExtrapolateType, - extrapolateRight?: ExtrapolateType, - ... - }; - declare interface AnimatedInterpolation { - interpolate(config: InterpolationConfigType): AnimatedInterpolation; - } - - // Copied from react-native/Libraries/Components/View/ViewAccessibility.js - declare type AccessibilityRole = - | 'none' - | 'button' - | 'link' - | 'search' - | 'image' - | 'keyboardkey' - | 'text' - | 'adjustable' - | 'imagebutton' - | 'header' - | 'summary' - | 'alert' - | 'checkbox' - | 'combobox' - | 'menu' - | 'menubar' - | 'menuitem' - | 'progressbar' - | 'radio' - | 'radiogroup' - | 'scrollbar' - | 'spinbutton' - | 'switch' - | 'tab' - | 'tablist' - | 'timer' - | 'toolbar'; - declare type AccessibilityActionInfo = $ReadOnly<{ - name: string, - label?: string, - ... - }>; - declare type AccessibilityActionEvent = SyntheticEvent< - $ReadOnly<{actionName: string, ...}>, - >; - declare type AccessibilityState = { - disabled?: boolean, - selected?: boolean, - checked?: ?boolean | 'mixed', - busy?: boolean, - expanded?: boolean, - ... - }; - declare type AccessibilityValue = $ReadOnly<{| - min?: number, - max?: number, - now?: number, - text?: string, - |}>; - - // Copied from - // react-native/Libraries/Components/Touchable/TouchableWithoutFeedback.js - declare type Stringish = string; - declare type EdgeInsetsProp = $ReadOnly<$Partial>; - declare type TouchableWithoutFeedbackProps = $ReadOnly<{| - accessibilityActions?: ?$ReadOnlyArray, - accessibilityElementsHidden?: ?boolean, - accessibilityHint?: ?Stringish, - accessibilityIgnoresInvertColors?: ?boolean, - accessibilityLabel?: ?Stringish, - accessibilityLiveRegion?: ?('none' | 'polite' | 'assertive'), - accessibilityRole?: ?AccessibilityRole, - accessibilityState?: ?AccessibilityState, - accessibilityValue?: ?AccessibilityValue, - accessibilityViewIsModal?: ?boolean, - accessible?: ?boolean, - children?: ?React$Node, - delayLongPress?: ?number, - delayPressIn?: ?number, - delayPressOut?: ?number, - disabled?: ?boolean, - focusable?: ?boolean, - hitSlop?: ?EdgeInsetsProp, - importantForAccessibility?: ?('auto' | 'yes' | 'no' | 'no-hide-descendants'), - nativeID?: ?string, - onAccessibilityAction?: ?(event: AccessibilityActionEvent) => mixed, - onBlur?: ?(event: BlurEvent) => mixed, - onFocus?: ?(event: FocusEvent) => mixed, - onLayout?: ?(event: LayoutEvent) => mixed, - onLongPress?: ?(event: PressEvent) => mixed, - onPress?: ?(event: PressEvent) => mixed, - onPressIn?: ?(event: PressEvent) => mixed, - onPressOut?: ?(event: PressEvent) => mixed, - pressRetentionOffset?: ?EdgeInsetsProp, - rejectResponderTermination?: ?boolean, - testID?: ?string, - touchSoundDisabled?: ?boolean, - |}>; - - // Copied from react-native/Libraries/Image/ImageSource.js - declare type ImageURISource = $ReadOnly<{ - uri?: ?string, - bundle?: ?string, - method?: ?string, - headers?: ?Object, - body?: ?string, - cache?: ?('default' | 'reload' | 'force-cache' | 'only-if-cached'), - width?: ?number, - height?: ?number, - scale?: ?number, - ... - }>; - - /** - * The following is copied from react-native-gesture-handler's libdef - */ - - declare type StateUndetermined = 0; - declare type StateFailed = 1; - declare type StateBegan = 2; - declare type StateCancelled = 3; - declare type StateActive = 4; - declare type StateEnd = 5; - - declare type GestureHandlerState = - | StateUndetermined - | StateFailed - | StateBegan - | StateCancelled - | StateActive - | StateEnd; - - declare type $SyntheticEvent = { - +nativeEvent: $ReadOnly<$Exact>, - ... - }; - - declare type $Event = $SyntheticEvent<{ - handlerTag: number, - numberOfPointers: number, - state: GestureHandlerState, - oldState: GestureHandlerState, - ...$Exact, - ... - }>; - - declare type $EventHandlers = {| - onGestureEvent?: ($Event) => mixed, - onHandlerStateChange?: ($Event) => mixed, - onBegan?: ($Event) => mixed, - onFailed?: ($Event) => mixed, - onCancelled?: ($Event) => mixed, - onActivated?: ($Event) => mixed, - onEnded?: ($Event) => mixed, - |}; - - declare type HitSlop = - | number - | {| - left?: number, - top?: number, - right?: number, - bottom?: number, - vertical?: number, - horizontal?: number, - width?: number, - height?: number, - |} - | {| - width: number, - left: number, - |} - | {| - width: number, - right: number, - |} - | {| - height: number, - top: number, - |} - | {| - height: number, - bottom: number, - |}; - - declare type $GestureHandlerProps< - AdditionalProps: {...}, - ExtraEventsProps: {...} - > = $ReadOnly<{| - ...$Exact, - ...$EventHandlers, - id?: string, - enabled?: boolean, - waitFor?: React$Ref | Array>, - simultaneousHandlers?: React$Ref | Array>, - shouldCancelWhenOutside?: boolean, - minPointers?: number, - hitSlop?: HitSlop, - children?: React$Node, - |}>; - - declare type PanGestureHandlerProps = $GestureHandlerProps< - { - activeOffsetY?: number | [number, number], - activeOffsetX?: number | [number, number], - failOffsetY?: number | [number, number], - failOffsetX?: number | [number, number], - minDist?: number, - minVelocity?: number, - minVelocityX?: number, - minVelocityY?: number, - minPointers?: number, - maxPointers?: number, - avgTouches?: boolean, - ... - }, - { - x: number, - y: number, - absoluteX: number, - absoluteY: number, - translationX: number, - translationY: number, - velocityX: number, - velocityY: number, - ... - } - >; - - /** - * MAGIC - */ - - declare type $If = $Call< - ((true, Then, Else) => Then) & ((false, Then, Else) => Else), - Test, - Then, - Else, - >; - declare type $IsA = $Call< - (Y => true) & (mixed => false), - X, - >; - declare type $IsUndefined = $IsA; - - declare type $Partial = $ReadOnly<$Rest>; - - // If { ...T, ... } counts as a T, then we're inexact - declare type $IsExact = $Call< - (T => false) & (mixed => true), - { ...T, ... }, - >; - - /** - * Actions, state, etc. - */ - - declare export type ScreenParams = { +[key: string]: mixed, ... }; - - declare export type BackAction = {| - +type: 'GO_BACK', - +source?: string, - +target?: string, - |}; - declare export type NavigateAction = {| - +type: 'NAVIGATE', - +payload: - | {| +key: string, +params?: ScreenParams |} - | {| +name: string, +key?: string, +params?: ScreenParams |}, - +source?: string, - +target?: string, - |}; - declare export type ResetAction = {| - +type: 'RESET', - +payload: StaleNavigationState, - +source?: string, - +target?: string, - |}; - declare export type SetParamsAction = {| - +type: 'SET_PARAMS', - +payload: {| +params?: ScreenParams |}, - +source?: string, - +target?: string, - |}; - declare export type CommonAction = - | BackAction - | NavigateAction - | ResetAction - | SetParamsAction; - - declare type NavigateActionCreator = {| - (routeName: string, params?: ScreenParams): NavigateAction, - ( - | {| +key: string, +params?: ScreenParams |} - | {| +name: string, +key?: string, +params?: ScreenParams |}, - ): NavigateAction, - |}; - declare export type CommonActionsType = {| - +navigate: NavigateActionCreator, - +goBack: () => BackAction, - +reset: (state: PossiblyStaleNavigationState) => ResetAction, - +setParams: (params: ScreenParams) => SetParamsAction, - |}; - - declare export type GenericNavigationAction = {| - +type: string, - +payload?: { +[key: string]: mixed, ... }, - +source?: string, - +target?: string, - |}; - - declare export type LeafRoute = {| - +key: string, - +name: RouteName, - +params?: ScreenParams, - |}; - declare export type StateRoute = {| - ...LeafRoute, - +state: NavigationState | StaleNavigationState, - |}; - declare export type Route = - | LeafRoute - | StateRoute; - - declare export type NavigationState = {| - +key: string, - +index: number, - +routeNames: $ReadOnlyArray, - +history?: $ReadOnlyArray, - +routes: $ReadOnlyArray>, - +type: string, - +stale: false, - |}; - - declare export type StaleLeafRoute = {| - +key?: string, - +name: RouteName, - +params?: ScreenParams, - |}; - declare export type StaleStateRoute = {| - ...StaleLeafRoute, - +state: StaleNavigationState, - |}; - declare export type StaleRoute = - | StaleLeafRoute - | StaleStateRoute; - declare export type StaleNavigationState = {| - // It's possible to pass React Nav a StaleNavigationState with an undefined - // index, but React Nav will always return one with the index set. This is - // the same as for the type property below, but in the case of index we tend - // to rely on it being set more... - +index: number, - +history?: $ReadOnlyArray, - +routes: $ReadOnlyArray>, - +type?: string, - +stale?: true, - |}; - - declare export type PossiblyStaleNavigationState = - | NavigationState - | StaleNavigationState; - declare export type PossiblyStaleRoute = - | Route - | StaleRoute; - - /** - * Routers - */ - - declare type ActionCreators< - State: NavigationState, - Action: GenericNavigationAction, - > = { - +[key: string]: (...args: any) => (Action | State => Action), - ... - }; - - declare export type DefaultRouterOptions = { - +initialRouteName?: string, - ... - }; - - declare export type RouterFactory< - State: NavigationState, - Action: GenericNavigationAction, - RouterOptions: DefaultRouterOptions, - > = (options: RouterOptions) => Router; - - declare export type ParamListBase = { +[key: string]: ?ScreenParams, ... }; - - declare export type RouterConfigOptions = {| - +routeNames: $ReadOnlyArray, - +routeParamList: ParamListBase, - |}; - - declare export type Router< - State: NavigationState, - Action: GenericNavigationAction, - > = {| - +type: $PropertyType, - +getInitialState: (options: RouterConfigOptions) => State, - +getRehydratedState: ( - partialState: PossiblyStaleNavigationState, - options: RouterConfigOptions, - ) => State, - +getStateForRouteNamesChange: ( - state: State, - options: RouterConfigOptions, - ) => State, - +getStateForRouteFocus: (state: State, key: string) => State, - +getStateForAction: ( - state: State, - action: Action, - options: RouterConfigOptions, - ) => ?PossiblyStaleNavigationState; - +shouldActionChangeFocus: (action: GenericNavigationAction) => boolean, - +actionCreators?: ActionCreators, - |}; - - /** - * Stack actions and router - */ - - declare export type StackNavigationState = {| - ...NavigationState, - +type: 'stack', - |}; - - declare export type ReplaceAction = {| - +type: 'REPLACE', - +payload: {| +name: string, +key?: ?string, +params?: ScreenParams |}, - +source?: string, - +target?: string, - |}; - declare export type PushAction = {| - +type: 'PUSH', - +payload: {| +name: string, +key?: ?string, +params?: ScreenParams |}, - +source?: string, - +target?: string, - |}; - declare export type PopAction = {| - +type: 'POP', - +payload: {| +count: number |}, - +source?: string, - +target?: string, - |}; - declare export type PopToTopAction = {| - +type: 'POP_TO_TOP', - +source?: string, - +target?: string, - |}; - declare export type StackAction = - | CommonAction - | ReplaceAction - | PushAction - | PopAction - | PopToTopAction; - - declare export type StackActionsType = {| - +replace: (routeName: string, params?: ScreenParams) => ReplaceAction, - +push: (routeName: string, params?: ScreenParams) => PushAction, - +pop: (count?: number) => PopAction, - +popToTop: () => PopToTopAction, - |}; - - declare export type StackRouterOptions = $Exact; - - /** - * Tab actions and router - */ - - declare export type TabNavigationState = {| - ...NavigationState, - +type: 'tab', - +history: $ReadOnlyArray<{| type: 'route', key: string |}>, - |}; - - declare export type JumpToAction = {| - +type: 'JUMP_TO', - +payload: {| +name: string, +params?: ScreenParams |}, - +source?: string, - +target?: string, - |}; - declare export type TabAction = - | CommonAction - | JumpToAction; - - declare export type TabActionsType = {| - +jumpTo: string => JumpToAction, - |}; - - declare export type TabRouterOptions = {| - ...$Exact, - +backBehavior?: 'initialRoute' | 'order' | 'history' | 'none', - |}; - - /** - * Drawer actions and router - */ - - declare type DrawerHistoryEntry = - | {| +type: 'route', +key: string |} - | {| +type: 'drawer' |}; - declare export type DrawerNavigationState = {| - ...NavigationState, - +type: 'drawer', - +history: $ReadOnlyArray, - |}; - - declare export type OpenDrawerAction = {| - +type: 'OPEN_DRAWER', - +source?: string, - +target?: string, - |}; - declare export type CloseDrawerAction = {| - +type: 'CLOSE_DRAWER', - +source?: string, - +target?: string, - |}; - declare export type ToggleDrawerAction = {| - +type: 'TOGGLE_DRAWER', - +source?: string, - +target?: string, - |}; - declare export type DrawerAction = - | TabAction - | OpenDrawerAction - | CloseDrawerAction - | ToggleDrawerAction; - - declare export type DrawerActionsType = {| - ...TabActionsType, - +openDrawer: () => OpenDrawerAction, - +closeDrawer: () => CloseDrawerAction, - +toggleDrawer: () => ToggleDrawerAction, - |}; - - declare export type DrawerRouterOptions = {| - ...TabRouterOptions, - +defaultStatus?: 'open' | 'closed', - |}; - - /** - * Events - */ - - declare export type EventMapBase = { - +[name: string]: {| - +data?: mixed, - +canPreventDefault?: boolean, - |}, - ... - }; - declare type EventPreventDefaultProperties = $If< - Test, - {| +defaultPrevented: boolean, +preventDefault: () => void |}, - {| |}, - >; - declare type EventDataProperties = $If< - $IsUndefined, - {| |}, - {| +data: Data |}, - >; - declare type EventArg< - EventName: string, - CanPreventDefault: ?boolean = false, - Data = void, - > = {| - ...EventPreventDefaultProperties, - ...EventDataProperties, - +type: EventName, - +target?: string, - |}; - declare type GlobalEventMap = {| - +state: {| +data: {| +state: State |}, +canPreventDefault: false |}, - |}; - declare type EventMapCore = {| - ...GlobalEventMap, - +focus: {| +data: void, +canPreventDefault: false |}, - +blur: {| +data: void, +canPreventDefault: false |}, - +beforeRemove: {| - +data: {| +action: GenericNavigationAction |}, - +canPreventDefault: true, - |}, - |}; - declare type EventListenerCallback< - EventName: string, - State: PossiblyStaleNavigationState = NavigationState, - EventMap: EventMapBase = EventMapCore, - > = (e: EventArg< - EventName, - $PropertyType< - $ElementType< - {| ...EventMap, ...EventMapCore |}, - EventName, - >, - 'canPreventDefault', - >, - $PropertyType< - $ElementType< - {| ...EventMap, ...EventMapCore |}, - EventName, - >, - 'data', - >, - >) => mixed; - - /** - * Navigation prop - */ - - declare type PartialWithMergeProperty = $If< - $IsExact, - { ...$Partial, +merge: true }, - { ...$Partial, +merge: true, ... }, - >; - - declare type EitherExactOrPartialWithMergeProperty = - | ParamsType - | PartialWithMergeProperty; - - declare export type SimpleNavigate = - >( - routeName: DestinationRouteName, - params: EitherExactOrPartialWithMergeProperty< - $ElementType, - >, - ) => void; - - declare export type Navigate = - & SimpleNavigate - & >( - route: $If< - $IsUndefined<$ElementType>, - | {| +key: string |} - | {| +name: DestinationRouteName, +key?: string |}, - | {| - +key: string, - +params?: EitherExactOrPartialWithMergeProperty< - $ElementType, - >, - |} - | {| - +name: DestinationRouteName, - +key?: string, - +params?: EitherExactOrPartialWithMergeProperty< - $ElementType, - >, - |}, - >, - ) => void; - - declare type CoreNavigationHelpers< - ParamList: ParamListBase, - State: PossiblyStaleNavigationState = PossiblyStaleNavigationState, - EventMap: EventMapBase = EventMapCore, - > = { - +navigate: Navigate, - +dispatch: ( - action: - | GenericNavigationAction - | (State => GenericNavigationAction), - ) => void, - +reset: PossiblyStaleNavigationState => void, - +goBack: () => void, - +isFocused: () => boolean, - +canGoBack: () => boolean, - +getId: () => string | void, - +getParent: >(id?: string) => ?Parent, - +getState: () => NavigationState, - +addListener: |}, - >>( - name: EventName, - callback: EventListenerCallback, - ) => () => void, - +removeListener: |}, - >>( - name: EventName, - callback: EventListenerCallback, - ) => void, - ... - }; - - declare export type NavigationHelpers< - ParamList: ParamListBase, - State: PossiblyStaleNavigationState = PossiblyStaleNavigationState, - EventMap: EventMapBase = EventMapCore, - > = { - ...$Exact>, - +setParams: (params: ScreenParams) => void, - ... - }; - - declare type SetParamsInput< - ParamList: ParamListBase, - RouteName: $Keys = $Keys, - > = $If< - $IsUndefined<$ElementType>, - empty, - $Partial<$NonMaybeType<$ElementType>>, - >; - - declare export type NavigationProp< - ParamList: ParamListBase, - RouteName: $Keys = $Keys, - State: PossiblyStaleNavigationState = PossiblyStaleNavigationState, - ScreenOptions: {...} = {...}, - EventMap: EventMapBase = EventMapCore, - > = { - ...$Exact>, - +setOptions: (options: $Partial) => void, - +setParams: (params: SetParamsInput) => void, - ... - }; - - /** - * CreateNavigator - */ - - declare export type RouteProp< - ParamList: ParamListBase = ParamListBase, - RouteName: $Keys = $Keys, - > = {| - ...LeafRoute, - +params: $ElementType, - +path?: string, - |}; - - declare type ScreenOptionsProp< - ScreenOptions: {...}, - RouteParam, - NavHelpers, - > = - | ScreenOptions - | ({| +route: RouteParam, +navigation: NavHelpers |}) => ScreenOptions; - declare export type ScreenListeners< - State: NavigationState = NavigationState, - EventMap: EventMapBase = EventMapCore, - > = $ObjMapi< - {| [name: $Keys]: empty |}, - >(K, empty) => EventListenerCallback, - >; - declare type ScreenListenersProp< - ScreenListenersParam: {...}, - RouteParam, - NavHelpers, - > = - | ScreenListenersParam - | ({| +route: RouteParam, +navigation: NavHelpers |}) => ScreenListenersParam; - - declare type BaseScreenProps< - ParamList: ParamListBase, - NavProp, - RouteName: $Keys = $Keys, - State: NavigationState = NavigationState, - ScreenOptions: {...} = {...}, - EventMap: EventMapBase = EventMapCore, - > = {| - +name: RouteName, - +options?: ScreenOptionsProp< - ScreenOptions, - RouteProp, - NavProp, - >, - +listeners?: ScreenListenersProp< - ScreenListeners, - RouteProp, - NavProp, - >, - +initialParams?: $Partial<$ElementType>, - +getId?: ({ - +params: $ElementType, - }) => string | void, - +navigationKey?: string, - |}; - - declare export type ScreenProps< - ParamList: ParamListBase, - NavProp, - RouteName: $Keys = $Keys, - State: NavigationState = NavigationState, - ScreenOptions: {...} = {...}, - EventMap: EventMapBase = EventMapCore, - > = - | {| - ...BaseScreenProps< - ParamList, - NavProp, - RouteName, - State, - ScreenOptions, - EventMap, - >, - +component: React$ComponentType<{| - +route: RouteProp, - +navigation: NavProp, - |}>, - |} - | {| - ...BaseScreenProps< - ParamList, - NavProp, - RouteName, - State, - ScreenOptions, - EventMap, - >, - +getComponent: () => React$ComponentType<{| - +route: RouteProp, - +navigation: NavProp, - |}>, - |} - | {| - ...BaseScreenProps< - ParamList, - NavProp, - RouteName, - State, - ScreenOptions, - EventMap, - >, - +children: ({| - +route: RouteProp, - +navigation: NavProp, - |}) => React$Node, - |}; - - declare export type ScreenComponent< - GlobalParamList: ParamListBase, - ParamList: ParamListBase, - State: NavigationState = NavigationState, - ScreenOptions: {...} = {...}, - EventMap: EventMapBase = EventMapCore, - > = < - RouteName: $Keys, - NavProp: NavigationProp< - GlobalParamList, - RouteName, - State, - ScreenOptions, - EventMap, - >, - >(props: ScreenProps< - ParamList, - NavProp, - RouteName, - State, - ScreenOptions, - EventMap, - >) => React$Node; - - declare type ScreenOptionsProps< - ScreenOptions: {...}, - RouteParam, - NavHelpers, - > = {| - +screenOptions?: ScreenOptionsProp, - |}; - declare type ScreenListenersProps< - ScreenListenersParam: {...}, - RouteParam, - NavHelpers, - > = {| - +screenListeners?: ScreenListenersProp< - ScreenListenersParam, - RouteParam, - NavHelpers, - >, - |}; - declare export type ExtraNavigatorPropsBase = { - ...$Exact, - +id?: string, - +children?: React$Node, - ... - }; - declare export type NavigatorProps< - ScreenOptions: {...}, - ScreenListenersParam, - RouteParam, - NavHelpers, - ExtraNavigatorProps: ExtraNavigatorPropsBase, - > = { - ...$Exact, - ...ScreenOptionsProps, - ...ScreenListenersProps, - +defaultScreenOptions?: - | ScreenOptions - | ({| - +route: RouteParam, - +navigation: NavHelpers, - +options: ScreenOptions, - |}) => ScreenOptions, - ... - }; - declare export type NavigatorPropsBase< - ScreenOptions: {...}, - ScreenListenersParam: {...}, - NavHelpers, - > = NavigatorProps< - ScreenOptions, - ScreenListenersParam, - RouteProp<>, - NavHelpers, - ExtraNavigatorPropsBase, - >; - - declare export type CreateNavigator< - State: NavigationState, - ScreenOptions: {...}, - EventMap: EventMapBase, - ExtraNavigatorProps: ExtraNavigatorPropsBase, - > = < - GlobalParamList: ParamListBase, - ParamList: ParamListBase, - NavHelpers: NavigationHelpers< - GlobalParamList, - State, - EventMap, - >, - >() => {| - +Screen: ScreenComponent< - GlobalParamList, - ParamList, - State, - ScreenOptions, - EventMap, - >, - +Navigator: React$ComponentType<$Exact, - RouteProp, - NavHelpers, - ExtraNavigatorProps, - >>>, - +Group: React$ComponentType<{| - ...ScreenOptionsProps, NavHelpers>, - +children: React$Node, - +navigationKey?: string, - |}>, - |}; - - declare export type CreateNavigatorFactory = < - State: NavigationState, - ScreenOptions: {...}, - EventMap: EventMapBase, - NavHelpers: NavigationHelpers< - ParamListBase, - State, - EventMap, - >, - ExtraNavigatorProps: ExtraNavigatorPropsBase, - >( - navigator: React$ComponentType<$Exact, - RouteProp<>, - NavHelpers, - ExtraNavigatorProps, - >>>, - ) => CreateNavigator; - - - /** - * useNavigationBuilder - */ - - declare export type Descriptor< - NavHelpers, - ScreenOptions: {...} = {...}, - > = {| - +render: () => React$Node, - +options: $ReadOnly, - +navigation: NavHelpers, - |}; - - declare export type UseNavigationBuilder = < - State: NavigationState, - Action: GenericNavigationAction, - ScreenOptions: {...}, - RouterOptions: DefaultRouterOptions, - NavHelpers, - EventMap: EventMapBase, - ExtraNavigatorProps: ExtraNavigatorPropsBase, - >( - routerFactory: RouterFactory, - options: $Exact, - RouteProp<>, - NavHelpers, - ExtraNavigatorProps, - >>, - ) => {| - +id?: string, - +state: State, - +descriptors: {| +[key: string]: Descriptor |}, - +navigation: NavHelpers, - |}; - - /** - * EdgeInsets - */ - - declare type EdgeInsets = {| - +top: number, - +right: number, - +bottom: number, - +left: number, - |}; - - /** - * TransitionPreset - */ - - declare export type TransitionSpec = - | {| - animation: 'spring', - config: $Diff< - SpringAnimationConfigSingle, - { toValue: number | AnimatedValue, ... }, - >, - |} - | {| - animation: 'timing', - config: $Diff< - TimingAnimationConfigSingle, - { toValue: number | AnimatedValue, ... }, - >, - |}; - - declare export type StackCardInterpolationProps = {| - +current: {| - +progress: AnimatedInterpolation, - |}, - +next?: {| - +progress: AnimatedInterpolation, - |}, - +index: number, - +closing: AnimatedInterpolation, - +swiping: AnimatedInterpolation, - +inverted: AnimatedInterpolation, - +layouts: {| - +screen: {| +width: number, +height: number |}, - |}, - +insets: EdgeInsets, - |}; - declare export type StackCardInterpolatedStyle = {| - containerStyle?: AnimatedViewStyleProp, - cardStyle?: AnimatedViewStyleProp, - overlayStyle?: AnimatedViewStyleProp, - shadowStyle?: AnimatedViewStyleProp, - |}; - declare export type StackCardStyleInterpolator = ( - props: StackCardInterpolationProps, - ) => StackCardInterpolatedStyle; - - declare export type StackHeaderInterpolationProps = {| - +current: {| - +progress: AnimatedInterpolation, - |}, - +next?: {| - +progress: AnimatedInterpolation, - |}, - +layouts: {| - +header: {| +width: number, +height: number |}, - +screen: {| +width: number, +height: number |}, - +title?: {| +width: number, +height: number |}, - +leftLabel?: {| +width: number, +height: number |}, - |}, - |}; - declare export type StackHeaderInterpolatedStyle = {| - leftLabelStyle?: AnimatedViewStyleProp, - leftButtonStyle?: AnimatedViewStyleProp, - rightButtonStyle?: AnimatedViewStyleProp, - titleStyle?: AnimatedViewStyleProp, - backgroundStyle?: AnimatedViewStyleProp, - |}; - declare export type StackHeaderStyleInterpolator = ( - props: StackHeaderInterpolationProps, - ) => StackHeaderInterpolatedStyle; - - declare type GestureDirection = - | 'horizontal' - | 'horizontal-inverted' - | 'vertical' - | 'vertical-inverted'; - - declare export type TransitionPreset = {| - +gestureDirection: GestureDirection, - +transitionSpec: {| - +open: TransitionSpec, - +close: TransitionSpec, - |}, - +cardStyleInterpolator: StackCardStyleInterpolator, - +headerStyleInterpolator: StackHeaderStyleInterpolator, - |}; - - /** - * Header common options - */ - - declare export type SceneProgress = {| - +current: AnimatedInterpolation, - +next?: AnimatedInterpolation, - +previous?: AnimatedInterpolation, - |}; - - declare export type HeaderProps = {| - +navigation: NavProp, - +route: RouteProp<>, - +options: ScreenOptions, - +layout: {| +width: number, +height: number |}, - |}; - - declare export type HeaderButtonProps = $Partial<{| - +tintColor: string, - +pressColor: string, - +pressOpacity: number, - |}>; - - declare export type HeaderLeftButtonProps = $Partial<{| - ...HeaderButtonProps, - +labelVisible: boolean, - |}>; - - declare type HeaderTitleInputBase = { - +onLayout: LayoutEvent => void, - +children: string, - +allowFontScaling: ?boolean, - +tintColor: ?string, - +style: ?AnimatedTextStyleProp, - ... - }; - - declare export type HeaderTitleInputProps = - $Exact; - - declare export type HeaderCommonOptions< - NavHeaderProps, - NavHeaderLeftProps, - NavHeaderRightProps, - > = $Partial<{| - +header: NavHeaderProps => React$Node, - +headerShown: boolean, - +headerTitle: string | ( HeaderTitleInputProps => React$Node), - +headerTitleAlign: 'left' | 'center', - +headerTitleStyle: AnimatedTextStyleProp, - +headerTitleContainerStyle: AnimatedViewStyleProp, - +headerTintColor: string, - +headerTitleAllowFontScaling: boolean, - +headerLeft: NavHeaderLeftProps => React$Node, - +headerLeftContainerStyle: AnimatedViewStyleProp, - +headerRight: NavHeaderRightProps => React$Node, - +headerRightContainerStyle: AnimatedViewStyleProp, - +headerBackground: ({| style: AnimatedViewStyleProp |}) => React$Node, - +headerStyle: AnimatedViewStyleProp, - +headerTransparent: boolean, - +headerStatusBarHeight: number, - +headerShadowVisible: boolean, - +headerBackgroundContainerStyle: AnimatedViewStyleProp, - +headerPressColor: string, - +headerPressOpacity: number, - |}>; - - /** - * Stack options - */ - - declare export type StackDescriptor = Descriptor< - StackNavigationHelpers<>, - StackOptions, - >; - - declare type Scene = {| - +route: T, - +descriptor: StackDescriptor, - +progress: SceneProgress, - |}; - - declare export type StackHeaderProps = {| - ...HeaderProps, StackOptions>, - +progress: SceneProgress, - +back?: {| +title: string |}, - +styleInterpolator: StackHeaderStyleInterpolator, - |}; - - declare export type StackHeaderButtonProps = $Partial<{| - ...HeaderButtonProps, - +canGoBack: boolean, - |}>; - - declare export type StackHeaderLeftButtonProps = $Partial<{| - ...StackHeaderButtonProps, - +onPress: (() => void), - +backImage: (props: {| tintColor: string |}) => React$Node, - +label: string, - +truncatedLabel: string, - +labelVisible: boolean, - +labelStyle: AnimatedTextStyleProp, - +allowFontScaling: boolean, - +onLabelLayout: LayoutEvent => void, - +screenLayout: {| +width: number, +height: number |}, - +titleLayout: {| +width: number, +height: number |}, - +disabled: boolean, - +accessibilityLabel: string, - +style: ViewStyleProp, - |}>; - - declare export type StackOptions = $Partial<{| - +title: string, - +cardShadowEnabled: boolean, - +cardOverlayEnabled: boolean, - +cardOverlay: {| style: ViewStyleProp |} => React$Node, - +cardStyle: ViewStyleProp, - +animationEnabled: boolean, - +animationTypeForReplace: 'push' | 'pop', - +gestureEnabled: boolean, - +gestureResponseDistance: number, - +gestureVelocityImpact: number, - +safeAreaInsets: $Partial, - +keyboardHandlingEnabled: boolean, - +presentation: 'card' | 'modal' | 'transparentModal', - // Transition - ...TransitionPreset, - // Header - ...HeaderCommonOptions< - StackHeaderProps, - StackHeaderLeftButtonProps, - StackHeaderButtonProps, - >, - +headerMode: 'float' | 'screen', - +headerBackAllowFontScaling: boolean, - +headerBackTitle: string | null, - +headerBackTitleStyle: TextStyleProp, - +headerBackTitleVisible: boolean, - +headerTruncatedBackTitle: string, - +headerBackImage: $PropertyType, - +headerBackAccessibilityLabel: string, - |}>; - - /** - * Stack navigation prop - */ - - declare export type StackNavigationEventMap = {| - ...EventMapCore, - +transitionStart: {| - +data: {| +closing: boolean |}, - +canPreventDefault: false, - |}, - +transitionEnd: {| - +data: {| +closing: boolean |}, - +canPreventDefault: false, - |}, - +gestureStart: {| +data: void, +canPreventDefault: false |}, - +gestureEnd: {| +data: void, +canPreventDefault: false |}, - +gestureCancel: {| +data: void, +canPreventDefault: false |}, - |}; - - declare type StackExtraNavigationHelpers< - ParamList: ParamListBase = ParamListBase, - > = {| - +replace: SimpleNavigate, - +push: SimpleNavigate, - +pop: (count?: number) => void, - +popToTop: () => void, - |}; - - declare export type StackNavigationHelpers< - ParamList: ParamListBase = ParamListBase, - EventMap: EventMapBase = StackNavigationEventMap, - > = { - ...$Exact>, - ...StackExtraNavigationHelpers, - ... - }; - - declare export type StackNavigationProp< - ParamList: ParamListBase = ParamListBase, - RouteName: $Keys = $Keys, - Options: {...} = StackOptions, - EventMap: EventMapBase = StackNavigationEventMap, - > = {| - ...$Exact>, - ...StackExtraNavigationHelpers, - |}; - - /** - * Miscellaneous stack exports - */ - - declare type StackNavigationConfig = {| - +detachInactiveScreens?: boolean, - |}; - - declare export type ExtraStackNavigatorProps = {| - ...$Exact, - ...StackRouterOptions, - ...StackNavigationConfig, - |}; - - declare export type StackNavigatorProps< - NavHelpers: StackNavigationHelpers<> = StackNavigationHelpers<>, - > = $Exact, - RouteProp<>, - NavHelpers, - ExtraStackNavigatorProps, - >>; - - /** - * Bottom tab options - */ - - declare export type BottomTabBarButtonProps = {| - ...$Diff< - TouchableWithoutFeedbackProps, - {| onPress?: ?(event: PressEvent) => mixed |}, - >, - +to?: string, - +children: React$Node, - +onPress?: (MouseEvent | PressEvent) => void, - |}; - - declare export type TabBarVisibilityAnimationConfig = - | {| - +animation: 'spring', - +config?: $Diff< - SpringAnimationConfigSingle, - { toValue: number | AnimatedValue, useNativeDriver: boolean, ... }, - >, - |} - | {| - +animation: 'timing', - +config?: $Diff< - TimingAnimationConfigSingle, - { toValue: number | AnimatedValue, useNativeDriver: boolean, ... }, - >, - |}; - - declare export type BottomTabOptions = $Partial<{| - +title: string, - +tabBarLabel: - | string - | ({| focused: boolean, color: string |}) => React$Node, - +tabBarIcon: ({| - focused: boolean, - color: string, - size: number, - |}) => React$Node, - +tabBarBadge: number | string, - +tabBarBadgeStyle: TextStyleProp, - +tabBarAccessibilityLabel: string, - +tabBarTestID: string, - +tabBarVisibilityAnimationConfig: $Partial<{| - +show: TabBarVisibilityAnimationConfig, - +hide: TabBarVisibilityAnimationConfig, - |}>, - +tabBarButton: BottomTabBarButtonProps => React$Node, - +tabBarHideOnKeyboard: boolean, - +tabBarActiveTintColor: string, - +tabBarInactiveTintColor: string, - +tabBarActiveBackgroundColor: string, - +tabBarInactiveBackgroundColor: string, - +tabBarAllowFontScaling: boolean, - +tabBarShowLabel: boolean, - +tabBarLabelStyle: TextStyleProp, - +tabBarIconStyle: TextStyleProp, - +tabBarItemStyle: ViewStyleProp, - +tabBarLabelPosition: 'beside-icon' | 'below-icon', - +tabBarStyle: ViewStyleProp, - +unmountOnBlur: boolean, - +lazy: boolean, - ...HeaderCommonOptions< - HeaderProps, BottomTabOptions>, - HeaderLeftButtonProps, - HeaderButtonProps, - >, - |}>; - - /** - * Bottom tab navigation prop - */ - - declare export type BottomTabNavigationEventMap = {| - ...EventMapCore, - +tabPress: {| +data: void, +canPreventDefault: true |}, - +tabLongPress: {| +data: void, +canPreventDefault: false |}, - |}; - - declare type TabExtraNavigationHelpers< - ParamList: ParamListBase = ParamListBase, - > = {| - +jumpTo: SimpleNavigate, - |}; - - declare export type BottomTabNavigationHelpers< - ParamList: ParamListBase = ParamListBase, - EventMap: EventMapBase = BottomTabNavigationEventMap, - > = { - ...$Exact>, - ...TabExtraNavigationHelpers, - ... - }; - - declare export type BottomTabNavigationProp< - ParamList: ParamListBase = ParamListBase, - RouteName: $Keys = $Keys, - Options: {...} = BottomTabOptions, - EventMap: EventMapBase = BottomTabNavigationEventMap, - > = {| - ...$Exact>, - ...TabExtraNavigationHelpers, - |}; - - /** - * Miscellaneous bottom tab exports - */ - - declare export type BottomTabDescriptor = Descriptor< - BottomTabNavigationHelpers<>, - BottomTabOptions, - >; - - declare type BottomTabNavigationBuilderResult = {| - +state: TabNavigationState, - +navigation: BottomTabNavigationHelpers<>, - +descriptors: {| +[key: string]: BottomTabDescriptor |}, - |}; - - declare export type BottomTabBarProps = BottomTabNavigationBuilderResult; - - declare type BottomTabNavigationConfig = {| - +tabBar?: BottomTabBarProps => React$Node, - +safeAreaInsets?: $Partial, - +detachInactiveScreens?: boolean, - |}; - - declare export type ExtraBottomTabNavigatorProps = {| - ...$Exact, - ...TabRouterOptions, - ...BottomTabNavigationConfig, - |}; - - declare export type BottomTabNavigatorProps< - NavHelpers: BottomTabNavigationHelpers<> = BottomTabNavigationHelpers<>, - > = $Exact, - RouteProp<>, - NavHelpers, - ExtraBottomTabNavigatorProps, - >>; - - /** - * Material bottom tab options - */ - - declare export type MaterialBottomTabOptions = $Partial<{| - +title: string, - +tabBarColor: string, - +tabBarLabel: string, - +tabBarIcon: - | string - | ({| +focused: boolean, +color: string |}) => React$Node, - +tabBarBadge: boolean | number | string, - +tabBarAccessibilityLabel: string, - +tabBarTestID: string, - |}>; - - /** - * Material bottom tab navigation prop - */ - - declare export type MaterialBottomTabNavigationEventMap = {| - ...EventMapCore, - +tabPress: {| +data: void, +canPreventDefault: true |}, - |}; - - declare export type MaterialBottomTabNavigationHelpers< - ParamList: ParamListBase = ParamListBase, - EventMap: EventMapBase = MaterialBottomTabNavigationEventMap, - > = { - ...$Exact>, - ...TabExtraNavigationHelpers, - ... - }; - - declare export type MaterialBottomTabNavigationProp< - ParamList: ParamListBase = ParamListBase, - RouteName: $Keys = $Keys, - Options: {...} = MaterialBottomTabOptions, - EventMap: EventMapBase = MaterialBottomTabNavigationEventMap, - > = {| - ...$Exact>, - ...TabExtraNavigationHelpers, - |}; - - /** - * Miscellaneous material bottom tab exports - */ - - declare export type PaperFont = {| - +fontFamily: string, - +fontWeight?: - | 'normal' - | 'bold' - | '100' - | '200' - | '300' - | '400' - | '500' - | '600' - | '700' - | '800' - | '900', - |}; - - declare export type PaperFonts = {| - +regular: PaperFont, - +medium: PaperFont, - +light: PaperFont, - +thin: PaperFont, - |}; - - declare export type PaperTheme = {| - +dark: boolean, - +mode?: 'adaptive' | 'exact', - +roundness: number, - +colors: {| - +primary: string, - +background: string, - +surface: string, - +accent: string, - +error: string, - +text: string, - +onSurface: string, - +onBackground: string, - +disabled: string, - +placeholder: string, - +backdrop: string, - +notification: string, - |}, - +fonts: PaperFonts, - +animation: {| - +scale: number, - |}, - |}; - - declare export type PaperRoute = {| - +key: string, - +title?: string, - +icon?: any, - +badge?: string | number | boolean, - +color?: string, - +accessibilityLabel?: string, - +testID?: string, - |}; - - declare export type PaperTouchableProps = {| - ...TouchableWithoutFeedbackProps, - +key: string, - +route: PaperRoute, - +children: React$Node, - +borderless?: boolean, - +centered?: boolean, - +rippleColor?: string, - |}; - - declare export type MaterialBottomTabNavigationConfig = {| - +shifting?: boolean, - +labeled?: boolean, - +renderTouchable?: PaperTouchableProps => React$Node, - +activeColor?: string, - +inactiveColor?: string, - +sceneAnimationEnabled?: boolean, - +keyboardHidesNavigationBar?: boolean, - +barStyle?: ViewStyleProp, - +style?: ViewStyleProp, - +theme?: PaperTheme, - |}; - - declare export type ExtraMaterialBottomTabNavigatorProps = {| - ...$Exact, - ...TabRouterOptions, - ...MaterialBottomTabNavigationConfig, - |}; - - declare export type MaterialBottomTabNavigatorProps< - NavHelpers: MaterialBottomTabNavigationHelpers<> = - MaterialBottomTabNavigationHelpers<>, - > = $Exact, - RouteProp<>, - NavHelpers, - ExtraMaterialBottomTabNavigatorProps, - >>; - - /** - * Material top tab options - */ - - declare export type MaterialTopTabOptions = $Partial<{| - +title: string, - +tabBarLabel: - | string - | ({| +focused: boolean, +color: string |}) => React$Node, - +tabBarIcon: ({| +focused: boolean, +color: string |}) => React$Node, - +tabBarAccessibilityLabel: string, - +tabBarTestID: string, - +tabBarActiveTintColor: string, - +tabBarInactiveTintColor: string, - +tabBarPressColor: string, - +tabBarPressOpacity: number, - +tabBarShowLabel: boolean, - +tabBarShowIcon: boolean, - +tabBarAllowFontScaling: boolean, - +tabBarBounces: boolean, - +tabBarScrollEnabled: boolean, - +tabBarIconStyle: ViewStyleProp, - +tabBarLabelStyle: TextStyleProp, - +tabBarItemStyle: ViewStyleProp, - +tabBarIndicatorStyle: ViewStyleProp, - +tabBarIndicatorContainerStyle: ViewStyleProp, - +tabBarContentContainerStyle: ViewStyleProp, - +tabBarStyle: ViewStyleProp, - +tabBarBadge: () => React$Node, - +tabBarIndicator: MaterialTopTabBarIndicatorProps => React$Node, - +lazy: boolean, - +lazyPlaceholder: ({| +route: Route<> |}) => React$Node, - |}>; - - /** - * Material top tab navigation prop - */ - - declare export type MaterialTopTabNavigationEventMap = {| - ...EventMapCore, - +tabPress: {| +data: void, +canPreventDefault: true |}, - +tabLongPress: {| +data: void, +canPreventDefault: false |}, - +swipeStart: {| +data: void, +canPreventDefault: false |}, - +swipeEnd: {| +data: void, +canPreventDefault: false |}, - |}; - - declare export type MaterialTopTabNavigationHelpers< - ParamList: ParamListBase = ParamListBase, - EventMap: EventMapBase = MaterialTopTabNavigationEventMap, - > = { - ...$Exact>, - ...TabExtraNavigationHelpers, - ... - }; - - declare export type MaterialTopTabNavigationProp< - ParamList: ParamListBase = ParamListBase, - RouteName: $Keys = $Keys, - Options: {...} = MaterialTopTabOptions, - EventMap: EventMapBase = MaterialTopTabNavigationEventMap, - > = {| - ...$Exact>, - ...TabExtraNavigationHelpers, - |}; - - /** - * Miscellaneous material top tab exports - */ - - declare type MaterialTopTabPagerCommonProps = {| - +keyboardDismissMode: 'none' | 'on-drag' | 'auto', - +swipeEnabled: boolean, - +swipeVelocityImpact?: number, - +springVelocityScale?: number, - +springConfig: $Partial<{| - +damping: number, - +mass: number, - +stiffness: number, - +restSpeedThreshold: number, - +restDisplacementThreshold: number, - |}>, - +timingConfig: $Partial<{| - +duration: number, - |}>, - |}; - - declare export type MaterialTopTabPagerProps = {| - ...MaterialTopTabPagerCommonProps, - +onSwipeStart?: () => void, - +onSwipeEnd?: () => void, - +onIndexChange: (index: number) => void, - +navigationState: TabNavigationState, - +layout: {| +width: number, +height: number |}, - +removeClippedSubviews: boolean, - +children: ({| - +addListener: (type: 'enter', listener: number => void) => void, - +removeListener: (type: 'enter', listener: number => void) => void, - +position: any, // Reanimated.Node - +render: React$Node => React$Node, - +jumpTo: string => void, - |}) => React$Node, - +gestureHandlerProps: PanGestureHandlerProps, - |}; - - declare export type MaterialTopTabBarIndicatorProps = {| - +state: TabNavigationState, - +width: string, - +style?: ViewStyleProp, - +getTabWidth: number => number, - |}; - - declare export type MaterialTopTabDescriptor = Descriptor< - MaterialBottomTabNavigationHelpers<>, - MaterialBottomTabOptions, - >; - - declare type MaterialTopTabNavigationBuilderResult = {| - +state: TabNavigationState, - +navigation: MaterialTopTabNavigationHelpers<>, - +descriptors: {| +[key: string]: MaterialTopTabDescriptor |}, - |}; - - declare export type MaterialTopTabBarProps = {| - ...MaterialTopTabNavigationBuilderResult, - +layout: {| +width: number, +height: number |}, - +position: any, // Reanimated.Node - +jumpTo: string => void, - |}; - - declare export type MaterialTopTabNavigationConfig = {| - ...$Partial, - +position?: any, // Reanimated.Value - +tabBarPosition?: 'top' | 'bottom', - +initialLayout?: $Partial<{| +width: number, +height: number |}>, - +lazyPreloadDistance?: number, - +removeClippedSubviews?: boolean, - +sceneContainerStyle?: ViewStyleProp, - +style?: ViewStyleProp, - +gestureHandlerProps?: PanGestureHandlerProps, - +pager?: MaterialTopTabPagerProps => React$Node, - +tabBar?: MaterialTopTabBarProps => React$Node, - |}; - - declare export type ExtraMaterialTopTabNavigatorProps = {| - ...$Exact, - ...TabRouterOptions, - ...MaterialTopTabNavigationConfig, - |}; - - declare export type MaterialTopTabNavigatorProps< - NavHelpers: MaterialTopTabNavigationHelpers<> = - MaterialTopTabNavigationHelpers<>, - > = $Exact, - RouteProp<>, - NavHelpers, - ExtraMaterialTopTabNavigatorProps, - >>; - - /** - * Drawer options - */ - - declare export type DrawerOptions = $Partial<{| - +title: string, - +lazy: boolean, - +drawerLabel: - | string - | ({| +color: string, +focused: boolean |}) => React$Node, - +drawerIcon: ({| - +color: string, - +size: number, - +focused: boolean, - |}) => React$Node, - +drawerActiveTintColor: string, - +drawerActiveBackgroundColor: string, - +drawerInactiveTintColor: string, - +drawerInactiveBackgroundColor: string, - +drawerItemStyle: ViewStyleProp, - +drawerLabelStyle: TextStyleProp, - +drawerContentContainerStyle: ViewStyleProp, - +drawerContentStyle: ViewStyleProp, - +drawerStyle: ViewStyleProp, - +drawerPosition: 'left' | 'right', - +drawerType: 'front' | 'back' | 'slide' | 'permanent', - +drawerHideStatusBarOnOpen: boolean, - +drawerStatusBarAnimation: 'slide' | 'none' | 'fade', - +overlayColor: string, - +sceneContainerStyle: ViewStyleProp, - +gestureHandlerProps: PanGestureHandlerProps, - +swipeEnabled: boolean, - +swipeEdgeWidth: number, - +swipeMinDistance: number, - +keyboardDismissMode: 'on-drag' | 'none', - +unmountOnBlur: boolean, - ...HeaderCommonOptions< - HeaderProps, DrawerOptions>, - HeaderLeftButtonProps, - HeaderButtonProps, - >, - |}>; - - /** - * Drawer navigation prop - */ - - declare export type DrawerNavigationEventMap = - EventMapCore; - - declare type DrawerExtraNavigationHelpers< - ParamList: ParamListBase = ParamListBase, - > = {| - +jumpTo: SimpleNavigate, - +openDrawer: () => void, - +closeDrawer: () => void, - +toggleDrawer: () => void, - |}; - - declare export type DrawerNavigationHelpers< - ParamList: ParamListBase = ParamListBase, - EventMap: EventMapBase = DrawerNavigationEventMap, - > = { - ...$Exact>, - ...DrawerExtraNavigationHelpers, - ... - }; - - declare export type DrawerNavigationProp< - ParamList: ParamListBase = ParamListBase, - RouteName: $Keys = $Keys, - Options: {...} = DrawerOptions, - EventMap: EventMapBase = DrawerNavigationEventMap, - > = {| - ...$Exact>, - ...DrawerExtraNavigationHelpers, - |}; - - /** - * Miscellaneous drawer exports - */ - - declare export type DrawerDescriptor = Descriptor< - DrawerNavigationHelpers<>, - DrawerOptions, - >; - - declare type DrawerNavigationBuilderResult = {| - +state: DrawerNavigationState, - +navigation: DrawerNavigationHelpers<>, - +descriptors: {| +[key: string]: DrawerDescriptor |}, - |}; - - declare export type DrawerNavigationConfig = {| - +drawerContent?: DrawerNavigationBuilderResult => React$Node, - +detachInactiveScreens?: boolean, - +useLegacyImplementation?: boolean, - |}; - - declare export type ExtraDrawerNavigatorProps = {| - ...$Exact, - ...DrawerRouterOptions, - ...DrawerNavigationConfig, - |}; - - declare export type DrawerNavigatorProps< - NavHelpers: DrawerNavigationHelpers<> = DrawerNavigationHelpers<>, - > = $Exact, - RouteProp<>, - NavHelpers, + DrawerNavigationEventMap, ExtraDrawerNavigatorProps, - >>; - - /** - * BaseNavigationContainer - */ - - declare export type BaseNavigationContainerProps = {| - +children: React$Node, - +initialState?: PossiblyStaleNavigationState, - +onStateChange?: (state: ?PossiblyStaleNavigationState) => void, - +independent?: boolean, - |}; - - declare export type ContainerEventMap = {| - ...GlobalEventMap, - +options: {| - +data: {| +options: { +[key: string]: mixed, ... } |}, - +canPreventDefault: false, - |}, - +__unsafe_action__: {| - +data: {| - +action: GenericNavigationAction, - +noop: boolean, - |}, - +canPreventDefault: false, - |}, - |}; - - declare export type BaseNavigationContainerInterface = {| - ...$Exact>, - +resetRoot: (state?: PossiblyStaleNavigationState) => void, - +getRootState: () => NavigationState, - +getCurrentRoute: () => RouteProp<> | void, - +getCurrentOptions: () => Object | void, - +isReady: () => boolean, - |}; - - declare type BaseNavigationContainerInterfaceRef = {| - ...BaseNavigationContainerInterface, - +current: BaseNavigationContainerInterface | null, - |}; - - /** - * State utils - */ - - declare export type GetStateFromPath = ( - path: string, - options?: LinkingConfig, - ) => PossiblyStaleNavigationState; - - declare export type GetPathFromState = ( - state?: ?PossiblyStaleNavigationState, - options?: LinkingConfig, - ) => string; - - declare export type GetFocusedRouteNameFromRoute = - PossiblyStaleRoute => ?string; - - /** - * Linking - */ - - declare export type ScreenLinkingConfig = {| - +path?: string, - +exact?: boolean, - +parse?: {| +[param: string]: string => mixed |}, - +stringify?: {| +[param: string]: mixed => string |}, - +screens?: ScreenLinkingConfigMap, - +initialRouteName?: string, - |}; - - declare export type ScreenLinkingConfigMap = {| - +[routeName: string]: string | ScreenLinkingConfig, - |}; - - declare export type LinkingConfig = {| - +initialRouteName?: string, - +screens: ScreenLinkingConfigMap, - |}; - - declare export type LinkingOptions = {| - +enabled?: boolean, - +prefixes: $ReadOnlyArray, - +config?: LinkingConfig, - +getStateFromPath?: GetStateFromPath, - +getPathFromState?: GetPathFromState, - |}; - - /** - * NavigationContainer - */ - - declare export type Theme = {| - +dark: boolean, - +colors: {| - +primary: string, - +background: string, - +card: string, - +text: string, - +border: string, - |}, - |}; - - declare export type NavigationContainerType = React$AbstractComponent< - {| - ...BaseNavigationContainerProps, - +theme?: Theme, - +linking?: LinkingOptions, - +fallback?: React$Node, - +onReady?: () => mixed, - |}, - BaseNavigationContainerInterface, - >; - - //--------------------------------------------------------------------------- - // SECTION 2: EXPORTED MODULE - // This section defines the module exports and contains exported types that - // are not present in any other React Navigation libdef. - //--------------------------------------------------------------------------- + DrawerNavigationConfig, + DrawerNavigationBuilderResult, + TextStyleProp, + ViewStyleProp, + PanGestureHandlerProps, + } from '@react-navigation/core'; /** * createDrawerNavigator */ declare export var createDrawerNavigator: CreateNavigator< DrawerNavigationState, DrawerOptions, DrawerNavigationEventMap, ExtraDrawerNavigatorProps, >; /** * DrawerView */ declare export type DrawerViewProps = {| ...DrawerNavigationConfig, ...DrawerNavigationBuilderResult, |}; declare export var DrawerView: React$ComponentType; /** * DrawerItem */ declare export type DrawerItemProps = {| +label: | string | ({| +color: string, +focused: boolean |}) => React$Node, +onPress: () => mixed, +icon?: ({| +color: string, +size: number, +focused: boolean, |}) => React$Node, +to?: string, +focused?: boolean, +activeTintColor?: string, +inactiveTintColor?: string, +activeBackgroundColor?: string, +inactiveBackgroundColor?: string, +labelStyle?: TextStyleProp, +style?: ViewStyleProp, |}; declare export var DrawerItem: React$ComponentType; /** * DrawerItemList */ declare export var DrawerItemList: React$ComponentType< DrawerNavigationBuilderResult, >; /** * DrawerContent */ declare export var DrawerContent: React$ComponentType< DrawerNavigationBuilderResult, >; /** * DrawerContentScrollView */ declare export var DrawerContentScrollView: React$ComponentType<{ +children: React$Node, ... }>; /** * DrawerGestureContext */ declare type GestureHandlerRef = React$Ref< React$ComponentType, >; declare export var DrawerGestureContext: React$Context; /** * useIsDrawerOpen */ declare export function useDrawerStatus(): 'open' | 'closed'; } 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 index 6892606cf..e8f66d949 100644 --- a/native/flow-typed/npm/@react-navigation/elements_v1.x.x.js +++ b/native/flow-typed/npm/@react-navigation/elements_v1.x.x.js @@ -1,2299 +1,48 @@ declare module '@react-navigation/elements' { - //--------------------------------------------------------------------------- - // SECTION 1: IDENTICAL TYPE DEFINITIONS - // This section is identical across all React Navigation libdefs and contains - // shared definitions. We wish we could make it DRY and import from a shared - // definition, but that isn't yet possible. - //--------------------------------------------------------------------------- - - /** - * We start with some definitions that we have copy-pasted from React Native - * source files. - */ - - // This is a bastardization of the true StyleObj type located in - // react-native/Libraries/StyleSheet/StyleSheetTypes. We unfortunately can't - // import that here, and it's too lengthy (and consequently too brittle) to - // copy-paste here either. - declare type StyleObj = - | null - | void - | number - | false - | '' - | $ReadOnlyArray - | { [name: string]: any, ... }; - declare type ViewStyleProp = StyleObj; - declare type TextStyleProp = StyleObj; - declare type AnimatedViewStyleProp = StyleObj; - declare type AnimatedTextStyleProp = StyleObj; - - // Vaguely copied from - // react-native/Libraries/Animated/src/animations/Animation.js - declare type EndResult = { finished: boolean, ... }; - declare type EndCallback = (result: EndResult) => void; - declare interface Animation { - start( - fromValue: number, - onUpdate: (value: number) => void, - onEnd: ?EndCallback, - previousAnimation: ?Animation, - animatedValue: AnimatedValue, - ): void; - stop(): void; - } - declare type AnimationConfig = { - isInteraction?: boolean, - useNativeDriver: boolean, - onComplete?: ?EndCallback, - iterations?: number, - ... - }; - - // Vaguely copied from - // react-native/Libraries/Animated/src/nodes/AnimatedTracking.js - declare interface AnimatedTracking { - constructor( - value: AnimatedValue, - parent: any, - animationClass: any, - animationConfig: Object, - callback?: ?EndCallback, - ): void; - update(): void; - } - - // Vaguely copied from - // react-native/Libraries/Animated/src/nodes/AnimatedValue.js - declare type ValueListenerCallback = (state: { value: number, ... }) => void; - declare interface AnimatedValue { - constructor(value: number): void; - setValue(value: number): void; - setOffset(offset: number): void; - flattenOffset(): void; - extractOffset(): void; - addListener(callback: ValueListenerCallback): string; - removeListener(id: string): void; - removeAllListeners(): void; - stopAnimation(callback?: ?(value: number) => void): void; - resetAnimation(callback?: ?(value: number) => void): void; - interpolate(config: InterpolationConfigType): AnimatedInterpolation; - animate(animation: Animation, callback: ?EndCallback): void; - stopTracking(): void; - track(tracking: AnimatedTracking): void; - } - - // Copied from - // react-native/Libraries/Animated/src/animations/TimingAnimation.js - declare type TimingAnimationConfigSingle = AnimationConfig & { - toValue: number | AnimatedValue, - easing?: (value: number) => number, - duration?: number, - delay?: number, - ... - }; - - // Copied from - // react-native/Libraries/Animated/src/animations/SpringAnimation.js - declare type SpringAnimationConfigSingle = AnimationConfig & { - toValue: number | AnimatedValue, - overshootClamping?: boolean, - restDisplacementThreshold?: number, - restSpeedThreshold?: number, - velocity?: number, - bounciness?: number, - speed?: number, - tension?: number, - friction?: number, - stiffness?: number, - damping?: number, - mass?: number, - delay?: number, - ... - }; - - // Copied from react-native/Libraries/Types/CoreEventTypes.js - declare type SyntheticEvent = $ReadOnly<{| - bubbles: ?boolean, - cancelable: ?boolean, - currentTarget: number, - defaultPrevented: ?boolean, - dispatchConfig: $ReadOnly<{| - registrationName: string, - |}>, - eventPhase: ?number, - preventDefault: () => void, - isDefaultPrevented: () => boolean, - stopPropagation: () => void, - isPropagationStopped: () => boolean, - isTrusted: ?boolean, - nativeEvent: T, - persist: () => void, - target: ?number, - timeStamp: number, - type: ?string, - |}>; - declare type Layout = $ReadOnly<{| - x: number, - y: number, - width: number, - height: number, - |}>; - declare type LayoutEvent = SyntheticEvent< - $ReadOnly<{| - layout: Layout, - |}>, - >; - declare type BlurEvent = SyntheticEvent< - $ReadOnly<{| - target: number, - |}>, - >; - declare type FocusEvent = SyntheticEvent< - $ReadOnly<{| - target: number, - |}>, - >; - declare type ResponderSyntheticEvent = $ReadOnly<{| - ...SyntheticEvent, - touchHistory: $ReadOnly<{| - indexOfSingleActiveTouch: number, - mostRecentTimeStamp: number, - numberActiveTouches: number, - touchBank: $ReadOnlyArray< - $ReadOnly<{| - touchActive: boolean, - startPageX: number, - startPageY: number, - startTimeStamp: number, - currentPageX: number, - currentPageY: number, - currentTimeStamp: number, - previousPageX: number, - previousPageY: number, - previousTimeStamp: number, - |}>, - >, - |}>, - |}>; - declare type PressEvent = ResponderSyntheticEvent< - $ReadOnly<{| - changedTouches: $ReadOnlyArray<$PropertyType>, - force: number, - identifier: number, - locationX: number, - locationY: number, - pageX: number, - pageY: number, - target: ?number, - timestamp: number, - touches: $ReadOnlyArray<$PropertyType>, - |}>, - >; - - // Vaguely copied from - // react-native/Libraries/Animated/src/nodes/AnimatedInterpolation.js - declare type ExtrapolateType = 'extend' | 'identity' | 'clamp'; - declare type InterpolationConfigType = { - inputRange: Array, - outputRange: Array | Array, - easing?: (input: number) => number, - extrapolate?: ExtrapolateType, - extrapolateLeft?: ExtrapolateType, - extrapolateRight?: ExtrapolateType, - ... - }; - declare interface AnimatedInterpolation { - interpolate(config: InterpolationConfigType): AnimatedInterpolation; - } - - // Copied from react-native/Libraries/Components/View/ViewAccessibility.js - declare type AccessibilityRole = - | 'none' - | 'button' - | 'link' - | 'search' - | 'image' - | 'keyboardkey' - | 'text' - | 'adjustable' - | 'imagebutton' - | 'header' - | 'summary' - | 'alert' - | 'checkbox' - | 'combobox' - | 'menu' - | 'menubar' - | 'menuitem' - | 'progressbar' - | 'radio' - | 'radiogroup' - | 'scrollbar' - | 'spinbutton' - | 'switch' - | 'tab' - | 'tablist' - | 'timer' - | 'toolbar'; - declare type AccessibilityActionInfo = $ReadOnly<{ - name: string, - label?: string, - ... - }>; - declare type AccessibilityActionEvent = SyntheticEvent< - $ReadOnly<{actionName: string, ...}>, - >; - declare type AccessibilityState = { - disabled?: boolean, - selected?: boolean, - checked?: ?boolean | 'mixed', - busy?: boolean, - expanded?: boolean, - ... - }; - declare type AccessibilityValue = $ReadOnly<{| - min?: number, - max?: number, - now?: number, - text?: string, - |}>; - - // Copied from - // react-native/Libraries/Components/Touchable/TouchableWithoutFeedback.js - declare type Stringish = string; - declare type EdgeInsetsProp = $ReadOnly<$Partial>; - declare type TouchableWithoutFeedbackProps = $ReadOnly<{| - accessibilityActions?: ?$ReadOnlyArray, - accessibilityElementsHidden?: ?boolean, - accessibilityHint?: ?Stringish, - accessibilityIgnoresInvertColors?: ?boolean, - accessibilityLabel?: ?Stringish, - accessibilityLiveRegion?: ?('none' | 'polite' | 'assertive'), - accessibilityRole?: ?AccessibilityRole, - accessibilityState?: ?AccessibilityState, - accessibilityValue?: ?AccessibilityValue, - accessibilityViewIsModal?: ?boolean, - accessible?: ?boolean, - children?: ?React$Node, - delayLongPress?: ?number, - delayPressIn?: ?number, - delayPressOut?: ?number, - disabled?: ?boolean, - focusable?: ?boolean, - hitSlop?: ?EdgeInsetsProp, - importantForAccessibility?: ?('auto' | 'yes' | 'no' | 'no-hide-descendants'), - nativeID?: ?string, - onAccessibilityAction?: ?(event: AccessibilityActionEvent) => mixed, - onBlur?: ?(event: BlurEvent) => mixed, - onFocus?: ?(event: FocusEvent) => mixed, - onLayout?: ?(event: LayoutEvent) => mixed, - onLongPress?: ?(event: PressEvent) => mixed, - onPress?: ?(event: PressEvent) => mixed, - onPressIn?: ?(event: PressEvent) => mixed, - onPressOut?: ?(event: PressEvent) => mixed, - pressRetentionOffset?: ?EdgeInsetsProp, - rejectResponderTermination?: ?boolean, - testID?: ?string, - touchSoundDisabled?: ?boolean, - |}>; - - // Copied from react-native/Libraries/Image/ImageSource.js - declare type ImageURISource = $ReadOnly<{ - uri?: ?string, - bundle?: ?string, - method?: ?string, - headers?: ?Object, - body?: ?string, - cache?: ?('default' | 'reload' | 'force-cache' | 'only-if-cached'), - width?: ?number, - height?: ?number, - scale?: ?number, - ... - }>; - - /** - * The following is copied from react-native-gesture-handler's libdef - */ - - declare type StateUndetermined = 0; - declare type StateFailed = 1; - declare type StateBegan = 2; - declare type StateCancelled = 3; - declare type StateActive = 4; - declare type StateEnd = 5; - - declare type GestureHandlerState = - | StateUndetermined - | StateFailed - | StateBegan - | StateCancelled - | StateActive - | StateEnd; - - declare type $SyntheticEvent = { - +nativeEvent: $ReadOnly<$Exact>, - ... - }; - - declare type $Event = $SyntheticEvent<{ - handlerTag: number, - numberOfPointers: number, - state: GestureHandlerState, - oldState: GestureHandlerState, - ...$Exact, - ... - }>; - - declare type $EventHandlers = {| - onGestureEvent?: ($Event) => mixed, - onHandlerStateChange?: ($Event) => mixed, - onBegan?: ($Event) => mixed, - onFailed?: ($Event) => mixed, - onCancelled?: ($Event) => mixed, - onActivated?: ($Event) => mixed, - onEnded?: ($Event) => mixed, - |}; - - declare type HitSlop = - | number - | {| - left?: number, - top?: number, - right?: number, - bottom?: number, - vertical?: number, - horizontal?: number, - width?: number, - height?: number, - |} - | {| - width: number, - left: number, - |} - | {| - width: number, - right: number, - |} - | {| - height: number, - top: number, - |} - | {| - height: number, - bottom: number, - |}; - - declare type $GestureHandlerProps< - AdditionalProps: {...}, - ExtraEventsProps: {...} - > = $ReadOnly<{| - ...$Exact, - ...$EventHandlers, - id?: string, - enabled?: boolean, - waitFor?: React$Ref | Array>, - simultaneousHandlers?: React$Ref | Array>, - shouldCancelWhenOutside?: boolean, - minPointers?: number, - hitSlop?: HitSlop, - children?: React$Node, - |}>; - - declare type PanGestureHandlerProps = $GestureHandlerProps< - { - activeOffsetY?: number | [number, number], - activeOffsetX?: number | [number, number], - failOffsetY?: number | [number, number], - failOffsetX?: number | [number, number], - minDist?: number, - minVelocity?: number, - minVelocityX?: number, - minVelocityY?: number, - minPointers?: number, - maxPointers?: number, - avgTouches?: boolean, - ... - }, - { - x: number, - y: number, - absoluteX: number, - absoluteY: number, - translationX: number, - translationY: number, - velocityX: number, - velocityY: number, - ... - } - >; - - /** - * MAGIC - */ - - declare type $If = $Call< - ((true, Then, Else) => Then) & ((false, Then, Else) => Else), - Test, - Then, - Else, - >; - declare type $IsA = $Call< - (Y => true) & (mixed => false), - X, - >; - declare type $IsUndefined = $IsA; - - declare type $Partial = $ReadOnly<$Rest>; - - // If { ...T, ... } counts as a T, then we're inexact - declare type $IsExact = $Call< - (T => false) & (mixed => true), - { ...T, ... }, - >; - - /** - * Actions, state, etc. - */ - - declare export type ScreenParams = { +[key: string]: mixed, ... }; - - declare export type BackAction = {| - +type: 'GO_BACK', - +source?: string, - +target?: string, - |}; - declare export type NavigateAction = {| - +type: 'NAVIGATE', - +payload: - | {| +key: string, +params?: ScreenParams |} - | {| +name: string, +key?: string, +params?: ScreenParams |}, - +source?: string, - +target?: string, - |}; - declare export type ResetAction = {| - +type: 'RESET', - +payload: StaleNavigationState, - +source?: string, - +target?: string, - |}; - declare export type SetParamsAction = {| - +type: 'SET_PARAMS', - +payload: {| +params?: ScreenParams |}, - +source?: string, - +target?: string, - |}; - declare export type CommonAction = - | BackAction - | NavigateAction - | ResetAction - | SetParamsAction; - - declare type NavigateActionCreator = {| - (routeName: string, params?: ScreenParams): NavigateAction, - ( - | {| +key: string, +params?: ScreenParams |} - | {| +name: string, +key?: string, +params?: ScreenParams |}, - ): NavigateAction, - |}; - declare export type CommonActionsType = {| - +navigate: NavigateActionCreator, - +goBack: () => BackAction, - +reset: (state: PossiblyStaleNavigationState) => ResetAction, - +setParams: (params: ScreenParams) => SetParamsAction, - |}; - - declare export type GenericNavigationAction = {| - +type: string, - +payload?: { +[key: string]: mixed, ... }, - +source?: string, - +target?: string, - |}; - - declare export type LeafRoute = {| - +key: string, - +name: RouteName, - +params?: ScreenParams, - |}; - declare export type StateRoute = {| - ...LeafRoute, - +state: NavigationState | StaleNavigationState, - |}; - declare export type Route = - | LeafRoute - | StateRoute; - - declare export type NavigationState = {| - +key: string, - +index: number, - +routeNames: $ReadOnlyArray, - +history?: $ReadOnlyArray, - +routes: $ReadOnlyArray>, - +type: string, - +stale: false, - |}; - - declare export type StaleLeafRoute = {| - +key?: string, - +name: RouteName, - +params?: ScreenParams, - |}; - declare export type StaleStateRoute = {| - ...StaleLeafRoute, - +state: StaleNavigationState, - |}; - declare export type StaleRoute = - | StaleLeafRoute - | StaleStateRoute; - declare export type StaleNavigationState = {| - // It's possible to pass React Nav a StaleNavigationState with an undefined - // index, but React Nav will always return one with the index set. This is - // the same as for the type property below, but in the case of index we tend - // to rely on it being set more... - +index: number, - +history?: $ReadOnlyArray, - +routes: $ReadOnlyArray>, - +type?: string, - +stale?: true, - |}; - - declare export type PossiblyStaleNavigationState = - | NavigationState - | StaleNavigationState; - declare export type PossiblyStaleRoute = - | Route - | StaleRoute; - - /** - * Routers - */ - - declare type ActionCreators< - State: NavigationState, - Action: GenericNavigationAction, - > = { - +[key: string]: (...args: any) => (Action | State => Action), - ... - }; - - declare export type DefaultRouterOptions = { - +initialRouteName?: string, - ... - }; - - declare export type RouterFactory< - State: NavigationState, - Action: GenericNavigationAction, - RouterOptions: DefaultRouterOptions, - > = (options: RouterOptions) => Router; - - declare export type ParamListBase = { +[key: string]: ?ScreenParams, ... }; - - declare export type RouterConfigOptions = {| - +routeNames: $ReadOnlyArray, - +routeParamList: ParamListBase, - |}; - - declare export type Router< - State: NavigationState, - Action: GenericNavigationAction, - > = {| - +type: $PropertyType, - +getInitialState: (options: RouterConfigOptions) => State, - +getRehydratedState: ( - partialState: PossiblyStaleNavigationState, - options: RouterConfigOptions, - ) => State, - +getStateForRouteNamesChange: ( - state: State, - options: RouterConfigOptions, - ) => State, - +getStateForRouteFocus: (state: State, key: string) => State, - +getStateForAction: ( - state: State, - action: Action, - options: RouterConfigOptions, - ) => ?PossiblyStaleNavigationState; - +shouldActionChangeFocus: (action: GenericNavigationAction) => boolean, - +actionCreators?: ActionCreators, - |}; - - /** - * Stack actions and router - */ - - declare export type StackNavigationState = {| - ...NavigationState, - +type: 'stack', - |}; - - declare export type ReplaceAction = {| - +type: 'REPLACE', - +payload: {| +name: string, +key?: ?string, +params?: ScreenParams |}, - +source?: string, - +target?: string, - |}; - declare export type PushAction = {| - +type: 'PUSH', - +payload: {| +name: string, +key?: ?string, +params?: ScreenParams |}, - +source?: string, - +target?: string, - |}; - declare export type PopAction = {| - +type: 'POP', - +payload: {| +count: number |}, - +source?: string, - +target?: string, - |}; - declare export type PopToTopAction = {| - +type: 'POP_TO_TOP', - +source?: string, - +target?: string, - |}; - declare export type StackAction = - | CommonAction - | ReplaceAction - | PushAction - | PopAction - | PopToTopAction; - - declare export type StackActionsType = {| - +replace: (routeName: string, params?: ScreenParams) => ReplaceAction, - +push: (routeName: string, params?: ScreenParams) => PushAction, - +pop: (count?: number) => PopAction, - +popToTop: () => PopToTopAction, - |}; - - declare export type StackRouterOptions = $Exact; - - /** - * Tab actions and router - */ - - declare export type TabNavigationState = {| - ...NavigationState, - +type: 'tab', - +history: $ReadOnlyArray<{| type: 'route', key: string |}>, - |}; - - declare export type JumpToAction = {| - +type: 'JUMP_TO', - +payload: {| +name: string, +params?: ScreenParams |}, - +source?: string, - +target?: string, - |}; - declare export type TabAction = - | CommonAction - | JumpToAction; - - declare export type TabActionsType = {| - +jumpTo: string => JumpToAction, - |}; - - declare export type TabRouterOptions = {| - ...$Exact, - +backBehavior?: 'initialRoute' | 'order' | 'history' | 'none', - |}; - - /** - * Drawer actions and router - */ - - declare type DrawerHistoryEntry = - | {| +type: 'route', +key: string |} - | {| +type: 'drawer' |}; - declare export type DrawerNavigationState = {| - ...NavigationState, - +type: 'drawer', - +history: $ReadOnlyArray, - |}; - - declare export type OpenDrawerAction = {| - +type: 'OPEN_DRAWER', - +source?: string, - +target?: string, - |}; - declare export type CloseDrawerAction = {| - +type: 'CLOSE_DRAWER', - +source?: string, - +target?: string, - |}; - declare export type ToggleDrawerAction = {| - +type: 'TOGGLE_DRAWER', - +source?: string, - +target?: string, - |}; - declare export type DrawerAction = - | TabAction - | OpenDrawerAction - | CloseDrawerAction - | ToggleDrawerAction; - - declare export type DrawerActionsType = {| - ...TabActionsType, - +openDrawer: () => OpenDrawerAction, - +closeDrawer: () => CloseDrawerAction, - +toggleDrawer: () => ToggleDrawerAction, - |}; - - declare export type DrawerRouterOptions = {| - ...TabRouterOptions, - +defaultStatus?: 'open' | 'closed', - |}; - - /** - * Events - */ - - declare export type EventMapBase = { - +[name: string]: {| - +data?: mixed, - +canPreventDefault?: boolean, - |}, - ... - }; - declare type EventPreventDefaultProperties = $If< - Test, - {| +defaultPrevented: boolean, +preventDefault: () => void |}, - {| |}, - >; - declare type EventDataProperties = $If< - $IsUndefined, - {| |}, - {| +data: Data |}, - >; - declare type EventArg< - EventName: string, - CanPreventDefault: ?boolean = false, - Data = void, - > = {| - ...EventPreventDefaultProperties, - ...EventDataProperties, - +type: EventName, - +target?: string, - |}; - declare type GlobalEventMap = {| - +state: {| +data: {| +state: State |}, +canPreventDefault: false |}, - |}; - declare type EventMapCore = {| - ...GlobalEventMap, - +focus: {| +data: void, +canPreventDefault: false |}, - +blur: {| +data: void, +canPreventDefault: false |}, - +beforeRemove: {| - +data: {| +action: GenericNavigationAction |}, - +canPreventDefault: true, - |}, - |}; - declare type EventListenerCallback< - EventName: string, - State: PossiblyStaleNavigationState = NavigationState, - EventMap: EventMapBase = EventMapCore, - > = (e: EventArg< - EventName, - $PropertyType< - $ElementType< - {| ...EventMap, ...EventMapCore |}, - EventName, - >, - 'canPreventDefault', - >, - $PropertyType< - $ElementType< - {| ...EventMap, ...EventMapCore |}, - EventName, - >, - 'data', - >, - >) => mixed; - - /** - * Navigation prop - */ - - declare type PartialWithMergeProperty = $If< - $IsExact, - { ...$Partial, +merge: true }, - { ...$Partial, +merge: true, ... }, - >; - - declare type EitherExactOrPartialWithMergeProperty = - | ParamsType - | PartialWithMergeProperty; - - declare export type SimpleNavigate = - >( - routeName: DestinationRouteName, - params: EitherExactOrPartialWithMergeProperty< - $ElementType, - >, - ) => void; - - declare export type Navigate = - & SimpleNavigate - & >( - route: $If< - $IsUndefined<$ElementType>, - | {| +key: string |} - | {| +name: DestinationRouteName, +key?: string |}, - | {| - +key: string, - +params?: EitherExactOrPartialWithMergeProperty< - $ElementType, - >, - |} - | {| - +name: DestinationRouteName, - +key?: string, - +params?: EitherExactOrPartialWithMergeProperty< - $ElementType, - >, - |}, - >, - ) => void; - - declare type CoreNavigationHelpers< - ParamList: ParamListBase, - State: PossiblyStaleNavigationState = PossiblyStaleNavigationState, - EventMap: EventMapBase = EventMapCore, - > = { - +navigate: Navigate, - +dispatch: ( - action: - | GenericNavigationAction - | (State => GenericNavigationAction), - ) => void, - +reset: PossiblyStaleNavigationState => void, - +goBack: () => void, - +isFocused: () => boolean, - +canGoBack: () => boolean, - +getId: () => string | void, - +getParent: >(id?: string) => ?Parent, - +getState: () => NavigationState, - +addListener: |}, - >>( - name: EventName, - callback: EventListenerCallback, - ) => () => void, - +removeListener: |}, - >>( - name: EventName, - callback: EventListenerCallback, - ) => void, - ... - }; - - declare export type NavigationHelpers< - ParamList: ParamListBase, - State: PossiblyStaleNavigationState = PossiblyStaleNavigationState, - EventMap: EventMapBase = EventMapCore, - > = { - ...$Exact>, - +setParams: (params: ScreenParams) => void, - ... - }; - - declare type SetParamsInput< - ParamList: ParamListBase, - RouteName: $Keys = $Keys, - > = $If< - $IsUndefined<$ElementType>, - empty, - $Partial<$NonMaybeType<$ElementType>>, - >; - - declare export type NavigationProp< - ParamList: ParamListBase, - RouteName: $Keys = $Keys, - State: PossiblyStaleNavigationState = PossiblyStaleNavigationState, - ScreenOptions: {...} = {...}, - EventMap: EventMapBase = EventMapCore, - > = { - ...$Exact>, - +setOptions: (options: $Partial) => void, - +setParams: (params: SetParamsInput) => void, - ... - }; - - /** - * CreateNavigator - */ - - declare export type RouteProp< - ParamList: ParamListBase = ParamListBase, - RouteName: $Keys = $Keys, - > = {| - ...LeafRoute, - +params: $ElementType, - +path?: string, - |}; - - declare type ScreenOptionsProp< - ScreenOptions: {...}, - RouteParam, - NavHelpers, - > = - | ScreenOptions - | ({| +route: RouteParam, +navigation: NavHelpers |}) => ScreenOptions; - declare export type ScreenListeners< - State: NavigationState = NavigationState, - EventMap: EventMapBase = EventMapCore, - > = $ObjMapi< - {| [name: $Keys]: empty |}, - >(K, empty) => EventListenerCallback, - >; - declare type ScreenListenersProp< - ScreenListenersParam: {...}, - RouteParam, - NavHelpers, - > = - | ScreenListenersParam - | ({| +route: RouteParam, +navigation: NavHelpers |}) => ScreenListenersParam; - - declare type BaseScreenProps< - ParamList: ParamListBase, - NavProp, - RouteName: $Keys = $Keys, - State: NavigationState = NavigationState, - ScreenOptions: {...} = {...}, - EventMap: EventMapBase = EventMapCore, - > = {| - +name: RouteName, - +options?: ScreenOptionsProp< - ScreenOptions, - RouteProp, - NavProp, - >, - +listeners?: ScreenListenersProp< - ScreenListeners, - RouteProp, - NavProp, - >, - +initialParams?: $Partial<$ElementType>, - +getId?: ({ - +params: $ElementType, - }) => string | void, - +navigationKey?: string, - |}; - - declare export type ScreenProps< - ParamList: ParamListBase, - NavProp, - RouteName: $Keys = $Keys, - State: NavigationState = NavigationState, - ScreenOptions: {...} = {...}, - EventMap: EventMapBase = EventMapCore, - > = - | {| - ...BaseScreenProps< - ParamList, - NavProp, - RouteName, - State, - ScreenOptions, - EventMap, - >, - +component: React$ComponentType<{| - +route: RouteProp, - +navigation: NavProp, - |}>, - |} - | {| - ...BaseScreenProps< - ParamList, - NavProp, - RouteName, - State, - ScreenOptions, - EventMap, - >, - +getComponent: () => React$ComponentType<{| - +route: RouteProp, - +navigation: NavProp, - |}>, - |} - | {| - ...BaseScreenProps< - ParamList, - NavProp, - RouteName, - State, - ScreenOptions, - EventMap, - >, - +children: ({| - +route: RouteProp, - +navigation: NavProp, - |}) => React$Node, - |}; - - declare export type ScreenComponent< - GlobalParamList: ParamListBase, - ParamList: ParamListBase, - State: NavigationState = NavigationState, - ScreenOptions: {...} = {...}, - EventMap: EventMapBase = EventMapCore, - > = < - RouteName: $Keys, - NavProp: NavigationProp< - GlobalParamList, - RouteName, - State, - ScreenOptions, - EventMap, - >, - >(props: ScreenProps< - ParamList, - NavProp, - RouteName, - State, - ScreenOptions, - EventMap, - >) => React$Node; - - declare type ScreenOptionsProps< - ScreenOptions: {...}, - RouteParam, - NavHelpers, - > = {| - +screenOptions?: ScreenOptionsProp, - |}; - declare type ScreenListenersProps< - ScreenListenersParam: {...}, - RouteParam, - NavHelpers, - > = {| - +screenListeners?: ScreenListenersProp< - ScreenListenersParam, - RouteParam, - NavHelpers, - >, - |}; - declare export type ExtraNavigatorPropsBase = { - ...$Exact, - +id?: string, - +children?: React$Node, - ... - }; - declare export type NavigatorProps< - ScreenOptions: {...}, - ScreenListenersParam, - RouteParam, - NavHelpers, - ExtraNavigatorProps: ExtraNavigatorPropsBase, - > = { - ...$Exact, - ...ScreenOptionsProps, - ...ScreenListenersProps, - +defaultScreenOptions?: - | ScreenOptions - | ({| - +route: RouteParam, - +navigation: NavHelpers, - +options: ScreenOptions, - |}) => ScreenOptions, - ... - }; - declare export type NavigatorPropsBase< - ScreenOptions: {...}, - ScreenListenersParam: {...}, - NavHelpers, - > = NavigatorProps< - ScreenOptions, - ScreenListenersParam, - RouteProp<>, - NavHelpers, - ExtraNavigatorPropsBase, - >; - - declare export type CreateNavigator< - State: NavigationState, - ScreenOptions: {...}, - EventMap: EventMapBase, - ExtraNavigatorProps: ExtraNavigatorPropsBase, - > = < - GlobalParamList: ParamListBase, - ParamList: ParamListBase, - NavHelpers: NavigationHelpers< - GlobalParamList, - State, - EventMap, - >, - >() => {| - +Screen: ScreenComponent< - GlobalParamList, - ParamList, - State, - ScreenOptions, - EventMap, - >, - +Navigator: React$ComponentType<$Exact, - RouteProp, - NavHelpers, - ExtraNavigatorProps, - >>>, - +Group: React$ComponentType<{| - ...ScreenOptionsProps, NavHelpers>, - +children: React$Node, - +navigationKey?: string, - |}>, - |}; - - declare export type CreateNavigatorFactory = < - State: NavigationState, - ScreenOptions: {...}, - EventMap: EventMapBase, - NavHelpers: NavigationHelpers< - ParamListBase, - State, - EventMap, - >, - ExtraNavigatorProps: ExtraNavigatorPropsBase, - >( - navigator: React$ComponentType<$Exact, - RouteProp<>, - NavHelpers, - ExtraNavigatorProps, - >>>, - ) => CreateNavigator; - - - /** - * useNavigationBuilder - */ - - declare export type Descriptor< - NavHelpers, - ScreenOptions: {...} = {...}, - > = {| - +render: () => React$Node, - +options: $ReadOnly, - +navigation: NavHelpers, - |}; - - declare export type UseNavigationBuilder = < - State: NavigationState, - Action: GenericNavigationAction, - ScreenOptions: {...}, - RouterOptions: DefaultRouterOptions, - NavHelpers, - EventMap: EventMapBase, - ExtraNavigatorProps: ExtraNavigatorPropsBase, - >( - routerFactory: RouterFactory, - options: $Exact, - RouteProp<>, - NavHelpers, - ExtraNavigatorProps, - >>, - ) => {| - +id?: string, - +state: State, - +descriptors: {| +[key: string]: Descriptor |}, - +navigation: NavHelpers, - |}; - - /** - * EdgeInsets - */ - - declare type EdgeInsets = {| - +top: number, - +right: number, - +bottom: number, - +left: number, - |}; - - /** - * TransitionPreset - */ - - declare export type TransitionSpec = - | {| - animation: 'spring', - config: $Diff< - SpringAnimationConfigSingle, - { toValue: number | AnimatedValue, ... }, - >, - |} - | {| - animation: 'timing', - config: $Diff< - TimingAnimationConfigSingle, - { toValue: number | AnimatedValue, ... }, - >, - |}; - - declare export type StackCardInterpolationProps = {| - +current: {| - +progress: AnimatedInterpolation, - |}, - +next?: {| - +progress: AnimatedInterpolation, - |}, - +index: number, - +closing: AnimatedInterpolation, - +swiping: AnimatedInterpolation, - +inverted: AnimatedInterpolation, - +layouts: {| - +screen: {| +width: number, +height: number |}, - |}, - +insets: EdgeInsets, - |}; - declare export type StackCardInterpolatedStyle = {| - containerStyle?: AnimatedViewStyleProp, - cardStyle?: AnimatedViewStyleProp, - overlayStyle?: AnimatedViewStyleProp, - shadowStyle?: AnimatedViewStyleProp, - |}; - declare export type StackCardStyleInterpolator = ( - props: StackCardInterpolationProps, - ) => StackCardInterpolatedStyle; - - declare export type StackHeaderInterpolationProps = {| - +current: {| - +progress: AnimatedInterpolation, - |}, - +next?: {| - +progress: AnimatedInterpolation, - |}, - +layouts: {| - +header: {| +width: number, +height: number |}, - +screen: {| +width: number, +height: number |}, - +title?: {| +width: number, +height: number |}, - +leftLabel?: {| +width: number, +height: number |}, - |}, - |}; - declare export type StackHeaderInterpolatedStyle = {| - leftLabelStyle?: AnimatedViewStyleProp, - leftButtonStyle?: AnimatedViewStyleProp, - rightButtonStyle?: AnimatedViewStyleProp, - titleStyle?: AnimatedViewStyleProp, - backgroundStyle?: AnimatedViewStyleProp, - |}; - declare export type StackHeaderStyleInterpolator = ( - props: StackHeaderInterpolationProps, - ) => StackHeaderInterpolatedStyle; - - declare type GestureDirection = - | 'horizontal' - | 'horizontal-inverted' - | 'vertical' - | 'vertical-inverted'; - - declare export type TransitionPreset = {| - +gestureDirection: GestureDirection, - +transitionSpec: {| - +open: TransitionSpec, - +close: TransitionSpec, - |}, - +cardStyleInterpolator: StackCardStyleInterpolator, - +headerStyleInterpolator: StackHeaderStyleInterpolator, - |}; - - /** - * Header common options - */ - - declare export type SceneProgress = {| - +current: AnimatedInterpolation, - +next?: AnimatedInterpolation, - +previous?: AnimatedInterpolation, - |}; - - declare export type HeaderProps = {| - +navigation: NavProp, - +route: RouteProp<>, - +options: ScreenOptions, - +layout: {| +width: number, +height: number |}, - |}; - - declare export type HeaderButtonProps = $Partial<{| - +tintColor: string, - +pressColor: string, - +pressOpacity: number, - |}>; - - declare export type HeaderLeftButtonProps = $Partial<{| - ...HeaderButtonProps, - +labelVisible: boolean, - |}>; - - declare type HeaderTitleInputBase = { - +onLayout: LayoutEvent => void, - +children: string, - +allowFontScaling: ?boolean, - +tintColor: ?string, - +style: ?AnimatedTextStyleProp, - ... - }; - - declare export type HeaderTitleInputProps = - $Exact; - - declare export type HeaderCommonOptions< - NavHeaderProps, - NavHeaderLeftProps, - NavHeaderRightProps, - > = $Partial<{| - +header: NavHeaderProps => React$Node, - +headerShown: boolean, - +headerTitle: string | ( HeaderTitleInputProps => React$Node), - +headerTitleAlign: 'left' | 'center', - +headerTitleStyle: AnimatedTextStyleProp, - +headerTitleContainerStyle: AnimatedViewStyleProp, - +headerTintColor: string, - +headerTitleAllowFontScaling: boolean, - +headerLeft: NavHeaderLeftProps => React$Node, - +headerLeftContainerStyle: AnimatedViewStyleProp, - +headerRight: NavHeaderRightProps => React$Node, - +headerRightContainerStyle: AnimatedViewStyleProp, - +headerBackground: ({| style: AnimatedViewStyleProp |}) => React$Node, - +headerStyle: AnimatedViewStyleProp, - +headerTransparent: boolean, - +headerStatusBarHeight: number, - +headerShadowVisible: boolean, - +headerBackgroundContainerStyle: AnimatedViewStyleProp, - +headerPressColor: string, - +headerPressOpacity: number, - |}>; - - /** - * Stack options - */ - - declare export type StackDescriptor = Descriptor< - StackNavigationHelpers<>, - StackOptions, - >; - - declare type Scene = {| - +route: T, - +descriptor: StackDescriptor, - +progress: SceneProgress, - |}; - - declare export type StackHeaderProps = {| - ...HeaderProps, StackOptions>, - +progress: SceneProgress, - +back?: {| +title: string |}, - +styleInterpolator: StackHeaderStyleInterpolator, - |}; - - declare export type StackHeaderButtonProps = $Partial<{| - ...HeaderButtonProps, - +canGoBack: boolean, - |}>; - - declare export type StackHeaderLeftButtonProps = $Partial<{| - ...StackHeaderButtonProps, - +onPress: (() => void), - +backImage: (props: {| tintColor: string |}) => React$Node, - +label: string, - +truncatedLabel: string, - +labelVisible: boolean, - +labelStyle: AnimatedTextStyleProp, - +allowFontScaling: boolean, - +onLabelLayout: LayoutEvent => void, - +screenLayout: {| +width: number, +height: number |}, - +titleLayout: {| +width: number, +height: number |}, - +disabled: boolean, - +accessibilityLabel: string, - +style: ViewStyleProp, - |}>; - - declare export type StackOptions = $Partial<{| - +title: string, - +cardShadowEnabled: boolean, - +cardOverlayEnabled: boolean, - +cardOverlay: {| style: ViewStyleProp |} => React$Node, - +cardStyle: ViewStyleProp, - +animationEnabled: boolean, - +animationTypeForReplace: 'push' | 'pop', - +gestureEnabled: boolean, - +gestureResponseDistance: number, - +gestureVelocityImpact: number, - +safeAreaInsets: $Partial, - +keyboardHandlingEnabled: boolean, - +presentation: 'card' | 'modal' | 'transparentModal', - // Transition - ...TransitionPreset, - // Header - ...HeaderCommonOptions< - StackHeaderProps, - StackHeaderLeftButtonProps, - StackHeaderButtonProps, - >, - +headerMode: 'float' | 'screen', - +headerBackAllowFontScaling: boolean, - +headerBackTitle: string | null, - +headerBackTitleStyle: TextStyleProp, - +headerBackTitleVisible: boolean, - +headerTruncatedBackTitle: string, - +headerBackImage: $PropertyType, - +headerBackAccessibilityLabel: string, - |}>; - - /** - * Stack navigation prop - */ - - declare export type StackNavigationEventMap = {| - ...EventMapCore, - +transitionStart: {| - +data: {| +closing: boolean |}, - +canPreventDefault: false, - |}, - +transitionEnd: {| - +data: {| +closing: boolean |}, - +canPreventDefault: false, - |}, - +gestureStart: {| +data: void, +canPreventDefault: false |}, - +gestureEnd: {| +data: void, +canPreventDefault: false |}, - +gestureCancel: {| +data: void, +canPreventDefault: false |}, - |}; - - declare type StackExtraNavigationHelpers< - ParamList: ParamListBase = ParamListBase, - > = {| - +replace: SimpleNavigate, - +push: SimpleNavigate, - +pop: (count?: number) => void, - +popToTop: () => void, - |}; - - declare export type StackNavigationHelpers< - ParamList: ParamListBase = ParamListBase, - EventMap: EventMapBase = StackNavigationEventMap, - > = { - ...$Exact>, - ...StackExtraNavigationHelpers, - ... - }; - - declare export type StackNavigationProp< - ParamList: ParamListBase = ParamListBase, - RouteName: $Keys = $Keys, - Options: {...} = StackOptions, - EventMap: EventMapBase = StackNavigationEventMap, - > = {| - ...$Exact>, - ...StackExtraNavigationHelpers, - |}; - - /** - * Miscellaneous stack exports - */ - - declare type StackNavigationConfig = {| - +detachInactiveScreens?: boolean, - |}; - - declare export type ExtraStackNavigatorProps = {| - ...$Exact, - ...StackRouterOptions, - ...StackNavigationConfig, - |}; - - declare export type StackNavigatorProps< - NavHelpers: StackNavigationHelpers<> = StackNavigationHelpers<>, - > = $Exact, - RouteProp<>, - NavHelpers, - ExtraStackNavigatorProps, - >>; - - /** - * Bottom tab options - */ - - declare export type BottomTabBarButtonProps = {| - ...$Diff< - TouchableWithoutFeedbackProps, - {| onPress?: ?(event: PressEvent) => mixed |}, - >, - +to?: string, - +children: React$Node, - +onPress?: (MouseEvent | PressEvent) => void, - |}; - - declare export type TabBarVisibilityAnimationConfig = - | {| - +animation: 'spring', - +config?: $Diff< - SpringAnimationConfigSingle, - { toValue: number | AnimatedValue, useNativeDriver: boolean, ... }, - >, - |} - | {| - +animation: 'timing', - +config?: $Diff< - TimingAnimationConfigSingle, - { toValue: number | AnimatedValue, useNativeDriver: boolean, ... }, - >, - |}; - - declare export type BottomTabOptions = $Partial<{| - +title: string, - +tabBarLabel: - | string - | ({| focused: boolean, color: string |}) => React$Node, - +tabBarIcon: ({| - focused: boolean, - color: string, - size: number, - |}) => React$Node, - +tabBarBadge: number | string, - +tabBarBadgeStyle: TextStyleProp, - +tabBarAccessibilityLabel: string, - +tabBarTestID: string, - +tabBarVisibilityAnimationConfig: $Partial<{| - +show: TabBarVisibilityAnimationConfig, - +hide: TabBarVisibilityAnimationConfig, - |}>, - +tabBarButton: BottomTabBarButtonProps => React$Node, - +tabBarHideOnKeyboard: boolean, - +tabBarActiveTintColor: string, - +tabBarInactiveTintColor: string, - +tabBarActiveBackgroundColor: string, - +tabBarInactiveBackgroundColor: string, - +tabBarAllowFontScaling: boolean, - +tabBarShowLabel: boolean, - +tabBarLabelStyle: TextStyleProp, - +tabBarIconStyle: TextStyleProp, - +tabBarItemStyle: ViewStyleProp, - +tabBarLabelPosition: 'beside-icon' | 'below-icon', - +tabBarStyle: ViewStyleProp, - +unmountOnBlur: boolean, - +lazy: boolean, - ...HeaderCommonOptions< - HeaderProps, BottomTabOptions>, - HeaderLeftButtonProps, - HeaderButtonProps, - >, - |}>; - - /** - * Bottom tab navigation prop - */ - - declare export type BottomTabNavigationEventMap = {| - ...EventMapCore, - +tabPress: {| +data: void, +canPreventDefault: true |}, - +tabLongPress: {| +data: void, +canPreventDefault: false |}, - |}; - - declare type TabExtraNavigationHelpers< - ParamList: ParamListBase = ParamListBase, - > = {| - +jumpTo: SimpleNavigate, - |}; - - declare export type BottomTabNavigationHelpers< - ParamList: ParamListBase = ParamListBase, - EventMap: EventMapBase = BottomTabNavigationEventMap, - > = { - ...$Exact>, - ...TabExtraNavigationHelpers, - ... - }; - - declare export type BottomTabNavigationProp< - ParamList: ParamListBase = ParamListBase, - RouteName: $Keys = $Keys, - Options: {...} = BottomTabOptions, - EventMap: EventMapBase = BottomTabNavigationEventMap, - > = {| - ...$Exact>, - ...TabExtraNavigationHelpers, - |}; - - /** - * Miscellaneous bottom tab exports - */ - - declare export type BottomTabDescriptor = Descriptor< - BottomTabNavigationHelpers<>, - BottomTabOptions, - >; - - declare type BottomTabNavigationBuilderResult = {| - +state: TabNavigationState, - +navigation: BottomTabNavigationHelpers<>, - +descriptors: {| +[key: string]: BottomTabDescriptor |}, - |}; - - declare export type BottomTabBarProps = BottomTabNavigationBuilderResult; - - declare type BottomTabNavigationConfig = {| - +tabBar?: BottomTabBarProps => React$Node, - +safeAreaInsets?: $Partial, - +detachInactiveScreens?: boolean, - |}; - - declare export type ExtraBottomTabNavigatorProps = {| - ...$Exact, - ...TabRouterOptions, - ...BottomTabNavigationConfig, - |}; - - declare export type BottomTabNavigatorProps< - NavHelpers: BottomTabNavigationHelpers<> = BottomTabNavigationHelpers<>, - > = $Exact, - RouteProp<>, - NavHelpers, - ExtraBottomTabNavigatorProps, - >>; - - /** - * Material bottom tab options - */ - - declare export type MaterialBottomTabOptions = $Partial<{| - +title: string, - +tabBarColor: string, - +tabBarLabel: string, - +tabBarIcon: - | string - | ({| +focused: boolean, +color: string |}) => React$Node, - +tabBarBadge: boolean | number | string, - +tabBarAccessibilityLabel: string, - +tabBarTestID: string, - |}>; - - /** - * Material bottom tab navigation prop - */ - - declare export type MaterialBottomTabNavigationEventMap = {| - ...EventMapCore, - +tabPress: {| +data: void, +canPreventDefault: true |}, - |}; - - declare export type MaterialBottomTabNavigationHelpers< - ParamList: ParamListBase = ParamListBase, - EventMap: EventMapBase = MaterialBottomTabNavigationEventMap, - > = { - ...$Exact>, - ...TabExtraNavigationHelpers, - ... - }; - - declare export type MaterialBottomTabNavigationProp< - ParamList: ParamListBase = ParamListBase, - RouteName: $Keys = $Keys, - Options: {...} = MaterialBottomTabOptions, - EventMap: EventMapBase = MaterialBottomTabNavigationEventMap, - > = {| - ...$Exact>, - ...TabExtraNavigationHelpers, - |}; - - /** - * Miscellaneous material bottom tab exports - */ - - declare export type PaperFont = {| - +fontFamily: string, - +fontWeight?: - | 'normal' - | 'bold' - | '100' - | '200' - | '300' - | '400' - | '500' - | '600' - | '700' - | '800' - | '900', - |}; - - declare export type PaperFonts = {| - +regular: PaperFont, - +medium: PaperFont, - +light: PaperFont, - +thin: PaperFont, - |}; - - declare export type PaperTheme = {| - +dark: boolean, - +mode?: 'adaptive' | 'exact', - +roundness: number, - +colors: {| - +primary: string, - +background: string, - +surface: string, - +accent: string, - +error: string, - +text: string, - +onSurface: string, - +onBackground: string, - +disabled: string, - +placeholder: string, - +backdrop: string, - +notification: string, - |}, - +fonts: PaperFonts, - +animation: {| - +scale: number, - |}, - |}; - - declare export type PaperRoute = {| - +key: string, - +title?: string, - +icon?: any, - +badge?: string | number | boolean, - +color?: string, - +accessibilityLabel?: string, - +testID?: string, - |}; - - declare export type PaperTouchableProps = {| - ...TouchableWithoutFeedbackProps, - +key: string, - +route: PaperRoute, - +children: React$Node, - +borderless?: boolean, - +centered?: boolean, - +rippleColor?: string, - |}; - - declare export type MaterialBottomTabNavigationConfig = {| - +shifting?: boolean, - +labeled?: boolean, - +renderTouchable?: PaperTouchableProps => React$Node, - +activeColor?: string, - +inactiveColor?: string, - +sceneAnimationEnabled?: boolean, - +keyboardHidesNavigationBar?: boolean, - +barStyle?: ViewStyleProp, - +style?: ViewStyleProp, - +theme?: PaperTheme, - |}; - - declare export type ExtraMaterialBottomTabNavigatorProps = {| - ...$Exact, - ...TabRouterOptions, - ...MaterialBottomTabNavigationConfig, - |}; - - declare export type MaterialBottomTabNavigatorProps< - NavHelpers: MaterialBottomTabNavigationHelpers<> = - MaterialBottomTabNavigationHelpers<>, - > = $Exact, - RouteProp<>, - NavHelpers, - ExtraMaterialBottomTabNavigatorProps, - >>; - - /** - * Material top tab options - */ - - declare export type MaterialTopTabOptions = $Partial<{| - +title: string, - +tabBarLabel: - | string - | ({| +focused: boolean, +color: string |}) => React$Node, - +tabBarIcon: ({| +focused: boolean, +color: string |}) => React$Node, - +tabBarAccessibilityLabel: string, - +tabBarTestID: string, - +tabBarActiveTintColor: string, - +tabBarInactiveTintColor: string, - +tabBarPressColor: string, - +tabBarPressOpacity: number, - +tabBarShowLabel: boolean, - +tabBarShowIcon: boolean, - +tabBarAllowFontScaling: boolean, - +tabBarBounces: boolean, - +tabBarScrollEnabled: boolean, - +tabBarIconStyle: ViewStyleProp, - +tabBarLabelStyle: TextStyleProp, - +tabBarItemStyle: ViewStyleProp, - +tabBarIndicatorStyle: ViewStyleProp, - +tabBarIndicatorContainerStyle: ViewStyleProp, - +tabBarContentContainerStyle: ViewStyleProp, - +tabBarStyle: ViewStyleProp, - +tabBarBadge: () => React$Node, - +tabBarIndicator: MaterialTopTabBarIndicatorProps => React$Node, - +lazy: boolean, - +lazyPlaceholder: ({| +route: Route<> |}) => React$Node, - |}>; - - /** - * Material top tab navigation prop - */ - - declare export type MaterialTopTabNavigationEventMap = {| - ...EventMapCore, - +tabPress: {| +data: void, +canPreventDefault: true |}, - +tabLongPress: {| +data: void, +canPreventDefault: false |}, - +swipeStart: {| +data: void, +canPreventDefault: false |}, - +swipeEnd: {| +data: void, +canPreventDefault: false |}, - |}; - - declare export type MaterialTopTabNavigationHelpers< - ParamList: ParamListBase = ParamListBase, - EventMap: EventMapBase = MaterialTopTabNavigationEventMap, - > = { - ...$Exact>, - ...TabExtraNavigationHelpers, - ... - }; - - declare export type MaterialTopTabNavigationProp< - ParamList: ParamListBase = ParamListBase, - RouteName: $Keys = $Keys, - Options: {...} = MaterialTopTabOptions, - EventMap: EventMapBase = MaterialTopTabNavigationEventMap, - > = {| - ...$Exact>, - ...TabExtraNavigationHelpers, - |}; - - /** - * Miscellaneous material top tab exports - */ - - declare type MaterialTopTabPagerCommonProps = {| - +keyboardDismissMode: 'none' | 'on-drag' | 'auto', - +swipeEnabled: boolean, - +swipeVelocityImpact?: number, - +springVelocityScale?: number, - +springConfig: $Partial<{| - +damping: number, - +mass: number, - +stiffness: number, - +restSpeedThreshold: number, - +restDisplacementThreshold: number, - |}>, - +timingConfig: $Partial<{| - +duration: number, - |}>, - |}; - - declare export type MaterialTopTabPagerProps = {| - ...MaterialTopTabPagerCommonProps, - +onSwipeStart?: () => void, - +onSwipeEnd?: () => void, - +onIndexChange: (index: number) => void, - +navigationState: TabNavigationState, - +layout: {| +width: number, +height: number |}, - +removeClippedSubviews: boolean, - +children: ({| - +addListener: (type: 'enter', listener: number => void) => void, - +removeListener: (type: 'enter', listener: number => void) => void, - +position: any, // Reanimated.Node - +render: React$Node => React$Node, - +jumpTo: string => void, - |}) => React$Node, - +gestureHandlerProps: PanGestureHandlerProps, - |}; - - declare export type MaterialTopTabBarIndicatorProps = {| - +state: TabNavigationState, - +width: string, - +style?: ViewStyleProp, - +getTabWidth: number => number, - |}; - - declare export type MaterialTopTabDescriptor = Descriptor< - MaterialBottomTabNavigationHelpers<>, - MaterialBottomTabOptions, - >; - - declare type MaterialTopTabNavigationBuilderResult = {| - +state: TabNavigationState, - +navigation: MaterialTopTabNavigationHelpers<>, - +descriptors: {| +[key: string]: MaterialTopTabDescriptor |}, - |}; - - declare export type MaterialTopTabBarProps = {| - ...MaterialTopTabNavigationBuilderResult, - +layout: {| +width: number, +height: number |}, - +position: any, // Reanimated.Node - +jumpTo: string => void, - |}; - - declare export type MaterialTopTabNavigationConfig = {| - ...$Partial, - +position?: any, // Reanimated.Value - +tabBarPosition?: 'top' | 'bottom', - +initialLayout?: $Partial<{| +width: number, +height: number |}>, - +lazyPreloadDistance?: number, - +removeClippedSubviews?: boolean, - +sceneContainerStyle?: ViewStyleProp, - +style?: ViewStyleProp, - +gestureHandlerProps?: PanGestureHandlerProps, - +pager?: MaterialTopTabPagerProps => React$Node, - +tabBar?: MaterialTopTabBarProps => React$Node, - |}; - - declare export type ExtraMaterialTopTabNavigatorProps = {| - ...$Exact, - ...TabRouterOptions, - ...MaterialTopTabNavigationConfig, - |}; - - declare export type MaterialTopTabNavigatorProps< - NavHelpers: MaterialTopTabNavigationHelpers<> = - MaterialTopTabNavigationHelpers<>, - > = $Exact, - RouteProp<>, - NavHelpers, - ExtraMaterialTopTabNavigatorProps, - >>; - - /** - * Drawer options - */ - - declare export type DrawerOptions = $Partial<{| - +title: string, - +lazy: boolean, - +drawerLabel: - | string - | ({| +color: string, +focused: boolean |}) => React$Node, - +drawerIcon: ({| - +color: string, - +size: number, - +focused: boolean, - |}) => React$Node, - +drawerActiveTintColor: string, - +drawerActiveBackgroundColor: string, - +drawerInactiveTintColor: string, - +drawerInactiveBackgroundColor: string, - +drawerItemStyle: ViewStyleProp, - +drawerLabelStyle: TextStyleProp, - +drawerContentContainerStyle: ViewStyleProp, - +drawerContentStyle: ViewStyleProp, - +drawerStyle: ViewStyleProp, - +drawerPosition: 'left' | 'right', - +drawerType: 'front' | 'back' | 'slide' | 'permanent', - +drawerHideStatusBarOnOpen: boolean, - +drawerStatusBarAnimation: 'slide' | 'none' | 'fade', - +overlayColor: string, - +sceneContainerStyle: ViewStyleProp, - +gestureHandlerProps: PanGestureHandlerProps, - +swipeEnabled: boolean, - +swipeEdgeWidth: number, - +swipeMinDistance: number, - +keyboardDismissMode: 'on-drag' | 'none', - +unmountOnBlur: boolean, - ...HeaderCommonOptions< - HeaderProps, DrawerOptions>, - HeaderLeftButtonProps, - HeaderButtonProps, - >, - |}>; - - /** - * Drawer navigation prop - */ - - declare export type DrawerNavigationEventMap = - EventMapCore; - - declare type DrawerExtraNavigationHelpers< - ParamList: ParamListBase = ParamListBase, - > = {| - +jumpTo: SimpleNavigate, - +openDrawer: () => void, - +closeDrawer: () => void, - +toggleDrawer: () => void, - |}; - - declare export type DrawerNavigationHelpers< - ParamList: ParamListBase = ParamListBase, - EventMap: EventMapBase = DrawerNavigationEventMap, - > = { - ...$Exact>, - ...DrawerExtraNavigationHelpers, - ... - }; - - declare export type DrawerNavigationProp< - ParamList: ParamListBase = ParamListBase, - RouteName: $Keys = $Keys, - Options: {...} = DrawerOptions, - EventMap: EventMapBase = DrawerNavigationEventMap, - > = {| - ...$Exact>, - ...DrawerExtraNavigationHelpers, - |}; - - /** - * Miscellaneous drawer exports - */ - - declare export type DrawerDescriptor = Descriptor< - DrawerNavigationHelpers<>, - DrawerOptions, - >; - - declare type DrawerNavigationBuilderResult = {| - +state: DrawerNavigationState, - +navigation: DrawerNavigationHelpers<>, - +descriptors: {| +[key: string]: DrawerDescriptor |}, - |}; - - declare export type DrawerNavigationConfig = {| - +drawerContent?: DrawerNavigationBuilderResult => React$Node, - +detachInactiveScreens?: boolean, - +useLegacyImplementation?: boolean, - |}; - - declare export type ExtraDrawerNavigatorProps = {| - ...$Exact, - ...DrawerRouterOptions, - ...DrawerNavigationConfig, - |}; - - declare export type DrawerNavigatorProps< - NavHelpers: DrawerNavigationHelpers<> = DrawerNavigationHelpers<>, - > = $Exact, - RouteProp<>, - NavHelpers, - ExtraDrawerNavigatorProps, - >>; - - /** - * BaseNavigationContainer - */ - - declare export type BaseNavigationContainerProps = {| - +children: React$Node, - +initialState?: PossiblyStaleNavigationState, - +onStateChange?: (state: ?PossiblyStaleNavigationState) => void, - +independent?: boolean, - |}; - - declare export type ContainerEventMap = {| - ...GlobalEventMap, - +options: {| - +data: {| +options: { +[key: string]: mixed, ... } |}, - +canPreventDefault: false, - |}, - +__unsafe_action__: {| - +data: {| - +action: GenericNavigationAction, - +noop: boolean, - |}, - +canPreventDefault: false, - |}, - |}; - - declare export type BaseNavigationContainerInterface = {| - ...$Exact>, - +resetRoot: (state?: PossiblyStaleNavigationState) => void, - +getRootState: () => NavigationState, - +getCurrentRoute: () => RouteProp<> | void, - +getCurrentOptions: () => Object | void, - +isReady: () => boolean, - |}; - - declare type BaseNavigationContainerInterfaceRef = {| - ...BaseNavigationContainerInterface, - +current: BaseNavigationContainerInterface | null, - |}; - - /** - * State utils - */ - - declare export type GetStateFromPath = ( - path: string, - options?: LinkingConfig, - ) => PossiblyStaleNavigationState; - - declare export type GetPathFromState = ( - state?: ?PossiblyStaleNavigationState, - options?: LinkingConfig, - ) => string; - - declare export type GetFocusedRouteNameFromRoute = - PossiblyStaleRoute => ?string; - - /** - * Linking - */ - - declare export type ScreenLinkingConfig = {| - +path?: string, - +exact?: boolean, - +parse?: {| +[param: string]: string => mixed |}, - +stringify?: {| +[param: string]: mixed => string |}, - +screens?: ScreenLinkingConfigMap, - +initialRouteName?: string, - |}; - - declare export type ScreenLinkingConfigMap = {| - +[routeName: string]: string | ScreenLinkingConfig, - |}; - - declare export type LinkingConfig = {| - +initialRouteName?: string, - +screens: ScreenLinkingConfigMap, - |}; - - declare export type LinkingOptions = {| - +enabled?: boolean, - +prefixes: $ReadOnlyArray, - +config?: LinkingConfig, - +getStateFromPath?: GetStateFromPath, - +getPathFromState?: GetPathFromState, - |}; - - /** - * NavigationContainer - */ - - declare export type Theme = {| - +dark: boolean, - +colors: {| - +primary: string, - +background: string, - +card: string, - +text: string, - +border: string, - |}, - |}; - - declare export type NavigationContainerType = React$AbstractComponent< - {| - ...BaseNavigationContainerProps, - +theme?: Theme, - +linking?: LinkingOptions, - +fallback?: React$Node, - +onReady?: () => mixed, - |}, - BaseNavigationContainerInterface, - >; - - //--------------------------------------------------------------------------- - // SECTION 2: EXPORTED MODULE - // This section defines the module exports and contains exported types that - // are not present in any other React Navigation libdef. - //--------------------------------------------------------------------------- + import type { + ImageURISource, + HeaderTitleInputBase, + StackHeaderLeftButtonProps, + AnimatedViewStyleProp, + } from '@react-navigation/core'; /** * Image assets */ declare export var Assets: $ReadOnlyArray; /** * Header components */ - declare export type StackHeaderTitleProps = $Partial; + declare export type StackHeaderTitleProps = Partial; declare export var HeaderTitle: React$ComponentType; - declare export type HeaderBackButtonProps = $Partial<{| + declare export type HeaderBackButtonProps = Partial<{| ...StackHeaderLeftButtonProps, +disabled: boolean, +accessibilityLabel: string, |}>; declare export var HeaderBackButton: React$ComponentType< HeaderBackButtonProps, >; - declare export type HeaderBackgroundProps = $Partial<{ + declare export type HeaderBackgroundProps = Partial<{ +children: React$Node, +style: AnimatedViewStyleProp, ... }>; declare export var HeaderBackground: React$ComponentType< HeaderBackgroundProps, >; /** * HeaderHeight accessors */ declare export var HeaderHeightContext: React$Context; declare export function useHeaderHeight(): number; } 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 index e04d4cb6e..6cc583d34 100644 --- 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 @@ -1,2295 +1,48 @@ // flow-typed signature: 2ccdb5706282eb16a225b90e11079dc1 // flow-typed version: dc2d6a22c7/@react-navigation/material-top-tabs_v5.x.x/flow_>=v0.104.x declare module '@react-navigation/material-top-tabs' { - //--------------------------------------------------------------------------- - // SECTION 1: IDENTICAL TYPE DEFINITIONS - // This section is identical across all React Navigation libdefs and contains - // shared definitions. We wish we could make it DRY and import from a shared - // definition, but that isn't yet possible. - //--------------------------------------------------------------------------- - - /** - * We start with some definitions that we have copy-pasted from React Native - * source files. - */ - - // This is a bastardization of the true StyleObj type located in - // react-native/Libraries/StyleSheet/StyleSheetTypes. We unfortunately can't - // import that here, and it's too lengthy (and consequently too brittle) to - // copy-paste here either. - declare type StyleObj = - | null - | void - | number - | false - | '' - | $ReadOnlyArray - | { [name: string]: any, ... }; - declare type ViewStyleProp = StyleObj; - declare type TextStyleProp = StyleObj; - declare type AnimatedViewStyleProp = StyleObj; - declare type AnimatedTextStyleProp = StyleObj; - - // Vaguely copied from - // react-native/Libraries/Animated/src/animations/Animation.js - declare type EndResult = { finished: boolean, ... }; - declare type EndCallback = (result: EndResult) => void; - declare interface Animation { - start( - fromValue: number, - onUpdate: (value: number) => void, - onEnd: ?EndCallback, - previousAnimation: ?Animation, - animatedValue: AnimatedValue, - ): void; - stop(): void; - } - declare type AnimationConfig = { - isInteraction?: boolean, - useNativeDriver: boolean, - onComplete?: ?EndCallback, - iterations?: number, - ... - }; - - // Vaguely copied from - // react-native/Libraries/Animated/src/nodes/AnimatedTracking.js - declare interface AnimatedTracking { - constructor( - value: AnimatedValue, - parent: any, - animationClass: any, - animationConfig: Object, - callback?: ?EndCallback, - ): void; - update(): void; - } - - // Vaguely copied from - // react-native/Libraries/Animated/src/nodes/AnimatedValue.js - declare type ValueListenerCallback = (state: { value: number, ... }) => void; - declare interface AnimatedValue { - constructor(value: number): void; - setValue(value: number): void; - setOffset(offset: number): void; - flattenOffset(): void; - extractOffset(): void; - addListener(callback: ValueListenerCallback): string; - removeListener(id: string): void; - removeAllListeners(): void; - stopAnimation(callback?: ?(value: number) => void): void; - resetAnimation(callback?: ?(value: number) => void): void; - interpolate(config: InterpolationConfigType): AnimatedInterpolation; - animate(animation: Animation, callback: ?EndCallback): void; - stopTracking(): void; - track(tracking: AnimatedTracking): void; - } - - // Copied from - // react-native/Libraries/Animated/src/animations/TimingAnimation.js - declare type TimingAnimationConfigSingle = AnimationConfig & { - toValue: number | AnimatedValue, - easing?: (value: number) => number, - duration?: number, - delay?: number, - ... - }; - - // Copied from - // react-native/Libraries/Animated/src/animations/SpringAnimation.js - declare type SpringAnimationConfigSingle = AnimationConfig & { - toValue: number | AnimatedValue, - overshootClamping?: boolean, - restDisplacementThreshold?: number, - restSpeedThreshold?: number, - velocity?: number, - bounciness?: number, - speed?: number, - tension?: number, - friction?: number, - stiffness?: number, - damping?: number, - mass?: number, - delay?: number, - ... - }; - - // Copied from react-native/Libraries/Types/CoreEventTypes.js - declare type SyntheticEvent = $ReadOnly<{| - bubbles: ?boolean, - cancelable: ?boolean, - currentTarget: number, - defaultPrevented: ?boolean, - dispatchConfig: $ReadOnly<{| - registrationName: string, - |}>, - eventPhase: ?number, - preventDefault: () => void, - isDefaultPrevented: () => boolean, - stopPropagation: () => void, - isPropagationStopped: () => boolean, - isTrusted: ?boolean, - nativeEvent: T, - persist: () => void, - target: ?number, - timeStamp: number, - type: ?string, - |}>; - declare type Layout = $ReadOnly<{| - x: number, - y: number, - width: number, - height: number, - |}>; - declare type LayoutEvent = SyntheticEvent< - $ReadOnly<{| - layout: Layout, - |}>, - >; - declare type BlurEvent = SyntheticEvent< - $ReadOnly<{| - target: number, - |}>, - >; - declare type FocusEvent = SyntheticEvent< - $ReadOnly<{| - target: number, - |}>, - >; - declare type ResponderSyntheticEvent = $ReadOnly<{| - ...SyntheticEvent, - touchHistory: $ReadOnly<{| - indexOfSingleActiveTouch: number, - mostRecentTimeStamp: number, - numberActiveTouches: number, - touchBank: $ReadOnlyArray< - $ReadOnly<{| - touchActive: boolean, - startPageX: number, - startPageY: number, - startTimeStamp: number, - currentPageX: number, - currentPageY: number, - currentTimeStamp: number, - previousPageX: number, - previousPageY: number, - previousTimeStamp: number, - |}>, - >, - |}>, - |}>; - declare type PressEvent = ResponderSyntheticEvent< - $ReadOnly<{| - changedTouches: $ReadOnlyArray<$PropertyType>, - force: number, - identifier: number, - locationX: number, - locationY: number, - pageX: number, - pageY: number, - target: ?number, - timestamp: number, - touches: $ReadOnlyArray<$PropertyType>, - |}>, - >; - - // Vaguely copied from - // react-native/Libraries/Animated/src/nodes/AnimatedInterpolation.js - declare type ExtrapolateType = 'extend' | 'identity' | 'clamp'; - declare type InterpolationConfigType = { - inputRange: Array, - outputRange: Array | Array, - easing?: (input: number) => number, - extrapolate?: ExtrapolateType, - extrapolateLeft?: ExtrapolateType, - extrapolateRight?: ExtrapolateType, - ... - }; - declare interface AnimatedInterpolation { - interpolate(config: InterpolationConfigType): AnimatedInterpolation; - } - - // Copied from react-native/Libraries/Components/View/ViewAccessibility.js - declare type AccessibilityRole = - | 'none' - | 'button' - | 'link' - | 'search' - | 'image' - | 'keyboardkey' - | 'text' - | 'adjustable' - | 'imagebutton' - | 'header' - | 'summary' - | 'alert' - | 'checkbox' - | 'combobox' - | 'menu' - | 'menubar' - | 'menuitem' - | 'progressbar' - | 'radio' - | 'radiogroup' - | 'scrollbar' - | 'spinbutton' - | 'switch' - | 'tab' - | 'tablist' - | 'timer' - | 'toolbar'; - declare type AccessibilityActionInfo = $ReadOnly<{ - name: string, - label?: string, - ... - }>; - declare type AccessibilityActionEvent = SyntheticEvent< - $ReadOnly<{actionName: string, ...}>, - >; - declare type AccessibilityState = { - disabled?: boolean, - selected?: boolean, - checked?: ?boolean | 'mixed', - busy?: boolean, - expanded?: boolean, - ... - }; - declare type AccessibilityValue = $ReadOnly<{| - min?: number, - max?: number, - now?: number, - text?: string, - |}>; - - // Copied from - // react-native/Libraries/Components/Touchable/TouchableWithoutFeedback.js - declare type Stringish = string; - declare type EdgeInsetsProp = $ReadOnly<$Partial>; - declare type TouchableWithoutFeedbackProps = $ReadOnly<{| - accessibilityActions?: ?$ReadOnlyArray, - accessibilityElementsHidden?: ?boolean, - accessibilityHint?: ?Stringish, - accessibilityIgnoresInvertColors?: ?boolean, - accessibilityLabel?: ?Stringish, - accessibilityLiveRegion?: ?('none' | 'polite' | 'assertive'), - accessibilityRole?: ?AccessibilityRole, - accessibilityState?: ?AccessibilityState, - accessibilityValue?: ?AccessibilityValue, - accessibilityViewIsModal?: ?boolean, - accessible?: ?boolean, - children?: ?React$Node, - delayLongPress?: ?number, - delayPressIn?: ?number, - delayPressOut?: ?number, - disabled?: ?boolean, - focusable?: ?boolean, - hitSlop?: ?EdgeInsetsProp, - importantForAccessibility?: ?('auto' | 'yes' | 'no' | 'no-hide-descendants'), - nativeID?: ?string, - onAccessibilityAction?: ?(event: AccessibilityActionEvent) => mixed, - onBlur?: ?(event: BlurEvent) => mixed, - onFocus?: ?(event: FocusEvent) => mixed, - onLayout?: ?(event: LayoutEvent) => mixed, - onLongPress?: ?(event: PressEvent) => mixed, - onPress?: ?(event: PressEvent) => mixed, - onPressIn?: ?(event: PressEvent) => mixed, - onPressOut?: ?(event: PressEvent) => mixed, - pressRetentionOffset?: ?EdgeInsetsProp, - rejectResponderTermination?: ?boolean, - testID?: ?string, - touchSoundDisabled?: ?boolean, - |}>; - - // Copied from react-native/Libraries/Image/ImageSource.js - declare type ImageURISource = $ReadOnly<{ - uri?: ?string, - bundle?: ?string, - method?: ?string, - headers?: ?Object, - body?: ?string, - cache?: ?('default' | 'reload' | 'force-cache' | 'only-if-cached'), - width?: ?number, - height?: ?number, - scale?: ?number, - ... - }>; - - /** - * The following is copied from react-native-gesture-handler's libdef - */ - - declare type StateUndetermined = 0; - declare type StateFailed = 1; - declare type StateBegan = 2; - declare type StateCancelled = 3; - declare type StateActive = 4; - declare type StateEnd = 5; - - declare type GestureHandlerState = - | StateUndetermined - | StateFailed - | StateBegan - | StateCancelled - | StateActive - | StateEnd; - - declare type $SyntheticEvent = { - +nativeEvent: $ReadOnly<$Exact>, - ... - }; - - declare type $Event = $SyntheticEvent<{ - handlerTag: number, - numberOfPointers: number, - state: GestureHandlerState, - oldState: GestureHandlerState, - ...$Exact, - ... - }>; - - declare type $EventHandlers = {| - onGestureEvent?: ($Event) => mixed, - onHandlerStateChange?: ($Event) => mixed, - onBegan?: ($Event) => mixed, - onFailed?: ($Event) => mixed, - onCancelled?: ($Event) => mixed, - onActivated?: ($Event) => mixed, - onEnded?: ($Event) => mixed, - |}; - - declare type HitSlop = - | number - | {| - left?: number, - top?: number, - right?: number, - bottom?: number, - vertical?: number, - horizontal?: number, - width?: number, - height?: number, - |} - | {| - width: number, - left: number, - |} - | {| - width: number, - right: number, - |} - | {| - height: number, - top: number, - |} - | {| - height: number, - bottom: number, - |}; - - declare type $GestureHandlerProps< - AdditionalProps: {...}, - ExtraEventsProps: {...} - > = $ReadOnly<{| - ...$Exact, - ...$EventHandlers, - id?: string, - enabled?: boolean, - waitFor?: React$Ref | Array>, - simultaneousHandlers?: React$Ref | Array>, - shouldCancelWhenOutside?: boolean, - minPointers?: number, - hitSlop?: HitSlop, - children?: React$Node, - |}>; - - declare type PanGestureHandlerProps = $GestureHandlerProps< - { - activeOffsetY?: number | [number, number], - activeOffsetX?: number | [number, number], - failOffsetY?: number | [number, number], - failOffsetX?: number | [number, number], - minDist?: number, - minVelocity?: number, - minVelocityX?: number, - minVelocityY?: number, - minPointers?: number, - maxPointers?: number, - avgTouches?: boolean, - ... - }, - { - x: number, - y: number, - absoluteX: number, - absoluteY: number, - translationX: number, - translationY: number, - velocityX: number, - velocityY: number, - ... - } - >; - - /** - * MAGIC - */ - - declare type $If = $Call< - ((true, Then, Else) => Then) & ((false, Then, Else) => Else), - Test, - Then, - Else, - >; - declare type $IsA = $Call< - (Y => true) & (mixed => false), - X, - >; - declare type $IsUndefined = $IsA; - - declare type $Partial = $ReadOnly<$Rest>; - - // If { ...T, ... } counts as a T, then we're inexact - declare type $IsExact = $Call< - (T => false) & (mixed => true), - { ...T, ... }, - >; - - /** - * Actions, state, etc. - */ - - declare export type ScreenParams = { +[key: string]: mixed, ... }; - - declare export type BackAction = {| - +type: 'GO_BACK', - +source?: string, - +target?: string, - |}; - declare export type NavigateAction = {| - +type: 'NAVIGATE', - +payload: - | {| +key: string, +params?: ScreenParams |} - | {| +name: string, +key?: string, +params?: ScreenParams |}, - +source?: string, - +target?: string, - |}; - declare export type ResetAction = {| - +type: 'RESET', - +payload: StaleNavigationState, - +source?: string, - +target?: string, - |}; - declare export type SetParamsAction = {| - +type: 'SET_PARAMS', - +payload: {| +params?: ScreenParams |}, - +source?: string, - +target?: string, - |}; - declare export type CommonAction = - | BackAction - | NavigateAction - | ResetAction - | SetParamsAction; - - declare type NavigateActionCreator = {| - (routeName: string, params?: ScreenParams): NavigateAction, - ( - | {| +key: string, +params?: ScreenParams |} - | {| +name: string, +key?: string, +params?: ScreenParams |}, - ): NavigateAction, - |}; - declare export type CommonActionsType = {| - +navigate: NavigateActionCreator, - +goBack: () => BackAction, - +reset: (state: PossiblyStaleNavigationState) => ResetAction, - +setParams: (params: ScreenParams) => SetParamsAction, - |}; - - declare export type GenericNavigationAction = {| - +type: string, - +payload?: { +[key: string]: mixed, ... }, - +source?: string, - +target?: string, - |}; - - declare export type LeafRoute = {| - +key: string, - +name: RouteName, - +params?: ScreenParams, - |}; - declare export type StateRoute = {| - ...LeafRoute, - +state: NavigationState | StaleNavigationState, - |}; - declare export type Route = - | LeafRoute - | StateRoute; - - declare export type NavigationState = {| - +key: string, - +index: number, - +routeNames: $ReadOnlyArray, - +history?: $ReadOnlyArray, - +routes: $ReadOnlyArray>, - +type: string, - +stale: false, - |}; - - declare export type StaleLeafRoute = {| - +key?: string, - +name: RouteName, - +params?: ScreenParams, - |}; - declare export type StaleStateRoute = {| - ...StaleLeafRoute, - +state: StaleNavigationState, - |}; - declare export type StaleRoute = - | StaleLeafRoute - | StaleStateRoute; - declare export type StaleNavigationState = {| - // It's possible to pass React Nav a StaleNavigationState with an undefined - // index, but React Nav will always return one with the index set. This is - // the same as for the type property below, but in the case of index we tend - // to rely on it being set more... - +index: number, - +history?: $ReadOnlyArray, - +routes: $ReadOnlyArray>, - +type?: string, - +stale?: true, - |}; - - declare export type PossiblyStaleNavigationState = - | NavigationState - | StaleNavigationState; - declare export type PossiblyStaleRoute = - | Route - | StaleRoute; - - /** - * Routers - */ - - declare type ActionCreators< - State: NavigationState, - Action: GenericNavigationAction, - > = { - +[key: string]: (...args: any) => (Action | State => Action), - ... - }; - - declare export type DefaultRouterOptions = { - +initialRouteName?: string, - ... - }; - - declare export type RouterFactory< - State: NavigationState, - Action: GenericNavigationAction, - RouterOptions: DefaultRouterOptions, - > = (options: RouterOptions) => Router; - - declare export type ParamListBase = { +[key: string]: ?ScreenParams, ... }; - - declare export type RouterConfigOptions = {| - +routeNames: $ReadOnlyArray, - +routeParamList: ParamListBase, - |}; - - declare export type Router< - State: NavigationState, - Action: GenericNavigationAction, - > = {| - +type: $PropertyType, - +getInitialState: (options: RouterConfigOptions) => State, - +getRehydratedState: ( - partialState: PossiblyStaleNavigationState, - options: RouterConfigOptions, - ) => State, - +getStateForRouteNamesChange: ( - state: State, - options: RouterConfigOptions, - ) => State, - +getStateForRouteFocus: (state: State, key: string) => State, - +getStateForAction: ( - state: State, - action: Action, - options: RouterConfigOptions, - ) => ?PossiblyStaleNavigationState; - +shouldActionChangeFocus: (action: GenericNavigationAction) => boolean, - +actionCreators?: ActionCreators, - |}; - - /** - * Stack actions and router - */ - - declare export type StackNavigationState = {| - ...NavigationState, - +type: 'stack', - |}; - - declare export type ReplaceAction = {| - +type: 'REPLACE', - +payload: {| +name: string, +key?: ?string, +params?: ScreenParams |}, - +source?: string, - +target?: string, - |}; - declare export type PushAction = {| - +type: 'PUSH', - +payload: {| +name: string, +key?: ?string, +params?: ScreenParams |}, - +source?: string, - +target?: string, - |}; - declare export type PopAction = {| - +type: 'POP', - +payload: {| +count: number |}, - +source?: string, - +target?: string, - |}; - declare export type PopToTopAction = {| - +type: 'POP_TO_TOP', - +source?: string, - +target?: string, - |}; - declare export type StackAction = - | CommonAction - | ReplaceAction - | PushAction - | PopAction - | PopToTopAction; - - declare export type StackActionsType = {| - +replace: (routeName: string, params?: ScreenParams) => ReplaceAction, - +push: (routeName: string, params?: ScreenParams) => PushAction, - +pop: (count?: number) => PopAction, - +popToTop: () => PopToTopAction, - |}; - - declare export type StackRouterOptions = $Exact; - - /** - * Tab actions and router - */ - - declare export type TabNavigationState = {| - ...NavigationState, - +type: 'tab', - +history: $ReadOnlyArray<{| type: 'route', key: string |}>, - |}; - - declare export type JumpToAction = {| - +type: 'JUMP_TO', - +payload: {| +name: string, +params?: ScreenParams |}, - +source?: string, - +target?: string, - |}; - declare export type TabAction = - | CommonAction - | JumpToAction; - - declare export type TabActionsType = {| - +jumpTo: string => JumpToAction, - |}; - - declare export type TabRouterOptions = {| - ...$Exact, - +backBehavior?: 'initialRoute' | 'order' | 'history' | 'none', - |}; - - /** - * Drawer actions and router - */ - - declare type DrawerHistoryEntry = - | {| +type: 'route', +key: string |} - | {| +type: 'drawer' |}; - declare export type DrawerNavigationState = {| - ...NavigationState, - +type: 'drawer', - +history: $ReadOnlyArray, - |}; - - declare export type OpenDrawerAction = {| - +type: 'OPEN_DRAWER', - +source?: string, - +target?: string, - |}; - declare export type CloseDrawerAction = {| - +type: 'CLOSE_DRAWER', - +source?: string, - +target?: string, - |}; - declare export type ToggleDrawerAction = {| - +type: 'TOGGLE_DRAWER', - +source?: string, - +target?: string, - |}; - declare export type DrawerAction = - | TabAction - | OpenDrawerAction - | CloseDrawerAction - | ToggleDrawerAction; - - declare export type DrawerActionsType = {| - ...TabActionsType, - +openDrawer: () => OpenDrawerAction, - +closeDrawer: () => CloseDrawerAction, - +toggleDrawer: () => ToggleDrawerAction, - |}; - - declare export type DrawerRouterOptions = {| - ...TabRouterOptions, - +defaultStatus?: 'open' | 'closed', - |}; - - /** - * Events - */ - - declare export type EventMapBase = { - +[name: string]: {| - +data?: mixed, - +canPreventDefault?: boolean, - |}, - ... - }; - declare type EventPreventDefaultProperties = $If< - Test, - {| +defaultPrevented: boolean, +preventDefault: () => void |}, - {| |}, - >; - declare type EventDataProperties = $If< - $IsUndefined, - {| |}, - {| +data: Data |}, - >; - declare type EventArg< - EventName: string, - CanPreventDefault: ?boolean = false, - Data = void, - > = {| - ...EventPreventDefaultProperties, - ...EventDataProperties, - +type: EventName, - +target?: string, - |}; - declare type GlobalEventMap = {| - +state: {| +data: {| +state: State |}, +canPreventDefault: false |}, - |}; - declare type EventMapCore = {| - ...GlobalEventMap, - +focus: {| +data: void, +canPreventDefault: false |}, - +blur: {| +data: void, +canPreventDefault: false |}, - +beforeRemove: {| - +data: {| +action: GenericNavigationAction |}, - +canPreventDefault: true, - |}, - |}; - declare type EventListenerCallback< - EventName: string, - State: PossiblyStaleNavigationState = NavigationState, - EventMap: EventMapBase = EventMapCore, - > = (e: EventArg< - EventName, - $PropertyType< - $ElementType< - {| ...EventMap, ...EventMapCore |}, - EventName, - >, - 'canPreventDefault', - >, - $PropertyType< - $ElementType< - {| ...EventMap, ...EventMapCore |}, - EventName, - >, - 'data', - >, - >) => mixed; - - /** - * Navigation prop - */ - - declare type PartialWithMergeProperty = $If< - $IsExact, - { ...$Partial, +merge: true }, - { ...$Partial, +merge: true, ... }, - >; - - declare type EitherExactOrPartialWithMergeProperty = - | ParamsType - | PartialWithMergeProperty; - - declare export type SimpleNavigate = - >( - routeName: DestinationRouteName, - params: EitherExactOrPartialWithMergeProperty< - $ElementType, - >, - ) => void; - - declare export type Navigate = - & SimpleNavigate - & >( - route: $If< - $IsUndefined<$ElementType>, - | {| +key: string |} - | {| +name: DestinationRouteName, +key?: string |}, - | {| - +key: string, - +params?: EitherExactOrPartialWithMergeProperty< - $ElementType, - >, - |} - | {| - +name: DestinationRouteName, - +key?: string, - +params?: EitherExactOrPartialWithMergeProperty< - $ElementType, - >, - |}, - >, - ) => void; - - declare type CoreNavigationHelpers< - ParamList: ParamListBase, - State: PossiblyStaleNavigationState = PossiblyStaleNavigationState, - EventMap: EventMapBase = EventMapCore, - > = { - +navigate: Navigate, - +dispatch: ( - action: - | GenericNavigationAction - | (State => GenericNavigationAction), - ) => void, - +reset: PossiblyStaleNavigationState => void, - +goBack: () => void, - +isFocused: () => boolean, - +canGoBack: () => boolean, - +getId: () => string | void, - +getParent: >(id?: string) => ?Parent, - +getState: () => NavigationState, - +addListener: |}, - >>( - name: EventName, - callback: EventListenerCallback, - ) => () => void, - +removeListener: |}, - >>( - name: EventName, - callback: EventListenerCallback, - ) => void, - ... - }; - - declare export type NavigationHelpers< - ParamList: ParamListBase, - State: PossiblyStaleNavigationState = PossiblyStaleNavigationState, - EventMap: EventMapBase = EventMapCore, - > = { - ...$Exact>, - +setParams: (params: ScreenParams) => void, - ... - }; - - declare type SetParamsInput< - ParamList: ParamListBase, - RouteName: $Keys = $Keys, - > = $If< - $IsUndefined<$ElementType>, - empty, - $Partial<$NonMaybeType<$ElementType>>, - >; - - declare export type NavigationProp< - ParamList: ParamListBase, - RouteName: $Keys = $Keys, - State: PossiblyStaleNavigationState = PossiblyStaleNavigationState, - ScreenOptions: {...} = {...}, - EventMap: EventMapBase = EventMapCore, - > = { - ...$Exact>, - +setOptions: (options: $Partial) => void, - +setParams: (params: SetParamsInput) => void, - ... - }; - - /** - * CreateNavigator - */ - - declare export type RouteProp< - ParamList: ParamListBase = ParamListBase, - RouteName: $Keys = $Keys, - > = {| - ...LeafRoute, - +params: $ElementType, - +path?: string, - |}; - - declare type ScreenOptionsProp< - ScreenOptions: {...}, - RouteParam, - NavHelpers, - > = - | ScreenOptions - | ({| +route: RouteParam, +navigation: NavHelpers |}) => ScreenOptions; - declare export type ScreenListeners< - State: NavigationState = NavigationState, - EventMap: EventMapBase = EventMapCore, - > = $ObjMapi< - {| [name: $Keys]: empty |}, - >(K, empty) => EventListenerCallback, - >; - declare type ScreenListenersProp< - ScreenListenersParam: {...}, - RouteParam, - NavHelpers, - > = - | ScreenListenersParam - | ({| +route: RouteParam, +navigation: NavHelpers |}) => ScreenListenersParam; - - declare type BaseScreenProps< - ParamList: ParamListBase, - NavProp, - RouteName: $Keys = $Keys, - State: NavigationState = NavigationState, - ScreenOptions: {...} = {...}, - EventMap: EventMapBase = EventMapCore, - > = {| - +name: RouteName, - +options?: ScreenOptionsProp< - ScreenOptions, - RouteProp, - NavProp, - >, - +listeners?: ScreenListenersProp< - ScreenListeners, - RouteProp, - NavProp, - >, - +initialParams?: $Partial<$ElementType>, - +getId?: ({ - +params: $ElementType, - }) => string | void, - +navigationKey?: string, - |}; - - declare export type ScreenProps< - ParamList: ParamListBase, - NavProp, - RouteName: $Keys = $Keys, - State: NavigationState = NavigationState, - ScreenOptions: {...} = {...}, - EventMap: EventMapBase = EventMapCore, - > = - | {| - ...BaseScreenProps< - ParamList, - NavProp, - RouteName, - State, - ScreenOptions, - EventMap, - >, - +component: React$ComponentType<{| - +route: RouteProp, - +navigation: NavProp, - |}>, - |} - | {| - ...BaseScreenProps< - ParamList, - NavProp, - RouteName, - State, - ScreenOptions, - EventMap, - >, - +getComponent: () => React$ComponentType<{| - +route: RouteProp, - +navigation: NavProp, - |}>, - |} - | {| - ...BaseScreenProps< - ParamList, - NavProp, - RouteName, - State, - ScreenOptions, - EventMap, - >, - +children: ({| - +route: RouteProp, - +navigation: NavProp, - |}) => React$Node, - |}; - - declare export type ScreenComponent< - GlobalParamList: ParamListBase, - ParamList: ParamListBase, - State: NavigationState = NavigationState, - ScreenOptions: {...} = {...}, - EventMap: EventMapBase = EventMapCore, - > = < - RouteName: $Keys, - NavProp: NavigationProp< - GlobalParamList, - RouteName, - State, - ScreenOptions, - EventMap, - >, - >(props: ScreenProps< - ParamList, - NavProp, - RouteName, - State, - ScreenOptions, - EventMap, - >) => React$Node; - - declare type ScreenOptionsProps< - ScreenOptions: {...}, - RouteParam, - NavHelpers, - > = {| - +screenOptions?: ScreenOptionsProp, - |}; - declare type ScreenListenersProps< - ScreenListenersParam: {...}, - RouteParam, - NavHelpers, - > = {| - +screenListeners?: ScreenListenersProp< - ScreenListenersParam, - RouteParam, - NavHelpers, - >, - |}; - declare export type ExtraNavigatorPropsBase = { - ...$Exact, - +id?: string, - +children?: React$Node, - ... - }; - declare export type NavigatorProps< - ScreenOptions: {...}, - ScreenListenersParam, - RouteParam, - NavHelpers, - ExtraNavigatorProps: ExtraNavigatorPropsBase, - > = { - ...$Exact, - ...ScreenOptionsProps, - ...ScreenListenersProps, - +defaultScreenOptions?: - | ScreenOptions - | ({| - +route: RouteParam, - +navigation: NavHelpers, - +options: ScreenOptions, - |}) => ScreenOptions, - ... - }; - declare export type NavigatorPropsBase< - ScreenOptions: {...}, - ScreenListenersParam: {...}, - NavHelpers, - > = NavigatorProps< - ScreenOptions, - ScreenListenersParam, - RouteProp<>, - NavHelpers, - ExtraNavigatorPropsBase, - >; - - declare export type CreateNavigator< - State: NavigationState, - ScreenOptions: {...}, - EventMap: EventMapBase, - ExtraNavigatorProps: ExtraNavigatorPropsBase, - > = < - GlobalParamList: ParamListBase, - ParamList: ParamListBase, - NavHelpers: NavigationHelpers< - GlobalParamList, - State, - EventMap, - >, - >() => {| - +Screen: ScreenComponent< - GlobalParamList, - ParamList, - State, - ScreenOptions, - EventMap, - >, - +Navigator: React$ComponentType<$Exact, - RouteProp, - NavHelpers, - ExtraNavigatorProps, - >>>, - +Group: React$ComponentType<{| - ...ScreenOptionsProps, NavHelpers>, - +children: React$Node, - +navigationKey?: string, - |}>, - |}; - - declare export type CreateNavigatorFactory = < - State: NavigationState, - ScreenOptions: {...}, - EventMap: EventMapBase, - NavHelpers: NavigationHelpers< - ParamListBase, - State, - EventMap, - >, - ExtraNavigatorProps: ExtraNavigatorPropsBase, - >( - navigator: React$ComponentType<$Exact, - RouteProp<>, - NavHelpers, - ExtraNavigatorProps, - >>>, - ) => CreateNavigator; - - - /** - * useNavigationBuilder - */ - - declare export type Descriptor< - NavHelpers, - ScreenOptions: {...} = {...}, - > = {| - +render: () => React$Node, - +options: $ReadOnly, - +navigation: NavHelpers, - |}; - - declare export type UseNavigationBuilder = < - State: NavigationState, - Action: GenericNavigationAction, - ScreenOptions: {...}, - RouterOptions: DefaultRouterOptions, - NavHelpers, - EventMap: EventMapBase, - ExtraNavigatorProps: ExtraNavigatorPropsBase, - >( - routerFactory: RouterFactory, - options: $Exact, - RouteProp<>, - NavHelpers, - ExtraNavigatorProps, - >>, - ) => {| - +id?: string, - +state: State, - +descriptors: {| +[key: string]: Descriptor |}, - +navigation: NavHelpers, - |}; - - /** - * EdgeInsets - */ - - declare type EdgeInsets = {| - +top: number, - +right: number, - +bottom: number, - +left: number, - |}; - - /** - * TransitionPreset - */ - - declare export type TransitionSpec = - | {| - animation: 'spring', - config: $Diff< - SpringAnimationConfigSingle, - { toValue: number | AnimatedValue, ... }, - >, - |} - | {| - animation: 'timing', - config: $Diff< - TimingAnimationConfigSingle, - { toValue: number | AnimatedValue, ... }, - >, - |}; - - declare export type StackCardInterpolationProps = {| - +current: {| - +progress: AnimatedInterpolation, - |}, - +next?: {| - +progress: AnimatedInterpolation, - |}, - +index: number, - +closing: AnimatedInterpolation, - +swiping: AnimatedInterpolation, - +inverted: AnimatedInterpolation, - +layouts: {| - +screen: {| +width: number, +height: number |}, - |}, - +insets: EdgeInsets, - |}; - declare export type StackCardInterpolatedStyle = {| - containerStyle?: AnimatedViewStyleProp, - cardStyle?: AnimatedViewStyleProp, - overlayStyle?: AnimatedViewStyleProp, - shadowStyle?: AnimatedViewStyleProp, - |}; - declare export type StackCardStyleInterpolator = ( - props: StackCardInterpolationProps, - ) => StackCardInterpolatedStyle; - - declare export type StackHeaderInterpolationProps = {| - +current: {| - +progress: AnimatedInterpolation, - |}, - +next?: {| - +progress: AnimatedInterpolation, - |}, - +layouts: {| - +header: {| +width: number, +height: number |}, - +screen: {| +width: number, +height: number |}, - +title?: {| +width: number, +height: number |}, - +leftLabel?: {| +width: number, +height: number |}, - |}, - |}; - declare export type StackHeaderInterpolatedStyle = {| - leftLabelStyle?: AnimatedViewStyleProp, - leftButtonStyle?: AnimatedViewStyleProp, - rightButtonStyle?: AnimatedViewStyleProp, - titleStyle?: AnimatedViewStyleProp, - backgroundStyle?: AnimatedViewStyleProp, - |}; - declare export type StackHeaderStyleInterpolator = ( - props: StackHeaderInterpolationProps, - ) => StackHeaderInterpolatedStyle; - - declare type GestureDirection = - | 'horizontal' - | 'horizontal-inverted' - | 'vertical' - | 'vertical-inverted'; - - declare export type TransitionPreset = {| - +gestureDirection: GestureDirection, - +transitionSpec: {| - +open: TransitionSpec, - +close: TransitionSpec, - |}, - +cardStyleInterpolator: StackCardStyleInterpolator, - +headerStyleInterpolator: StackHeaderStyleInterpolator, - |}; - - /** - * Header common options - */ - - declare export type SceneProgress = {| - +current: AnimatedInterpolation, - +next?: AnimatedInterpolation, - +previous?: AnimatedInterpolation, - |}; - - declare export type HeaderProps = {| - +navigation: NavProp, - +route: RouteProp<>, - +options: ScreenOptions, - +layout: {| +width: number, +height: number |}, - |}; - - declare export type HeaderButtonProps = $Partial<{| - +tintColor: string, - +pressColor: string, - +pressOpacity: number, - |}>; - - declare export type HeaderLeftButtonProps = $Partial<{| - ...HeaderButtonProps, - +labelVisible: boolean, - |}>; - - declare type HeaderTitleInputBase = { - +onLayout: LayoutEvent => void, - +children: string, - +allowFontScaling: ?boolean, - +tintColor: ?string, - +style: ?AnimatedTextStyleProp, - ... - }; - - declare export type HeaderTitleInputProps = - $Exact; - - declare export type HeaderCommonOptions< - NavHeaderProps, - NavHeaderLeftProps, - NavHeaderRightProps, - > = $Partial<{| - +header: NavHeaderProps => React$Node, - +headerShown: boolean, - +headerTitle: string | ( HeaderTitleInputProps => React$Node), - +headerTitleAlign: 'left' | 'center', - +headerTitleStyle: AnimatedTextStyleProp, - +headerTitleContainerStyle: AnimatedViewStyleProp, - +headerTintColor: string, - +headerTitleAllowFontScaling: boolean, - +headerLeft: NavHeaderLeftProps => React$Node, - +headerLeftContainerStyle: AnimatedViewStyleProp, - +headerRight: NavHeaderRightProps => React$Node, - +headerRightContainerStyle: AnimatedViewStyleProp, - +headerBackground: ({| style: AnimatedViewStyleProp |}) => React$Node, - +headerStyle: AnimatedViewStyleProp, - +headerTransparent: boolean, - +headerStatusBarHeight: number, - +headerShadowVisible: boolean, - +headerBackgroundContainerStyle: AnimatedViewStyleProp, - +headerPressColor: string, - +headerPressOpacity: number, - |}>; - - /** - * Stack options - */ - - declare export type StackDescriptor = Descriptor< - StackNavigationHelpers<>, - StackOptions, - >; - - declare type Scene = {| - +route: T, - +descriptor: StackDescriptor, - +progress: SceneProgress, - |}; - - declare export type StackHeaderProps = {| - ...HeaderProps, StackOptions>, - +progress: SceneProgress, - +back?: {| +title: string |}, - +styleInterpolator: StackHeaderStyleInterpolator, - |}; - - declare export type StackHeaderButtonProps = $Partial<{| - ...HeaderButtonProps, - +canGoBack: boolean, - |}>; - - declare export type StackHeaderLeftButtonProps = $Partial<{| - ...StackHeaderButtonProps, - +onPress: (() => void), - +backImage: (props: {| tintColor: string |}) => React$Node, - +label: string, - +truncatedLabel: string, - +labelVisible: boolean, - +labelStyle: AnimatedTextStyleProp, - +allowFontScaling: boolean, - +onLabelLayout: LayoutEvent => void, - +screenLayout: {| +width: number, +height: number |}, - +titleLayout: {| +width: number, +height: number |}, - +disabled: boolean, - +accessibilityLabel: string, - +style: ViewStyleProp, - |}>; - - declare export type StackOptions = $Partial<{| - +title: string, - +cardShadowEnabled: boolean, - +cardOverlayEnabled: boolean, - +cardOverlay: {| style: ViewStyleProp |} => React$Node, - +cardStyle: ViewStyleProp, - +animationEnabled: boolean, - +animationTypeForReplace: 'push' | 'pop', - +gestureEnabled: boolean, - +gestureResponseDistance: number, - +gestureVelocityImpact: number, - +safeAreaInsets: $Partial, - +keyboardHandlingEnabled: boolean, - +presentation: 'card' | 'modal' | 'transparentModal', - // Transition - ...TransitionPreset, - // Header - ...HeaderCommonOptions< - StackHeaderProps, - StackHeaderLeftButtonProps, - StackHeaderButtonProps, - >, - +headerMode: 'float' | 'screen', - +headerBackAllowFontScaling: boolean, - +headerBackTitle: string | null, - +headerBackTitleStyle: TextStyleProp, - +headerBackTitleVisible: boolean, - +headerTruncatedBackTitle: string, - +headerBackImage: $PropertyType, - +headerBackAccessibilityLabel: string, - |}>; - - /** - * Stack navigation prop - */ - - declare export type StackNavigationEventMap = {| - ...EventMapCore, - +transitionStart: {| - +data: {| +closing: boolean |}, - +canPreventDefault: false, - |}, - +transitionEnd: {| - +data: {| +closing: boolean |}, - +canPreventDefault: false, - |}, - +gestureStart: {| +data: void, +canPreventDefault: false |}, - +gestureEnd: {| +data: void, +canPreventDefault: false |}, - +gestureCancel: {| +data: void, +canPreventDefault: false |}, - |}; - - declare type StackExtraNavigationHelpers< - ParamList: ParamListBase = ParamListBase, - > = {| - +replace: SimpleNavigate, - +push: SimpleNavigate, - +pop: (count?: number) => void, - +popToTop: () => void, - |}; - - declare export type StackNavigationHelpers< - ParamList: ParamListBase = ParamListBase, - EventMap: EventMapBase = StackNavigationEventMap, - > = { - ...$Exact>, - ...StackExtraNavigationHelpers, - ... - }; - - declare export type StackNavigationProp< - ParamList: ParamListBase = ParamListBase, - RouteName: $Keys = $Keys, - Options: {...} = StackOptions, - EventMap: EventMapBase = StackNavigationEventMap, - > = {| - ...$Exact>, - ...StackExtraNavigationHelpers, - |}; - - /** - * Miscellaneous stack exports - */ - - declare type StackNavigationConfig = {| - +detachInactiveScreens?: boolean, - |}; - - declare export type ExtraStackNavigatorProps = {| - ...$Exact, - ...StackRouterOptions, - ...StackNavigationConfig, - |}; - - declare export type StackNavigatorProps< - NavHelpers: StackNavigationHelpers<> = StackNavigationHelpers<>, - > = $Exact, - RouteProp<>, - NavHelpers, - ExtraStackNavigatorProps, - >>; - - /** - * Bottom tab options - */ - - declare export type BottomTabBarButtonProps = {| - ...$Diff< - TouchableWithoutFeedbackProps, - {| onPress?: ?(event: PressEvent) => mixed |}, - >, - +to?: string, - +children: React$Node, - +onPress?: (MouseEvent | PressEvent) => void, - |}; - - declare export type TabBarVisibilityAnimationConfig = - | {| - +animation: 'spring', - +config?: $Diff< - SpringAnimationConfigSingle, - { toValue: number | AnimatedValue, useNativeDriver: boolean, ... }, - >, - |} - | {| - +animation: 'timing', - +config?: $Diff< - TimingAnimationConfigSingle, - { toValue: number | AnimatedValue, useNativeDriver: boolean, ... }, - >, - |}; - - declare export type BottomTabOptions = $Partial<{| - +title: string, - +tabBarLabel: - | string - | ({| focused: boolean, color: string |}) => React$Node, - +tabBarIcon: ({| - focused: boolean, - color: string, - size: number, - |}) => React$Node, - +tabBarBadge: number | string, - +tabBarBadgeStyle: TextStyleProp, - +tabBarAccessibilityLabel: string, - +tabBarTestID: string, - +tabBarVisibilityAnimationConfig: $Partial<{| - +show: TabBarVisibilityAnimationConfig, - +hide: TabBarVisibilityAnimationConfig, - |}>, - +tabBarButton: BottomTabBarButtonProps => React$Node, - +tabBarHideOnKeyboard: boolean, - +tabBarActiveTintColor: string, - +tabBarInactiveTintColor: string, - +tabBarActiveBackgroundColor: string, - +tabBarInactiveBackgroundColor: string, - +tabBarAllowFontScaling: boolean, - +tabBarShowLabel: boolean, - +tabBarLabelStyle: TextStyleProp, - +tabBarIconStyle: TextStyleProp, - +tabBarItemStyle: ViewStyleProp, - +tabBarLabelPosition: 'beside-icon' | 'below-icon', - +tabBarStyle: ViewStyleProp, - +unmountOnBlur: boolean, - +lazy: boolean, - ...HeaderCommonOptions< - HeaderProps, BottomTabOptions>, - HeaderLeftButtonProps, - HeaderButtonProps, - >, - |}>; - - /** - * Bottom tab navigation prop - */ - - declare export type BottomTabNavigationEventMap = {| - ...EventMapCore, - +tabPress: {| +data: void, +canPreventDefault: true |}, - +tabLongPress: {| +data: void, +canPreventDefault: false |}, - |}; - - declare type TabExtraNavigationHelpers< - ParamList: ParamListBase = ParamListBase, - > = {| - +jumpTo: SimpleNavigate, - |}; - - declare export type BottomTabNavigationHelpers< - ParamList: ParamListBase = ParamListBase, - EventMap: EventMapBase = BottomTabNavigationEventMap, - > = { - ...$Exact>, - ...TabExtraNavigationHelpers, - ... - }; - - declare export type BottomTabNavigationProp< - ParamList: ParamListBase = ParamListBase, - RouteName: $Keys = $Keys, - Options: {...} = BottomTabOptions, - EventMap: EventMapBase = BottomTabNavigationEventMap, - > = {| - ...$Exact>, - ...TabExtraNavigationHelpers, - |}; - - /** - * Miscellaneous bottom tab exports - */ - - declare export type BottomTabDescriptor = Descriptor< - BottomTabNavigationHelpers<>, - BottomTabOptions, - >; - - declare type BottomTabNavigationBuilderResult = {| - +state: TabNavigationState, - +navigation: BottomTabNavigationHelpers<>, - +descriptors: {| +[key: string]: BottomTabDescriptor |}, - |}; - - declare export type BottomTabBarProps = BottomTabNavigationBuilderResult; - - declare type BottomTabNavigationConfig = {| - +tabBar?: BottomTabBarProps => React$Node, - +safeAreaInsets?: $Partial, - +detachInactiveScreens?: boolean, - |}; - - declare export type ExtraBottomTabNavigatorProps = {| - ...$Exact, - ...TabRouterOptions, - ...BottomTabNavigationConfig, - |}; - - declare export type BottomTabNavigatorProps< - NavHelpers: BottomTabNavigationHelpers<> = BottomTabNavigationHelpers<>, - > = $Exact, - RouteProp<>, - NavHelpers, - ExtraBottomTabNavigatorProps, - >>; - - /** - * Material bottom tab options - */ - - declare export type MaterialBottomTabOptions = $Partial<{| - +title: string, - +tabBarColor: string, - +tabBarLabel: string, - +tabBarIcon: - | string - | ({| +focused: boolean, +color: string |}) => React$Node, - +tabBarBadge: boolean | number | string, - +tabBarAccessibilityLabel: string, - +tabBarTestID: string, - |}>; - - /** - * Material bottom tab navigation prop - */ - - declare export type MaterialBottomTabNavigationEventMap = {| - ...EventMapCore, - +tabPress: {| +data: void, +canPreventDefault: true |}, - |}; - - declare export type MaterialBottomTabNavigationHelpers< - ParamList: ParamListBase = ParamListBase, - EventMap: EventMapBase = MaterialBottomTabNavigationEventMap, - > = { - ...$Exact>, - ...TabExtraNavigationHelpers, - ... - }; - - declare export type MaterialBottomTabNavigationProp< - ParamList: ParamListBase = ParamListBase, - RouteName: $Keys = $Keys, - Options: {...} = MaterialBottomTabOptions, - EventMap: EventMapBase = MaterialBottomTabNavigationEventMap, - > = {| - ...$Exact>, - ...TabExtraNavigationHelpers, - |}; - - /** - * Miscellaneous material bottom tab exports - */ - - declare export type PaperFont = {| - +fontFamily: string, - +fontWeight?: - | 'normal' - | 'bold' - | '100' - | '200' - | '300' - | '400' - | '500' - | '600' - | '700' - | '800' - | '900', - |}; - - declare export type PaperFonts = {| - +regular: PaperFont, - +medium: PaperFont, - +light: PaperFont, - +thin: PaperFont, - |}; - - declare export type PaperTheme = {| - +dark: boolean, - +mode?: 'adaptive' | 'exact', - +roundness: number, - +colors: {| - +primary: string, - +background: string, - +surface: string, - +accent: string, - +error: string, - +text: string, - +onSurface: string, - +onBackground: string, - +disabled: string, - +placeholder: string, - +backdrop: string, - +notification: string, - |}, - +fonts: PaperFonts, - +animation: {| - +scale: number, - |}, - |}; - - declare export type PaperRoute = {| - +key: string, - +title?: string, - +icon?: any, - +badge?: string | number | boolean, - +color?: string, - +accessibilityLabel?: string, - +testID?: string, - |}; - - declare export type PaperTouchableProps = {| - ...TouchableWithoutFeedbackProps, - +key: string, - +route: PaperRoute, - +children: React$Node, - +borderless?: boolean, - +centered?: boolean, - +rippleColor?: string, - |}; - - declare export type MaterialBottomTabNavigationConfig = {| - +shifting?: boolean, - +labeled?: boolean, - +renderTouchable?: PaperTouchableProps => React$Node, - +activeColor?: string, - +inactiveColor?: string, - +sceneAnimationEnabled?: boolean, - +keyboardHidesNavigationBar?: boolean, - +barStyle?: ViewStyleProp, - +style?: ViewStyleProp, - +theme?: PaperTheme, - |}; - - declare export type ExtraMaterialBottomTabNavigatorProps = {| - ...$Exact, - ...TabRouterOptions, - ...MaterialBottomTabNavigationConfig, - |}; - - declare export type MaterialBottomTabNavigatorProps< - NavHelpers: MaterialBottomTabNavigationHelpers<> = - MaterialBottomTabNavigationHelpers<>, - > = $Exact, - RouteProp<>, - NavHelpers, - ExtraMaterialBottomTabNavigatorProps, - >>; - - /** - * Material top tab options - */ - - declare export type MaterialTopTabOptions = $Partial<{| - +title: string, - +tabBarLabel: - | string - | ({| +focused: boolean, +color: string |}) => React$Node, - +tabBarIcon: ({| +focused: boolean, +color: string |}) => React$Node, - +tabBarAccessibilityLabel: string, - +tabBarTestID: string, - +tabBarActiveTintColor: string, - +tabBarInactiveTintColor: string, - +tabBarPressColor: string, - +tabBarPressOpacity: number, - +tabBarShowLabel: boolean, - +tabBarShowIcon: boolean, - +tabBarAllowFontScaling: boolean, - +tabBarBounces: boolean, - +tabBarScrollEnabled: boolean, - +tabBarIconStyle: ViewStyleProp, - +tabBarLabelStyle: TextStyleProp, - +tabBarItemStyle: ViewStyleProp, - +tabBarIndicatorStyle: ViewStyleProp, - +tabBarIndicatorContainerStyle: ViewStyleProp, - +tabBarContentContainerStyle: ViewStyleProp, - +tabBarStyle: ViewStyleProp, - +tabBarBadge: () => React$Node, - +tabBarIndicator: MaterialTopTabBarIndicatorProps => React$Node, - +lazy: boolean, - +lazyPlaceholder: ({| +route: Route<> |}) => React$Node, - |}>; - - /** - * Material top tab navigation prop - */ - - declare export type MaterialTopTabNavigationEventMap = {| - ...EventMapCore, - +tabPress: {| +data: void, +canPreventDefault: true |}, - +tabLongPress: {| +data: void, +canPreventDefault: false |}, - +swipeStart: {| +data: void, +canPreventDefault: false |}, - +swipeEnd: {| +data: void, +canPreventDefault: false |}, - |}; - - declare export type MaterialTopTabNavigationHelpers< - ParamList: ParamListBase = ParamListBase, - EventMap: EventMapBase = MaterialTopTabNavigationEventMap, - > = { - ...$Exact>, - ...TabExtraNavigationHelpers, - ... - }; - - declare export type MaterialTopTabNavigationProp< - ParamList: ParamListBase = ParamListBase, - RouteName: $Keys = $Keys, - Options: {...} = MaterialTopTabOptions, - EventMap: EventMapBase = MaterialTopTabNavigationEventMap, - > = {| - ...$Exact>, - ...TabExtraNavigationHelpers, - |}; - - /** - * Miscellaneous material top tab exports - */ - - declare type MaterialTopTabPagerCommonProps = {| - +keyboardDismissMode: 'none' | 'on-drag' | 'auto', - +swipeEnabled: boolean, - +swipeVelocityImpact?: number, - +springVelocityScale?: number, - +springConfig: $Partial<{| - +damping: number, - +mass: number, - +stiffness: number, - +restSpeedThreshold: number, - +restDisplacementThreshold: number, - |}>, - +timingConfig: $Partial<{| - +duration: number, - |}>, - |}; - - declare export type MaterialTopTabPagerProps = {| - ...MaterialTopTabPagerCommonProps, - +onSwipeStart?: () => void, - +onSwipeEnd?: () => void, - +onIndexChange: (index: number) => void, - +navigationState: TabNavigationState, - +layout: {| +width: number, +height: number |}, - +removeClippedSubviews: boolean, - +children: ({| - +addListener: (type: 'enter', listener: number => void) => void, - +removeListener: (type: 'enter', listener: number => void) => void, - +position: any, // Reanimated.Node - +render: React$Node => React$Node, - +jumpTo: string => void, - |}) => React$Node, - +gestureHandlerProps: PanGestureHandlerProps, - |}; - - declare export type MaterialTopTabBarIndicatorProps = {| - +state: TabNavigationState, - +width: string, - +style?: ViewStyleProp, - +getTabWidth: number => number, - |}; - - declare export type MaterialTopTabDescriptor = Descriptor< - MaterialBottomTabNavigationHelpers<>, - MaterialBottomTabOptions, - >; - - declare type MaterialTopTabNavigationBuilderResult = {| - +state: TabNavigationState, - +navigation: MaterialTopTabNavigationHelpers<>, - +descriptors: {| +[key: string]: MaterialTopTabDescriptor |}, - |}; - - declare export type MaterialTopTabBarProps = {| - ...MaterialTopTabNavigationBuilderResult, - +layout: {| +width: number, +height: number |}, - +position: any, // Reanimated.Node - +jumpTo: string => void, - |}; - - declare export type MaterialTopTabNavigationConfig = {| - ...$Partial, - +position?: any, // Reanimated.Value - +tabBarPosition?: 'top' | 'bottom', - +initialLayout?: $Partial<{| +width: number, +height: number |}>, - +lazyPreloadDistance?: number, - +removeClippedSubviews?: boolean, - +sceneContainerStyle?: ViewStyleProp, - +style?: ViewStyleProp, - +gestureHandlerProps?: PanGestureHandlerProps, - +pager?: MaterialTopTabPagerProps => React$Node, - +tabBar?: MaterialTopTabBarProps => React$Node, - |}; - - declare export type ExtraMaterialTopTabNavigatorProps = {| - ...$Exact, - ...TabRouterOptions, - ...MaterialTopTabNavigationConfig, - |}; - - declare export type MaterialTopTabNavigatorProps< - NavHelpers: MaterialTopTabNavigationHelpers<> = - MaterialTopTabNavigationHelpers<>, - > = $Exact, - RouteProp<>, - NavHelpers, + MaterialTopTabNavigationEventMap, ExtraMaterialTopTabNavigatorProps, - >>; - - /** - * Drawer options - */ - - declare export type DrawerOptions = $Partial<{| - +title: string, - +lazy: boolean, - +drawerLabel: - | string - | ({| +color: string, +focused: boolean |}) => React$Node, - +drawerIcon: ({| - +color: string, - +size: number, - +focused: boolean, - |}) => React$Node, - +drawerActiveTintColor: string, - +drawerActiveBackgroundColor: string, - +drawerInactiveTintColor: string, - +drawerInactiveBackgroundColor: string, - +drawerItemStyle: ViewStyleProp, - +drawerLabelStyle: TextStyleProp, - +drawerContentContainerStyle: ViewStyleProp, - +drawerContentStyle: ViewStyleProp, - +drawerStyle: ViewStyleProp, - +drawerPosition: 'left' | 'right', - +drawerType: 'front' | 'back' | 'slide' | 'permanent', - +drawerHideStatusBarOnOpen: boolean, - +drawerStatusBarAnimation: 'slide' | 'none' | 'fade', - +overlayColor: string, - +sceneContainerStyle: ViewStyleProp, - +gestureHandlerProps: PanGestureHandlerProps, - +swipeEnabled: boolean, - +swipeEdgeWidth: number, - +swipeMinDistance: number, - +keyboardDismissMode: 'on-drag' | 'none', - +unmountOnBlur: boolean, - ...HeaderCommonOptions< - HeaderProps, DrawerOptions>, - HeaderLeftButtonProps, - HeaderButtonProps, - >, - |}>; - - /** - * Drawer navigation prop - */ - - declare export type DrawerNavigationEventMap = - EventMapCore; - - declare type DrawerExtraNavigationHelpers< - ParamList: ParamListBase = ParamListBase, - > = {| - +jumpTo: SimpleNavigate, - +openDrawer: () => void, - +closeDrawer: () => void, - +toggleDrawer: () => void, - |}; - - declare export type DrawerNavigationHelpers< - ParamList: ParamListBase = ParamListBase, - EventMap: EventMapBase = DrawerNavigationEventMap, - > = { - ...$Exact>, - ...DrawerExtraNavigationHelpers, - ... - }; - - declare export type DrawerNavigationProp< - ParamList: ParamListBase = ParamListBase, - RouteName: $Keys = $Keys, - Options: {...} = DrawerOptions, - EventMap: EventMapBase = DrawerNavigationEventMap, - > = {| - ...$Exact>, - ...DrawerExtraNavigationHelpers, - |}; - - /** - * Miscellaneous drawer exports - */ - - declare export type DrawerDescriptor = Descriptor< - DrawerNavigationHelpers<>, - DrawerOptions, - >; - - declare type DrawerNavigationBuilderResult = {| - +state: DrawerNavigationState, - +navigation: DrawerNavigationHelpers<>, - +descriptors: {| +[key: string]: DrawerDescriptor |}, - |}; - - declare export type DrawerNavigationConfig = {| - +drawerContent?: DrawerNavigationBuilderResult => React$Node, - +detachInactiveScreens?: boolean, - +useLegacyImplementation?: boolean, - |}; - - declare export type ExtraDrawerNavigatorProps = {| - ...$Exact, - ...DrawerRouterOptions, - ...DrawerNavigationConfig, - |}; - - declare export type DrawerNavigatorProps< - NavHelpers: DrawerNavigationHelpers<> = DrawerNavigationHelpers<>, - > = $Exact, - RouteProp<>, - NavHelpers, - ExtraDrawerNavigatorProps, - >>; - - /** - * BaseNavigationContainer - */ - - declare export type BaseNavigationContainerProps = {| - +children: React$Node, - +initialState?: PossiblyStaleNavigationState, - +onStateChange?: (state: ?PossiblyStaleNavigationState) => void, - +independent?: boolean, - |}; - - declare export type ContainerEventMap = {| - ...GlobalEventMap, - +options: {| - +data: {| +options: { +[key: string]: mixed, ... } |}, - +canPreventDefault: false, - |}, - +__unsafe_action__: {| - +data: {| - +action: GenericNavigationAction, - +noop: boolean, - |}, - +canPreventDefault: false, - |}, - |}; - - declare export type BaseNavigationContainerInterface = {| - ...$Exact>, - +resetRoot: (state?: PossiblyStaleNavigationState) => void, - +getRootState: () => NavigationState, - +getCurrentRoute: () => RouteProp<> | void, - +getCurrentOptions: () => Object | void, - +isReady: () => boolean, - |}; - - declare type BaseNavigationContainerInterfaceRef = {| - ...BaseNavigationContainerInterface, - +current: BaseNavigationContainerInterface | null, - |}; - - /** - * State utils - */ - - declare export type GetStateFromPath = ( - path: string, - options?: LinkingConfig, - ) => PossiblyStaleNavigationState; - - declare export type GetPathFromState = ( - state?: ?PossiblyStaleNavigationState, - options?: LinkingConfig, - ) => string; - - declare export type GetFocusedRouteNameFromRoute = - PossiblyStaleRoute => ?string; - - /** - * Linking - */ - - declare export type ScreenLinkingConfig = {| - +path?: string, - +exact?: boolean, - +parse?: {| +[param: string]: string => mixed |}, - +stringify?: {| +[param: string]: mixed => string |}, - +screens?: ScreenLinkingConfigMap, - +initialRouteName?: string, - |}; - - declare export type ScreenLinkingConfigMap = {| - +[routeName: string]: string | ScreenLinkingConfig, - |}; - - declare export type LinkingConfig = {| - +initialRouteName?: string, - +screens: ScreenLinkingConfigMap, - |}; - - declare export type LinkingOptions = {| - +enabled?: boolean, - +prefixes: $ReadOnlyArray, - +config?: LinkingConfig, - +getStateFromPath?: GetStateFromPath, - +getPathFromState?: GetPathFromState, - |}; - - /** - * NavigationContainer - */ - - declare export type Theme = {| - +dark: boolean, - +colors: {| - +primary: string, - +background: string, - +card: string, - +text: string, - +border: string, - |}, - |}; - - declare export type NavigationContainerType = React$AbstractComponent< - {| - ...BaseNavigationContainerProps, - +theme?: Theme, - +linking?: LinkingOptions, - +fallback?: React$Node, - +onReady?: () => mixed, - |}, - BaseNavigationContainerInterface, - >; - - //--------------------------------------------------------------------------- - // SECTION 2: EXPORTED MODULE - // This section defines the module exports and contains exported types that - // are not present in any other React Navigation libdef. - //--------------------------------------------------------------------------- + MaterialTopTabNavigationConfig, + MaterialTopTabNavigationBuilderResult, + MaterialTopTabBarProps, + } from '@react-navigation/core'; /** * createMaterialTopTabNavigator */ declare export var createMaterialTopTabNavigator: CreateNavigator< TabNavigationState, MaterialTopTabOptions, MaterialTopTabNavigationEventMap, ExtraMaterialTopTabNavigatorProps, >; /** * MaterialTopTabView */ declare export type MaterialTopTabViewProps = {| ...MaterialTopTabNavigationConfig, ...MaterialTopTabNavigationBuilderResult, |}; declare export var MaterialTopTabView: React$ComponentType< MaterialTopTabViewProps, >; /** * MaterialTopTabBar */ declare export var MaterialTopTabBar: React$ComponentType< MaterialTopTabBarProps, >; } 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 index 6856e29a7..345e41e02 100644 --- a/native/flow-typed/npm/@react-navigation/native_v6.x.x.js +++ b/native/flow-typed/npm/@react-navigation/native_v6.x.x.js @@ -1,2444 +1,225 @@ // flow-typed signature: 219fd8b2f5868928e02073db11adb8a5 // flow-typed version: dc2d6a22c7/@react-navigation/native_v5.x.x/flow_>=v0.104.x declare module '@react-navigation/native' { - //--------------------------------------------------------------------------- - // SECTION 1: IDENTICAL TYPE DEFINITIONS - // This section is identical across all React Navigation libdefs and contains - // shared definitions. We wish we could make it DRY and import from a shared - // definition, but that isn't yet possible. - //--------------------------------------------------------------------------- - - /** - * We start with some definitions that we have copy-pasted from React Native - * source files. - */ - - // This is a bastardization of the true StyleObj type located in - // react-native/Libraries/StyleSheet/StyleSheetTypes. We unfortunately can't - // import that here, and it's too lengthy (and consequently too brittle) to - // copy-paste here either. - declare type StyleObj = - | null - | void - | number - | false - | '' - | $ReadOnlyArray - | { [name: string]: any, ... }; - declare type ViewStyleProp = StyleObj; - declare type TextStyleProp = StyleObj; - declare type AnimatedViewStyleProp = StyleObj; - declare type AnimatedTextStyleProp = StyleObj; - - // Vaguely copied from - // react-native/Libraries/Animated/src/animations/Animation.js - declare type EndResult = { finished: boolean, ... }; - declare type EndCallback = (result: EndResult) => void; - declare interface Animation { - start( - fromValue: number, - onUpdate: (value: number) => void, - onEnd: ?EndCallback, - previousAnimation: ?Animation, - animatedValue: AnimatedValue, - ): void; - stop(): void; - } - declare type AnimationConfig = { - isInteraction?: boolean, - useNativeDriver: boolean, - onComplete?: ?EndCallback, - iterations?: number, - ... - }; - - // Vaguely copied from - // react-native/Libraries/Animated/src/nodes/AnimatedTracking.js - declare interface AnimatedTracking { - constructor( - value: AnimatedValue, - parent: any, - animationClass: any, - animationConfig: Object, - callback?: ?EndCallback, - ): void; - update(): void; - } - - // Vaguely copied from - // react-native/Libraries/Animated/src/nodes/AnimatedValue.js - declare type ValueListenerCallback = (state: { value: number, ... }) => void; - declare interface AnimatedValue { - constructor(value: number): void; - setValue(value: number): void; - setOffset(offset: number): void; - flattenOffset(): void; - extractOffset(): void; - addListener(callback: ValueListenerCallback): string; - removeListener(id: string): void; - removeAllListeners(): void; - stopAnimation(callback?: ?(value: number) => void): void; - resetAnimation(callback?: ?(value: number) => void): void; - interpolate(config: InterpolationConfigType): AnimatedInterpolation; - animate(animation: Animation, callback: ?EndCallback): void; - stopTracking(): void; - track(tracking: AnimatedTracking): void; - } - - // Copied from - // react-native/Libraries/Animated/src/animations/TimingAnimation.js - declare type TimingAnimationConfigSingle = AnimationConfig & { - toValue: number | AnimatedValue, - easing?: (value: number) => number, - duration?: number, - delay?: number, - ... - }; - - // Copied from - // react-native/Libraries/Animated/src/animations/SpringAnimation.js - declare type SpringAnimationConfigSingle = AnimationConfig & { - toValue: number | AnimatedValue, - overshootClamping?: boolean, - restDisplacementThreshold?: number, - restSpeedThreshold?: number, - velocity?: number, - bounciness?: number, - speed?: number, - tension?: number, - friction?: number, - stiffness?: number, - damping?: number, - mass?: number, - delay?: number, - ... - }; - - // Copied from react-native/Libraries/Types/CoreEventTypes.js - declare type SyntheticEvent = $ReadOnly<{| - bubbles: ?boolean, - cancelable: ?boolean, - currentTarget: number, - defaultPrevented: ?boolean, - dispatchConfig: $ReadOnly<{| - registrationName: string, - |}>, - eventPhase: ?number, - preventDefault: () => void, - isDefaultPrevented: () => boolean, - stopPropagation: () => void, - isPropagationStopped: () => boolean, - isTrusted: ?boolean, - nativeEvent: T, - persist: () => void, - target: ?number, - timeStamp: number, - type: ?string, - |}>; - declare type Layout = $ReadOnly<{| - x: number, - y: number, - width: number, - height: number, - |}>; - declare type LayoutEvent = SyntheticEvent< - $ReadOnly<{| - layout: Layout, - |}>, - >; - declare type BlurEvent = SyntheticEvent< - $ReadOnly<{| - target: number, - |}>, - >; - declare type FocusEvent = SyntheticEvent< - $ReadOnly<{| - target: number, - |}>, - >; - declare type ResponderSyntheticEvent = $ReadOnly<{| - ...SyntheticEvent, - touchHistory: $ReadOnly<{| - indexOfSingleActiveTouch: number, - mostRecentTimeStamp: number, - numberActiveTouches: number, - touchBank: $ReadOnlyArray< - $ReadOnly<{| - touchActive: boolean, - startPageX: number, - startPageY: number, - startTimeStamp: number, - currentPageX: number, - currentPageY: number, - currentTimeStamp: number, - previousPageX: number, - previousPageY: number, - previousTimeStamp: number, - |}>, - >, - |}>, - |}>; - declare type PressEvent = ResponderSyntheticEvent< - $ReadOnly<{| - changedTouches: $ReadOnlyArray<$PropertyType>, - force: number, - identifier: number, - locationX: number, - locationY: number, - pageX: number, - pageY: number, - target: ?number, - timestamp: number, - touches: $ReadOnlyArray<$PropertyType>, - |}>, - >; - - // Vaguely copied from - // react-native/Libraries/Animated/src/nodes/AnimatedInterpolation.js - declare type ExtrapolateType = 'extend' | 'identity' | 'clamp'; - declare type InterpolationConfigType = { - inputRange: Array, - outputRange: Array | Array, - easing?: (input: number) => number, - extrapolate?: ExtrapolateType, - extrapolateLeft?: ExtrapolateType, - extrapolateRight?: ExtrapolateType, - ... - }; - declare interface AnimatedInterpolation { - interpolate(config: InterpolationConfigType): AnimatedInterpolation; - } - - // Copied from react-native/Libraries/Components/View/ViewAccessibility.js - declare type AccessibilityRole = - | 'none' - | 'button' - | 'link' - | 'search' - | 'image' - | 'keyboardkey' - | 'text' - | 'adjustable' - | 'imagebutton' - | 'header' - | 'summary' - | 'alert' - | 'checkbox' - | 'combobox' - | 'menu' - | 'menubar' - | 'menuitem' - | 'progressbar' - | 'radio' - | 'radiogroup' - | 'scrollbar' - | 'spinbutton' - | 'switch' - | 'tab' - | 'tablist' - | 'timer' - | 'toolbar'; - declare type AccessibilityActionInfo = $ReadOnly<{ - name: string, - label?: string, - ... - }>; - declare type AccessibilityActionEvent = SyntheticEvent< - $ReadOnly<{actionName: string, ...}>, - >; - declare type AccessibilityState = { - disabled?: boolean, - selected?: boolean, - checked?: ?boolean | 'mixed', - busy?: boolean, - expanded?: boolean, - ... - }; - declare type AccessibilityValue = $ReadOnly<{| - min?: number, - max?: number, - now?: number, - text?: string, - |}>; - - // Copied from - // react-native/Libraries/Components/Touchable/TouchableWithoutFeedback.js - declare type Stringish = string; - declare type EdgeInsetsProp = $ReadOnly<$Partial>; - declare type TouchableWithoutFeedbackProps = $ReadOnly<{| - accessibilityActions?: ?$ReadOnlyArray, - accessibilityElementsHidden?: ?boolean, - accessibilityHint?: ?Stringish, - accessibilityIgnoresInvertColors?: ?boolean, - accessibilityLabel?: ?Stringish, - accessibilityLiveRegion?: ?('none' | 'polite' | 'assertive'), - accessibilityRole?: ?AccessibilityRole, - accessibilityState?: ?AccessibilityState, - accessibilityValue?: ?AccessibilityValue, - accessibilityViewIsModal?: ?boolean, - accessible?: ?boolean, - children?: ?React$Node, - delayLongPress?: ?number, - delayPressIn?: ?number, - delayPressOut?: ?number, - disabled?: ?boolean, - focusable?: ?boolean, - hitSlop?: ?EdgeInsetsProp, - importantForAccessibility?: ?('auto' | 'yes' | 'no' | 'no-hide-descendants'), - nativeID?: ?string, - onAccessibilityAction?: ?(event: AccessibilityActionEvent) => mixed, - onBlur?: ?(event: BlurEvent) => mixed, - onFocus?: ?(event: FocusEvent) => mixed, - onLayout?: ?(event: LayoutEvent) => mixed, - onLongPress?: ?(event: PressEvent) => mixed, - onPress?: ?(event: PressEvent) => mixed, - onPressIn?: ?(event: PressEvent) => mixed, - onPressOut?: ?(event: PressEvent) => mixed, - pressRetentionOffset?: ?EdgeInsetsProp, - rejectResponderTermination?: ?boolean, - testID?: ?string, - touchSoundDisabled?: ?boolean, - |}>; - - // Copied from react-native/Libraries/Image/ImageSource.js - declare type ImageURISource = $ReadOnly<{ - uri?: ?string, - bundle?: ?string, - method?: ?string, - headers?: ?Object, - body?: ?string, - cache?: ?('default' | 'reload' | 'force-cache' | 'only-if-cached'), - width?: ?number, - height?: ?number, - scale?: ?number, - ... - }>; - - /** - * The following is copied from react-native-gesture-handler's libdef - */ - - declare type StateUndetermined = 0; - declare type StateFailed = 1; - declare type StateBegan = 2; - declare type StateCancelled = 3; - declare type StateActive = 4; - declare type StateEnd = 5; - - declare type GestureHandlerState = - | StateUndetermined - | StateFailed - | StateBegan - | StateCancelled - | StateActive - | StateEnd; - - declare type $SyntheticEvent = { - +nativeEvent: $ReadOnly<$Exact>, - ... - }; - - declare type $Event = $SyntheticEvent<{ - handlerTag: number, - numberOfPointers: number, - state: GestureHandlerState, - oldState: GestureHandlerState, - ...$Exact, - ... - }>; - - declare type $EventHandlers = {| - onGestureEvent?: ($Event) => mixed, - onHandlerStateChange?: ($Event) => mixed, - onBegan?: ($Event) => mixed, - onFailed?: ($Event) => mixed, - onCancelled?: ($Event) => mixed, - onActivated?: ($Event) => mixed, - onEnded?: ($Event) => mixed, - |}; - - declare type HitSlop = - | number - | {| - left?: number, - top?: number, - right?: number, - bottom?: number, - vertical?: number, - horizontal?: number, - width?: number, - height?: number, - |} - | {| - width: number, - left: number, - |} - | {| - width: number, - right: number, - |} - | {| - height: number, - top: number, - |} - | {| - height: number, - bottom: number, - |}; - - declare type $GestureHandlerProps< - AdditionalProps: {...}, - ExtraEventsProps: {...} - > = $ReadOnly<{| - ...$Exact, - ...$EventHandlers, - id?: string, - enabled?: boolean, - waitFor?: React$Ref | Array>, - simultaneousHandlers?: React$Ref | Array>, - shouldCancelWhenOutside?: boolean, - minPointers?: number, - hitSlop?: HitSlop, - children?: React$Node, - |}>; - - declare type PanGestureHandlerProps = $GestureHandlerProps< - { - activeOffsetY?: number | [number, number], - activeOffsetX?: number | [number, number], - failOffsetY?: number | [number, number], - failOffsetX?: number | [number, number], - minDist?: number, - minVelocity?: number, - minVelocityX?: number, - minVelocityY?: number, - minPointers?: number, - maxPointers?: number, - avgTouches?: boolean, - ... - }, - { - x: number, - y: number, - absoluteX: number, - absoluteY: number, - translationX: number, - translationY: number, - velocityX: number, - velocityY: number, - ... - } - >; - - /** - * MAGIC - */ - - declare type $If = $Call< - ((true, Then, Else) => Then) & ((false, Then, Else) => Else), - Test, - Then, - Else, - >; - declare type $IsA = $Call< - (Y => true) & (mixed => false), - X, - >; - declare type $IsUndefined = $IsA; - - declare type $Partial = $ReadOnly<$Rest>; - - // If { ...T, ... } counts as a T, then we're inexact - declare type $IsExact = $Call< - (T => false) & (mixed => true), - { ...T, ... }, - >; - - /** - * Actions, state, etc. - */ - - declare export type ScreenParams = { +[key: string]: mixed, ... }; - - declare export type BackAction = {| - +type: 'GO_BACK', - +source?: string, - +target?: string, - |}; - declare export type NavigateAction = {| - +type: 'NAVIGATE', - +payload: - | {| +key: string, +params?: ScreenParams |} - | {| +name: string, +key?: string, +params?: ScreenParams |}, - +source?: string, - +target?: string, - |}; - declare export type ResetAction = {| - +type: 'RESET', - +payload: StaleNavigationState, - +source?: string, - +target?: string, - |}; - declare export type SetParamsAction = {| - +type: 'SET_PARAMS', - +payload: {| +params?: ScreenParams |}, - +source?: string, - +target?: string, - |}; - declare export type CommonAction = - | BackAction - | NavigateAction - | ResetAction - | SetParamsAction; - - declare type NavigateActionCreator = {| - (routeName: string, params?: ScreenParams): NavigateAction, - ( - | {| +key: string, +params?: ScreenParams |} - | {| +name: string, +key?: string, +params?: ScreenParams |}, - ): NavigateAction, - |}; - declare export type CommonActionsType = {| - +navigate: NavigateActionCreator, - +goBack: () => BackAction, - +reset: (state: PossiblyStaleNavigationState) => ResetAction, - +setParams: (params: ScreenParams) => SetParamsAction, - |}; - - declare export type GenericNavigationAction = {| - +type: string, - +payload?: { +[key: string]: mixed, ... }, - +source?: string, - +target?: string, - |}; - - declare export type LeafRoute = {| - +key: string, - +name: RouteName, - +params?: ScreenParams, - |}; - declare export type StateRoute = {| - ...LeafRoute, - +state: NavigationState | StaleNavigationState, - |}; - declare export type Route = - | LeafRoute - | StateRoute; - - declare export type NavigationState = {| - +key: string, - +index: number, - +routeNames: $ReadOnlyArray, - +history?: $ReadOnlyArray, - +routes: $ReadOnlyArray>, - +type: string, - +stale: false, - |}; - - declare export type StaleLeafRoute = {| - +key?: string, - +name: RouteName, - +params?: ScreenParams, - |}; - declare export type StaleStateRoute = {| - ...StaleLeafRoute, - +state: StaleNavigationState, - |}; - declare export type StaleRoute = - | StaleLeafRoute - | StaleStateRoute; - declare export type StaleNavigationState = {| - // It's possible to pass React Nav a StaleNavigationState with an undefined - // index, but React Nav will always return one with the index set. This is - // the same as for the type property below, but in the case of index we tend - // to rely on it being set more... - +index: number, - +history?: $ReadOnlyArray, - +routes: $ReadOnlyArray>, - +type?: string, - +stale?: true, - |}; - - declare export type PossiblyStaleNavigationState = - | NavigationState - | StaleNavigationState; - declare export type PossiblyStaleRoute = - | Route - | StaleRoute; - - /** - * Routers - */ - - declare type ActionCreators< - State: NavigationState, - Action: GenericNavigationAction, - > = { - +[key: string]: (...args: any) => (Action | State => Action), - ... - }; - - declare export type DefaultRouterOptions = { - +initialRouteName?: string, - ... - }; - - declare export type RouterFactory< - State: NavigationState, - Action: GenericNavigationAction, - RouterOptions: DefaultRouterOptions, - > = (options: RouterOptions) => Router; - - declare export type ParamListBase = { +[key: string]: ?ScreenParams, ... }; - - declare export type RouterConfigOptions = {| - +routeNames: $ReadOnlyArray, - +routeParamList: ParamListBase, - |}; - - declare export type Router< - State: NavigationState, - Action: GenericNavigationAction, - > = {| - +type: $PropertyType, - +getInitialState: (options: RouterConfigOptions) => State, - +getRehydratedState: ( - partialState: PossiblyStaleNavigationState, - options: RouterConfigOptions, - ) => State, - +getStateForRouteNamesChange: ( - state: State, - options: RouterConfigOptions, - ) => State, - +getStateForRouteFocus: (state: State, key: string) => State, - +getStateForAction: ( - state: State, - action: Action, - options: RouterConfigOptions, - ) => ?PossiblyStaleNavigationState; - +shouldActionChangeFocus: (action: GenericNavigationAction) => boolean, - +actionCreators?: ActionCreators, - |}; - - /** - * Stack actions and router - */ - - declare export type StackNavigationState = {| - ...NavigationState, - +type: 'stack', - |}; - - declare export type ReplaceAction = {| - +type: 'REPLACE', - +payload: {| +name: string, +key?: ?string, +params?: ScreenParams |}, - +source?: string, - +target?: string, - |}; - declare export type PushAction = {| - +type: 'PUSH', - +payload: {| +name: string, +key?: ?string, +params?: ScreenParams |}, - +source?: string, - +target?: string, - |}; - declare export type PopAction = {| - +type: 'POP', - +payload: {| +count: number |}, - +source?: string, - +target?: string, - |}; - declare export type PopToTopAction = {| - +type: 'POP_TO_TOP', - +source?: string, - +target?: string, - |}; - declare export type StackAction = - | CommonAction - | ReplaceAction - | PushAction - | PopAction - | PopToTopAction; - - declare export type StackActionsType = {| - +replace: (routeName: string, params?: ScreenParams) => ReplaceAction, - +push: (routeName: string, params?: ScreenParams) => PushAction, - +pop: (count?: number) => PopAction, - +popToTop: () => PopToTopAction, - |}; - - declare export type StackRouterOptions = $Exact; - - /** - * Tab actions and router - */ - - declare export type TabNavigationState = {| - ...NavigationState, - +type: 'tab', - +history: $ReadOnlyArray<{| type: 'route', key: string |}>, - |}; - - declare export type JumpToAction = {| - +type: 'JUMP_TO', - +payload: {| +name: string, +params?: ScreenParams |}, - +source?: string, - +target?: string, - |}; - declare export type TabAction = - | CommonAction - | JumpToAction; - - declare export type TabActionsType = {| - +jumpTo: string => JumpToAction, - |}; - - declare export type TabRouterOptions = {| - ...$Exact, - +backBehavior?: 'initialRoute' | 'order' | 'history' | 'none', - |}; - - /** - * Drawer actions and router - */ - - declare type DrawerHistoryEntry = - | {| +type: 'route', +key: string |} - | {| +type: 'drawer' |}; - declare export type DrawerNavigationState = {| - ...NavigationState, - +type: 'drawer', - +history: $ReadOnlyArray, - |}; - - declare export type OpenDrawerAction = {| - +type: 'OPEN_DRAWER', - +source?: string, - +target?: string, - |}; - declare export type CloseDrawerAction = {| - +type: 'CLOSE_DRAWER', - +source?: string, - +target?: string, - |}; - declare export type ToggleDrawerAction = {| - +type: 'TOGGLE_DRAWER', - +source?: string, - +target?: string, - |}; - declare export type DrawerAction = - | TabAction - | OpenDrawerAction - | CloseDrawerAction - | ToggleDrawerAction; - - declare export type DrawerActionsType = {| - ...TabActionsType, - +openDrawer: () => OpenDrawerAction, - +closeDrawer: () => CloseDrawerAction, - +toggleDrawer: () => ToggleDrawerAction, - |}; - - declare export type DrawerRouterOptions = {| - ...TabRouterOptions, - +defaultStatus?: 'open' | 'closed', - |}; - - /** - * Events - */ - - declare export type EventMapBase = { - +[name: string]: {| - +data?: mixed, - +canPreventDefault?: boolean, - |}, - ... - }; - declare type EventPreventDefaultProperties = $If< - Test, - {| +defaultPrevented: boolean, +preventDefault: () => void |}, - {| |}, - >; - declare type EventDataProperties = $If< - $IsUndefined, - {| |}, - {| +data: Data |}, - >; - declare type EventArg< - EventName: string, - CanPreventDefault: ?boolean = false, - Data = void, - > = {| - ...EventPreventDefaultProperties, - ...EventDataProperties, - +type: EventName, - +target?: string, - |}; - declare type GlobalEventMap = {| - +state: {| +data: {| +state: State |}, +canPreventDefault: false |}, - |}; - declare type EventMapCore = {| - ...GlobalEventMap, - +focus: {| +data: void, +canPreventDefault: false |}, - +blur: {| +data: void, +canPreventDefault: false |}, - +beforeRemove: {| - +data: {| +action: GenericNavigationAction |}, - +canPreventDefault: true, - |}, - |}; - declare type EventListenerCallback< - EventName: string, - State: PossiblyStaleNavigationState = NavigationState, - EventMap: EventMapBase = EventMapCore, - > = (e: EventArg< - EventName, - $PropertyType< - $ElementType< - {| ...EventMap, ...EventMapCore |}, - EventName, - >, - 'canPreventDefault', - >, - $PropertyType< - $ElementType< - {| ...EventMap, ...EventMapCore |}, - EventName, - >, - 'data', - >, - >) => mixed; - - /** - * Navigation prop - */ - - declare type PartialWithMergeProperty = $If< - $IsExact, - { ...$Partial, +merge: true }, - { ...$Partial, +merge: true, ... }, - >; - - declare type EitherExactOrPartialWithMergeProperty = - | ParamsType - | PartialWithMergeProperty; - - declare export type SimpleNavigate = - >( - routeName: DestinationRouteName, - params: EitherExactOrPartialWithMergeProperty< - $ElementType, - >, - ) => void; - - declare export type Navigate = - & SimpleNavigate - & >( - route: $If< - $IsUndefined<$ElementType>, - | {| +key: string |} - | {| +name: DestinationRouteName, +key?: string |}, - | {| - +key: string, - +params?: EitherExactOrPartialWithMergeProperty< - $ElementType, - >, - |} - | {| - +name: DestinationRouteName, - +key?: string, - +params?: EitherExactOrPartialWithMergeProperty< - $ElementType, - >, - |}, - >, - ) => void; - - declare type CoreNavigationHelpers< - ParamList: ParamListBase, - State: PossiblyStaleNavigationState = PossiblyStaleNavigationState, - EventMap: EventMapBase = EventMapCore, - > = { - +navigate: Navigate, - +dispatch: ( - action: - | GenericNavigationAction - | (State => GenericNavigationAction), - ) => void, - +reset: PossiblyStaleNavigationState => void, - +goBack: () => void, - +isFocused: () => boolean, - +canGoBack: () => boolean, - +getId: () => string | void, - +getParent: >(id?: string) => ?Parent, - +getState: () => NavigationState, - +addListener: |}, - >>( - name: EventName, - callback: EventListenerCallback, - ) => () => void, - +removeListener: |}, - >>( - name: EventName, - callback: EventListenerCallback, - ) => void, - ... - }; - - declare export type NavigationHelpers< - ParamList: ParamListBase, - State: PossiblyStaleNavigationState = PossiblyStaleNavigationState, - EventMap: EventMapBase = EventMapCore, - > = { - ...$Exact>, - +setParams: (params: ScreenParams) => void, - ... - }; - - declare type SetParamsInput< - ParamList: ParamListBase, - RouteName: $Keys = $Keys, - > = $If< - $IsUndefined<$ElementType>, - empty, - $Partial<$NonMaybeType<$ElementType>>, - >; - - declare export type NavigationProp< - ParamList: ParamListBase, - RouteName: $Keys = $Keys, - State: PossiblyStaleNavigationState = PossiblyStaleNavigationState, - ScreenOptions: {...} = {...}, - EventMap: EventMapBase = EventMapCore, - > = { - ...$Exact>, - +setOptions: (options: $Partial) => void, - +setParams: (params: SetParamsInput) => void, - ... - }; - - /** - * CreateNavigator - */ - - declare export type RouteProp< - ParamList: ParamListBase = ParamListBase, - RouteName: $Keys = $Keys, - > = {| - ...LeafRoute, - +params: $ElementType, - +path?: string, - |}; - - declare type ScreenOptionsProp< - ScreenOptions: {...}, - RouteParam, - NavHelpers, - > = - | ScreenOptions - | ({| +route: RouteParam, +navigation: NavHelpers |}) => ScreenOptions; - declare export type ScreenListeners< - State: NavigationState = NavigationState, - EventMap: EventMapBase = EventMapCore, - > = $ObjMapi< - {| [name: $Keys]: empty |}, - >(K, empty) => EventListenerCallback, - >; - declare type ScreenListenersProp< - ScreenListenersParam: {...}, - RouteParam, - NavHelpers, - > = - | ScreenListenersParam - | ({| +route: RouteParam, +navigation: NavHelpers |}) => ScreenListenersParam; - - declare type BaseScreenProps< - ParamList: ParamListBase, - NavProp, - RouteName: $Keys = $Keys, - State: NavigationState = NavigationState, - ScreenOptions: {...} = {...}, - EventMap: EventMapBase = EventMapCore, - > = {| - +name: RouteName, - +options?: ScreenOptionsProp< - ScreenOptions, - RouteProp, - NavProp, - >, - +listeners?: ScreenListenersProp< - ScreenListeners, - RouteProp, - NavProp, - >, - +initialParams?: $Partial<$ElementType>, - +getId?: ({ - +params: $ElementType, - }) => string | void, - +navigationKey?: string, - |}; - - declare export type ScreenProps< - ParamList: ParamListBase, - NavProp, - RouteName: $Keys = $Keys, - State: NavigationState = NavigationState, - ScreenOptions: {...} = {...}, - EventMap: EventMapBase = EventMapCore, - > = - | {| - ...BaseScreenProps< - ParamList, - NavProp, - RouteName, - State, - ScreenOptions, - EventMap, - >, - +component: React$ComponentType<{| - +route: RouteProp, - +navigation: NavProp, - |}>, - |} - | {| - ...BaseScreenProps< - ParamList, - NavProp, - RouteName, - State, - ScreenOptions, - EventMap, - >, - +getComponent: () => React$ComponentType<{| - +route: RouteProp, - +navigation: NavProp, - |}>, - |} - | {| - ...BaseScreenProps< - ParamList, - NavProp, - RouteName, - State, - ScreenOptions, - EventMap, - >, - +children: ({| - +route: RouteProp, - +navigation: NavProp, - |}) => React$Node, - |}; - - declare export type ScreenComponent< - GlobalParamList: ParamListBase, - ParamList: ParamListBase, - State: NavigationState = NavigationState, - ScreenOptions: {...} = {...}, - EventMap: EventMapBase = EventMapCore, - > = < - RouteName: $Keys, - NavProp: NavigationProp< - GlobalParamList, - RouteName, - State, - ScreenOptions, - EventMap, - >, - >(props: ScreenProps< - ParamList, - NavProp, - RouteName, - State, - ScreenOptions, - EventMap, - >) => React$Node; - - declare type ScreenOptionsProps< - ScreenOptions: {...}, - RouteParam, - NavHelpers, - > = {| - +screenOptions?: ScreenOptionsProp, - |}; - declare type ScreenListenersProps< - ScreenListenersParam: {...}, - RouteParam, - NavHelpers, - > = {| - +screenListeners?: ScreenListenersProp< - ScreenListenersParam, - RouteParam, - NavHelpers, - >, - |}; - declare export type ExtraNavigatorPropsBase = { - ...$Exact, - +id?: string, - +children?: React$Node, - ... - }; - declare export type NavigatorProps< - ScreenOptions: {...}, - ScreenListenersParam, - RouteParam, - NavHelpers, - ExtraNavigatorProps: ExtraNavigatorPropsBase, - > = { - ...$Exact, - ...ScreenOptionsProps, - ...ScreenListenersProps, - +defaultScreenOptions?: - | ScreenOptions - | ({| - +route: RouteParam, - +navigation: NavHelpers, - +options: ScreenOptions, - |}) => ScreenOptions, - ... - }; - declare export type NavigatorPropsBase< - ScreenOptions: {...}, - ScreenListenersParam: {...}, - NavHelpers, - > = NavigatorProps< - ScreenOptions, - ScreenListenersParam, - RouteProp<>, - NavHelpers, - ExtraNavigatorPropsBase, - >; - - declare export type CreateNavigator< - State: NavigationState, - ScreenOptions: {...}, - EventMap: EventMapBase, - ExtraNavigatorProps: ExtraNavigatorPropsBase, - > = < - GlobalParamList: ParamListBase, - ParamList: ParamListBase, - NavHelpers: NavigationHelpers< - GlobalParamList, - State, - EventMap, - >, - >() => {| - +Screen: ScreenComponent< - GlobalParamList, - ParamList, - State, - ScreenOptions, - EventMap, - >, - +Navigator: React$ComponentType<$Exact, - RouteProp, - NavHelpers, - ExtraNavigatorProps, - >>>, - +Group: React$ComponentType<{| - ...ScreenOptionsProps, NavHelpers>, - +children: React$Node, - +navigationKey?: string, - |}>, - |}; - - declare export type CreateNavigatorFactory = < - State: NavigationState, - ScreenOptions: {...}, - EventMap: EventMapBase, - NavHelpers: NavigationHelpers< - ParamListBase, - State, - EventMap, - >, - ExtraNavigatorProps: ExtraNavigatorPropsBase, - >( - navigator: React$ComponentType<$Exact, - RouteProp<>, - NavHelpers, - ExtraNavigatorProps, - >>>, - ) => CreateNavigator; - - - /** - * useNavigationBuilder - */ - - declare export type Descriptor< - NavHelpers, - ScreenOptions: {...} = {...}, - > = {| - +render: () => React$Node, - +options: $ReadOnly, - +navigation: NavHelpers, - |}; - - declare export type UseNavigationBuilder = < - State: NavigationState, - Action: GenericNavigationAction, - ScreenOptions: {...}, - RouterOptions: DefaultRouterOptions, - NavHelpers, - EventMap: EventMapBase, - ExtraNavigatorProps: ExtraNavigatorPropsBase, - >( - routerFactory: RouterFactory, - options: $Exact, - RouteProp<>, - NavHelpers, - ExtraNavigatorProps, - >>, - ) => {| - +id?: string, - +state: State, - +descriptors: {| +[key: string]: Descriptor |}, - +navigation: NavHelpers, - |}; - - /** - * EdgeInsets - */ - - declare type EdgeInsets = {| - +top: number, - +right: number, - +bottom: number, - +left: number, - |}; - - /** - * TransitionPreset - */ - - declare export type TransitionSpec = - | {| - animation: 'spring', - config: $Diff< - SpringAnimationConfigSingle, - { toValue: number | AnimatedValue, ... }, - >, - |} - | {| - animation: 'timing', - config: $Diff< - TimingAnimationConfigSingle, - { toValue: number | AnimatedValue, ... }, - >, - |}; - - declare export type StackCardInterpolationProps = {| - +current: {| - +progress: AnimatedInterpolation, - |}, - +next?: {| - +progress: AnimatedInterpolation, - |}, - +index: number, - +closing: AnimatedInterpolation, - +swiping: AnimatedInterpolation, - +inverted: AnimatedInterpolation, - +layouts: {| - +screen: {| +width: number, +height: number |}, - |}, - +insets: EdgeInsets, - |}; - declare export type StackCardInterpolatedStyle = {| - containerStyle?: AnimatedViewStyleProp, - cardStyle?: AnimatedViewStyleProp, - overlayStyle?: AnimatedViewStyleProp, - shadowStyle?: AnimatedViewStyleProp, - |}; - declare export type StackCardStyleInterpolator = ( - props: StackCardInterpolationProps, - ) => StackCardInterpolatedStyle; - - declare export type StackHeaderInterpolationProps = {| - +current: {| - +progress: AnimatedInterpolation, - |}, - +next?: {| - +progress: AnimatedInterpolation, - |}, - +layouts: {| - +header: {| +width: number, +height: number |}, - +screen: {| +width: number, +height: number |}, - +title?: {| +width: number, +height: number |}, - +leftLabel?: {| +width: number, +height: number |}, - |}, - |}; - declare export type StackHeaderInterpolatedStyle = {| - leftLabelStyle?: AnimatedViewStyleProp, - leftButtonStyle?: AnimatedViewStyleProp, - rightButtonStyle?: AnimatedViewStyleProp, - titleStyle?: AnimatedViewStyleProp, - backgroundStyle?: AnimatedViewStyleProp, - |}; - declare export type StackHeaderStyleInterpolator = ( - props: StackHeaderInterpolationProps, - ) => StackHeaderInterpolatedStyle; - - declare type GestureDirection = - | 'horizontal' - | 'horizontal-inverted' - | 'vertical' - | 'vertical-inverted'; - - declare export type TransitionPreset = {| - +gestureDirection: GestureDirection, - +transitionSpec: {| - +open: TransitionSpec, - +close: TransitionSpec, - |}, - +cardStyleInterpolator: StackCardStyleInterpolator, - +headerStyleInterpolator: StackHeaderStyleInterpolator, - |}; - - /** - * Header common options - */ - - declare export type SceneProgress = {| - +current: AnimatedInterpolation, - +next?: AnimatedInterpolation, - +previous?: AnimatedInterpolation, - |}; - - declare export type HeaderProps = {| - +navigation: NavProp, - +route: RouteProp<>, - +options: ScreenOptions, - +layout: {| +width: number, +height: number |}, - |}; - - declare export type HeaderButtonProps = $Partial<{| - +tintColor: string, - +pressColor: string, - +pressOpacity: number, - |}>; - - declare export type HeaderLeftButtonProps = $Partial<{| - ...HeaderButtonProps, - +labelVisible: boolean, - |}>; - - declare type HeaderTitleInputBase = { - +onLayout: LayoutEvent => void, - +children: string, - +allowFontScaling: ?boolean, - +tintColor: ?string, - +style: ?AnimatedTextStyleProp, - ... - }; - - declare export type HeaderTitleInputProps = - $Exact; - - declare export type HeaderCommonOptions< - NavHeaderProps, - NavHeaderLeftProps, - NavHeaderRightProps, - > = $Partial<{| - +header: NavHeaderProps => React$Node, - +headerShown: boolean, - +headerTitle: string | ( HeaderTitleInputProps => React$Node), - +headerTitleAlign: 'left' | 'center', - +headerTitleStyle: AnimatedTextStyleProp, - +headerTitleContainerStyle: AnimatedViewStyleProp, - +headerTintColor: string, - +headerTitleAllowFontScaling: boolean, - +headerLeft: NavHeaderLeftProps => React$Node, - +headerLeftContainerStyle: AnimatedViewStyleProp, - +headerRight: NavHeaderRightProps => React$Node, - +headerRightContainerStyle: AnimatedViewStyleProp, - +headerBackground: ({| style: AnimatedViewStyleProp |}) => React$Node, - +headerStyle: AnimatedViewStyleProp, - +headerTransparent: boolean, - +headerStatusBarHeight: number, - +headerShadowVisible: boolean, - +headerBackgroundContainerStyle: AnimatedViewStyleProp, - +headerPressColor: string, - +headerPressOpacity: number, - |}>; - - /** - * Stack options - */ - - declare export type StackDescriptor = Descriptor< - StackNavigationHelpers<>, - StackOptions, - >; - - declare type Scene = {| - +route: T, - +descriptor: StackDescriptor, - +progress: SceneProgress, - |}; - - declare export type StackHeaderProps = {| - ...HeaderProps, StackOptions>, - +progress: SceneProgress, - +back?: {| +title: string |}, - +styleInterpolator: StackHeaderStyleInterpolator, - |}; - - declare export type StackHeaderButtonProps = $Partial<{| - ...HeaderButtonProps, - +canGoBack: boolean, - |}>; - - declare export type StackHeaderLeftButtonProps = $Partial<{| - ...StackHeaderButtonProps, - +onPress: (() => void), - +backImage: (props: {| tintColor: string |}) => React$Node, - +label: string, - +truncatedLabel: string, - +labelVisible: boolean, - +labelStyle: AnimatedTextStyleProp, - +allowFontScaling: boolean, - +onLabelLayout: LayoutEvent => void, - +screenLayout: {| +width: number, +height: number |}, - +titleLayout: {| +width: number, +height: number |}, - +disabled: boolean, - +accessibilityLabel: string, - +style: ViewStyleProp, - |}>; - - declare export type StackOptions = $Partial<{| - +title: string, - +cardShadowEnabled: boolean, - +cardOverlayEnabled: boolean, - +cardOverlay: {| style: ViewStyleProp |} => React$Node, - +cardStyle: ViewStyleProp, - +animationEnabled: boolean, - +animationTypeForReplace: 'push' | 'pop', - +gestureEnabled: boolean, - +gestureResponseDistance: number, - +gestureVelocityImpact: number, - +safeAreaInsets: $Partial, - +keyboardHandlingEnabled: boolean, - +presentation: 'card' | 'modal' | 'transparentModal', - // Transition - ...TransitionPreset, - // Header - ...HeaderCommonOptions< - StackHeaderProps, - StackHeaderLeftButtonProps, - StackHeaderButtonProps, - >, - +headerMode: 'float' | 'screen', - +headerBackAllowFontScaling: boolean, - +headerBackTitle: string | null, - +headerBackTitleStyle: TextStyleProp, - +headerBackTitleVisible: boolean, - +headerTruncatedBackTitle: string, - +headerBackImage: $PropertyType, - +headerBackAccessibilityLabel: string, - |}>; - - /** - * Stack navigation prop - */ - - declare export type StackNavigationEventMap = {| - ...EventMapCore, - +transitionStart: {| - +data: {| +closing: boolean |}, - +canPreventDefault: false, - |}, - +transitionEnd: {| - +data: {| +closing: boolean |}, - +canPreventDefault: false, - |}, - +gestureStart: {| +data: void, +canPreventDefault: false |}, - +gestureEnd: {| +data: void, +canPreventDefault: false |}, - +gestureCancel: {| +data: void, +canPreventDefault: false |}, - |}; - - declare type StackExtraNavigationHelpers< - ParamList: ParamListBase = ParamListBase, - > = {| - +replace: SimpleNavigate, - +push: SimpleNavigate, - +pop: (count?: number) => void, - +popToTop: () => void, - |}; - - declare export type StackNavigationHelpers< - ParamList: ParamListBase = ParamListBase, - EventMap: EventMapBase = StackNavigationEventMap, - > = { - ...$Exact>, - ...StackExtraNavigationHelpers, - ... - }; - - declare export type StackNavigationProp< - ParamList: ParamListBase = ParamListBase, - RouteName: $Keys = $Keys, - Options: {...} = StackOptions, - EventMap: EventMapBase = StackNavigationEventMap, - > = {| - ...$Exact>, - ...StackExtraNavigationHelpers, - |}; - - /** - * Miscellaneous stack exports - */ - - declare type StackNavigationConfig = {| - +detachInactiveScreens?: boolean, - |}; - - declare export type ExtraStackNavigatorProps = {| - ...$Exact, - ...StackRouterOptions, - ...StackNavigationConfig, - |}; - - declare export type StackNavigatorProps< - NavHelpers: StackNavigationHelpers<> = StackNavigationHelpers<>, - > = $Exact, - RouteProp<>, - NavHelpers, - ExtraStackNavigatorProps, - >>; - - /** - * Bottom tab options - */ - - declare export type BottomTabBarButtonProps = {| - ...$Diff< - TouchableWithoutFeedbackProps, - {| onPress?: ?(event: PressEvent) => mixed |}, - >, - +to?: string, - +children: React$Node, - +onPress?: (MouseEvent | PressEvent) => void, - |}; - - declare export type TabBarVisibilityAnimationConfig = - | {| - +animation: 'spring', - +config?: $Diff< - SpringAnimationConfigSingle, - { toValue: number | AnimatedValue, useNativeDriver: boolean, ... }, - >, - |} - | {| - +animation: 'timing', - +config?: $Diff< - TimingAnimationConfigSingle, - { toValue: number | AnimatedValue, useNativeDriver: boolean, ... }, - >, - |}; - - declare export type BottomTabOptions = $Partial<{| - +title: string, - +tabBarLabel: - | string - | ({| focused: boolean, color: string |}) => React$Node, - +tabBarIcon: ({| - focused: boolean, - color: string, - size: number, - |}) => React$Node, - +tabBarBadge: number | string, - +tabBarBadgeStyle: TextStyleProp, - +tabBarAccessibilityLabel: string, - +tabBarTestID: string, - +tabBarVisibilityAnimationConfig: $Partial<{| - +show: TabBarVisibilityAnimationConfig, - +hide: TabBarVisibilityAnimationConfig, - |}>, - +tabBarButton: BottomTabBarButtonProps => React$Node, - +tabBarHideOnKeyboard: boolean, - +tabBarActiveTintColor: string, - +tabBarInactiveTintColor: string, - +tabBarActiveBackgroundColor: string, - +tabBarInactiveBackgroundColor: string, - +tabBarAllowFontScaling: boolean, - +tabBarShowLabel: boolean, - +tabBarLabelStyle: TextStyleProp, - +tabBarIconStyle: TextStyleProp, - +tabBarItemStyle: ViewStyleProp, - +tabBarLabelPosition: 'beside-icon' | 'below-icon', - +tabBarStyle: ViewStyleProp, - +unmountOnBlur: boolean, - +lazy: boolean, - ...HeaderCommonOptions< - HeaderProps, BottomTabOptions>, - HeaderLeftButtonProps, - HeaderButtonProps, - >, - |}>; - - /** - * Bottom tab navigation prop - */ - - declare export type BottomTabNavigationEventMap = {| - ...EventMapCore, - +tabPress: {| +data: void, +canPreventDefault: true |}, - +tabLongPress: {| +data: void, +canPreventDefault: false |}, - |}; - - declare type TabExtraNavigationHelpers< - ParamList: ParamListBase = ParamListBase, - > = {| - +jumpTo: SimpleNavigate, - |}; - - declare export type BottomTabNavigationHelpers< - ParamList: ParamListBase = ParamListBase, - EventMap: EventMapBase = BottomTabNavigationEventMap, - > = { - ...$Exact>, - ...TabExtraNavigationHelpers, - ... - }; - - declare export type BottomTabNavigationProp< - ParamList: ParamListBase = ParamListBase, - RouteName: $Keys = $Keys, - Options: {...} = BottomTabOptions, - EventMap: EventMapBase = BottomTabNavigationEventMap, - > = {| - ...$Exact>, - ...TabExtraNavigationHelpers, - |}; - - /** - * Miscellaneous bottom tab exports - */ - - declare export type BottomTabDescriptor = Descriptor< - BottomTabNavigationHelpers<>, - BottomTabOptions, - >; - - declare type BottomTabNavigationBuilderResult = {| - +state: TabNavigationState, - +navigation: BottomTabNavigationHelpers<>, - +descriptors: {| +[key: string]: BottomTabDescriptor |}, - |}; - - declare export type BottomTabBarProps = BottomTabNavigationBuilderResult; - - declare type BottomTabNavigationConfig = {| - +tabBar?: BottomTabBarProps => React$Node, - +safeAreaInsets?: $Partial, - +detachInactiveScreens?: boolean, - |}; - - declare export type ExtraBottomTabNavigatorProps = {| - ...$Exact, - ...TabRouterOptions, - ...BottomTabNavigationConfig, - |}; - - declare export type BottomTabNavigatorProps< - NavHelpers: BottomTabNavigationHelpers<> = BottomTabNavigationHelpers<>, - > = $Exact, - RouteProp<>, - NavHelpers, - ExtraBottomTabNavigatorProps, - >>; - - /** - * Material bottom tab options - */ - - declare export type MaterialBottomTabOptions = $Partial<{| - +title: string, - +tabBarColor: string, - +tabBarLabel: string, - +tabBarIcon: - | string - | ({| +focused: boolean, +color: string |}) => React$Node, - +tabBarBadge: boolean | number | string, - +tabBarAccessibilityLabel: string, - +tabBarTestID: string, - |}>; - - /** - * Material bottom tab navigation prop - */ - - declare export type MaterialBottomTabNavigationEventMap = {| - ...EventMapCore, - +tabPress: {| +data: void, +canPreventDefault: true |}, - |}; - - declare export type MaterialBottomTabNavigationHelpers< - ParamList: ParamListBase = ParamListBase, - EventMap: EventMapBase = MaterialBottomTabNavigationEventMap, - > = { - ...$Exact>, - ...TabExtraNavigationHelpers, - ... - }; - - declare export type MaterialBottomTabNavigationProp< - ParamList: ParamListBase = ParamListBase, - RouteName: $Keys = $Keys, - Options: {...} = MaterialBottomTabOptions, - EventMap: EventMapBase = MaterialBottomTabNavigationEventMap, - > = {| - ...$Exact>, - ...TabExtraNavigationHelpers, - |}; - - /** - * Miscellaneous material bottom tab exports - */ - - declare export type PaperFont = {| - +fontFamily: string, - +fontWeight?: - | 'normal' - | 'bold' - | '100' - | '200' - | '300' - | '400' - | '500' - | '600' - | '700' - | '800' - | '900', - |}; - - declare export type PaperFonts = {| - +regular: PaperFont, - +medium: PaperFont, - +light: PaperFont, - +thin: PaperFont, - |}; - - declare export type PaperTheme = {| - +dark: boolean, - +mode?: 'adaptive' | 'exact', - +roundness: number, - +colors: {| - +primary: string, - +background: string, - +surface: string, - +accent: string, - +error: string, - +text: string, - +onSurface: string, - +onBackground: string, - +disabled: string, - +placeholder: string, - +backdrop: string, - +notification: string, - |}, - +fonts: PaperFonts, - +animation: {| - +scale: number, - |}, - |}; - - declare export type PaperRoute = {| - +key: string, - +title?: string, - +icon?: any, - +badge?: string | number | boolean, - +color?: string, - +accessibilityLabel?: string, - +testID?: string, - |}; - - declare export type PaperTouchableProps = {| - ...TouchableWithoutFeedbackProps, - +key: string, - +route: PaperRoute, - +children: React$Node, - +borderless?: boolean, - +centered?: boolean, - +rippleColor?: string, - |}; - - declare export type MaterialBottomTabNavigationConfig = {| - +shifting?: boolean, - +labeled?: boolean, - +renderTouchable?: PaperTouchableProps => React$Node, - +activeColor?: string, - +inactiveColor?: string, - +sceneAnimationEnabled?: boolean, - +keyboardHidesNavigationBar?: boolean, - +barStyle?: ViewStyleProp, - +style?: ViewStyleProp, - +theme?: PaperTheme, - |}; - - declare export type ExtraMaterialBottomTabNavigatorProps = {| - ...$Exact, - ...TabRouterOptions, - ...MaterialBottomTabNavigationConfig, - |}; - - declare export type MaterialBottomTabNavigatorProps< - NavHelpers: MaterialBottomTabNavigationHelpers<> = - MaterialBottomTabNavigationHelpers<>, - > = $Exact, - RouteProp<>, - NavHelpers, - ExtraMaterialBottomTabNavigatorProps, - >>; - - /** - * Material top tab options - */ - - declare export type MaterialTopTabOptions = $Partial<{| - +title: string, - +tabBarLabel: - | string - | ({| +focused: boolean, +color: string |}) => React$Node, - +tabBarIcon: ({| +focused: boolean, +color: string |}) => React$Node, - +tabBarAccessibilityLabel: string, - +tabBarTestID: string, - +tabBarActiveTintColor: string, - +tabBarInactiveTintColor: string, - +tabBarPressColor: string, - +tabBarPressOpacity: number, - +tabBarShowLabel: boolean, - +tabBarShowIcon: boolean, - +tabBarAllowFontScaling: boolean, - +tabBarBounces: boolean, - +tabBarScrollEnabled: boolean, - +tabBarIconStyle: ViewStyleProp, - +tabBarLabelStyle: TextStyleProp, - +tabBarItemStyle: ViewStyleProp, - +tabBarIndicatorStyle: ViewStyleProp, - +tabBarIndicatorContainerStyle: ViewStyleProp, - +tabBarContentContainerStyle: ViewStyleProp, - +tabBarStyle: ViewStyleProp, - +tabBarBadge: () => React$Node, - +tabBarIndicator: MaterialTopTabBarIndicatorProps => React$Node, - +lazy: boolean, - +lazyPlaceholder: ({| +route: Route<> |}) => React$Node, - |}>; - - /** - * Material top tab navigation prop - */ - - declare export type MaterialTopTabNavigationEventMap = {| - ...EventMapCore, - +tabPress: {| +data: void, +canPreventDefault: true |}, - +tabLongPress: {| +data: void, +canPreventDefault: false |}, - +swipeStart: {| +data: void, +canPreventDefault: false |}, - +swipeEnd: {| +data: void, +canPreventDefault: false |}, - |}; - - declare export type MaterialTopTabNavigationHelpers< - ParamList: ParamListBase = ParamListBase, - EventMap: EventMapBase = MaterialTopTabNavigationEventMap, - > = { - ...$Exact>, - ...TabExtraNavigationHelpers, - ... - }; - - declare export type MaterialTopTabNavigationProp< - ParamList: ParamListBase = ParamListBase, - RouteName: $Keys = $Keys, - Options: {...} = MaterialTopTabOptions, - EventMap: EventMapBase = MaterialTopTabNavigationEventMap, - > = {| - ...$Exact>, - ...TabExtraNavigationHelpers, - |}; - - /** - * Miscellaneous material top tab exports - */ - - declare type MaterialTopTabPagerCommonProps = {| - +keyboardDismissMode: 'none' | 'on-drag' | 'auto', - +swipeEnabled: boolean, - +swipeVelocityImpact?: number, - +springVelocityScale?: number, - +springConfig: $Partial<{| - +damping: number, - +mass: number, - +stiffness: number, - +restSpeedThreshold: number, - +restDisplacementThreshold: number, - |}>, - +timingConfig: $Partial<{| - +duration: number, - |}>, - |}; - - declare export type MaterialTopTabPagerProps = {| - ...MaterialTopTabPagerCommonProps, - +onSwipeStart?: () => void, - +onSwipeEnd?: () => void, - +onIndexChange: (index: number) => void, - +navigationState: TabNavigationState, - +layout: {| +width: number, +height: number |}, - +removeClippedSubviews: boolean, - +children: ({| - +addListener: (type: 'enter', listener: number => void) => void, - +removeListener: (type: 'enter', listener: number => void) => void, - +position: any, // Reanimated.Node - +render: React$Node => React$Node, - +jumpTo: string => void, - |}) => React$Node, - +gestureHandlerProps: PanGestureHandlerProps, - |}; - - declare export type MaterialTopTabBarIndicatorProps = {| - +state: TabNavigationState, - +width: string, - +style?: ViewStyleProp, - +getTabWidth: number => number, - |}; - - declare export type MaterialTopTabDescriptor = Descriptor< - MaterialBottomTabNavigationHelpers<>, - MaterialBottomTabOptions, - >; - - declare type MaterialTopTabNavigationBuilderResult = {| - +state: TabNavigationState, - +navigation: MaterialTopTabNavigationHelpers<>, - +descriptors: {| +[key: string]: MaterialTopTabDescriptor |}, - |}; - - declare export type MaterialTopTabBarProps = {| - ...MaterialTopTabNavigationBuilderResult, - +layout: {| +width: number, +height: number |}, - +position: any, // Reanimated.Node - +jumpTo: string => void, - |}; - - declare export type MaterialTopTabNavigationConfig = {| - ...$Partial, - +position?: any, // Reanimated.Value - +tabBarPosition?: 'top' | 'bottom', - +initialLayout?: $Partial<{| +width: number, +height: number |}>, - +lazyPreloadDistance?: number, - +removeClippedSubviews?: boolean, - +sceneContainerStyle?: ViewStyleProp, - +style?: ViewStyleProp, - +gestureHandlerProps?: PanGestureHandlerProps, - +pager?: MaterialTopTabPagerProps => React$Node, - +tabBar?: MaterialTopTabBarProps => React$Node, - |}; - - declare export type ExtraMaterialTopTabNavigatorProps = {| - ...$Exact, - ...TabRouterOptions, - ...MaterialTopTabNavigationConfig, - |}; - - declare export type MaterialTopTabNavigatorProps< - NavHelpers: MaterialTopTabNavigationHelpers<> = - MaterialTopTabNavigationHelpers<>, - > = $Exact, - RouteProp<>, - NavHelpers, - ExtraMaterialTopTabNavigatorProps, - >>; - - /** - * Drawer options - */ - - declare export type DrawerOptions = $Partial<{| - +title: string, - +lazy: boolean, - +drawerLabel: - | string - | ({| +color: string, +focused: boolean |}) => React$Node, - +drawerIcon: ({| - +color: string, - +size: number, - +focused: boolean, - |}) => React$Node, - +drawerActiveTintColor: string, - +drawerActiveBackgroundColor: string, - +drawerInactiveTintColor: string, - +drawerInactiveBackgroundColor: string, - +drawerItemStyle: ViewStyleProp, - +drawerLabelStyle: TextStyleProp, - +drawerContentContainerStyle: ViewStyleProp, - +drawerContentStyle: ViewStyleProp, - +drawerStyle: ViewStyleProp, - +drawerPosition: 'left' | 'right', - +drawerType: 'front' | 'back' | 'slide' | 'permanent', - +drawerHideStatusBarOnOpen: boolean, - +drawerStatusBarAnimation: 'slide' | 'none' | 'fade', - +overlayColor: string, - +sceneContainerStyle: ViewStyleProp, - +gestureHandlerProps: PanGestureHandlerProps, - +swipeEnabled: boolean, - +swipeEdgeWidth: number, - +swipeMinDistance: number, - +keyboardDismissMode: 'on-drag' | 'none', - +unmountOnBlur: boolean, - ...HeaderCommonOptions< - HeaderProps, DrawerOptions>, - HeaderLeftButtonProps, - HeaderButtonProps, - >, - |}>; - - /** - * Drawer navigation prop - */ - - declare export type DrawerNavigationEventMap = - EventMapCore; - - declare type DrawerExtraNavigationHelpers< - ParamList: ParamListBase = ParamListBase, - > = {| - +jumpTo: SimpleNavigate, - +openDrawer: () => void, - +closeDrawer: () => void, - +toggleDrawer: () => void, - |}; - - declare export type DrawerNavigationHelpers< - ParamList: ParamListBase = ParamListBase, - EventMap: EventMapBase = DrawerNavigationEventMap, - > = { - ...$Exact>, - ...DrawerExtraNavigationHelpers, - ... - }; - - declare export type DrawerNavigationProp< - ParamList: ParamListBase = ParamListBase, - RouteName: $Keys = $Keys, - Options: {...} = DrawerOptions, - EventMap: EventMapBase = DrawerNavigationEventMap, - > = {| - ...$Exact>, - ...DrawerExtraNavigationHelpers, - |}; - - /** - * Miscellaneous drawer exports - */ - - declare export type DrawerDescriptor = Descriptor< - DrawerNavigationHelpers<>, - DrawerOptions, - >; - - declare type DrawerNavigationBuilderResult = {| - +state: DrawerNavigationState, - +navigation: DrawerNavigationHelpers<>, - +descriptors: {| +[key: string]: DrawerDescriptor |}, - |}; - - declare export type DrawerNavigationConfig = {| - +drawerContent?: DrawerNavigationBuilderResult => React$Node, - +detachInactiveScreens?: boolean, - +useLegacyImplementation?: boolean, - |}; - - declare export type ExtraDrawerNavigatorProps = {| - ...$Exact, - ...DrawerRouterOptions, - ...DrawerNavigationConfig, - |}; - - declare export type DrawerNavigatorProps< - NavHelpers: DrawerNavigationHelpers<> = DrawerNavigationHelpers<>, - > = $Exact, - RouteProp<>, - NavHelpers, - ExtraDrawerNavigatorProps, - >>; - - /** - * BaseNavigationContainer - */ - - declare export type BaseNavigationContainerProps = {| - +children: React$Node, - +initialState?: PossiblyStaleNavigationState, - +onStateChange?: (state: ?PossiblyStaleNavigationState) => void, - +independent?: boolean, - |}; - - declare export type ContainerEventMap = {| - ...GlobalEventMap, - +options: {| - +data: {| +options: { +[key: string]: mixed, ... } |}, - +canPreventDefault: false, - |}, - +__unsafe_action__: {| - +data: {| - +action: GenericNavigationAction, - +noop: boolean, - |}, - +canPreventDefault: false, - |}, - |}; - - declare export type BaseNavigationContainerInterface = {| - ...$Exact>, - +resetRoot: (state?: PossiblyStaleNavigationState) => void, - +getRootState: () => NavigationState, - +getCurrentRoute: () => RouteProp<> | void, - +getCurrentOptions: () => Object | void, - +isReady: () => boolean, - |}; - - declare type BaseNavigationContainerInterfaceRef = {| - ...BaseNavigationContainerInterface, - +current: BaseNavigationContainerInterface | null, - |}; - - /** - * State utils - */ - - declare export type GetStateFromPath = ( - path: string, - options?: LinkingConfig, - ) => PossiblyStaleNavigationState; - - declare export type GetPathFromState = ( - state?: ?PossiblyStaleNavigationState, - options?: LinkingConfig, - ) => string; - - declare export type GetFocusedRouteNameFromRoute = - PossiblyStaleRoute => ?string; - - /** - * Linking - */ - - declare export type ScreenLinkingConfig = {| - +path?: string, - +exact?: boolean, - +parse?: {| +[param: string]: string => mixed |}, - +stringify?: {| +[param: string]: mixed => string |}, - +screens?: ScreenLinkingConfigMap, - +initialRouteName?: string, - |}; - - declare export type ScreenLinkingConfigMap = {| - +[routeName: string]: string | ScreenLinkingConfig, - |}; - - declare export type LinkingConfig = {| - +initialRouteName?: string, - +screens: ScreenLinkingConfigMap, - |}; - - declare export type LinkingOptions = {| - +enabled?: boolean, - +prefixes: $ReadOnlyArray, - +config?: LinkingConfig, - +getStateFromPath?: GetStateFromPath, - +getPathFromState?: GetPathFromState, - |}; - - /** - * NavigationContainer - */ - - declare export type Theme = {| - +dark: boolean, - +colors: {| - +primary: string, - +background: string, - +card: string, - +text: string, - +border: string, - |}, - |}; - - declare export type NavigationContainerType = React$AbstractComponent< - {| - ...BaseNavigationContainerProps, - +theme?: Theme, - +linking?: LinkingOptions, - +fallback?: React$Node, - +onReady?: () => mixed, - |}, + import type { + CommonActionsType, + StackActionsType, + TabActionsType, + DrawerActionsType, + RouterFactory, + NavigationState, + CommonAction, + DefaultRouterOptions, + StackNavigationState, + StackAction, + StackRouterOptions, + TabNavigationState, + TabAction, + TabRouterOptions, + DrawerNavigationState, + DrawerAction, + DrawerRouterOptions, + BaseNavigationContainerProps, BaseNavigationContainerInterface, - >; - - //--------------------------------------------------------------------------- - // SECTION 2: EXPORTED MODULE - // This section defines the module exports and contains exported types that - // are not present in any other React Navigation libdef. - //--------------------------------------------------------------------------- + CreateNavigatorFactory, + UseNavigationBuilder, + NavigationHelpers, + ParamListBase, + NavigationProp, + LeafRoute, + GetStateFromPath, + GetPathFromState, + PossiblyStaleNavigationState, + NavigateAction, + GetFocusedRouteNameFromRoute, + Theme, + GenericNavigationAction, + PressEvent, + ScreenParams, + NavigationContainerType, + BaseNavigationContainerInterfaceRef, + } from '@react-navigation/core'; /** * Actions and routers */ declare export var CommonActions: CommonActionsType; declare export var StackActions: StackActionsType; declare export var TabActions: TabActionsType; declare export var DrawerActions: DrawerActionsType; declare export var BaseRouter: RouterFactory< NavigationState, CommonAction, DefaultRouterOptions, >; declare export var StackRouter: RouterFactory< StackNavigationState, StackAction, StackRouterOptions, >; declare export var TabRouter: RouterFactory< TabNavigationState, TabAction, TabRouterOptions, >; declare export var DrawerRouter: RouterFactory< DrawerNavigationState, DrawerAction, DrawerRouterOptions, >; /** * Navigator utils */ declare export var BaseNavigationContainer: React$AbstractComponent< BaseNavigationContainerProps, BaseNavigationContainerInterface, >; declare export var createNavigatorFactory: CreateNavigatorFactory; declare export var useNavigationBuilder: UseNavigationBuilder; declare export var NavigationHelpersContext: React$Context< ?NavigationHelpers, >; /** * Navigation prop / route accessors */ declare export var NavigationContext: React$Context< ?NavigationProp, >; declare export function useNavigation(): NavigationProp; declare export var NavigationRouteContext: React$Context>; declare export function useRoute(): LeafRoute<>; declare export function useNavigationState( selector: NavigationState => T, ): T; /** * Focus utils */ declare export function useFocusEffect( effect: () => ?(() => mixed), ): void; declare export function useIsFocused(): boolean; /** * State utils */ declare export var getStateFromPath: GetStateFromPath; declare export var getPathFromState: GetPathFromState; declare export function getActionFromState( state: PossiblyStaleNavigationState, ): ?NavigateAction; declare export var getFocusedRouteNameFromRoute: GetFocusedRouteNameFromRoute; /** * useScrollToTop */ declare type ScrollToOptions = { y?: number, animated?: boolean, ... }; declare type ScrollToOffsetOptions = { offset: number, animated?: boolean, ... }; declare type ScrollableView = | { scrollToTop(): void, ... } | { scrollTo(options: ScrollToOptions): void, ... } | { scrollToOffset(options: ScrollToOffsetOptions): void, ... } | { scrollResponderScrollTo(options: ScrollToOptions): void, ... }; declare type ScrollableWrapper = | { getScrollResponder(): React$Node, ... } | { getNode(): ScrollableView, ... } | ScrollableView; declare export function useScrollToTop( ref: { +current: ?ScrollableWrapper, ... }, ): void; /** * Themes */ declare export var DefaultTheme: {| ...Theme, +dark: false |}; declare export var DarkTheme: {| ...Theme, +dark: true |}; declare export function useTheme(): Theme; declare export var ThemeProvider: React$ComponentType<{| +value: Theme, +children: React$Node, |}>; /** * Linking */ declare export type LinkTo< ParamList: ParamListBase, RouteName: $Keys, > = | string | {| +screen: RouteName, +params?: $ElementType |}; declare export var Link: React$ComponentType<{ +to: LinkTo<>, +action?: GenericNavigationAction, +target?: string, +children: React$Node, ... }>; declare export function useLinkTo( ): (path: LinkTo) => void; declare export function useLinkProps< ParamList: ParamListBase, RouteName: $Keys, >(props: {| +to: LinkTo, +action?: GenericNavigationAction, |}): {| +href: string, +accessibilityRole: 'link', +onPress: (MouseEvent | PressEvent) => void, |}; declare export function useLinkBuilder(): ( name: string, params?: ScreenParams, ) => ?string; /** * NavigationContainer */ declare export var NavigationContainer: NavigationContainerType; declare export function createNavigationContainerRef( ): BaseNavigationContainerInterfaceRef; declare export function useNavigationContainerRef( ): BaseNavigationContainerInterfaceRef; /** * useBackButton */ declare export function useBackButton( container: { +current: ?React$ElementRef, ... }, ): void; } 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 index 0ae7dbd71..e9e7b8820 100644 --- a/native/flow-typed/npm/@react-navigation/stack_v6.x.x.js +++ b/native/flow-typed/npm/@react-navigation/stack_v6.x.x.js @@ -1,2354 +1,114 @@ // flow-typed signature: 5b28e0fdf284df0de63f1b8f132e6f5c // flow-typed version: dc2d6a22c7/@react-navigation/stack_v5.x.x/flow_>=v0.104.x declare module '@react-navigation/stack' { - //--------------------------------------------------------------------------- - // SECTION 1: IDENTICAL TYPE DEFINITIONS - // This section is identical across all React Navigation libdefs and contains - // shared definitions. We wish we could make it DRY and import from a shared - // definition, but that isn't yet possible. - //--------------------------------------------------------------------------- - - /** - * We start with some definitions that we have copy-pasted from React Native - * source files. - */ - - // This is a bastardization of the true StyleObj type located in - // react-native/Libraries/StyleSheet/StyleSheetTypes. We unfortunately can't - // import that here, and it's too lengthy (and consequently too brittle) to - // copy-paste here either. - declare type StyleObj = - | null - | void - | number - | false - | '' - | $ReadOnlyArray - | { [name: string]: any, ... }; - declare type ViewStyleProp = StyleObj; - declare type TextStyleProp = StyleObj; - declare type AnimatedViewStyleProp = StyleObj; - declare type AnimatedTextStyleProp = StyleObj; - - // Vaguely copied from - // react-native/Libraries/Animated/src/animations/Animation.js - declare type EndResult = { finished: boolean, ... }; - declare type EndCallback = (result: EndResult) => void; - declare interface Animation { - start( - fromValue: number, - onUpdate: (value: number) => void, - onEnd: ?EndCallback, - previousAnimation: ?Animation, - animatedValue: AnimatedValue, - ): void; - stop(): void; - } - declare type AnimationConfig = { - isInteraction?: boolean, - useNativeDriver: boolean, - onComplete?: ?EndCallback, - iterations?: number, - ... - }; - - // Vaguely copied from - // react-native/Libraries/Animated/src/nodes/AnimatedTracking.js - declare interface AnimatedTracking { - constructor( - value: AnimatedValue, - parent: any, - animationClass: any, - animationConfig: Object, - callback?: ?EndCallback, - ): void; - update(): void; - } - - // Vaguely copied from - // react-native/Libraries/Animated/src/nodes/AnimatedValue.js - declare type ValueListenerCallback = (state: { value: number, ... }) => void; - declare interface AnimatedValue { - constructor(value: number): void; - setValue(value: number): void; - setOffset(offset: number): void; - flattenOffset(): void; - extractOffset(): void; - addListener(callback: ValueListenerCallback): string; - removeListener(id: string): void; - removeAllListeners(): void; - stopAnimation(callback?: ?(value: number) => void): void; - resetAnimation(callback?: ?(value: number) => void): void; - interpolate(config: InterpolationConfigType): AnimatedInterpolation; - animate(animation: Animation, callback: ?EndCallback): void; - stopTracking(): void; - track(tracking: AnimatedTracking): void; - } - - // Copied from - // react-native/Libraries/Animated/src/animations/TimingAnimation.js - declare type TimingAnimationConfigSingle = AnimationConfig & { - toValue: number | AnimatedValue, - easing?: (value: number) => number, - duration?: number, - delay?: number, - ... - }; - - // Copied from - // react-native/Libraries/Animated/src/animations/SpringAnimation.js - declare type SpringAnimationConfigSingle = AnimationConfig & { - toValue: number | AnimatedValue, - overshootClamping?: boolean, - restDisplacementThreshold?: number, - restSpeedThreshold?: number, - velocity?: number, - bounciness?: number, - speed?: number, - tension?: number, - friction?: number, - stiffness?: number, - damping?: number, - mass?: number, - delay?: number, - ... - }; - - // Copied from react-native/Libraries/Types/CoreEventTypes.js - declare type SyntheticEvent = $ReadOnly<{| - bubbles: ?boolean, - cancelable: ?boolean, - currentTarget: number, - defaultPrevented: ?boolean, - dispatchConfig: $ReadOnly<{| - registrationName: string, - |}>, - eventPhase: ?number, - preventDefault: () => void, - isDefaultPrevented: () => boolean, - stopPropagation: () => void, - isPropagationStopped: () => boolean, - isTrusted: ?boolean, - nativeEvent: T, - persist: () => void, - target: ?number, - timeStamp: number, - type: ?string, - |}>; - declare type Layout = $ReadOnly<{| - x: number, - y: number, - width: number, - height: number, - |}>; - declare type LayoutEvent = SyntheticEvent< - $ReadOnly<{| - layout: Layout, - |}>, - >; - declare type BlurEvent = SyntheticEvent< - $ReadOnly<{| - target: number, - |}>, - >; - declare type FocusEvent = SyntheticEvent< - $ReadOnly<{| - target: number, - |}>, - >; - declare type ResponderSyntheticEvent = $ReadOnly<{| - ...SyntheticEvent, - touchHistory: $ReadOnly<{| - indexOfSingleActiveTouch: number, - mostRecentTimeStamp: number, - numberActiveTouches: number, - touchBank: $ReadOnlyArray< - $ReadOnly<{| - touchActive: boolean, - startPageX: number, - startPageY: number, - startTimeStamp: number, - currentPageX: number, - currentPageY: number, - currentTimeStamp: number, - previousPageX: number, - previousPageY: number, - previousTimeStamp: number, - |}>, - >, - |}>, - |}>; - declare type PressEvent = ResponderSyntheticEvent< - $ReadOnly<{| - changedTouches: $ReadOnlyArray<$PropertyType>, - force: number, - identifier: number, - locationX: number, - locationY: number, - pageX: number, - pageY: number, - target: ?number, - timestamp: number, - touches: $ReadOnlyArray<$PropertyType>, - |}>, - >; - - // Vaguely copied from - // react-native/Libraries/Animated/src/nodes/AnimatedInterpolation.js - declare type ExtrapolateType = 'extend' | 'identity' | 'clamp'; - declare type InterpolationConfigType = { - inputRange: Array, - outputRange: Array | Array, - easing?: (input: number) => number, - extrapolate?: ExtrapolateType, - extrapolateLeft?: ExtrapolateType, - extrapolateRight?: ExtrapolateType, - ... - }; - declare interface AnimatedInterpolation { - interpolate(config: InterpolationConfigType): AnimatedInterpolation; - } - - // Copied from react-native/Libraries/Components/View/ViewAccessibility.js - declare type AccessibilityRole = - | 'none' - | 'button' - | 'link' - | 'search' - | 'image' - | 'keyboardkey' - | 'text' - | 'adjustable' - | 'imagebutton' - | 'header' - | 'summary' - | 'alert' - | 'checkbox' - | 'combobox' - | 'menu' - | 'menubar' - | 'menuitem' - | 'progressbar' - | 'radio' - | 'radiogroup' - | 'scrollbar' - | 'spinbutton' - | 'switch' - | 'tab' - | 'tablist' - | 'timer' - | 'toolbar'; - declare type AccessibilityActionInfo = $ReadOnly<{ - name: string, - label?: string, - ... - }>; - declare type AccessibilityActionEvent = SyntheticEvent< - $ReadOnly<{actionName: string, ...}>, - >; - declare type AccessibilityState = { - disabled?: boolean, - selected?: boolean, - checked?: ?boolean | 'mixed', - busy?: boolean, - expanded?: boolean, - ... - }; - declare type AccessibilityValue = $ReadOnly<{| - min?: number, - max?: number, - now?: number, - text?: string, - |}>; - - // Copied from - // react-native/Libraries/Components/Touchable/TouchableWithoutFeedback.js - declare type Stringish = string; - declare type EdgeInsetsProp = $ReadOnly<$Partial>; - declare type TouchableWithoutFeedbackProps = $ReadOnly<{| - accessibilityActions?: ?$ReadOnlyArray, - accessibilityElementsHidden?: ?boolean, - accessibilityHint?: ?Stringish, - accessibilityIgnoresInvertColors?: ?boolean, - accessibilityLabel?: ?Stringish, - accessibilityLiveRegion?: ?('none' | 'polite' | 'assertive'), - accessibilityRole?: ?AccessibilityRole, - accessibilityState?: ?AccessibilityState, - accessibilityValue?: ?AccessibilityValue, - accessibilityViewIsModal?: ?boolean, - accessible?: ?boolean, - children?: ?React$Node, - delayLongPress?: ?number, - delayPressIn?: ?number, - delayPressOut?: ?number, - disabled?: ?boolean, - focusable?: ?boolean, - hitSlop?: ?EdgeInsetsProp, - importantForAccessibility?: ?('auto' | 'yes' | 'no' | 'no-hide-descendants'), - nativeID?: ?string, - onAccessibilityAction?: ?(event: AccessibilityActionEvent) => mixed, - onBlur?: ?(event: BlurEvent) => mixed, - onFocus?: ?(event: FocusEvent) => mixed, - onLayout?: ?(event: LayoutEvent) => mixed, - onLongPress?: ?(event: PressEvent) => mixed, - onPress?: ?(event: PressEvent) => mixed, - onPressIn?: ?(event: PressEvent) => mixed, - onPressOut?: ?(event: PressEvent) => mixed, - pressRetentionOffset?: ?EdgeInsetsProp, - rejectResponderTermination?: ?boolean, - testID?: ?string, - touchSoundDisabled?: ?boolean, - |}>; - - // Copied from react-native/Libraries/Image/ImageSource.js - declare type ImageURISource = $ReadOnly<{ - uri?: ?string, - bundle?: ?string, - method?: ?string, - headers?: ?Object, - body?: ?string, - cache?: ?('default' | 'reload' | 'force-cache' | 'only-if-cached'), - width?: ?number, - height?: ?number, - scale?: ?number, - ... - }>; - - /** - * The following is copied from react-native-gesture-handler's libdef - */ - - declare type StateUndetermined = 0; - declare type StateFailed = 1; - declare type StateBegan = 2; - declare type StateCancelled = 3; - declare type StateActive = 4; - declare type StateEnd = 5; - - declare type GestureHandlerState = - | StateUndetermined - | StateFailed - | StateBegan - | StateCancelled - | StateActive - | StateEnd; - - declare type $SyntheticEvent = { - +nativeEvent: $ReadOnly<$Exact>, - ... - }; - - declare type $Event = $SyntheticEvent<{ - handlerTag: number, - numberOfPointers: number, - state: GestureHandlerState, - oldState: GestureHandlerState, - ...$Exact, - ... - }>; - - declare type $EventHandlers = {| - onGestureEvent?: ($Event) => mixed, - onHandlerStateChange?: ($Event) => mixed, - onBegan?: ($Event) => mixed, - onFailed?: ($Event) => mixed, - onCancelled?: ($Event) => mixed, - onActivated?: ($Event) => mixed, - onEnded?: ($Event) => mixed, - |}; - - declare type HitSlop = - | number - | {| - left?: number, - top?: number, - right?: number, - bottom?: number, - vertical?: number, - horizontal?: number, - width?: number, - height?: number, - |} - | {| - width: number, - left: number, - |} - | {| - width: number, - right: number, - |} - | {| - height: number, - top: number, - |} - | {| - height: number, - bottom: number, - |}; - - declare type $GestureHandlerProps< - AdditionalProps: {...}, - ExtraEventsProps: {...} - > = $ReadOnly<{| - ...$Exact, - ...$EventHandlers, - id?: string, - enabled?: boolean, - waitFor?: React$Ref | Array>, - simultaneousHandlers?: React$Ref | Array>, - shouldCancelWhenOutside?: boolean, - minPointers?: number, - hitSlop?: HitSlop, - children?: React$Node, - |}>; - - declare type PanGestureHandlerProps = $GestureHandlerProps< - { - activeOffsetY?: number | [number, number], - activeOffsetX?: number | [number, number], - failOffsetY?: number | [number, number], - failOffsetX?: number | [number, number], - minDist?: number, - minVelocity?: number, - minVelocityX?: number, - minVelocityY?: number, - minPointers?: number, - maxPointers?: number, - avgTouches?: boolean, - ... - }, - { - x: number, - y: number, - absoluteX: number, - absoluteY: number, - translationX: number, - translationY: number, - velocityX: number, - velocityY: number, - ... - } - >; - - /** - * MAGIC - */ - - declare type $If = $Call< - ((true, Then, Else) => Then) & ((false, Then, Else) => Else), - Test, - Then, - Else, - >; - declare type $IsA = $Call< - (Y => true) & (mixed => false), - X, - >; - declare type $IsUndefined = $IsA; - - declare type $Partial = $ReadOnly<$Rest>; - - // If { ...T, ... } counts as a T, then we're inexact - declare type $IsExact = $Call< - (T => false) & (mixed => true), - { ...T, ... }, - >; - - /** - * Actions, state, etc. - */ - - declare export type ScreenParams = { +[key: string]: mixed, ... }; - - declare export type BackAction = {| - +type: 'GO_BACK', - +source?: string, - +target?: string, - |}; - declare export type NavigateAction = {| - +type: 'NAVIGATE', - +payload: - | {| +key: string, +params?: ScreenParams |} - | {| +name: string, +key?: string, +params?: ScreenParams |}, - +source?: string, - +target?: string, - |}; - declare export type ResetAction = {| - +type: 'RESET', - +payload: StaleNavigationState, - +source?: string, - +target?: string, - |}; - declare export type SetParamsAction = {| - +type: 'SET_PARAMS', - +payload: {| +params?: ScreenParams |}, - +source?: string, - +target?: string, - |}; - declare export type CommonAction = - | BackAction - | NavigateAction - | ResetAction - | SetParamsAction; - - declare type NavigateActionCreator = {| - (routeName: string, params?: ScreenParams): NavigateAction, - ( - | {| +key: string, +params?: ScreenParams |} - | {| +name: string, +key?: string, +params?: ScreenParams |}, - ): NavigateAction, - |}; - declare export type CommonActionsType = {| - +navigate: NavigateActionCreator, - +goBack: () => BackAction, - +reset: (state: PossiblyStaleNavigationState) => ResetAction, - +setParams: (params: ScreenParams) => SetParamsAction, - |}; - - declare export type GenericNavigationAction = {| - +type: string, - +payload?: { +[key: string]: mixed, ... }, - +source?: string, - +target?: string, - |}; - - declare export type LeafRoute = {| - +key: string, - +name: RouteName, - +params?: ScreenParams, - |}; - declare export type StateRoute = {| - ...LeafRoute, - +state: NavigationState | StaleNavigationState, - |}; - declare export type Route = - | LeafRoute - | StateRoute; - - declare export type NavigationState = {| - +key: string, - +index: number, - +routeNames: $ReadOnlyArray, - +history?: $ReadOnlyArray, - +routes: $ReadOnlyArray>, - +type: string, - +stale: false, - |}; - - declare export type StaleLeafRoute = {| - +key?: string, - +name: RouteName, - +params?: ScreenParams, - |}; - declare export type StaleStateRoute = {| - ...StaleLeafRoute, - +state: StaleNavigationState, - |}; - declare export type StaleRoute = - | StaleLeafRoute - | StaleStateRoute; - declare export type StaleNavigationState = {| - // It's possible to pass React Nav a StaleNavigationState with an undefined - // index, but React Nav will always return one with the index set. This is - // the same as for the type property below, but in the case of index we tend - // to rely on it being set more... - +index: number, - +history?: $ReadOnlyArray, - +routes: $ReadOnlyArray>, - +type?: string, - +stale?: true, - |}; - - declare export type PossiblyStaleNavigationState = - | NavigationState - | StaleNavigationState; - declare export type PossiblyStaleRoute = - | Route - | StaleRoute; - - /** - * Routers - */ - - declare type ActionCreators< - State: NavigationState, - Action: GenericNavigationAction, - > = { - +[key: string]: (...args: any) => (Action | State => Action), - ... - }; - - declare export type DefaultRouterOptions = { - +initialRouteName?: string, - ... - }; - - declare export type RouterFactory< - State: NavigationState, - Action: GenericNavigationAction, - RouterOptions: DefaultRouterOptions, - > = (options: RouterOptions) => Router; - - declare export type ParamListBase = { +[key: string]: ?ScreenParams, ... }; - - declare export type RouterConfigOptions = {| - +routeNames: $ReadOnlyArray, - +routeParamList: ParamListBase, - |}; - - declare export type Router< - State: NavigationState, - Action: GenericNavigationAction, - > = {| - +type: $PropertyType, - +getInitialState: (options: RouterConfigOptions) => State, - +getRehydratedState: ( - partialState: PossiblyStaleNavigationState, - options: RouterConfigOptions, - ) => State, - +getStateForRouteNamesChange: ( - state: State, - options: RouterConfigOptions, - ) => State, - +getStateForRouteFocus: (state: State, key: string) => State, - +getStateForAction: ( - state: State, - action: Action, - options: RouterConfigOptions, - ) => ?PossiblyStaleNavigationState; - +shouldActionChangeFocus: (action: GenericNavigationAction) => boolean, - +actionCreators?: ActionCreators, - |}; - - /** - * Stack actions and router - */ - - declare export type StackNavigationState = {| - ...NavigationState, - +type: 'stack', - |}; - - declare export type ReplaceAction = {| - +type: 'REPLACE', - +payload: {| +name: string, +key?: ?string, +params?: ScreenParams |}, - +source?: string, - +target?: string, - |}; - declare export type PushAction = {| - +type: 'PUSH', - +payload: {| +name: string, +key?: ?string, +params?: ScreenParams |}, - +source?: string, - +target?: string, - |}; - declare export type PopAction = {| - +type: 'POP', - +payload: {| +count: number |}, - +source?: string, - +target?: string, - |}; - declare export type PopToTopAction = {| - +type: 'POP_TO_TOP', - +source?: string, - +target?: string, - |}; - declare export type StackAction = - | CommonAction - | ReplaceAction - | PushAction - | PopAction - | PopToTopAction; - - declare export type StackActionsType = {| - +replace: (routeName: string, params?: ScreenParams) => ReplaceAction, - +push: (routeName: string, params?: ScreenParams) => PushAction, - +pop: (count?: number) => PopAction, - +popToTop: () => PopToTopAction, - |}; - - declare export type StackRouterOptions = $Exact; - - /** - * Tab actions and router - */ - - declare export type TabNavigationState = {| - ...NavigationState, - +type: 'tab', - +history: $ReadOnlyArray<{| type: 'route', key: string |}>, - |}; - - declare export type JumpToAction = {| - +type: 'JUMP_TO', - +payload: {| +name: string, +params?: ScreenParams |}, - +source?: string, - +target?: string, - |}; - declare export type TabAction = - | CommonAction - | JumpToAction; - - declare export type TabActionsType = {| - +jumpTo: string => JumpToAction, - |}; - - declare export type TabRouterOptions = {| - ...$Exact, - +backBehavior?: 'initialRoute' | 'order' | 'history' | 'none', - |}; - - /** - * Drawer actions and router - */ - - declare type DrawerHistoryEntry = - | {| +type: 'route', +key: string |} - | {| +type: 'drawer' |}; - declare export type DrawerNavigationState = {| - ...NavigationState, - +type: 'drawer', - +history: $ReadOnlyArray, - |}; - - declare export type OpenDrawerAction = {| - +type: 'OPEN_DRAWER', - +source?: string, - +target?: string, - |}; - declare export type CloseDrawerAction = {| - +type: 'CLOSE_DRAWER', - +source?: string, - +target?: string, - |}; - declare export type ToggleDrawerAction = {| - +type: 'TOGGLE_DRAWER', - +source?: string, - +target?: string, - |}; - declare export type DrawerAction = - | TabAction - | OpenDrawerAction - | CloseDrawerAction - | ToggleDrawerAction; - - declare export type DrawerActionsType = {| - ...TabActionsType, - +openDrawer: () => OpenDrawerAction, - +closeDrawer: () => CloseDrawerAction, - +toggleDrawer: () => ToggleDrawerAction, - |}; - - declare export type DrawerRouterOptions = {| - ...TabRouterOptions, - +defaultStatus?: 'open' | 'closed', - |}; - - /** - * Events - */ - - declare export type EventMapBase = { - +[name: string]: {| - +data?: mixed, - +canPreventDefault?: boolean, - |}, - ... - }; - declare type EventPreventDefaultProperties = $If< - Test, - {| +defaultPrevented: boolean, +preventDefault: () => void |}, - {| |}, - >; - declare type EventDataProperties = $If< - $IsUndefined, - {| |}, - {| +data: Data |}, - >; - declare type EventArg< - EventName: string, - CanPreventDefault: ?boolean = false, - Data = void, - > = {| - ...EventPreventDefaultProperties, - ...EventDataProperties, - +type: EventName, - +target?: string, - |}; - declare type GlobalEventMap = {| - +state: {| +data: {| +state: State |}, +canPreventDefault: false |}, - |}; - declare type EventMapCore = {| - ...GlobalEventMap, - +focus: {| +data: void, +canPreventDefault: false |}, - +blur: {| +data: void, +canPreventDefault: false |}, - +beforeRemove: {| - +data: {| +action: GenericNavigationAction |}, - +canPreventDefault: true, - |}, - |}; - declare type EventListenerCallback< - EventName: string, - State: PossiblyStaleNavigationState = NavigationState, - EventMap: EventMapBase = EventMapCore, - > = (e: EventArg< - EventName, - $PropertyType< - $ElementType< - {| ...EventMap, ...EventMapCore |}, - EventName, - >, - 'canPreventDefault', - >, - $PropertyType< - $ElementType< - {| ...EventMap, ...EventMapCore |}, - EventName, - >, - 'data', - >, - >) => mixed; - - /** - * Navigation prop - */ - - declare type PartialWithMergeProperty = $If< - $IsExact, - { ...$Partial, +merge: true }, - { ...$Partial, +merge: true, ... }, - >; - - declare type EitherExactOrPartialWithMergeProperty = - | ParamsType - | PartialWithMergeProperty; - - declare export type SimpleNavigate = - >( - routeName: DestinationRouteName, - params: EitherExactOrPartialWithMergeProperty< - $ElementType, - >, - ) => void; - - declare export type Navigate = - & SimpleNavigate - & >( - route: $If< - $IsUndefined<$ElementType>, - | {| +key: string |} - | {| +name: DestinationRouteName, +key?: string |}, - | {| - +key: string, - +params?: EitherExactOrPartialWithMergeProperty< - $ElementType, - >, - |} - | {| - +name: DestinationRouteName, - +key?: string, - +params?: EitherExactOrPartialWithMergeProperty< - $ElementType, - >, - |}, - >, - ) => void; - - declare type CoreNavigationHelpers< - ParamList: ParamListBase, - State: PossiblyStaleNavigationState = PossiblyStaleNavigationState, - EventMap: EventMapBase = EventMapCore, - > = { - +navigate: Navigate, - +dispatch: ( - action: - | GenericNavigationAction - | (State => GenericNavigationAction), - ) => void, - +reset: PossiblyStaleNavigationState => void, - +goBack: () => void, - +isFocused: () => boolean, - +canGoBack: () => boolean, - +getId: () => string | void, - +getParent: >(id?: string) => ?Parent, - +getState: () => NavigationState, - +addListener: |}, - >>( - name: EventName, - callback: EventListenerCallback, - ) => () => void, - +removeListener: |}, - >>( - name: EventName, - callback: EventListenerCallback, - ) => void, - ... - }; - - declare export type NavigationHelpers< - ParamList: ParamListBase, - State: PossiblyStaleNavigationState = PossiblyStaleNavigationState, - EventMap: EventMapBase = EventMapCore, - > = { - ...$Exact>, - +setParams: (params: ScreenParams) => void, - ... - }; - - declare type SetParamsInput< - ParamList: ParamListBase, - RouteName: $Keys = $Keys, - > = $If< - $IsUndefined<$ElementType>, - empty, - $Partial<$NonMaybeType<$ElementType>>, - >; - - declare export type NavigationProp< - ParamList: ParamListBase, - RouteName: $Keys = $Keys, - State: PossiblyStaleNavigationState = PossiblyStaleNavigationState, - ScreenOptions: {...} = {...}, - EventMap: EventMapBase = EventMapCore, - > = { - ...$Exact>, - +setOptions: (options: $Partial) => void, - +setParams: (params: SetParamsInput) => void, - ... - }; - - /** - * CreateNavigator - */ - - declare export type RouteProp< - ParamList: ParamListBase = ParamListBase, - RouteName: $Keys = $Keys, - > = {| - ...LeafRoute, - +params: $ElementType, - +path?: string, - |}; - - declare type ScreenOptionsProp< - ScreenOptions: {...}, - RouteParam, - NavHelpers, - > = - | ScreenOptions - | ({| +route: RouteParam, +navigation: NavHelpers |}) => ScreenOptions; - declare export type ScreenListeners< - State: NavigationState = NavigationState, - EventMap: EventMapBase = EventMapCore, - > = $ObjMapi< - {| [name: $Keys]: empty |}, - >(K, empty) => EventListenerCallback, - >; - declare type ScreenListenersProp< - ScreenListenersParam: {...}, - RouteParam, - NavHelpers, - > = - | ScreenListenersParam - | ({| +route: RouteParam, +navigation: NavHelpers |}) => ScreenListenersParam; - - declare type BaseScreenProps< - ParamList: ParamListBase, - NavProp, - RouteName: $Keys = $Keys, - State: NavigationState = NavigationState, - ScreenOptions: {...} = {...}, - EventMap: EventMapBase = EventMapCore, - > = {| - +name: RouteName, - +options?: ScreenOptionsProp< - ScreenOptions, - RouteProp, - NavProp, - >, - +listeners?: ScreenListenersProp< - ScreenListeners, - RouteProp, - NavProp, - >, - +initialParams?: $Partial<$ElementType>, - +getId?: ({ - +params: $ElementType, - }) => string | void, - +navigationKey?: string, - |}; - - declare export type ScreenProps< - ParamList: ParamListBase, - NavProp, - RouteName: $Keys = $Keys, - State: NavigationState = NavigationState, - ScreenOptions: {...} = {...}, - EventMap: EventMapBase = EventMapCore, - > = - | {| - ...BaseScreenProps< - ParamList, - NavProp, - RouteName, - State, - ScreenOptions, - EventMap, - >, - +component: React$ComponentType<{| - +route: RouteProp, - +navigation: NavProp, - |}>, - |} - | {| - ...BaseScreenProps< - ParamList, - NavProp, - RouteName, - State, - ScreenOptions, - EventMap, - >, - +getComponent: () => React$ComponentType<{| - +route: RouteProp, - +navigation: NavProp, - |}>, - |} - | {| - ...BaseScreenProps< - ParamList, - NavProp, - RouteName, - State, - ScreenOptions, - EventMap, - >, - +children: ({| - +route: RouteProp, - +navigation: NavProp, - |}) => React$Node, - |}; - - declare export type ScreenComponent< - GlobalParamList: ParamListBase, - ParamList: ParamListBase, - State: NavigationState = NavigationState, - ScreenOptions: {...} = {...}, - EventMap: EventMapBase = EventMapCore, - > = < - RouteName: $Keys, - NavProp: NavigationProp< - GlobalParamList, - RouteName, - State, - ScreenOptions, - EventMap, - >, - >(props: ScreenProps< - ParamList, - NavProp, - RouteName, - State, - ScreenOptions, - EventMap, - >) => React$Node; - - declare type ScreenOptionsProps< - ScreenOptions: {...}, - RouteParam, - NavHelpers, - > = {| - +screenOptions?: ScreenOptionsProp, - |}; - declare type ScreenListenersProps< - ScreenListenersParam: {...}, - RouteParam, - NavHelpers, - > = {| - +screenListeners?: ScreenListenersProp< - ScreenListenersParam, - RouteParam, - NavHelpers, - >, - |}; - declare export type ExtraNavigatorPropsBase = { - ...$Exact, - +id?: string, - +children?: React$Node, - ... - }; - declare export type NavigatorProps< - ScreenOptions: {...}, - ScreenListenersParam, - RouteParam, - NavHelpers, - ExtraNavigatorProps: ExtraNavigatorPropsBase, - > = { - ...$Exact, - ...ScreenOptionsProps, - ...ScreenListenersProps, - +defaultScreenOptions?: - | ScreenOptions - | ({| - +route: RouteParam, - +navigation: NavHelpers, - +options: ScreenOptions, - |}) => ScreenOptions, - ... - }; - declare export type NavigatorPropsBase< - ScreenOptions: {...}, - ScreenListenersParam: {...}, - NavHelpers, - > = NavigatorProps< - ScreenOptions, - ScreenListenersParam, - RouteProp<>, - NavHelpers, - ExtraNavigatorPropsBase, - >; - - declare export type CreateNavigator< - State: NavigationState, - ScreenOptions: {...}, - EventMap: EventMapBase, - ExtraNavigatorProps: ExtraNavigatorPropsBase, - > = < - GlobalParamList: ParamListBase, - ParamList: ParamListBase, - NavHelpers: NavigationHelpers< - GlobalParamList, - State, - EventMap, - >, - >() => {| - +Screen: ScreenComponent< - GlobalParamList, - ParamList, - State, - ScreenOptions, - EventMap, - >, - +Navigator: React$ComponentType<$Exact, - RouteProp, - NavHelpers, - ExtraNavigatorProps, - >>>, - +Group: React$ComponentType<{| - ...ScreenOptionsProps, NavHelpers>, - +children: React$Node, - +navigationKey?: string, - |}>, - |}; - - declare export type CreateNavigatorFactory = < - State: NavigationState, - ScreenOptions: {...}, - EventMap: EventMapBase, - NavHelpers: NavigationHelpers< - ParamListBase, - State, - EventMap, - >, - ExtraNavigatorProps: ExtraNavigatorPropsBase, - >( - navigator: React$ComponentType<$Exact, - RouteProp<>, - NavHelpers, - ExtraNavigatorProps, - >>>, - ) => CreateNavigator; - - - /** - * useNavigationBuilder - */ - - declare export type Descriptor< - NavHelpers, - ScreenOptions: {...} = {...}, - > = {| - +render: () => React$Node, - +options: $ReadOnly, - +navigation: NavHelpers, - |}; - - declare export type UseNavigationBuilder = < - State: NavigationState, - Action: GenericNavigationAction, - ScreenOptions: {...}, - RouterOptions: DefaultRouterOptions, - NavHelpers, - EventMap: EventMapBase, - ExtraNavigatorProps: ExtraNavigatorPropsBase, - >( - routerFactory: RouterFactory, - options: $Exact, - RouteProp<>, - NavHelpers, - ExtraNavigatorProps, - >>, - ) => {| - +id?: string, - +state: State, - +descriptors: {| +[key: string]: Descriptor |}, - +navigation: NavHelpers, - |}; - - /** - * EdgeInsets - */ - - declare type EdgeInsets = {| - +top: number, - +right: number, - +bottom: number, - +left: number, - |}; - - /** - * TransitionPreset - */ - - declare export type TransitionSpec = - | {| - animation: 'spring', - config: $Diff< - SpringAnimationConfigSingle, - { toValue: number | AnimatedValue, ... }, - >, - |} - | {| - animation: 'timing', - config: $Diff< - TimingAnimationConfigSingle, - { toValue: number | AnimatedValue, ... }, - >, - |}; - - declare export type StackCardInterpolationProps = {| - +current: {| - +progress: AnimatedInterpolation, - |}, - +next?: {| - +progress: AnimatedInterpolation, - |}, - +index: number, - +closing: AnimatedInterpolation, - +swiping: AnimatedInterpolation, - +inverted: AnimatedInterpolation, - +layouts: {| - +screen: {| +width: number, +height: number |}, - |}, - +insets: EdgeInsets, - |}; - declare export type StackCardInterpolatedStyle = {| - containerStyle?: AnimatedViewStyleProp, - cardStyle?: AnimatedViewStyleProp, - overlayStyle?: AnimatedViewStyleProp, - shadowStyle?: AnimatedViewStyleProp, - |}; - declare export type StackCardStyleInterpolator = ( - props: StackCardInterpolationProps, - ) => StackCardInterpolatedStyle; - - declare export type StackHeaderInterpolationProps = {| - +current: {| - +progress: AnimatedInterpolation, - |}, - +next?: {| - +progress: AnimatedInterpolation, - |}, - +layouts: {| - +header: {| +width: number, +height: number |}, - +screen: {| +width: number, +height: number |}, - +title?: {| +width: number, +height: number |}, - +leftLabel?: {| +width: number, +height: number |}, - |}, - |}; - declare export type StackHeaderInterpolatedStyle = {| - leftLabelStyle?: AnimatedViewStyleProp, - leftButtonStyle?: AnimatedViewStyleProp, - rightButtonStyle?: AnimatedViewStyleProp, - titleStyle?: AnimatedViewStyleProp, - backgroundStyle?: AnimatedViewStyleProp, - |}; - declare export type StackHeaderStyleInterpolator = ( - props: StackHeaderInterpolationProps, - ) => StackHeaderInterpolatedStyle; - - declare type GestureDirection = - | 'horizontal' - | 'horizontal-inverted' - | 'vertical' - | 'vertical-inverted'; - - declare export type TransitionPreset = {| - +gestureDirection: GestureDirection, - +transitionSpec: {| - +open: TransitionSpec, - +close: TransitionSpec, - |}, - +cardStyleInterpolator: StackCardStyleInterpolator, - +headerStyleInterpolator: StackHeaderStyleInterpolator, - |}; - - /** - * Header common options - */ - - declare export type SceneProgress = {| - +current: AnimatedInterpolation, - +next?: AnimatedInterpolation, - +previous?: AnimatedInterpolation, - |}; - - declare export type HeaderProps = {| - +navigation: NavProp, - +route: RouteProp<>, - +options: ScreenOptions, - +layout: {| +width: number, +height: number |}, - |}; - - declare export type HeaderButtonProps = $Partial<{| - +tintColor: string, - +pressColor: string, - +pressOpacity: number, - |}>; - - declare export type HeaderLeftButtonProps = $Partial<{| - ...HeaderButtonProps, - +labelVisible: boolean, - |}>; - - declare type HeaderTitleInputBase = { - +onLayout: LayoutEvent => void, - +children: string, - +allowFontScaling: ?boolean, - +tintColor: ?string, - +style: ?AnimatedTextStyleProp, - ... - }; - - declare export type HeaderTitleInputProps = - $Exact; - - declare export type HeaderCommonOptions< - NavHeaderProps, - NavHeaderLeftProps, - NavHeaderRightProps, - > = $Partial<{| - +header: NavHeaderProps => React$Node, - +headerShown: boolean, - +headerTitle: string | ( HeaderTitleInputProps => React$Node), - +headerTitleAlign: 'left' | 'center', - +headerTitleStyle: AnimatedTextStyleProp, - +headerTitleContainerStyle: AnimatedViewStyleProp, - +headerTintColor: string, - +headerTitleAllowFontScaling: boolean, - +headerLeft: NavHeaderLeftProps => React$Node, - +headerLeftContainerStyle: AnimatedViewStyleProp, - +headerRight: NavHeaderRightProps => React$Node, - +headerRightContainerStyle: AnimatedViewStyleProp, - +headerBackground: ({| style: AnimatedViewStyleProp |}) => React$Node, - +headerStyle: AnimatedViewStyleProp, - +headerTransparent: boolean, - +headerStatusBarHeight: number, - +headerShadowVisible: boolean, - +headerBackgroundContainerStyle: AnimatedViewStyleProp, - +headerPressColor: string, - +headerPressOpacity: number, - |}>; - - /** - * Stack options - */ - - declare export type StackDescriptor = Descriptor< - StackNavigationHelpers<>, - StackOptions, - >; - - declare type Scene = {| - +route: T, - +descriptor: StackDescriptor, - +progress: SceneProgress, - |}; - - declare export type StackHeaderProps = {| - ...HeaderProps, StackOptions>, - +progress: SceneProgress, - +back?: {| +title: string |}, - +styleInterpolator: StackHeaderStyleInterpolator, - |}; - - declare export type StackHeaderButtonProps = $Partial<{| - ...HeaderButtonProps, - +canGoBack: boolean, - |}>; - - declare export type StackHeaderLeftButtonProps = $Partial<{| - ...StackHeaderButtonProps, - +onPress: (() => void), - +backImage: (props: {| tintColor: string |}) => React$Node, - +label: string, - +truncatedLabel: string, - +labelVisible: boolean, - +labelStyle: AnimatedTextStyleProp, - +allowFontScaling: boolean, - +onLabelLayout: LayoutEvent => void, - +screenLayout: {| +width: number, +height: number |}, - +titleLayout: {| +width: number, +height: number |}, - +disabled: boolean, - +accessibilityLabel: string, - +style: ViewStyleProp, - |}>; - - declare export type StackOptions = $Partial<{| - +title: string, - +cardShadowEnabled: boolean, - +cardOverlayEnabled: boolean, - +cardOverlay: {| style: ViewStyleProp |} => React$Node, - +cardStyle: ViewStyleProp, - +animationEnabled: boolean, - +animationTypeForReplace: 'push' | 'pop', - +gestureEnabled: boolean, - +gestureResponseDistance: number, - +gestureVelocityImpact: number, - +safeAreaInsets: $Partial, - +keyboardHandlingEnabled: boolean, - +presentation: 'card' | 'modal' | 'transparentModal', - // Transition - ...TransitionPreset, - // Header - ...HeaderCommonOptions< - StackHeaderProps, - StackHeaderLeftButtonProps, - StackHeaderButtonProps, - >, - +headerMode: 'float' | 'screen', - +headerBackAllowFontScaling: boolean, - +headerBackTitle: string | null, - +headerBackTitleStyle: TextStyleProp, - +headerBackTitleVisible: boolean, - +headerTruncatedBackTitle: string, - +headerBackImage: $PropertyType, - +headerBackAccessibilityLabel: string, - |}>; - - /** - * Stack navigation prop - */ - - declare export type StackNavigationEventMap = {| - ...EventMapCore, - +transitionStart: {| - +data: {| +closing: boolean |}, - +canPreventDefault: false, - |}, - +transitionEnd: {| - +data: {| +closing: boolean |}, - +canPreventDefault: false, - |}, - +gestureStart: {| +data: void, +canPreventDefault: false |}, - +gestureEnd: {| +data: void, +canPreventDefault: false |}, - +gestureCancel: {| +data: void, +canPreventDefault: false |}, - |}; - - declare type StackExtraNavigationHelpers< - ParamList: ParamListBase = ParamListBase, - > = {| - +replace: SimpleNavigate, - +push: SimpleNavigate, - +pop: (count?: number) => void, - +popToTop: () => void, - |}; - - declare export type StackNavigationHelpers< - ParamList: ParamListBase = ParamListBase, - EventMap: EventMapBase = StackNavigationEventMap, - > = { - ...$Exact>, - ...StackExtraNavigationHelpers, - ... - }; - - declare export type StackNavigationProp< - ParamList: ParamListBase = ParamListBase, - RouteName: $Keys = $Keys, - Options: {...} = StackOptions, - EventMap: EventMapBase = StackNavigationEventMap, - > = {| - ...$Exact>, - ...StackExtraNavigationHelpers, - |}; - - /** - * Miscellaneous stack exports - */ - - declare type StackNavigationConfig = {| - +detachInactiveScreens?: boolean, - |}; - - declare export type ExtraStackNavigatorProps = {| - ...$Exact, - ...StackRouterOptions, - ...StackNavigationConfig, - |}; - - declare export type StackNavigatorProps< - NavHelpers: StackNavigationHelpers<> = StackNavigationHelpers<>, - > = $Exact, - RouteProp<>, - NavHelpers, + StackNavigationEventMap, ExtraStackNavigatorProps, - >>; - - /** - * Bottom tab options - */ - - declare export type BottomTabBarButtonProps = {| - ...$Diff< - TouchableWithoutFeedbackProps, - {| onPress?: ?(event: PressEvent) => mixed |}, - >, - +to?: string, - +children: React$Node, - +onPress?: (MouseEvent | PressEvent) => void, - |}; - - declare export type TabBarVisibilityAnimationConfig = - | {| - +animation: 'spring', - +config?: $Diff< - SpringAnimationConfigSingle, - { toValue: number | AnimatedValue, useNativeDriver: boolean, ... }, - >, - |} - | {| - +animation: 'timing', - +config?: $Diff< - TimingAnimationConfigSingle, - { toValue: number | AnimatedValue, useNativeDriver: boolean, ... }, - >, - |}; - - declare export type BottomTabOptions = $Partial<{| - +title: string, - +tabBarLabel: - | string - | ({| focused: boolean, color: string |}) => React$Node, - +tabBarIcon: ({| - focused: boolean, - color: string, - size: number, - |}) => React$Node, - +tabBarBadge: number | string, - +tabBarBadgeStyle: TextStyleProp, - +tabBarAccessibilityLabel: string, - +tabBarTestID: string, - +tabBarVisibilityAnimationConfig: $Partial<{| - +show: TabBarVisibilityAnimationConfig, - +hide: TabBarVisibilityAnimationConfig, - |}>, - +tabBarButton: BottomTabBarButtonProps => React$Node, - +tabBarHideOnKeyboard: boolean, - +tabBarActiveTintColor: string, - +tabBarInactiveTintColor: string, - +tabBarActiveBackgroundColor: string, - +tabBarInactiveBackgroundColor: string, - +tabBarAllowFontScaling: boolean, - +tabBarShowLabel: boolean, - +tabBarLabelStyle: TextStyleProp, - +tabBarIconStyle: TextStyleProp, - +tabBarItemStyle: ViewStyleProp, - +tabBarLabelPosition: 'beside-icon' | 'below-icon', - +tabBarStyle: ViewStyleProp, - +unmountOnBlur: boolean, - +lazy: boolean, - ...HeaderCommonOptions< - HeaderProps, BottomTabOptions>, - HeaderLeftButtonProps, - HeaderButtonProps, - >, - |}>; - - /** - * Bottom tab navigation prop - */ - - declare export type BottomTabNavigationEventMap = {| - ...EventMapCore, - +tabPress: {| +data: void, +canPreventDefault: true |}, - +tabLongPress: {| +data: void, +canPreventDefault: false |}, - |}; - - declare type TabExtraNavigationHelpers< - ParamList: ParamListBase = ParamListBase, - > = {| - +jumpTo: SimpleNavigate, - |}; - - declare export type BottomTabNavigationHelpers< - ParamList: ParamListBase = ParamListBase, - EventMap: EventMapBase = BottomTabNavigationEventMap, - > = { - ...$Exact>, - ...TabExtraNavigationHelpers, - ... - }; - - declare export type BottomTabNavigationProp< - ParamList: ParamListBase = ParamListBase, - RouteName: $Keys = $Keys, - Options: {...} = BottomTabOptions, - EventMap: EventMapBase = BottomTabNavigationEventMap, - > = {| - ...$Exact>, - ...TabExtraNavigationHelpers, - |}; - - /** - * Miscellaneous bottom tab exports - */ - - declare export type BottomTabDescriptor = Descriptor< - BottomTabNavigationHelpers<>, - BottomTabOptions, - >; - - declare type BottomTabNavigationBuilderResult = {| - +state: TabNavigationState, - +navigation: BottomTabNavigationHelpers<>, - +descriptors: {| +[key: string]: BottomTabDescriptor |}, - |}; - - declare export type BottomTabBarProps = BottomTabNavigationBuilderResult; - - declare type BottomTabNavigationConfig = {| - +tabBar?: BottomTabBarProps => React$Node, - +safeAreaInsets?: $Partial, - +detachInactiveScreens?: boolean, - |}; - - declare export type ExtraBottomTabNavigatorProps = {| - ...$Exact, - ...TabRouterOptions, - ...BottomTabNavigationConfig, - |}; - - declare export type BottomTabNavigatorProps< - NavHelpers: BottomTabNavigationHelpers<> = BottomTabNavigationHelpers<>, - > = $Exact, - RouteProp<>, - NavHelpers, - ExtraBottomTabNavigatorProps, - >>; - - /** - * Material bottom tab options - */ - - declare export type MaterialBottomTabOptions = $Partial<{| - +title: string, - +tabBarColor: string, - +tabBarLabel: string, - +tabBarIcon: - | string - | ({| +focused: boolean, +color: string |}) => React$Node, - +tabBarBadge: boolean | number | string, - +tabBarAccessibilityLabel: string, - +tabBarTestID: string, - |}>; - - /** - * Material bottom tab navigation prop - */ - - declare export type MaterialBottomTabNavigationEventMap = {| - ...EventMapCore, - +tabPress: {| +data: void, +canPreventDefault: true |}, - |}; - - declare export type MaterialBottomTabNavigationHelpers< - ParamList: ParamListBase = ParamListBase, - EventMap: EventMapBase = MaterialBottomTabNavigationEventMap, - > = { - ...$Exact>, - ...TabExtraNavigationHelpers, - ... - }; - - declare export type MaterialBottomTabNavigationProp< - ParamList: ParamListBase = ParamListBase, - RouteName: $Keys = $Keys, - Options: {...} = MaterialBottomTabOptions, - EventMap: EventMapBase = MaterialBottomTabNavigationEventMap, - > = {| - ...$Exact>, - ...TabExtraNavigationHelpers, - |}; - - /** - * Miscellaneous material bottom tab exports - */ - - declare export type PaperFont = {| - +fontFamily: string, - +fontWeight?: - | 'normal' - | 'bold' - | '100' - | '200' - | '300' - | '400' - | '500' - | '600' - | '700' - | '800' - | '900', - |}; - - declare export type PaperFonts = {| - +regular: PaperFont, - +medium: PaperFont, - +light: PaperFont, - +thin: PaperFont, - |}; - - declare export type PaperTheme = {| - +dark: boolean, - +mode?: 'adaptive' | 'exact', - +roundness: number, - +colors: {| - +primary: string, - +background: string, - +surface: string, - +accent: string, - +error: string, - +text: string, - +onSurface: string, - +onBackground: string, - +disabled: string, - +placeholder: string, - +backdrop: string, - +notification: string, - |}, - +fonts: PaperFonts, - +animation: {| - +scale: number, - |}, - |}; - - declare export type PaperRoute = {| - +key: string, - +title?: string, - +icon?: any, - +badge?: string | number | boolean, - +color?: string, - +accessibilityLabel?: string, - +testID?: string, - |}; - - declare export type PaperTouchableProps = {| - ...TouchableWithoutFeedbackProps, - +key: string, - +route: PaperRoute, - +children: React$Node, - +borderless?: boolean, - +centered?: boolean, - +rippleColor?: string, - |}; - - declare export type MaterialBottomTabNavigationConfig = {| - +shifting?: boolean, - +labeled?: boolean, - +renderTouchable?: PaperTouchableProps => React$Node, - +activeColor?: string, - +inactiveColor?: string, - +sceneAnimationEnabled?: boolean, - +keyboardHidesNavigationBar?: boolean, - +barStyle?: ViewStyleProp, - +style?: ViewStyleProp, - +theme?: PaperTheme, - |}; - - declare export type ExtraMaterialBottomTabNavigatorProps = {| - ...$Exact, - ...TabRouterOptions, - ...MaterialBottomTabNavigationConfig, - |}; - - declare export type MaterialBottomTabNavigatorProps< - NavHelpers: MaterialBottomTabNavigationHelpers<> = - MaterialBottomTabNavigationHelpers<>, - > = $Exact, - RouteProp<>, - NavHelpers, - ExtraMaterialBottomTabNavigatorProps, - >>; - - /** - * Material top tab options - */ - - declare export type MaterialTopTabOptions = $Partial<{| - +title: string, - +tabBarLabel: - | string - | ({| +focused: boolean, +color: string |}) => React$Node, - +tabBarIcon: ({| +focused: boolean, +color: string |}) => React$Node, - +tabBarAccessibilityLabel: string, - +tabBarTestID: string, - +tabBarActiveTintColor: string, - +tabBarInactiveTintColor: string, - +tabBarPressColor: string, - +tabBarPressOpacity: number, - +tabBarShowLabel: boolean, - +tabBarShowIcon: boolean, - +tabBarAllowFontScaling: boolean, - +tabBarBounces: boolean, - +tabBarScrollEnabled: boolean, - +tabBarIconStyle: ViewStyleProp, - +tabBarLabelStyle: TextStyleProp, - +tabBarItemStyle: ViewStyleProp, - +tabBarIndicatorStyle: ViewStyleProp, - +tabBarIndicatorContainerStyle: ViewStyleProp, - +tabBarContentContainerStyle: ViewStyleProp, - +tabBarStyle: ViewStyleProp, - +tabBarBadge: () => React$Node, - +tabBarIndicator: MaterialTopTabBarIndicatorProps => React$Node, - +lazy: boolean, - +lazyPlaceholder: ({| +route: Route<> |}) => React$Node, - |}>; - - /** - * Material top tab navigation prop - */ - - declare export type MaterialTopTabNavigationEventMap = {| - ...EventMapCore, - +tabPress: {| +data: void, +canPreventDefault: true |}, - +tabLongPress: {| +data: void, +canPreventDefault: false |}, - +swipeStart: {| +data: void, +canPreventDefault: false |}, - +swipeEnd: {| +data: void, +canPreventDefault: false |}, - |}; - - declare export type MaterialTopTabNavigationHelpers< - ParamList: ParamListBase = ParamListBase, - EventMap: EventMapBase = MaterialTopTabNavigationEventMap, - > = { - ...$Exact>, - ...TabExtraNavigationHelpers, - ... - }; - - declare export type MaterialTopTabNavigationProp< - ParamList: ParamListBase = ParamListBase, - RouteName: $Keys = $Keys, - Options: {...} = MaterialTopTabOptions, - EventMap: EventMapBase = MaterialTopTabNavigationEventMap, - > = {| - ...$Exact>, - ...TabExtraNavigationHelpers, - |}; - - /** - * Miscellaneous material top tab exports - */ - - declare type MaterialTopTabPagerCommonProps = {| - +keyboardDismissMode: 'none' | 'on-drag' | 'auto', - +swipeEnabled: boolean, - +swipeVelocityImpact?: number, - +springVelocityScale?: number, - +springConfig: $Partial<{| - +damping: number, - +mass: number, - +stiffness: number, - +restSpeedThreshold: number, - +restDisplacementThreshold: number, - |}>, - +timingConfig: $Partial<{| - +duration: number, - |}>, - |}; - - declare export type MaterialTopTabPagerProps = {| - ...MaterialTopTabPagerCommonProps, - +onSwipeStart?: () => void, - +onSwipeEnd?: () => void, - +onIndexChange: (index: number) => void, - +navigationState: TabNavigationState, - +layout: {| +width: number, +height: number |}, - +removeClippedSubviews: boolean, - +children: ({| - +addListener: (type: 'enter', listener: number => void) => void, - +removeListener: (type: 'enter', listener: number => void) => void, - +position: any, // Reanimated.Node - +render: React$Node => React$Node, - +jumpTo: string => void, - |}) => React$Node, - +gestureHandlerProps: PanGestureHandlerProps, - |}; - - declare export type MaterialTopTabBarIndicatorProps = {| - +state: TabNavigationState, - +width: string, - +style?: ViewStyleProp, - +getTabWidth: number => number, - |}; - - declare export type MaterialTopTabDescriptor = Descriptor< - MaterialBottomTabNavigationHelpers<>, - MaterialBottomTabOptions, - >; - - declare type MaterialTopTabNavigationBuilderResult = {| - +state: TabNavigationState, - +navigation: MaterialTopTabNavigationHelpers<>, - +descriptors: {| +[key: string]: MaterialTopTabDescriptor |}, - |}; - - declare export type MaterialTopTabBarProps = {| - ...MaterialTopTabNavigationBuilderResult, - +layout: {| +width: number, +height: number |}, - +position: any, // Reanimated.Node - +jumpTo: string => void, - |}; - - declare export type MaterialTopTabNavigationConfig = {| - ...$Partial, - +position?: any, // Reanimated.Value - +tabBarPosition?: 'top' | 'bottom', - +initialLayout?: $Partial<{| +width: number, +height: number |}>, - +lazyPreloadDistance?: number, - +removeClippedSubviews?: boolean, - +sceneContainerStyle?: ViewStyleProp, - +style?: ViewStyleProp, - +gestureHandlerProps?: PanGestureHandlerProps, - +pager?: MaterialTopTabPagerProps => React$Node, - +tabBar?: MaterialTopTabBarProps => React$Node, - |}; - - declare export type ExtraMaterialTopTabNavigatorProps = {| - ...$Exact, - ...TabRouterOptions, - ...MaterialTopTabNavigationConfig, - |}; - - declare export type MaterialTopTabNavigatorProps< - NavHelpers: MaterialTopTabNavigationHelpers<> = - MaterialTopTabNavigationHelpers<>, - > = $Exact, - RouteProp<>, - NavHelpers, - ExtraMaterialTopTabNavigatorProps, - >>; - - /** - * Drawer options - */ - - declare export type DrawerOptions = $Partial<{| - +title: string, - +lazy: boolean, - +drawerLabel: - | string - | ({| +color: string, +focused: boolean |}) => React$Node, - +drawerIcon: ({| - +color: string, - +size: number, - +focused: boolean, - |}) => React$Node, - +drawerActiveTintColor: string, - +drawerActiveBackgroundColor: string, - +drawerInactiveTintColor: string, - +drawerInactiveBackgroundColor: string, - +drawerItemStyle: ViewStyleProp, - +drawerLabelStyle: TextStyleProp, - +drawerContentContainerStyle: ViewStyleProp, - +drawerContentStyle: ViewStyleProp, - +drawerStyle: ViewStyleProp, - +drawerPosition: 'left' | 'right', - +drawerType: 'front' | 'back' | 'slide' | 'permanent', - +drawerHideStatusBarOnOpen: boolean, - +drawerStatusBarAnimation: 'slide' | 'none' | 'fade', - +overlayColor: string, - +sceneContainerStyle: ViewStyleProp, - +gestureHandlerProps: PanGestureHandlerProps, - +swipeEnabled: boolean, - +swipeEdgeWidth: number, - +swipeMinDistance: number, - +keyboardDismissMode: 'on-drag' | 'none', - +unmountOnBlur: boolean, - ...HeaderCommonOptions< - HeaderProps, DrawerOptions>, - HeaderLeftButtonProps, - HeaderButtonProps, - >, - |}>; - - /** - * Drawer navigation prop - */ - - declare export type DrawerNavigationEventMap = - EventMapCore; - - declare type DrawerExtraNavigationHelpers< - ParamList: ParamListBase = ParamListBase, - > = {| - +jumpTo: SimpleNavigate, - +openDrawer: () => void, - +closeDrawer: () => void, - +toggleDrawer: () => void, - |}; - - declare export type DrawerNavigationHelpers< - ParamList: ParamListBase = ParamListBase, - EventMap: EventMapBase = DrawerNavigationEventMap, - > = { - ...$Exact>, - ...DrawerExtraNavigationHelpers, - ... - }; - - declare export type DrawerNavigationProp< - ParamList: ParamListBase = ParamListBase, - RouteName: $Keys = $Keys, - Options: {...} = DrawerOptions, - EventMap: EventMapBase = DrawerNavigationEventMap, - > = {| - ...$Exact>, - ...DrawerExtraNavigationHelpers, - |}; - - /** - * Miscellaneous drawer exports - */ - - declare export type DrawerDescriptor = Descriptor< - DrawerNavigationHelpers<>, - DrawerOptions, - >; - - declare type DrawerNavigationBuilderResult = {| - +state: DrawerNavigationState, - +navigation: DrawerNavigationHelpers<>, - +descriptors: {| +[key: string]: DrawerDescriptor |}, - |}; - - declare export type DrawerNavigationConfig = {| - +drawerContent?: DrawerNavigationBuilderResult => React$Node, - +detachInactiveScreens?: boolean, - +useLegacyImplementation?: boolean, - |}; - - declare export type ExtraDrawerNavigatorProps = {| - ...$Exact, - ...DrawerRouterOptions, - ...DrawerNavigationConfig, - |}; - - declare export type DrawerNavigatorProps< - NavHelpers: DrawerNavigationHelpers<> = DrawerNavigationHelpers<>, - > = $Exact, - RouteProp<>, - NavHelpers, - ExtraDrawerNavigatorProps, - >>; - - /** - * BaseNavigationContainer - */ - - declare export type BaseNavigationContainerProps = {| - +children: React$Node, - +initialState?: PossiblyStaleNavigationState, - +onStateChange?: (state: ?PossiblyStaleNavigationState) => void, - +independent?: boolean, - |}; - - declare export type ContainerEventMap = {| - ...GlobalEventMap, - +options: {| - +data: {| +options: { +[key: string]: mixed, ... } |}, - +canPreventDefault: false, - |}, - +__unsafe_action__: {| - +data: {| - +action: GenericNavigationAction, - +noop: boolean, - |}, - +canPreventDefault: false, - |}, - |}; - - declare export type BaseNavigationContainerInterface = {| - ...$Exact>, - +resetRoot: (state?: PossiblyStaleNavigationState) => void, - +getRootState: () => NavigationState, - +getCurrentRoute: () => RouteProp<> | void, - +getCurrentOptions: () => Object | void, - +isReady: () => boolean, - |}; - - declare type BaseNavigationContainerInterfaceRef = {| - ...BaseNavigationContainerInterface, - +current: BaseNavigationContainerInterface | null, - |}; - - /** - * State utils - */ - - declare export type GetStateFromPath = ( - path: string, - options?: LinkingConfig, - ) => PossiblyStaleNavigationState; - - declare export type GetPathFromState = ( - state?: ?PossiblyStaleNavigationState, - options?: LinkingConfig, - ) => string; - - declare export type GetFocusedRouteNameFromRoute = - PossiblyStaleRoute => ?string; - - /** - * Linking - */ - - declare export type ScreenLinkingConfig = {| - +path?: string, - +exact?: boolean, - +parse?: {| +[param: string]: string => mixed |}, - +stringify?: {| +[param: string]: mixed => string |}, - +screens?: ScreenLinkingConfigMap, - +initialRouteName?: string, - |}; - - declare export type ScreenLinkingConfigMap = {| - +[routeName: string]: string | ScreenLinkingConfig, - |}; - - declare export type LinkingConfig = {| - +initialRouteName?: string, - +screens: ScreenLinkingConfigMap, - |}; - - declare export type LinkingOptions = {| - +enabled?: boolean, - +prefixes: $ReadOnlyArray, - +config?: LinkingConfig, - +getStateFromPath?: GetStateFromPath, - +getPathFromState?: GetPathFromState, - |}; - - /** - * NavigationContainer - */ - - declare export type Theme = {| - +dark: boolean, - +colors: {| - +primary: string, - +background: string, - +card: string, - +text: string, - +border: string, - |}, - |}; - - declare export type NavigationContainerType = React$AbstractComponent< - {| - ...BaseNavigationContainerProps, - +theme?: Theme, - +linking?: LinkingOptions, - +fallback?: React$Node, - +onReady?: () => mixed, - |}, - BaseNavigationContainerInterface, - >; - - //--------------------------------------------------------------------------- - // SECTION 2: EXPORTED MODULE - // This section defines the module exports and contains exported types that - // are not present in any other React Navigation libdef. - //--------------------------------------------------------------------------- + StackHeaderProps, + StackCardStyleInterpolator, + StackHeaderStyleInterpolator, + TransitionSpec, + TransitionPreset, + StackCardInterpolationProps, + PanGestureHandlerProps, + } from '@react-navigation/core'; /** * StackView */ declare export var StackView: React$ComponentType<{| ...StackNavigationConfig, +state: StackNavigationState, +navigation: StackNavigationHelpers<>, +descriptors: {| +[key: string]: StackDescriptor |}, |}>; /** * createStackNavigator */ declare export var createStackNavigator: CreateNavigator< StackNavigationState, StackOptions, StackNavigationEventMap, ExtraStackNavigatorProps, >; /** * Header components */ declare export var Header: React$ComponentType< StackHeaderProps >; /** * Style/animation options */ declare export var CardStyleInterpolators: {| +forHorizontalIOS: StackCardStyleInterpolator, +forVerticalIOS: StackCardStyleInterpolator, +forModalPresentationIOS: StackCardStyleInterpolator, +forFadeFromBottomAndroid: StackCardStyleInterpolator, +forRevealFromBottomAndroid: StackCardStyleInterpolator, +forScaleFromCenterAndroid: StackCardStyleInterpolator, +forNoAnimation: StackCardStyleInterpolator, |}; declare export var HeaderStyleInterpolators: {| +forUIKit: StackHeaderStyleInterpolator, +forFade: StackHeaderStyleInterpolator, +forSlideLeft: StackHeaderStyleInterpolator, +forSlideRight: StackHeaderStyleInterpolator, +forSlideUp: StackHeaderStyleInterpolator, +forNoAnimation: StackHeaderStyleInterpolator, |}; declare export var TransitionSpecs: {| +TransitionIOSSpec: TransitionSpec, +FadeInFromBottomAndroidSpec: TransitionSpec, +FadeOutToBottomAndroidSpec: TransitionSpec, +RevealFromBottomAndroidSpec: TransitionSpec, +ScaleFromCenterAndroidSpec: TransitionSpec, |}; declare export var TransitionPresets: {| +SlideFromRightIOS: TransitionPreset, +ModalSlideFromBottomIOS: TransitionPreset, +ModalPresentationIOS: TransitionPreset, +FadeFromBottomAndroid: TransitionPreset, +RevealFromBottomAndroid: TransitionPreset, +ScaleFromCenterAndroid: TransitionPreset, +DefaultTransition: TransitionPreset, +ModalTransition: TransitionPreset, |}; /** * CardAnimation accessors */ declare export var CardAnimationContext: React$Context< ?StackCardInterpolationProps, >; - declare export function useCardAnimation(): StackCardInterpolationProps + declare export function useCardAnimation(): StackCardInterpolationProps; /** * GestureHandler accessors */ declare type GestureHandlerRef = React$Ref< React$ComponentType, >; declare export var GestureHandlerRefContext: React$Context< ?GestureHandlerRef, >; declare export function useGestureHandlerRef(): GestureHandlerRef; } diff --git a/native/invite-links/invite-links-navigator.react.js b/native/invite-links/invite-links-navigator.react.js index 052c884d4..6b97be5a3 100644 --- a/native/invite-links/invite-links-navigator.react.js +++ b/native/invite-links/invite-links-navigator.react.js @@ -1,93 +1,93 @@ // @flow -import { - createStackNavigator, - type StackNavigationHelpers, - type StackNavigationProp, -} from '@react-navigation/stack'; +import type { + StackNavigationHelpers, + StackNavigationProp, +} from '@react-navigation/core'; +import { createStackNavigator } from '@react-navigation/stack'; import * as React from 'react'; import { SafeAreaView } from 'react-native-safe-area-context'; import ManagePublicLinkScreen from './manage-public-link-screen.react.js'; import ViewInviteLinksHeaderLeftButton from './view-invite-links-header-left-button.react.js'; import ViewInviteLinksScreen from './view-invite-links-screen.react.js'; import HeaderBackButton from '../navigation/header-back-button.react.js'; import { defaultStackScreenOptions } from '../navigation/options.js'; import type { RootNavigationProp } from '../navigation/root-navigator.react.js'; import { type InviteLinkParamList, ViewInviteLinksRouteName, type ScreenParamList, ManagePublicLinkRouteName, } from '../navigation/route-names.js'; import { useColors, useStyles } from '../themes/colors.js'; const safeAreaEdges = ['bottom']; export type InviteLinksNavigationProps< RouteName: $Keys = $Keys, > = StackNavigationProp; const InviteLinksStack = createStackNavigator< ScreenParamList, InviteLinkParamList, StackNavigationHelpers, >(); const viewInviteLinksOptions = { headerTitle: 'Invite link', headerLeft: ViewInviteLinksHeaderLeftButton, headerBackImage: () => null, headerBackTitleStyle: { marginLeft: 20 }, }; const managePublicLinkOptions = { headerTitle: 'Public link', headerBackTitleVisible: false, headerLeft: HeaderBackButton, }; type Props = { +navigation: RootNavigationProp<'InviteLinkNavigator'>, ... }; // eslint-disable-next-line no-unused-vars function InviteLinksNavigator(props: Props): React.Node { const styles = useStyles(unboundStyles); const colors = useColors(); const screenOptions = React.useMemo( () => ({ ...defaultStackScreenOptions, headerStyle: { backgroundColor: colors.modalBackground, borderBottomWidth: 1, }, }), [colors.modalBackground], ); return ( ); } const unboundStyles = { container: { flex: 1, backgroundColor: 'modalBackground', }, }; export default InviteLinksNavigator; diff --git a/native/navigation/community-drawer-navigator.react.js b/native/navigation/community-drawer-navigator.react.js index b93030a9e..e8b75fb9f 100644 --- a/native/navigation/community-drawer-navigator.react.js +++ b/native/navigation/community-drawer-navigator.react.js @@ -1,83 +1,83 @@ // @flow -import { - createDrawerNavigator, - type DrawerNavigationHelpers, - type DrawerNavigationProp, -} from '@react-navigation/drawer'; +import type { + DrawerNavigationHelpers, + DrawerNavigationProp, +} from '@react-navigation/core'; +import { createDrawerNavigator } from '@react-navigation/drawer'; import * as React from 'react'; import { View, useWindowDimensions } from 'react-native'; import type { AppNavigationProp } from './app-navigator.react.js'; import CommunityDrawerContent from './community-drawer-content.react.js'; import { drawerSwipeEnabledSelector } from './nav-selectors.js'; import { NavContext } from './navigation-context.js'; import { TabNavigatorRouteName } from './route-names.js'; import type { NavigationRoute, ScreenParamList, CommunityDrawerParamList, } from './route-names.js'; import TabNavigator from './tab-navigator.react.js'; import { useStyles } from '../themes/colors.js'; const communityDrawerContent = () => ; export type CommunityDrawerNavigationProp< RouteName: $Keys = $Keys, > = DrawerNavigationProp; const Drawer = createDrawerNavigator< ScreenParamList, CommunityDrawerParamList, DrawerNavigationHelpers, >(); type Props = { +navigation: AppNavigationProp<'CommunityDrawerNavigator'>, +route: NavigationRoute<'CommunityDrawerNavigator'>, }; // eslint-disable-next-line no-unused-vars function CommunityDrawerNavigator(props: Props): React.Node { const styles = useStyles(unboundStyles); const navContext = React.useContext(NavContext); const swipeEnabled = React.useMemo( () => drawerSwipeEnabledSelector(navContext), [navContext], ); const { width: screenWidth } = useWindowDimensions(); const screenOptions = React.useMemo( () => ({ drawerStyle: styles.drawerStyle, headerShown: false, swipeEnabled, swipeEdgeWidth: screenWidth, }), [styles.drawerStyle, swipeEnabled, screenWidth], ); return ( ); } const unboundStyles = { drawerView: { flex: 1, }, drawerStyle: { width: '80%', }, }; export { CommunityDrawerNavigator }; diff --git a/native/navigation/default-state.js b/native/navigation/default-state.js index c11f1f9c2..4ec2ab578 100644 --- a/native/navigation/default-state.js +++ b/native/navigation/default-state.js @@ -1,93 +1,93 @@ // @flow -import type { StaleNavigationState } from '@react-navigation/native'; +import type { StaleNavigationState } from '@react-navigation/core'; import type { BaseNavInfo } from 'lib/types/nav-types.js'; import { fifteenDaysEarlier, fifteenDaysLater } from 'lib/utils/date-utils.js'; import { AppRouteName, TabNavigatorRouteName, LoggedOutModalRouteName, ProfileRouteName, ProfileScreenRouteName, ChatRouteName, ChatThreadListRouteName, HomeChatThreadListRouteName, BackgroundChatThreadListRouteName, AppsRouteName, CommunityDrawerNavigatorRouteName, } from './route-names.js'; export type NavInfo = $Exact; const defaultNavigationState: StaleNavigationState = { type: 'stack', index: 1, routes: [ { name: AppRouteName, state: { type: 'stack', index: 0, routes: [ { name: CommunityDrawerNavigatorRouteName, state: { type: 'drawer', index: 0, routes: [ { name: TabNavigatorRouteName, state: { type: 'tab', index: 0, routes: [ { name: ChatRouteName, state: { type: 'stack', index: 0, routes: [ { name: ChatThreadListRouteName, state: { type: 'tab', index: 0, routes: [ { name: HomeChatThreadListRouteName }, { name: BackgroundChatThreadListRouteName }, ], }, }, ], }, }, { name: ProfileRouteName, state: { type: 'stack', index: 0, routes: [{ name: ProfileScreenRouteName }], }, }, { name: AppsRouteName }, ], }, }, ], }, }, ], }, }, { name: LoggedOutModalRouteName }, ], }; const defaultNavInfo: NavInfo = { startDate: fifteenDaysEarlier().valueOf(), endDate: fifteenDaysLater().valueOf(), }; export { defaultNavigationState, defaultNavInfo }; diff --git a/native/navigation/header.react.js b/native/navigation/header.react.js index 802041e7c..49a129082 100644 --- a/native/navigation/header.react.js +++ b/native/navigation/header.react.js @@ -1,20 +1,21 @@ // @flow -import { Header, type StackHeaderProps } from '@react-navigation/stack'; +import type { StackHeaderProps } from '@react-navigation/core'; +import { Header } from '@react-navigation/stack'; import * as React from 'react'; import DisconnectedBar from './disconnected-bar.react.js'; type Props = { ...StackHeaderProps, +activeTab: boolean, }; export default function CustomHeader(props: Props): React.Node { const { activeTab, ...rest } = props; return ( <>
); } diff --git a/native/navigation/modal-pruner.react.js b/native/navigation/modal-pruner.react.js index 11b841b53..15cf15d93 100644 --- a/native/navigation/modal-pruner.react.js +++ b/native/navigation/modal-pruner.react.js @@ -1,135 +1,135 @@ // @flow import type { PossiblyStaleNavigationState, PossiblyStaleRoute, -} from '@react-navigation/native'; +} from '@react-navigation/core'; import invariant from 'invariant'; import * as React from 'react'; import { clearRootModalsActionType, clearOverlayModalsActionType, } from './action-types.js'; import type { NavContextType } from './navigation-context.js'; import { AppRouteName } from './route-names.js'; type DependencyInfo = { status: 'missing' | 'resolved' | 'unresolved', presenter: ?string, presenting: string[], parentRouteName: ?string, }; function collectDependencyInfo( route: PossiblyStaleNavigationState | PossiblyStaleRoute<>, dependencyMap?: Map = new Map(), parentRouteName?: ?string, ): Map { let state, routeName; if (route.name === undefined) { state = route; } else if (route.state) { ({ state, name: routeName } = route); } if (state) { for (const child of state.routes) { collectDependencyInfo(child, dependencyMap, routeName); } return dependencyMap; } if (!route.key) { return dependencyMap; } const { key } = route; const presenter = route.params && route.params.presentedFrom ? route.params.presentedFrom : null; invariant( presenter === null || typeof presenter === 'string', 'presentedFrom should be a string', ); let status = 'resolved'; if (presenter) { const presenterInfo = dependencyMap.get(presenter); if (!presenterInfo) { status = 'unresolved'; dependencyMap.set(presenter, { status: 'missing', presenter: undefined, presenting: [key], parentRouteName: undefined, }); } else if (presenterInfo) { status = presenterInfo.status; presenterInfo.presenting.push(key); } } const existingInfo = dependencyMap.get(key); const presenting = existingInfo ? existingInfo.presenting : []; dependencyMap.set(key, { status, presenter, presenting, parentRouteName, }); if (status === 'resolved') { const toResolve = [...presenting]; while (toResolve.length > 0) { const presentee = toResolve.pop(); const dependencyInfo = dependencyMap.get(presentee); invariant(dependencyInfo, 'could not find presentee'); dependencyInfo.status = 'resolved'; toResolve.push(...dependencyInfo.presenting); } } return dependencyMap; } type Props = { +navContext: NavContextType, }; function ModalPruner(props: Props): null { const { state, dispatch } = props.navContext; const [pruneRootModals, pruneOverlayModals] = React.useMemo(() => { const dependencyMap = collectDependencyInfo(state); const rootModals = [], overlayModals = []; for (const [key, info] of dependencyMap) { if (info.status !== 'unresolved') { continue; } if (!info.parentRouteName) { rootModals.push(key); } else if (info.parentRouteName === AppRouteName) { overlayModals.push(key); } } return [rootModals, overlayModals]; }, [state]); React.useEffect(() => { if (pruneRootModals.length > 0) { dispatch({ type: (clearRootModalsActionType: 'CLEAR_ROOT_MODALS'), payload: { keys: pruneRootModals }, }); } if (pruneOverlayModals.length > 0) { dispatch({ type: (clearOverlayModalsActionType: 'CLEAR_OVERLAY_MODALS'), payload: { keys: pruneOverlayModals }, }); } }, [dispatch, pruneRootModals, pruneOverlayModals]); return null; } export default ModalPruner; diff --git a/native/navigation/nav-selectors.js b/native/navigation/nav-selectors.js index ffe236191..695ff4f00 100644 --- a/native/navigation/nav-selectors.js +++ b/native/navigation/nav-selectors.js @@ -1,442 +1,442 @@ // @flow -import type { PossiblyStaleNavigationState } from '@react-navigation/native'; +import type { PossiblyStaleNavigationState } from '@react-navigation/core'; import { useRoute } from '@react-navigation/native'; import _memoize from 'lodash/memoize.js'; import * as React from 'react'; import { createSelector } from 'reselect'; import { nonThreadCalendarFiltersSelector } from 'lib/selectors/calendar-filter-selectors.js'; import { currentCalendarQuery } from 'lib/selectors/nav-selectors.js'; import { useCanEditMessage } from 'lib/shared/edit-messages-utils.js'; import type { CalendarQuery } from 'lib/types/entry-types.js'; import type { CalendarFilter } from 'lib/types/filter-types.js'; import type { ComposableMessageInfo, RobotextMessageInfo, } from 'lib/types/message-types.js'; import type { MinimallyEncodedThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js'; import type { GlobalTheme } from 'lib/types/theme-types.js'; import type { ThreadInfo } from 'lib/types/thread-types.js'; import type { NavContextType } from './navigation-context.js'; import { NavContext } from './navigation-context.js'; import { getStateFromNavigatorRoute, getThreadIDFromRoute, currentLeafRoute, } from './navigation-utils.js'; import { AppRouteName, TabNavigatorRouteName, MessageListRouteName, ChatRouteName, CalendarRouteName, ThreadPickerModalRouteName, ActionResultModalRouteName, accountModals, scrollBlockingModals, chatRootModals, threadRoutes, CommunityDrawerNavigatorRouteName, MessageResultsScreenRouteName, MessageSearchRouteName, } from './route-names.js'; import type { RemoveEditMode } from '../chat/message-list-types'; import { useSelector } from '../redux/redux-utils.js'; import type { NavPlusRedux } from '../types/selector-types.js'; const baseCreateIsForegroundSelector = (routeName: string) => createSelector( (context: ?NavContextType) => context && context.state, (navigationState: ?PossiblyStaleNavigationState) => { if (!navigationState) { return false; } return navigationState.routes[navigationState.index].name === routeName; }, ); const createIsForegroundSelector: ( routeName: string, ) => (context: ?NavContextType) => boolean = _memoize( baseCreateIsForegroundSelector, ); function useIsAppLoggedIn(): boolean { const navContext = React.useContext(NavContext); return React.useMemo(() => { if (!navContext) { return false; } const { state } = navContext; return !accountModals.includes(state.routes[state.index].name); }, [navContext]); } const baseCreateActiveTabSelector = (routeName: string) => createSelector( (context: ?NavContextType) => context && context.state, (navigationState: ?PossiblyStaleNavigationState) => { if (!navigationState) { return false; } const currentRootSubroute = navigationState.routes[navigationState.index]; if (currentRootSubroute.name !== AppRouteName) { return false; } const appState = getStateFromNavigatorRoute(currentRootSubroute); const [firstAppSubroute] = appState.routes; if (firstAppSubroute.name !== CommunityDrawerNavigatorRouteName) { return false; } const communityDrawerState = getStateFromNavigatorRoute(firstAppSubroute); const [firstCommunityDrawerSubroute] = communityDrawerState.routes; if (firstCommunityDrawerSubroute.name !== TabNavigatorRouteName) { return false; } const tabState = getStateFromNavigatorRoute(firstCommunityDrawerSubroute); return tabState.routes[tabState.index].name === routeName; }, ); const createActiveTabSelector: ( routeName: string, ) => (context: ?NavContextType) => boolean = _memoize( baseCreateActiveTabSelector, ); const scrollBlockingModalsClosedSelector: ( context: ?NavContextType, ) => boolean = createSelector( (context: ?NavContextType) => context && context.state, (navigationState: ?PossiblyStaleNavigationState) => { if (!navigationState) { return false; } const currentRootSubroute = navigationState.routes[navigationState.index]; if (currentRootSubroute.name !== AppRouteName) { return true; } const appState = getStateFromNavigatorRoute(currentRootSubroute); for (let i = appState.index; i >= 0; i--) { const route = appState.routes[i]; if (scrollBlockingModals.includes(route.name)) { return false; } } return true; }, ); function selectBackgroundIsDark( navigationState: ?PossiblyStaleNavigationState, theme: ?GlobalTheme, ): boolean { if (!navigationState) { return false; } const currentRootSubroute = navigationState.routes[navigationState.index]; if (currentRootSubroute.name !== AppRouteName) { // Very bright... we'll call it non-dark. Doesn't matter right now since // we only use this selector for determining ActionResultModal appearance return false; } const appState = getStateFromNavigatorRoute(currentRootSubroute); let appIndex = appState.index; let currentAppSubroute = appState.routes[appIndex]; while (currentAppSubroute.name === ActionResultModalRouteName) { currentAppSubroute = appState.routes[--appIndex]; } if (scrollBlockingModals.includes(currentAppSubroute.name)) { // All the scroll-blocking chat modals have a dark background return true; } return theme === 'dark'; } function activeThread( navigationState: ?PossiblyStaleNavigationState, validRouteNames: $ReadOnlyArray, ): ?string { if (!navigationState) { return null; } let rootIndex = navigationState.index; let currentRootSubroute = navigationState.routes[rootIndex]; while (currentRootSubroute.name !== AppRouteName) { if (!chatRootModals.includes(currentRootSubroute.name)) { return null; } if (rootIndex === 0) { return null; } currentRootSubroute = navigationState.routes[--rootIndex]; } const appState = getStateFromNavigatorRoute(currentRootSubroute); const [firstAppSubroute] = appState.routes; if (firstAppSubroute.name !== CommunityDrawerNavigatorRouteName) { return null; } const communityDrawerState = getStateFromNavigatorRoute(firstAppSubroute); const [firstCommunityDrawerSubroute] = communityDrawerState.routes; if (firstCommunityDrawerSubroute.name !== TabNavigatorRouteName) { return null; } const tabState = getStateFromNavigatorRoute(firstCommunityDrawerSubroute); const currentTabSubroute = tabState.routes[tabState.index]; if (currentTabSubroute.name !== ChatRouteName) { return null; } const chatState = getStateFromNavigatorRoute(currentTabSubroute); const currentChatSubroute = chatState.routes[chatState.index]; return getThreadIDFromRoute(currentChatSubroute, validRouteNames); } const activeThreadSelector: (context: ?NavContextType) => ?string = createSelector( (context: ?NavContextType) => context && context.state, (navigationState: ?PossiblyStaleNavigationState): ?string => activeThread(navigationState, threadRoutes), ); const messageListRouteNames = [MessageListRouteName]; const activeMessageListSelector: (context: ?NavContextType) => ?string = createSelector( (context: ?NavContextType) => context && context.state, (navigationState: ?PossiblyStaleNavigationState): ?string => activeThread(navigationState, messageListRouteNames), ); function useActiveThread(): ?string { const navContext = React.useContext(NavContext); return React.useMemo(() => { if (!navContext) { return null; } const { state } = navContext; return activeThread(state, threadRoutes); }, [navContext]); } function useActiveMessageList(): ?string { const navContext = React.useContext(NavContext); return React.useMemo(() => { if (!navContext) { return null; } const { state } = navContext; return activeThread(state, messageListRouteNames); }, [navContext]); } const calendarTabActiveSelector = createActiveTabSelector(CalendarRouteName); const threadPickerActiveSelector = createIsForegroundSelector( ThreadPickerModalRouteName, ); const calendarActiveSelector: (context: ?NavContextType) => boolean = createSelector( calendarTabActiveSelector, threadPickerActiveSelector, (calendarTabActive: boolean, threadPickerActive: boolean) => calendarTabActive || threadPickerActive, ); const nativeCalendarQuery: (input: NavPlusRedux) => () => CalendarQuery = createSelector( (input: NavPlusRedux) => currentCalendarQuery(input.redux), (input: NavPlusRedux) => calendarActiveSelector(input.navContext), ( calendarQuery: (calendarActive: boolean) => CalendarQuery, calendarActive: boolean, ) => () => calendarQuery(calendarActive), ); const nonThreadCalendarQuery: (input: NavPlusRedux) => () => CalendarQuery = createSelector( nativeCalendarQuery, (input: NavPlusRedux) => nonThreadCalendarFiltersSelector(input.redux), ( calendarQuery: () => CalendarQuery, filters: $ReadOnlyArray, ) => { return (): CalendarQuery => { const query = calendarQuery(); return { startDate: query.startDate, endDate: query.endDate, filters, }; }; }, ); function useCalendarQuery(): () => CalendarQuery { const navContext = React.useContext(NavContext); return useSelector(state => nonThreadCalendarQuery({ redux: state, navContext, }), ); } const drawerSwipeEnabledSelector: (context: ?NavContextType) => boolean = createSelector( (context: ?NavContextType) => context && context.state, (navigationState: ?PossiblyStaleNavigationState) => { if (!navigationState) { return true; } // First, we recurse into the navigation state until we find the tab route // The tab route should always be accessible by recursing through the // first routes of each subsequent nested navigation state const [firstRootSubroute] = navigationState.routes; if (firstRootSubroute.name !== AppRouteName) { return true; } const appState = getStateFromNavigatorRoute(firstRootSubroute); const [firstAppSubroute] = appState.routes; if (firstAppSubroute.name !== CommunityDrawerNavigatorRouteName) { return true; } const communityDrawerState = getStateFromNavigatorRoute(firstAppSubroute); const [firstCommunityDrawerSubroute] = communityDrawerState.routes; if (firstCommunityDrawerSubroute.name !== TabNavigatorRouteName) { return true; } const tabState = getStateFromNavigatorRoute(firstCommunityDrawerSubroute); // Once we have the tab state, we want to figure out if we currently have // an active StackNavigator const currentTabSubroute = tabState.routes[tabState.index]; if (!currentTabSubroute.state) { return true; } const currentTabSubrouteState = getStateFromNavigatorRoute(currentTabSubroute); if (currentTabSubrouteState.type !== 'stack') { return true; } // Finally, we want to disable the swipe gesture if there is a stack with // more than one subroute, since then the stack will have its own swipe // gesture that will conflict with the drawer's return currentTabSubrouteState.routes.length < 2; }, ); function getTabNavState( navigationState: ?PossiblyStaleNavigationState, ): ?PossiblyStaleNavigationState { if (!navigationState) { return null; } const [firstAppSubroute] = navigationState.routes; if (firstAppSubroute.name !== CommunityDrawerNavigatorRouteName) { return null; } const communityDrawerState = getStateFromNavigatorRoute(firstAppSubroute); const [firstCommunityDrawerSubroute] = communityDrawerState.routes; if (firstCommunityDrawerSubroute.name !== TabNavigatorRouteName) { return null; } const tabState = getStateFromNavigatorRoute(firstCommunityDrawerSubroute); return tabState; } function getChatNavStateFromTabNavState( tabState: ?PossiblyStaleNavigationState, ): ?PossiblyStaleNavigationState { if (!tabState) { return null; } let chatRoute; for (const route of tabState.routes) { if (route.name === ChatRouteName) { chatRoute = route; break; } } if (!chatRoute || !chatRoute.state) { return null; } const chatRouteState = getStateFromNavigatorRoute(chatRoute); if (chatRouteState.type !== 'stack') { return null; } return chatRouteState; } function getRemoveEditMode( chatRouteState: ?PossiblyStaleNavigationState, ): ?RemoveEditMode { if (!chatRouteState) { return null; } const messageListRoute = chatRouteState.routes[chatRouteState.routes.length - 1]; if (messageListRoute.name !== MessageListRouteName) { return null; } if (!messageListRoute || !messageListRoute.params) { return null; } const removeEditMode: Function = messageListRoute.params.removeEditMode; return removeEditMode; } function useCurrentLeafRouteName(): ?string { const navContext = React.useContext(NavContext); return React.useMemo(() => { if (!navContext) { return undefined; } return currentLeafRoute(navContext.state).name; }, [navContext]); } function useCanEditMessageNative( threadInfo: ThreadInfo | MinimallyEncodedThreadInfo, targetMessageInfo: ComposableMessageInfo | RobotextMessageInfo, ): boolean { const route = useRoute(); const screenKey = route.key; const threadCreationTime = threadInfo.creationTime; const messageCreationTime = targetMessageInfo.time; const canEditInThisScreen = !screenKey.startsWith(MessageSearchRouteName) && !screenKey.startsWith(MessageResultsScreenRouteName) && messageCreationTime >= threadCreationTime; return ( useCanEditMessage(threadInfo, targetMessageInfo) && canEditInThisScreen ); } export { createIsForegroundSelector, useIsAppLoggedIn, createActiveTabSelector, scrollBlockingModalsClosedSelector, selectBackgroundIsDark, activeThreadSelector, activeMessageListSelector, useActiveThread, useActiveMessageList, calendarActiveSelector, nativeCalendarQuery, nonThreadCalendarQuery, useCalendarQuery, drawerSwipeEnabledSelector, useCurrentLeafRouteName, getRemoveEditMode, getTabNavState, getChatNavStateFromTabNavState, useCanEditMessageNative, }; diff --git a/native/navigation/navigation-context.js b/native/navigation/navigation-context.js index bb00663dc..7eef0cec3 100644 --- a/native/navigation/navigation-context.js +++ b/native/navigation/navigation-context.js @@ -1,26 +1,26 @@ // @flow import type { CommonAction, PossiblyStaleNavigationState, -} from '@react-navigation/native'; +} from '@react-navigation/core'; import * as React from 'react'; import type { OverlayRouterNavigationAction } from './overlay-router.js'; import type { RootRouterNavigationAction } from './root-router.js'; import type { ChatRouterNavigationAction } from '../chat/chat-router.js'; export type NavAction = | CommonAction | RootRouterNavigationAction | ChatRouterNavigationAction | OverlayRouterNavigationAction; export type NavContextType = { +state: PossiblyStaleNavigationState, +dispatch: (action: NavAction) => void, }; const NavContext: React.Context = React.createContext(null); export { NavContext }; diff --git a/native/navigation/navigation-utils.js b/native/navigation/navigation-utils.js index 4d2cc8db1..0c87cd377 100644 --- a/native/navigation/navigation-utils.js +++ b/native/navigation/navigation-utils.js @@ -1,179 +1,179 @@ // @flow import type { PossiblyStaleNavigationState, PossiblyStaleRoute, StaleLeafRoute, ScreenParams, -} from '@react-navigation/native'; +} from '@react-navigation/core'; import invariant from 'invariant'; import { ComposeSubchannelRouteName, AppRouteName, threadRoutes, } from './route-names.js'; function getStateFromNavigatorRoute( route: PossiblyStaleRoute<>, ): PossiblyStaleNavigationState { const key = route.key ? route.key : `unkeyed ${route.name}`; invariant(route.state, `expecting Route for ${key} to be NavigationState`); return route.state; } function getThreadIDFromParams(params: ?ScreenParams): string { invariant( params && params.threadInfo && typeof params.threadInfo === 'object' && params.threadInfo.id && typeof params.threadInfo.id === 'string', "there's no way in react-navigation/Flow to type this", ); return params.threadInfo.id; } function getParentThreadIDFromParams(params: ?ScreenParams): ?string { if (!params) { return undefined; } const { parentThreadInfo } = params; if (!parentThreadInfo) { return undefined; } invariant( typeof parentThreadInfo === 'object' && parentThreadInfo.id && typeof parentThreadInfo.id === 'string', "there's no way in react-navigation/Flow to type this", ); return parentThreadInfo.id; } function getThreadIDFromRoute( route: PossiblyStaleRoute<>, routes?: $ReadOnlyArray = threadRoutes, ): ?string { if (!routes.includes(route.name)) { return null; } if (route.name === ComposeSubchannelRouteName) { return getParentThreadIDFromParams(route.params); } return getThreadIDFromParams(route.params); } function currentRouteRecurse(route: PossiblyStaleRoute<>): StaleLeafRoute<> { if (!route.state) { return route; } const state = getStateFromNavigatorRoute(route); return currentRouteRecurse(state.routes[state.index]); } function currentLeafRoute( state: PossiblyStaleNavigationState, ): StaleLeafRoute<> { return currentRouteRecurse(state.routes[state.index]); } function findRouteIndexWithKey( state: PossiblyStaleNavigationState, key: string, ): ?number { for (let i = 0; i < state.routes.length; i++) { const route = state.routes[i]; if (route.key === key) { return i; } } return null; } // This function walks from the back of the stack and calls filterFunc on each // screen until the stack is exhausted or filterFunc returns "break". A screen // will be removed if and only if filterFunc returns "remove" (not "break"). function removeScreensFromStack< Route, State: { +routes: $ReadOnlyArray, +index: number, ... }, >( state: State, filterFunc: (route: Route) => 'keep' | 'remove' | 'break', ): State { const newRoutes = []; let newIndex = state.index; let screenRemoved = false; let breakActivated = false; for (let i = state.routes.length - 1; i >= 0; i--) { const route = state.routes[i]; if (breakActivated) { newRoutes.unshift(route); continue; } const result = filterFunc(route); if (result === 'break') { breakActivated = true; } if (breakActivated || result === 'keep') { newRoutes.unshift(route); continue; } screenRemoved = true; if (newIndex >= i) { invariant( newIndex !== 0, 'Attempting to remove current route and all before it', ); newIndex--; } } if (!screenRemoved) { return state; } return { ...state, index: newIndex, routes: newRoutes, }; } function validNavState(state: PossiblyStaleNavigationState): boolean { if (state.routes.length === 0) { return false; } const [firstRoute] = state.routes; if (firstRoute.name !== AppRouteName) { return false; } return true; } function getChildRouteFromNavigatorRoute( parentRoute: PossiblyStaleRoute<>, childRouteName: string, ): ?PossiblyStaleRoute<> { if (!parentRoute.state) { return null; } const parentState = parentRoute.state; const childRoute = parentState.routes.find( route => route.name === childRouteName, ); invariant( childRoute, `parentRoute should contain route for ${childRouteName}`, ); return childRoute; } export { getStateFromNavigatorRoute, getThreadIDFromParams, getThreadIDFromRoute, currentLeafRoute, findRouteIndexWithKey, removeScreensFromStack, validNavState, getChildRouteFromNavigatorRoute, }; diff --git a/native/navigation/options.js b/native/navigation/options.js index 626ffc7d5..b244d466b 100644 --- a/native/navigation/options.js +++ b/native/navigation/options.js @@ -1,14 +1,14 @@ // @flow -import type { StackOptions } from '@react-navigation/stack'; +import type { StackOptions } from '@react-navigation/core'; import { Platform } from 'react-native'; const defaultStackScreenOptions: StackOptions = { gestureEnabled: Platform.OS === 'ios', animationEnabled: Platform.OS !== 'web' && Platform.OS !== 'windows' && Platform.OS !== 'macos', }; export { defaultStackScreenOptions }; diff --git a/native/navigation/overlay-navigator.react.js b/native/navigation/overlay-navigator.react.js index dfda68820..8e729f8a5 100644 --- a/native/navigation/overlay-navigator.react.js +++ b/native/navigation/overlay-navigator.react.js @@ -1,515 +1,515 @@ // @flow import type { StackNavigationState, NavigatorPropsBase, ExtraNavigatorPropsBase, CreateNavigator, StackNavigationProp, ParamListBase, StackNavigationHelpers, ScreenListeners, -} from '@react-navigation/native'; +} from '@react-navigation/core'; import { useNavigationBuilder, createNavigatorFactory, NavigationHelpersContext, } from '@react-navigation/native'; import { TransitionPresets } from '@react-navigation/stack'; import invariant from 'invariant'; import * as React from 'react'; import { View, StyleSheet } from 'react-native'; import Animated, { EasingNode } from 'react-native-reanimated'; import { values } from 'lib/utils/objects.js'; import { OverlayContext } from './overlay-context.js'; import OverlayRouter from './overlay-router.js'; import type { OverlayRouterExtraNavigationHelpers } from './overlay-router.js'; import { scrollBlockingModals, TabNavigatorRouteName } from './route-names.js'; import { isMessageTooltipKey } from '../chat/utils.js'; export type OverlayNavigationHelpers = { ...$Exact>, ...OverlayRouterExtraNavigationHelpers, ... }; export type OverlayNavigationProp< ParamList: ParamListBase = ParamListBase, RouteName: $Keys = $Keys, > = { ...StackNavigationProp, ...OverlayRouterExtraNavigationHelpers, }; /* eslint-disable import/no-named-as-default-member */ const { Value, timing, cond, call, lessOrEq, block } = Animated; /* eslint-enable import/no-named-as-default-member */ type Props = $Exact< NavigatorPropsBase< {}, ScreenListeners, OverlayNavigationHelpers<>, >, >; const OverlayNavigator = React.memo( ({ initialRouteName, children, screenOptions, screenListeners }: Props) => { const { state, descriptors, navigation } = useNavigationBuilder( OverlayRouter, { children, screenOptions, screenListeners, initialRouteName, }, ); const curIndex = state.index; const positionRefs = React.useRef({}); const positions = positionRefs.current; const firstRenderRef = React.useRef(true); React.useEffect(() => { firstRenderRef.current = false; }, [firstRenderRef]); const firstRender = firstRenderRef.current; const { routes } = state; const scenes = React.useMemo( () => routes.map((route, routeIndex) => { const descriptor = descriptors[route.key]; invariant( descriptor, `OverlayNavigator could not find descriptor for ${route.key}`, ); if (!positions[route.key]) { positions[route.key] = new Value(firstRender ? 1 : 0); } return { route, descriptor, context: { position: positions[route.key], isDismissing: curIndex < routeIndex, }, ordering: { routeIndex, }, }; }), // We don't include descriptors here because they can change on every // render. We know that they should only substantially change if something // about the underlying route has changed // eslint-disable-next-line react-hooks/exhaustive-deps [positions, routes, curIndex], ); const prevScenesRef = React.useRef(); const prevScenes = prevScenesRef.current; const visibleOverlayEntryForNewScene = scene => { const { route } = scene; if (route.name === TabNavigatorRouteName) { // We don't consider the TabNavigator at the bottom to be an overlay return undefined; } const presentedFrom = route.params ? route.params.presentedFrom : undefined; return { routeKey: route.key, routeName: route.name, position: positions[route.key], presentedFrom, }; }; const visibleOverlaysRef = React.useRef(); if (!visibleOverlaysRef.current) { visibleOverlaysRef.current = scenes .map(visibleOverlayEntryForNewScene) .filter(Boolean); } let visibleOverlays = visibleOverlaysRef.current; // The scrollBlockingModalStatus state gets incorporated into the // OverlayContext, but it's global to the navigator rather than local to // each screen. Note that we also include the setter in OverlayContext. We // do this so that screens can freeze ScrollViews as quickly as possible to // avoid drags after onLongPress is triggered const getScrollBlockingModalStatus = data => { let status = 'closed'; for (const scene of data) { if (!scrollBlockingModals.includes(scene.route.name)) { continue; } if (!scene.context.isDismissing) { status = 'open'; break; } status = 'closing'; } return status; }; const [scrollBlockingModalStatus, setScrollBlockingModalStatus] = React.useState(() => getScrollBlockingModalStatus(scenes)); const resetScrollBlockingModalStatus = React.useCallback(() => { setScrollBlockingModalStatus( getScrollBlockingModalStatus(prevScenesRef.current ?? []), ); }, []); const sceneDataForNewScene = scene => ({ ...scene, context: { ...scene.context, visibleOverlays, scrollBlockingModalStatus, setScrollBlockingModalStatus, resetScrollBlockingModalStatus, }, ordering: { ...scene.ordering, creationTime: Date.now(), }, listeners: [], }); // We track two previous states of scrollBlockingModalStatus via refs. We // need two because we expose setScrollBlockingModalStatus to screens. We // track the previous sceneData-determined value separately so that we only // overwrite the screen-determined value with the sceneData-determined value // when the latter actually changes const prevScrollBlockingModalStatusRef = React.useRef( scrollBlockingModalStatus, ); const prevScrollBlockingModalStatus = prevScrollBlockingModalStatusRef.current; const prevScrollBlockingModalStatusFromSceneDataRef = React.useRef( scrollBlockingModalStatus, ); const prevScrollBlockingModalStatusFromSceneData = prevScrollBlockingModalStatusFromSceneDataRef.current; // We need state to continue rendering screens while they are dismissing const [sceneData, setSceneData] = React.useState(() => { const newSceneData = {}; for (const scene of scenes) { const { key } = scene.route; newSceneData[key] = sceneDataForNewScene(scene); } return newSceneData; }); const prevSceneDataRef = React.useRef(sceneData); const prevSceneData = prevSceneDataRef.current; // We need to initiate animations in useEffect blocks, but because we // setState within render we might have multiple renders before the // useEffect triggers. So we cache whether or not new animations should be // started in this ref const pendingAnimationsRef = React.useRef<{ [key: string]: number }>({}); const queueAnimation = (key: string, toValue: number) => { pendingAnimationsRef.current = { ...pendingAnimationsRef.current, [key]: toValue, }; }; // This block keeps sceneData updated when our props change. It's the // hook equivalent of getDerivedStateFromProps // https://reactjs.org/docs/hooks-faq.html#how-do-i-implement-getderivedstatefromprops const updatedSceneData = { ...sceneData }; let sceneDataChanged = false; if (prevScenes && scenes !== prevScenes) { const currentKeys = new Set(); for (const scene of scenes) { const { key } = scene.route; currentKeys.add(key); let data = updatedSceneData[key]; if (!data) { // A new route has been pushed const newVisibleOverlayEntry = visibleOverlayEntryForNewScene(scene); if (newVisibleOverlayEntry) { visibleOverlays = [...visibleOverlays, newVisibleOverlayEntry]; } updatedSceneData[key] = sceneDataForNewScene(scene); sceneDataChanged = true; queueAnimation(key, 1); continue; } let dataChanged = false; if (scene.route !== data.route) { data = { ...data, route: scene.route }; dataChanged = true; } if (scene.descriptor !== data.descriptor) { data = { ...data, descriptor: scene.descriptor }; // We don't set dataChanged here because descriptors get recomputed on // every render, which means we could get an infinite loop. However, // we want to update the descriptor whenever anything else changes, so // that if and when our scene is dismissed, the sceneData has the most // recent descriptor } if (scene.context.isDismissing !== data.context.isDismissing) { data = { ...data, context: { ...data.context, ...scene.context } }; dataChanged = true; } if (scene.ordering.routeIndex !== data.ordering.routeIndex) { data = { ...data, ordering: { ...data.ordering, ...scene.ordering } }; dataChanged = true; } if (dataChanged) { // Something about an existing route has changed updatedSceneData[key] = data; sceneDataChanged = true; } } for (let i = 0; i < prevScenes.length; i++) { const scene = prevScenes[i]; const { key } = scene.route; if (currentKeys.has(key)) { continue; } currentKeys.add(key); const data = updatedSceneData[key]; invariant(data, `should have sceneData for dismissed key ${key}`); if (!visibleOverlayEntryForNewScene(scene)) { // This should only happen if TabNavigator gets dismissed // TabNavigator doesn't normally ever get dismissed, but hot reload // can cause that to happen. We don't need to animate TabNavigator // closed, and in fact we would crash if we tried. So we short-circuit // the logic below delete updatedSceneData[key]; sceneDataChanged = true; continue; } // A route just got dismissed // We'll watch the animation to determine when to clear the screen const { position } = data.context; invariant(position, `should have position for dismissed key ${key}`); updatedSceneData[key] = { ...data, context: { ...data.context, isDismissing: true, }, listeners: [ cond( lessOrEq(position, 0), call([], () => { // This gets called when the scene is no longer visible and // handles cleaning up our data structures to remove it const curVisibleOverlays = visibleOverlaysRef.current; invariant( curVisibleOverlays, 'visibleOverlaysRef should be set', ); const newVisibleOverlays = curVisibleOverlays.filter( overlay => overlay.routeKey !== key, ); if (newVisibleOverlays.length === curVisibleOverlays.length) { return; } visibleOverlaysRef.current = newVisibleOverlays; setSceneData(curSceneData => { const newSceneData = {}; for (const sceneKey in curSceneData) { if (sceneKey === key) { continue; } newSceneData[sceneKey] = { ...curSceneData[sceneKey], context: { ...curSceneData[sceneKey].context, visibleOverlays: newVisibleOverlays, }, }; } return newSceneData; }); }), ), ], }; sceneDataChanged = true; queueAnimation(key, 0); } } if (visibleOverlays !== visibleOverlaysRef.current) { // This indicates we have pushed a new route. Let's make sure every // sceneData has the updated visibleOverlays for (const sceneKey in updatedSceneData) { updatedSceneData[sceneKey] = { ...updatedSceneData[sceneKey], context: { ...updatedSceneData[sceneKey].context, visibleOverlays, }, }; } visibleOverlaysRef.current = visibleOverlays; sceneDataChanged = true; } const pendingAnimations = pendingAnimationsRef.current; React.useEffect(() => { if (Object.keys(pendingAnimations).length === 0) { return; } for (const key in pendingAnimations) { const toValue = pendingAnimations[key]; const position = positions[key]; let duration = 150; if (isMessageTooltipKey(key)) { const navigationTransitionSpec = toValue === 0 ? TransitionPresets.DefaultTransition.transitionSpec.close : TransitionPresets.DefaultTransition.transitionSpec.open; duration = (navigationTransitionSpec.animation === 'timing' && navigationTransitionSpec.config.duration) || 400; } invariant(position, `should have position for animating key ${key}`); timing(position, { duration, easing: EasingNode.inOut(EasingNode.ease), toValue, }).start(); } pendingAnimationsRef.current = {}; }, [positions, pendingAnimations]); // If sceneData changes, we update scrollBlockingModalStatus based on it, // both in state and within the individual sceneData contexts. // If sceneData doesn't change, // it's still possible for scrollBlockingModalStatus to change via the // setScrollBlockingModalStatus callback we expose via context let newScrollBlockingModalStatus; if (sceneDataChanged || sceneData !== prevSceneData) { const statusFromSceneData = getScrollBlockingModalStatus( values(updatedSceneData), ); if ( statusFromSceneData !== scrollBlockingModalStatus && statusFromSceneData !== prevScrollBlockingModalStatusFromSceneData ) { newScrollBlockingModalStatus = statusFromSceneData; } prevScrollBlockingModalStatusFromSceneDataRef.current = statusFromSceneData; } if ( !newScrollBlockingModalStatus && scrollBlockingModalStatus !== prevScrollBlockingModalStatus ) { newScrollBlockingModalStatus = scrollBlockingModalStatus; } if (newScrollBlockingModalStatus) { if (newScrollBlockingModalStatus !== scrollBlockingModalStatus) { setScrollBlockingModalStatus(newScrollBlockingModalStatus); } for (const key in updatedSceneData) { const data = updatedSceneData[key]; updatedSceneData[key] = { ...data, context: { ...data.context, scrollBlockingModalStatus: newScrollBlockingModalStatus, }, }; } sceneDataChanged = true; } if (sceneDataChanged) { setSceneData(updatedSceneData); } // Usually this would be done in an effect, // but calling setState from the body // of a hook causes the hook to rerender before triggering effects. To avoid // infinite loops we make sure to set our prev values after we finish // comparing them prevScenesRef.current = scenes; prevSceneDataRef.current = sceneDataChanged ? updatedSceneData : sceneData; prevScrollBlockingModalStatusRef.current = newScrollBlockingModalStatus ? newScrollBlockingModalStatus : scrollBlockingModalStatus; const sceneList = values(updatedSceneData).sort((a, b) => { const routeIndexDifference = a.ordering.routeIndex - b.ordering.routeIndex; if (routeIndexDifference) { return routeIndexDifference; } return a.ordering.creationTime - b.ordering.creationTime; }); const screens = sceneList.map(scene => { const { route, descriptor, context, listeners } = scene; const { render } = descriptor; const pressable = !context.isDismissing && !route.params?.preventPresses; const pointerEvents = pressable ? 'auto' : 'none'; // These listeners are used to clear routes after they finish dismissing const listenerCode = listeners.length > 0 ? : null; return ( {render()} {listenerCode} ); }); return ( {screens} ); }, ); OverlayNavigator.displayName = 'OverlayNavigator'; const createOverlayNavigator: CreateNavigator< StackNavigationState, {}, {}, ExtraNavigatorPropsBase, > = createNavigatorFactory< StackNavigationState, {}, {}, OverlayNavigationHelpers<>, ExtraNavigatorPropsBase, >(OverlayNavigator); const styles = StyleSheet.create({ container: { flex: 1, }, scene: { bottom: 0, left: 0, position: 'absolute', right: 0, top: 0, }, }); export { createOverlayNavigator }; diff --git a/native/navigation/overlay-router.js b/native/navigation/overlay-router.js index 32aaa42df..47fd1424d 100644 --- a/native/navigation/overlay-router.js +++ b/native/navigation/overlay-router.js @@ -1,116 +1,116 @@ // @flow import type { StackAction, Route, Router, StackRouterOptions, StackNavigationState, RouterConfigOptions, ScreenParams, -} from '@react-navigation/native'; +} from '@react-navigation/core'; import { StackRouter, CommonActions } from '@react-navigation/native'; import { clearOverlayModalsActionType, setRouteParamsActionType, } from './action-types.js'; import { getChatNavStateFromTabNavState, getRemoveEditMode, getTabNavState, } from './nav-selectors.js'; import { removeScreensFromStack } from './navigation-utils.js'; type ClearOverlayModalsAction = { +type: 'CLEAR_OVERLAY_MODALS', +payload: { +keys: $ReadOnlyArray, }, }; type SetRouteParamsAction = { +type: 'SET_ROUTE_PARAMS', +payload: { +routeKey: string, +params: ScreenParams, }, }; export type OverlayRouterNavigationAction = | StackAction | ClearOverlayModalsAction | SetRouteParamsAction; export type OverlayRouterExtraNavigationHelpers = { +clearOverlayModals: (keys: $ReadOnlyArray) => void, +goBackOnce: () => void, +setRouteParams: (routeKey: string, params: ScreenParams) => void, }; function OverlayRouter( routerOptions: StackRouterOptions, ): Router { const { getStateForAction: baseGetStateForAction, actionCreators: baseActionCreators, ...rest } = StackRouter(routerOptions); return { ...rest, getStateForAction: ( lastState: StackNavigationState, action: OverlayRouterNavigationAction, options: RouterConfigOptions, ) => { const tabNavState = getTabNavState(lastState); const chatNavState = getChatNavStateFromTabNavState(tabNavState); const removeEditMode = getRemoveEditMode(chatNavState); if (action.type === clearOverlayModalsActionType) { const { keys } = action.payload; if (!lastState) { return lastState; } return removeScreensFromStack(lastState, (route: Route<>) => keys.includes(route.key) ? 'remove' : 'keep', ); } else if (action.type === setRouteParamsActionType) { const newRoutes = lastState.routes.map(route => { if (route.key !== action.payload.routeKey || route.state) { return route; } return { ...route, params: { ...route.params, ...action.payload.params, }, }; }); return { ...lastState, routes: newRoutes, }; } else if (removeEditMode && removeEditMode(action) === 'ignore_action') { return lastState; } else { return baseGetStateForAction(lastState, action, options); } }, actionCreators: { ...baseActionCreators, clearOverlayModals: (keys: $ReadOnlyArray) => ({ type: clearOverlayModalsActionType, payload: { keys }, }), goBackOnce: () => state => ({ ...CommonActions.goBack(), target: state.key, }), setRouteParams: (routeKey: string, params: ScreenParams) => ({ type: setRouteParamsActionType, payload: { routeKey, params }, }), }, }; } export default OverlayRouter; diff --git a/native/navigation/root-navigator.react.js b/native/navigation/root-navigator.react.js index ab143ee13..6a6025748 100644 --- a/native/navigation/root-navigator.react.js +++ b/native/navigation/root-navigator.react.js @@ -1,298 +1,300 @@ // @flow +import type { + StackNavigationState, + StackOptions, + StackNavigationEventMap, + StackNavigatorProps, + ExtraStackNavigatorProps, + ParamListBase, + StackNavigationHelpers, + StackNavigationProp, +} from '@react-navigation/core'; import { createNavigatorFactory, useNavigationBuilder, - type StackNavigationState, - type StackOptions, - type StackNavigationEventMap, - type StackNavigatorProps, - type ExtraStackNavigatorProps, - type ParamListBase, - type StackNavigationHelpers, - type StackNavigationProp, } from '@react-navigation/native'; import { StackView, TransitionPresets } from '@react-navigation/stack'; import * as React from 'react'; import { Platform } from 'react-native'; import { enableScreens } from 'react-native-screens'; import AppNavigator from './app-navigator.react.js'; import InviteLinkModal from './invite-link-modal.react.js'; import { defaultStackScreenOptions } from './options.js'; import { RootNavigatorContext } from './root-navigator-context.js'; import RootRouter, { type RootRouterExtraNavigationHelpers, } from './root-router.js'; import { LoggedOutModalRouteName, AppRouteName, ThreadPickerModalRouteName, ImagePasteModalRouteName, AddUsersModalRouteName, CustomServerModalRouteName, ColorSelectorModalRouteName, ComposeSubchannelModalRouteName, SidebarListModalRouteName, SubchannelsListModalRouteName, MessageReactionsModalRouteName, type ScreenParamList, type RootParamList, TermsAndPrivacyRouteName, RegistrationRouteName, InviteLinkModalRouteName, InviteLinkNavigatorRouteName, CommunityCreationRouteName, RolesNavigatorRouteName, QRCodeSignInNavigatorRouteName, UserProfileBottomSheetNavigatorRouteName, KeyserverSelectionBottomSheetRouteName, } from './route-names.js'; import LoggedOutModal from '../account/logged-out-modal.react.js'; import RegistrationNavigator from '../account/registration/registration-navigator.react.js'; import TermsAndPrivacyModal from '../account/terms-and-privacy-modal.react.js'; import ThreadPickerModal from '../calendar/thread-picker-modal.react.js'; import ImagePasteModal from '../chat/image-paste-modal.react.js'; import MessageReactionsModal from '../chat/message-reactions-modal.react.js'; import AddUsersModal from '../chat/settings/add-users-modal.react.js'; import ColorSelectorModal from '../chat/settings/color-selector-modal.react.js'; import ComposeSubchannelModal from '../chat/settings/compose-subchannel-modal.react.js'; import SidebarListModal from '../chat/sidebar-list-modal.react.js'; import SubchannelsListModal from '../chat/subchannels-list-modal.react.js'; import CommunityCreationNavigator from '../community-creation/community-creation-navigator.react.js'; import InviteLinksNavigator from '../invite-links/invite-links-navigator.react.js'; import CustomServerModal from '../profile/custom-server-modal.react.js'; import KeyserverSelectionBottomSheet from '../profile/keyserver-selection-bottom-sheet.react.js'; import QRCodeSignInNavigator from '../qr-code/qr-code-sign-in-navigator.react.js'; import RolesNavigator from '../roles/roles-navigator.react.js'; import UserProfileBottomSheetNavigator from '../user-profile/user-profile-bottom-sheet-navigator.react.js'; enableScreens(); export type RootNavigationHelpers = { ...$Exact>, ...RootRouterExtraNavigationHelpers, ... }; type RootNavigatorProps = StackNavigatorProps>; function RootNavigator({ initialRouteName, children, screenOptions, defaultScreenOptions, screenListeners, id, ...rest }: RootNavigatorProps) { const [keyboardHandlingEnabled, setKeyboardHandlingEnabled] = React.useState(true); const mergedScreenOptions = React.useMemo(() => { if (typeof screenOptions === 'function') { return input => ({ ...screenOptions(input), keyboardHandlingEnabled, }); } return { ...screenOptions, keyboardHandlingEnabled, }; }, [screenOptions, keyboardHandlingEnabled]); const { state, descriptors, navigation } = useNavigationBuilder(RootRouter, { id, initialRouteName, children, screenOptions: mergedScreenOptions, defaultScreenOptions, screenListeners, }); const rootNavigationContext = React.useMemo( () => ({ setKeyboardHandlingEnabled }), [setKeyboardHandlingEnabled], ); return ( ); } const createRootNavigator = createNavigatorFactory< StackNavigationState, StackOptions, StackNavigationEventMap, RootNavigationHelpers<>, ExtraStackNavigatorProps, >(RootNavigator); const baseTransitionPreset = Platform.select({ ios: TransitionPresets.ModalSlideFromBottomIOS, default: TransitionPresets.FadeFromBottomAndroid, }); const transitionPreset = { ...baseTransitionPreset, cardStyleInterpolator: interpolatorProps => { const baseCardStyleInterpolator = baseTransitionPreset.cardStyleInterpolator(interpolatorProps); const overlayOpacity = interpolatorProps.current.progress.interpolate({ inputRange: [0, 1], outputRange: ([0, 0.7]: number[]), // Flow... extrapolate: 'clamp', }); return { ...baseCardStyleInterpolator, overlayStyle: [ baseCardStyleInterpolator.overlayStyle, { opacity: overlayOpacity }, ], }; }, }; const defaultScreenOptions = { ...defaultStackScreenOptions, ...transitionPreset, cardStyle: { backgroundColor: 'transparent' }, presentation: 'modal', headerShown: false, }; const disableGesturesScreenOptions = { gestureEnabled: false, }; const modalOverlayScreenOptions = { cardOverlayEnabled: true, presentation: 'transparentModal', }; const termsAndPrivacyModalScreenOptions = { gestureEnabled: false, cardOverlayEnabled: true, presentation: 'transparentModal', }; export type RootRouterNavigationProp< ParamList: ParamListBase = ParamListBase, RouteName: $Keys = $Keys, > = { ...StackNavigationProp, ...RootRouterExtraNavigationHelpers, }; export type RootNavigationProp< RouteName: $Keys = $Keys, > = { ...StackNavigationProp, ...RootRouterExtraNavigationHelpers, }; const Root = createRootNavigator< ScreenParamList, RootParamList, RootNavigationHelpers, >(); function RootComponent(): React.Node { return ( ); } export default RootComponent; diff --git a/native/navigation/root-router.js b/native/navigation/root-router.js index 3d389be72..f176fd89a 100644 --- a/native/navigation/root-router.js +++ b/native/navigation/root-router.js @@ -1,261 +1,261 @@ // @flow import type { NavigationState, StackAction, PossiblyStaleRoute, Router, StackRouterOptions, StackNavigationState, RouterConfigOptions, PossiblyStaleNavigationState, -} from '@react-navigation/native'; +} from '@react-navigation/core'; import { StackRouter, CommonActions } from '@react-navigation/native'; import invariant from 'invariant'; import _isEqual from 'lodash/fp/isEqual.js'; import { logInActionType, logOutActionType, clearRootModalsActionType, setNavStateActionType, } from './action-types.js'; import { defaultNavigationState } from './default-state.js'; import { removeScreensFromStack } from './navigation-utils.js'; import { accountModals, LoggedOutModalRouteName, AppRouteName, } from './route-names.js'; type LogInAction = { +type: 'LOG_IN', }; type LogOutAction = { +type: 'LOG_OUT', }; type ClearRootModalsAction = { +type: 'CLEAR_ROOT_MODALS', +payload: { +keys: $ReadOnlyArray, }, }; type SetNavStateAction = { +type: 'SET_NAV_STATE', +payload: { +state: NavigationState, +hideFromMonitor?: boolean, }, }; export type RootRouterNavigationAction = | StackAction | LogInAction | LogOutAction | ClearRootModalsAction | SetNavStateAction; export type RootRouterExtraNavigationHelpers = { +logIn: () => void, +logOut: () => void, +clearRootModals: (keys: $ReadOnlyArray) => void, +setNavState: (state: NavigationState) => void, +goBackOnce: () => void, }; type ResetStateRoute = { +name: string, +state?: { +routes: $ReadOnlyArray, ... }, ... }; function resetState( newPartialRoute: Route, oldRoute: Route, ): Route { if (_isEqual(newPartialRoute)(oldRoute)) { return oldRoute; } if (!newPartialRoute.state) { invariant(!oldRoute.state, 'resetState found non-matching state'); return { ...oldRoute, ...newPartialRoute }; } invariant(oldRoute.state, 'resetState found non-matching state'); const routes = []; let newRouteIndex = 0; let oldRouteIndex = 0; while (newRouteIndex < newPartialRoute.state.routes.length) { const newSubroute = newPartialRoute.state.routes[newRouteIndex]; let oldSubroute = oldRoute.state.routes[oldRouteIndex]; invariant(oldSubroute, 'resetState found a missing oldRoute'); while (oldSubroute.name !== newSubroute.name) { oldRouteIndex++; oldSubroute = oldRoute.state.routes[oldRouteIndex]; } routes.push(resetState(newSubroute, oldSubroute)); newRouteIndex++; oldRouteIndex++; } let newState = { ...oldRoute.state, ...newPartialRoute.state, routes, }; if (_isEqual(newState)(oldRoute.state)) { newState = oldRoute.state; } return { ...oldRoute, ...newPartialRoute, state: newState, }; } function resetFirstRoute( state: StackNavigationState, ): PossiblyStaleNavigationState { const [firstRoute, ...restRoutes] = state.routes; const newFirstRoute = resetState( defaultNavigationState.routes[0], firstRoute, ); return ({ ...state, routes: [newFirstRoute, ...restRoutes], }: any); } function RootRouter( routerOptions: StackRouterOptions, ): Router { const { getStateForAction: baseGetStateForAction, actionCreators: baseActionCreators, getStateForRouteFocus: baseGetStateForRouteFocus, ...rest } = StackRouter(routerOptions); return { ...rest, getStateForAction: ( lastState: StackNavigationState, action: RootRouterNavigationAction, options: RouterConfigOptions, ) => { if (action.type === logInActionType) { if (!lastState) { return lastState; } return removeScreensFromStack( lastState, (route: PossiblyStaleRoute<>) => accountModals.includes(route.name) ? 'remove' : 'keep', ); } else if (action.type === logOutActionType) { if (!lastState) { return lastState; } let newState = resetFirstRoute(lastState); let loggedOutModalFound = false; newState = removeScreensFromStack( newState, (route: PossiblyStaleRoute<>) => { const { name } = route; if (name === LoggedOutModalRouteName) { loggedOutModalFound = true; } return name === AppRouteName || accountModals.includes(name) ? 'keep' : 'remove'; }, ); if (!loggedOutModalFound) { const [appRoute, ...restNewRoutes] = newState.routes; newState = ({ ...newState, index: newState.index + 1, routes: [ appRoute, { name: LoggedOutModalRouteName }, ...restNewRoutes, ], }: any); } return baseGetStateForAction( lastState, CommonActions.reset(newState), options, ); } else if (action.type === clearRootModalsActionType) { const { keys } = action.payload; if (!lastState) { return lastState; } return removeScreensFromStack( lastState, (route: PossiblyStaleRoute<>) => keys.includes(route.key) ? 'remove' : 'keep', ); } else if (action.type === setNavStateActionType) { return action.payload.state; } else { if (!lastState) { return lastState; } const newState = baseGetStateForAction(lastState, action, options); if (!newState) { return newState; } const lastRouteName = lastState.routes[lastState.index].name; const newRouteName = newState.routes[newState.index].name; if ( accountModals.includes(lastRouteName) && !accountModals.includes(newRouteName) ) { // Only our custom action types are allowed to clear account modals return lastState; } return newState; } }, getStateForRouteFocus: (state: StackNavigationState, key: string) => { const newState = baseGetStateForRouteFocus(state, key); const lastRouteName = state.routes[state.index].name; const newRouteName = newState.routes[newState.index].name; if ( accountModals.includes(lastRouteName) && !accountModals.includes(newRouteName) ) { // Only our custom action types are allowed to clear account modals return state; } return newState; }, actionCreators: { ...baseActionCreators, logIn: () => ({ type: logInActionType }: LogInAction), logOut: () => ({ type: logOutActionType }: LogOutAction), clearRootModals: (keys: $ReadOnlyArray) => ({ type: clearRootModalsActionType, payload: { keys }, }), setNavState: ( state: NavigationState, hideFromMonitor?: boolean = false, ) => ({ type: setNavStateActionType, payload: { state, hideFromMonitor }, }), goBackOnce: () => state => ({ ...CommonActions.goBack(), target: state.key, }), }, }; } export default RootRouter; diff --git a/native/navigation/route-names.js b/native/navigation/route-names.js index 47abd8a29..0efc7137e 100644 --- a/native/navigation/route-names.js +++ b/native/navigation/route-names.js @@ -1,339 +1,339 @@ // @flow -import type { RouteProp } from '@react-navigation/native'; +import type { RouteProp } from '@react-navigation/core'; import type { ActionResultModalParams } from './action-result-modal.react.js'; import type { InviteLinkModalParams } from './invite-link-modal.react'; import type { AvatarSelectionParams } from '../account/registration/avatar-selection.react.js'; import type { ConnectEthereumParams } from '../account/registration/connect-ethereum.react.js'; import type { EmojiAvatarSelectionParams } from '../account/registration/emoji-avatar-selection.react.js'; import type { ExistingEthereumAccountParams } from '../account/registration/existing-ethereum-account.react.js'; import type { KeyserverSelectionParams } from '../account/registration/keyserver-selection.react.js'; import type { PasswordSelectionParams } from '../account/registration/password-selection.react.js'; import type { RegistrationTermsParams } from '../account/registration/registration-terms.react.js'; import type { UsernameSelectionParams } from '../account/registration/username-selection.react.js'; import type { TermsAndPrivacyModalParams } from '../account/terms-and-privacy-modal.react.js'; import type { ThreadPickerModalParams } from '../calendar/thread-picker-modal.react.js'; import type { ComposeSubchannelParams } from '../chat/compose-subchannel.react.js'; import type { FullScreenThreadMediaGalleryParams } from '../chat/fullscreen-thread-media-gallery.react.js'; import type { ImagePasteModalParams } from '../chat/image-paste-modal.react.js'; import type { MessageListParams } from '../chat/message-list-types.js'; import type { MessageReactionsModalParams } from '../chat/message-reactions-modal.react.js'; import type { MessageResultsScreenParams } from '../chat/message-results-screen.react.js'; import type { MultimediaMessageTooltipModalParams } from '../chat/multimedia-message-tooltip-modal.react.js'; import type { RobotextMessageTooltipModalParams } from '../chat/robotext-message-tooltip-modal.react.js'; import type { AddUsersModalParams } from '../chat/settings/add-users-modal.react.js'; import type { ColorSelectorModalParams } from '../chat/settings/color-selector-modal.react.js'; import type { ComposeSubchannelModalParams } from '../chat/settings/compose-subchannel-modal.react.js'; import type { DeleteThreadParams } from '../chat/settings/delete-thread.react.js'; import type { EmojiThreadAvatarCreationParams } from '../chat/settings/emoji-thread-avatar-creation.react.js'; import type { ThreadSettingsMemberTooltipModalParams } from '../chat/settings/thread-settings-member-tooltip-modal.react.js'; import type { ThreadSettingsParams } from '../chat/settings/thread-settings.react.js'; import type { SidebarListModalParams } from '../chat/sidebar-list-modal.react.js'; import type { SubchannelListModalParams } from '../chat/subchannels-list-modal.react.js'; import type { TextMessageTooltipModalParams } from '../chat/text-message-tooltip-modal.react.js'; import type { TogglePinModalParams } from '../chat/toggle-pin-modal.react.js'; import type { CommunityCreationMembersScreenParams } from '../community-creation/community-creation-members.react.js'; import type { ManagePublicLinkScreenParams } from '../invite-links/manage-public-link-screen.react.js'; import type { ViewInviteLinksScreenParams } from '../invite-links/view-invite-links-screen.react.js'; import type { ChatCameraModalParams } from '../media/chat-camera-modal.react.js'; import type { ImageModalParams } from '../media/image-modal.react.js'; import type { ThreadAvatarCameraModalParams } from '../media/thread-avatar-camera-modal.react.js'; import type { VideoPlaybackModalParams } from '../media/video-playback-modal.react.js'; import type { CustomServerModalParams } from '../profile/custom-server-modal.react.js'; import type { KeyserverSelectionBottomSheetParams } from '../profile/keyserver-selection-bottom-sheet.react.js'; import type { UserRelationshipTooltipModalParams } from '../profile/user-relationship-tooltip-modal.react.js'; import type { ChangeRolesScreenParams } from '../roles/change-roles-screen.react.js'; import type { CommunityRolesScreenParams } from '../roles/community-roles-screen.react.js'; import type { CreateRolesScreenParams } from '../roles/create-roles-screen.react.js'; import type { MessageSearchParams } from '../search/message-search.react.js'; import type { UserProfileAvatarModalParams } from '../user-profile/user-profile-avatar-modal.react.js'; import type { UserProfileBottomSheetParams } from '../user-profile/user-profile-bottom-sheet.react.js'; export const ActionResultModalRouteName = 'ActionResultModal'; export const AddUsersModalRouteName = 'AddUsersModal'; export const AppearancePreferencesRouteName = 'AppearancePreferences'; export const AppRouteName = 'App'; export const AppsRouteName = 'Apps'; export const BackgroundChatThreadListRouteName = 'BackgroundChatThreadList'; export const BackupMenuRouteName = 'BackupMenu'; export const BlockListRouteName = 'BlockList'; export const BuildInfoRouteName = 'BuildInfo'; export const CalendarRouteName = 'Calendar'; export const ChangeRolesScreenRouteName = 'ChangeRolesScreen'; export const ChatCameraModalRouteName = 'ChatCameraModal'; export const ChatRouteName = 'Chat'; export const ChatThreadListRouteName = 'ChatThreadList'; export const ColorSelectorModalRouteName = 'ColorSelectorModal'; export const ComposeSubchannelModalRouteName = 'ComposeSubchannelModal'; export const ComposeSubchannelRouteName = 'ComposeSubchannel'; export const CommunityDrawerNavigatorRouteName = 'CommunityDrawerNavigator'; export const CustomServerModalRouteName = 'CustomServerModal'; export const DefaultNotificationsPreferencesRouteName = 'DefaultNotifications'; export const DeleteAccountRouteName = 'DeleteAccount'; export const DeleteThreadRouteName = 'DeleteThread'; export const DevToolsRouteName = 'DevTools'; export const EditPasswordRouteName = 'EditPassword'; export const EmojiThreadAvatarCreationRouteName = 'EmojiThreadAvatarCreation'; export const EmojiUserAvatarCreationRouteName = 'EmojiUserAvatarCreation'; export const FriendListRouteName = 'FriendList'; export const FullScreenThreadMediaGalleryRouteName = 'FullScreenThreadMediaGallery'; export const HomeChatThreadListRouteName = 'HomeChatThreadList'; export const ImageModalRouteName = 'ImageModal'; export const ImagePasteModalRouteName = 'ImagePasteModal'; export const InviteLinkModalRouteName = 'InviteLinkModal'; export const InviteLinkNavigatorRouteName = 'InviteLinkNavigator'; export const LinkedDevicesRouteName = 'LinkedDevices'; export const LoggedOutModalRouteName = 'LoggedOutModal'; export const ManagePublicLinkRouteName = 'ManagePublicLink'; export const MessageListRouteName = 'MessageList'; export const MessageReactionsModalRouteName = 'MessageReactionsModal'; export const MessageResultsScreenRouteName = 'MessageResultsScreen'; export const MultimediaMessageTooltipModalRouteName = 'MultimediaMessageTooltipModal'; export const PrivacyPreferencesRouteName = 'PrivacyPreferences'; export const ProfileRouteName = 'Profile'; export const ProfileScreenRouteName = 'ProfileScreen'; export const UserRelationshipTooltipModalRouteName = 'UserRelationshipTooltipModal'; export const RobotextMessageTooltipModalRouteName = 'RobotextMessageTooltipModal'; export const SecondaryDeviceQRCodeScannerRouteName = 'SecondaryDeviceQRCodeScanner'; export const SidebarListModalRouteName = 'SidebarListModal'; export const SubchannelsListModalRouteName = 'SubchannelsListModal'; export const TabNavigatorRouteName = 'TabNavigator'; export const TextMessageTooltipModalRouteName = 'TextMessageTooltipModal'; export const ThreadAvatarCameraModalRouteName = 'ThreadAvatarCameraModal'; export const ThreadPickerModalRouteName = 'ThreadPickerModal'; export const ThreadSettingsMemberTooltipModalRouteName = 'ThreadSettingsMemberTooltipModal'; export const ThreadSettingsRouteName = 'ThreadSettings'; export const TunnelbrokerMenuRouteName = 'TunnelbrokerMenu'; export const UserAvatarCameraModalRouteName = 'UserAvatarCameraModal'; export const TogglePinModalRouteName = 'TogglePinModal'; export const VideoPlaybackModalRouteName = 'VideoPlaybackModal'; export const ViewInviteLinksRouteName = 'ViewInviteLinks'; export const TermsAndPrivacyRouteName = 'TermsAndPrivacyModal'; export const RegistrationRouteName = 'Registration'; export const KeyserverSelectionRouteName = 'KeyserverSelection'; export const CoolOrNerdModeSelectionRouteName = 'CoolOrNerdModeSelection'; export const ConnectEthereumRouteName = 'ConnectEthereum'; export const ExistingEthereumAccountRouteName = 'ExistingEthereumAccount'; export const UsernameSelectionRouteName = 'UsernameSelection'; export const CommunityCreationRouteName = 'CommunityCreation'; export const CommunityConfigurationRouteName = 'CommunityConfiguration'; export const CommunityCreationMembersRouteName = 'CommunityCreationMembers'; export const MessageSearchRouteName = 'MessageSearch'; export const PasswordSelectionRouteName = 'PasswordSelection'; export const AvatarSelectionRouteName = 'AvatarSelection'; export const EmojiAvatarSelectionRouteName = 'EmojiAvatarSelection'; export const RegistrationUserAvatarCameraModalRouteName = 'RegistrationUserAvatarCameraModal'; export const RegistrationTermsRouteName = 'RegistrationTerms'; export const RolesNavigatorRouteName = 'RolesNavigator'; export const CommunityRolesScreenRouteName = 'CommunityRolesScreen'; export const CreateRolesScreenRouteName = 'CreateRolesScreen'; export const QRCodeSignInNavigatorRouteName = 'QRCodeSignInNavigator'; export const QRCodeScreenRouteName = 'QRCodeScreen'; export const UserProfileBottomSheetNavigatorRouteName = 'UserProfileBottomSheetNavigator'; export const UserProfileBottomSheetRouteName = 'UserProfileBottomSheet'; export const UserProfileAvatarModalRouteName = 'UserProfileAvatarModal'; export const KeyserverSelectionListRouteName = 'KeyserverSelectionList'; export const AddKeyserverRouteName = 'AddKeyserver'; export const KeyserverSelectionBottomSheetRouteName = 'KeyserverSelectionBottomSheet'; export type RootParamList = { +LoggedOutModal: void, +App: void, +ThreadPickerModal: ThreadPickerModalParams, +AddUsersModal: AddUsersModalParams, +CustomServerModal: CustomServerModalParams, +ColorSelectorModal: ColorSelectorModalParams, +ComposeSubchannelModal: ComposeSubchannelModalParams, +SidebarListModal: SidebarListModalParams, +ImagePasteModal: ImagePasteModalParams, +TermsAndPrivacyModal: TermsAndPrivacyModalParams, +SubchannelsListModal: SubchannelListModalParams, +MessageReactionsModal: MessageReactionsModalParams, +Registration: void, +CommunityCreation: void, +InviteLinkModal: InviteLinkModalParams, +InviteLinkNavigator: void, +RolesNavigator: void, +QRCodeSignInNavigator: void, +UserProfileBottomSheetNavigator: void, +TunnelbrokerMenu: void, +KeyserverSelectionBottomSheet: KeyserverSelectionBottomSheetParams, }; export type MessageTooltipRouteNames = | typeof RobotextMessageTooltipModalRouteName | typeof MultimediaMessageTooltipModalRouteName | typeof TextMessageTooltipModalRouteName; export const PinnableMessageTooltipRouteNames = [ TextMessageTooltipModalRouteName, MultimediaMessageTooltipModalRouteName, ]; export type TooltipModalParamList = { +MultimediaMessageTooltipModal: MultimediaMessageTooltipModalParams, +TextMessageTooltipModal: TextMessageTooltipModalParams, +ThreadSettingsMemberTooltipModal: ThreadSettingsMemberTooltipModalParams, +UserRelationshipTooltipModal: UserRelationshipTooltipModalParams, +RobotextMessageTooltipModal: RobotextMessageTooltipModalParams, }; export type OverlayParamList = { +CommunityDrawerNavigator: void, +ImageModal: ImageModalParams, +ActionResultModal: ActionResultModalParams, +ChatCameraModal: ChatCameraModalParams, +UserAvatarCameraModal: void, +ThreadAvatarCameraModal: ThreadAvatarCameraModalParams, +VideoPlaybackModal: VideoPlaybackModalParams, +TogglePinModal: TogglePinModalParams, ...TooltipModalParamList, }; export type TabParamList = { +Calendar: void, +Chat: void, +Profile: void, +Apps: void, }; export type ChatParamList = { +ChatThreadList: void, +MessageList: MessageListParams, +ComposeSubchannel: ComposeSubchannelParams, +ThreadSettings: ThreadSettingsParams, +EmojiThreadAvatarCreation: EmojiThreadAvatarCreationParams, +DeleteThread: DeleteThreadParams, +FullScreenThreadMediaGallery: FullScreenThreadMediaGalleryParams, +MessageResultsScreen: MessageResultsScreenParams, +MessageSearch: MessageSearchParams, +ChangeRolesScreen: ChangeRolesScreenParams, }; export type ChatTopTabsParamList = { +HomeChatThreadList: void, +BackgroundChatThreadList: void, }; export type ProfileParamList = { +ProfileScreen: void, +EmojiUserAvatarCreation: void, +EditPassword: void, +DeleteAccount: void, +BuildInfo: void, +DevTools: void, +AppearancePreferences: void, +PrivacyPreferences: void, +DefaultNotifications: void, +FriendList: void, +BlockList: void, +LinkedDevices: void, +SecondaryDeviceQRCodeScanner: void, +BackupMenu: void, +TunnelbrokerMenu: void, +KeyserverSelectionList: void, +AddKeyserver: void, }; export type CommunityDrawerParamList = { +TabNavigator: void }; export type RegistrationParamList = { +CoolOrNerdModeSelection: void, +KeyserverSelection: KeyserverSelectionParams, +ConnectEthereum: ConnectEthereumParams, +ExistingEthereumAccount: ExistingEthereumAccountParams, +UsernameSelection: UsernameSelectionParams, +PasswordSelection: PasswordSelectionParams, +AvatarSelection: AvatarSelectionParams, +EmojiAvatarSelection: EmojiAvatarSelectionParams, +RegistrationUserAvatarCameraModal: void, +RegistrationTerms: RegistrationTermsParams, }; export type InviteLinkParamList = { +ViewInviteLinks: ViewInviteLinksScreenParams, +ManagePublicLink: ManagePublicLinkScreenParams, }; export type CommunityCreationParamList = { +CommunityConfiguration: void, +CommunityCreationMembers: CommunityCreationMembersScreenParams, }; export type RolesParamList = { +CommunityRolesScreen: CommunityRolesScreenParams, +CreateRolesScreen: CreateRolesScreenParams, }; export type QRCodeSignInParamList = { +QRCodeScreen: void, }; export type UserProfileBottomSheetParamList = { +UserProfileBottomSheet: UserProfileBottomSheetParams, +UserProfileAvatarModal: UserProfileAvatarModalParams, +UserRelationshipTooltipModal: UserRelationshipTooltipModalParams, }; export type ScreenParamList = { ...RootParamList, ...OverlayParamList, ...TabParamList, ...ChatParamList, ...ChatTopTabsParamList, ...ProfileParamList, ...CommunityDrawerParamList, ...RegistrationParamList, ...InviteLinkParamList, ...CommunityCreationParamList, ...RolesParamList, ...QRCodeSignInParamList, ...UserProfileBottomSheetParamList, }; export type NavigationRoute> = RouteProp; export const accountModals = [ LoggedOutModalRouteName, RegistrationRouteName, QRCodeSignInNavigatorRouteName, ]; export const scrollBlockingModals = [ ImageModalRouteName, MultimediaMessageTooltipModalRouteName, TextMessageTooltipModalRouteName, ThreadSettingsMemberTooltipModalRouteName, UserRelationshipTooltipModalRouteName, RobotextMessageTooltipModalRouteName, VideoPlaybackModalRouteName, ]; export const chatRootModals = [ AddUsersModalRouteName, ColorSelectorModalRouteName, ComposeSubchannelModalRouteName, ]; export const threadRoutes = [ MessageListRouteName, ThreadSettingsRouteName, DeleteThreadRouteName, ComposeSubchannelRouteName, FullScreenThreadMediaGalleryRouteName, MessageResultsScreenRouteName, MessageSearchRouteName, EmojiThreadAvatarCreationRouteName, CommunityRolesScreenRouteName, ]; diff --git a/native/navigation/tab-navigator.react.js b/native/navigation/tab-navigator.react.js index 109630a8a..83c91cb61 100644 --- a/native/navigation/tab-navigator.react.js +++ b/native/navigation/tab-navigator.react.js @@ -1,231 +1,231 @@ // @flow import { BottomTabView } from '@react-navigation/bottom-tabs'; -import { - createNavigatorFactory, - useNavigationBuilder, -} from '@react-navigation/native'; import type { BottomTabNavigationEventMap, BottomTabOptions, CreateNavigator, TabNavigationState, ParamListBase, BottomTabNavigationHelpers, BottomTabNavigationProp, ExtraBottomTabNavigatorProps, BottomTabNavigatorProps, +} from '@react-navigation/core'; +import { + createNavigatorFactory, + useNavigationBuilder, } from '@react-navigation/native'; import * as React from 'react'; import { unreadCount } from 'lib/selectors/thread-selectors.js'; import CommunityDrawerButton from './community-drawer-button.react.js'; import type { CommunityDrawerNavigationProp } from './community-drawer-navigator.react.js'; import { CalendarRouteName, ChatRouteName, ProfileRouteName, AppsRouteName, type ScreenParamList, type TabParamList, type NavigationRoute, } from './route-names.js'; import { tabBar } from './tab-bar.react.js'; import TabRouter from './tab-router.js'; import AppsDirectory from '../apps/apps-directory.react.js'; import Calendar from '../calendar/calendar.react.js'; import Chat from '../chat/chat.react.js'; import SWMansionIcon from '../components/swmansion-icon.react.js'; import Profile from '../profile/profile.react.js'; import { useSelector } from '../redux/redux-utils.js'; import { useColors } from '../themes/colors.js'; const calendarTabOptions = { tabBarLabel: 'Calendar', // eslint-disable-next-line react/display-name tabBarIcon: ({ color }) => ( ), }; const getChatTabOptions = (badge: number) => ({ tabBarLabel: 'Inbox', // eslint-disable-next-line react/display-name tabBarIcon: ({ color }) => ( ), tabBarBadge: badge ? badge : undefined, }); const profileTabOptions = { tabBarLabel: 'Profile', // eslint-disable-next-line react/display-name tabBarIcon: ({ color }) => ( ), }; const appsTabOptions = { tabBarLabel: 'Apps', // eslint-disable-next-line react/display-name tabBarIcon: ({ color }) => ( ), }; export type CustomBottomTabNavigationHelpers< ParamList: ParamListBase = ParamListBase, > = { ...$Exact>, ... }; export type TabNavigationProp< RouteName: $Keys = $Keys, > = BottomTabNavigationProp; type TabNavigatorProps = BottomTabNavigatorProps< CustomBottomTabNavigationHelpers<>, >; const TabNavigator = React.memo(function TabNavigator({ id, initialRouteName, backBehavior, children, screenListeners, screenOptions, defaultScreenOptions, ...rest }: TabNavigatorProps) { const { state, descriptors, navigation } = useNavigationBuilder(TabRouter, { id, initialRouteName, backBehavior, children, screenListeners, screenOptions, defaultScreenOptions, }); return ( ); }); const createTabNavigator: CreateNavigator< TabNavigationState, BottomTabOptions, BottomTabNavigationEventMap, ExtraBottomTabNavigatorProps, > = createNavigatorFactory< TabNavigationState, BottomTabOptions, BottomTabNavigationEventMap, BottomTabNavigationHelpers<>, ExtraBottomTabNavigatorProps, >(TabNavigator); const Tab = createTabNavigator< ScreenParamList, TabParamList, BottomTabNavigationHelpers, >(); type Props = { +navigation: CommunityDrawerNavigationProp<'TabNavigator'>, +route: NavigationRoute<'TabNavigator'>, }; function TabComponent(props: Props): React.Node { const colors = useColors(); const chatBadge = useSelector(unreadCount); const isCalendarEnabled = useSelector(state => state.enabledApps.calendar); const headerLeft = React.useCallback( () => , [props.navigation], ); const headerCommonOptions = React.useMemo( () => ({ headerShown: true, headerLeft, headerStyle: { backgroundColor: colors.tabBarBackground, }, headerShadowVisible: false, }), [colors.tabBarBackground, headerLeft], ); const calendarOptions = React.useMemo( () => ({ ...calendarTabOptions, ...headerCommonOptions }), [headerCommonOptions], ); let calendarTab; if (isCalendarEnabled) { calendarTab = ( ); } const appsOptions = React.useMemo( () => ({ ...appsTabOptions, ...headerCommonOptions }), [headerCommonOptions], ); const tabBarScreenOptions = React.useMemo( () => ({ headerShown: false, tabBarHideOnKeyboard: false, tabBarActiveTintColor: colors.tabBarActiveTintColor, tabBarStyle: { backgroundColor: colors.tabBarBackground, borderTopWidth: 1, }, lazy: false, }), [colors.tabBarActiveTintColor, colors.tabBarBackground], ); return ( {calendarTab} ); } const styles = { icon: { fontSize: 28, }, }; export default TabComponent; diff --git a/native/navigation/tab-router.js b/native/navigation/tab-router.js index 7487f4b85..5b10b61a7 100644 --- a/native/navigation/tab-router.js +++ b/native/navigation/tab-router.js @@ -1,42 +1,42 @@ // @flow import type { Router, RouterConfigOptions, TabRouterOptions, TabNavigationState, -} from '@react-navigation/native'; +} from '@react-navigation/core'; import { TabRouter } from '@react-navigation/native'; import { getChatNavStateFromTabNavState, getRemoveEditMode, } from './nav-selectors.js'; type TabRouterNavigationAction = empty; export type TabRouterExtraNavigationHelpers = {}; function CustomTabRouter( routerOptions: TabRouterOptions, ): Router { const { getStateForAction: baseGetStateForAction, ...rest } = TabRouter(routerOptions); return { ...rest, getStateForAction: ( lastState: TabNavigationState, action: TabRouterNavigationAction, options: RouterConfigOptions, ) => { const chatNavState = getChatNavStateFromTabNavState(lastState); const removeEditMode = getRemoveEditMode(chatNavState); if (removeEditMode && removeEditMode(action) === 'ignore_action') { return lastState; } return baseGetStateForAction(lastState, action, options); }, }; } export default CustomTabRouter; diff --git a/native/profile/profile-header.react.js b/native/profile/profile-header.react.js index 96fe25286..94b25cd14 100644 --- a/native/profile/profile-header.react.js +++ b/native/profile/profile-header.react.js @@ -1,20 +1,20 @@ // @flow -import type { StackHeaderProps } from '@react-navigation/stack'; +import type { StackHeaderProps } from '@react-navigation/core'; import * as React from 'react'; import Header from '../navigation/header.react.js'; import { createActiveTabSelector } from '../navigation/nav-selectors.js'; import { NavContext } from '../navigation/navigation-context.js'; import { ProfileRouteName } from '../navigation/route-names.js'; const activeTabSelector = createActiveTabSelector(ProfileRouteName); const ProfileHeader: React.ComponentType = React.memo(function ProfileHeader(props: StackHeaderProps) { const navContext = React.useContext(NavContext); const activeTab = activeTabSelector(navContext); return
; }); export default ProfileHeader; diff --git a/native/profile/profile.react.js b/native/profile/profile.react.js index 26b8cb5ee..2310e0a40 100644 --- a/native/profile/profile.react.js +++ b/native/profile/profile.react.js @@ -1,245 +1,245 @@ // @flow -import { - createStackNavigator, - type StackNavigationProp, - type StackNavigationHelpers, - type StackHeaderProps, -} from '@react-navigation/stack'; +import type { + StackNavigationProp, + StackNavigationHelpers, + StackHeaderProps, +} from '@react-navigation/core'; +import { createStackNavigator } from '@react-navigation/stack'; import * as React from 'react'; import { View, useWindowDimensions } from 'react-native'; import AddKeyserver from './add-keyserver.react.js'; import AppearancePreferences from './appearance-preferences.react.js'; import BackupMenu from './backup-menu.react.js'; import BuildInfo from './build-info.react.js'; import DefaultNotificationsPreferences from './default-notifications-preferences.react.js'; import DeleteAccount from './delete-account.react.js'; import DevTools from './dev-tools.react.js'; import EditPassword from './edit-password.react.js'; import EmojiUserAvatarCreation from './emoji-user-avatar-creation.react.js'; import KeyserverSelectionListHeaderRightButton from './keyserver-selection-list-header-right-button.react.js'; import KeyserverSelectionList from './keyserver-selection-list.react.js'; import LinkedDevicesHeaderRightButton from './linked-devices-header-right-button.react.js'; import LinkedDevices from './linked-devices.react.js'; import PrivacyPreferences from './privacy-preferences.react.js'; import ProfileHeader from './profile-header.react.js'; import ProfileScreen from './profile-screen.react.js'; import RelationshipList from './relationship-list.react.js'; import SecondaryDeviceQRCodeScanner from './secondary-device-qr-code-scanner.react.js'; import TunnelbrokerMenu from './tunnelbroker-menu.react.js'; import KeyboardAvoidingView from '../components/keyboard-avoiding-view.react.js'; import CommunityDrawerButton from '../navigation/community-drawer-button.react.js'; import type { CommunityDrawerNavigationProp } from '../navigation/community-drawer-navigator.react.js'; import HeaderBackButton from '../navigation/header-back-button.react.js'; import { ProfileScreenRouteName, EditPasswordRouteName, DeleteAccountRouteName, EmojiUserAvatarCreationRouteName, BuildInfoRouteName, DevToolsRouteName, AppearancePreferencesRouteName, PrivacyPreferencesRouteName, FriendListRouteName, DefaultNotificationsPreferencesRouteName, BlockListRouteName, LinkedDevicesRouteName, SecondaryDeviceQRCodeScannerRouteName, BackupMenuRouteName, KeyserverSelectionListRouteName, AddKeyserverRouteName, type ScreenParamList, type ProfileParamList, TunnelbrokerMenuRouteName, } from '../navigation/route-names.js'; import { useStyles, useColors } from '../themes/colors.js'; const header = (props: StackHeaderProps) => ; const profileScreenOptions = { headerTitle: 'Profile' }; const emojiAvatarCreationOptions = { headerTitle: 'Emoji avatar selection', headerBackTitleVisible: false, }; const editPasswordOptions = { headerTitle: 'Change password' }; const deleteAccountOptions = { headerTitle: 'Delete account' }; const linkedDevicesOptions = { headerTitle: 'Linked devices', // eslint-disable-next-line react/display-name headerRight: () => , }; const keyserverSelectionListOptions = { headerTitle: 'Keyservers', // eslint-disable-next-line react/display-name headerRight: () => , }; const addKeyserverOptions = { headerTitle: 'Add keyserver' }; const backupMenuOptions = { headerTitle: 'Backup menu' }; const tunnelbrokerMenuOptions = { headerTitle: 'Tunnelbroker menu' }; const secondaryDeviceQRCodeScannerOptions = { headerTitle: '', headerBackTitleVisible: false, }; const buildInfoOptions = { headerTitle: 'Build info' }; const devToolsOptions = { headerTitle: 'Developer tools' }; const appearanceOptions = { headerTitle: 'Appearance' }; const privacyOptions = { headerTitle: 'Privacy' }; const friendListOptions = { headerTitle: 'Friend list' }; const blockListOptions = { headerTitle: 'Block list' }; const defaultNotificationsOptions = { headerTitle: 'Default Notifications' }; export type ProfileNavigationProp< RouteName: $Keys = $Keys, > = StackNavigationProp; const Profile = createStackNavigator< ScreenParamList, ProfileParamList, StackNavigationHelpers, >(); type Props = { +navigation: CommunityDrawerNavigationProp<'TabNavigator'>, ... }; function ProfileComponent(props: Props): React.Node { const styles = useStyles(unboundStyles); const colors = useColors(); const headerLeftButton = React.useCallback( headerProps => headerProps.canGoBack ? ( ) : ( ), [props.navigation], ); const { width: screenWidth } = useWindowDimensions(); const screenOptions = React.useMemo( () => ({ header, headerLeft: headerLeftButton, headerStyle: { backgroundColor: colors.tabBarBackground, shadowOpacity: 0, }, gestureEnabled: true, gestureResponseDistance: screenWidth, }), [colors.tabBarBackground, headerLeftButton, screenWidth], ); return ( ); } const unboundStyles = { keyboardAvoidingView: { flex: 1, }, view: { flex: 1, backgroundColor: 'panelBackground', }, }; export default ProfileComponent; diff --git a/native/qr-code/qr-code-sign-in-navigator.react.js b/native/qr-code/qr-code-sign-in-navigator.react.js index f1295bacb..bdfcf75df 100644 --- a/native/qr-code/qr-code-sign-in-navigator.react.js +++ b/native/qr-code/qr-code-sign-in-navigator.react.js @@ -1,77 +1,77 @@ // @flow -import { - createStackNavigator, - type StackNavigationProp, - type StackNavigationHelpers, -} from '@react-navigation/stack'; +import type { + StackNavigationProp, + StackNavigationHelpers, +} from '@react-navigation/core'; +import { createStackNavigator } from '@react-navigation/stack'; import * as React from 'react'; import { SafeAreaView } from 'react-native-safe-area-context'; import QRCodeScreen from './qr-code-screen.react.js'; import type { RootNavigationProp } from '../navigation/root-navigator.react.js'; import { type ScreenParamList, type QRCodeSignInParamList, QRCodeScreenRouteName, } from '../navigation/route-names.js'; import { useStyles, useColors } from '../themes/colors.js'; const safeAreaEdges = ['bottom']; export type QRCodeSignInNavigationProp< RouteName: $Keys, > = StackNavigationProp; const QRCodeSignInStack = createStackNavigator< ScreenParamList, QRCodeSignInParamList, StackNavigationHelpers, >(); type QRCodeSignInNavigatorProps = { +navigation: RootNavigationProp<'QRCodeSignInNavigator'>, ... }; // eslint-disable-next-line no-unused-vars function QRCodeSignInNavigator(props: QRCodeSignInNavigatorProps): React.Node { const styles = useStyles(unboundStyles); const colors = useColors(); const screenOptions = React.useMemo( () => ({ headerTransparent: true, headerBackTitleVisible: false, headerTitle: '', headerTintColor: colors.panelForegroundLabel, headerLeftContainerStyle: { paddingLeft: 12, }, }), [colors.panelForegroundLabel], ); return ( ); } const unboundStyles = { safeArea: { flex: 1, backgroundColor: 'modalBackground', }, headerLeftStyle: { paddingLeft: 12, }, }; export default QRCodeSignInNavigator; diff --git a/native/roles/roles-navigator.react.js b/native/roles/roles-navigator.react.js index d9220acc0..d326a4655 100644 --- a/native/roles/roles-navigator.react.js +++ b/native/roles/roles-navigator.react.js @@ -1,95 +1,95 @@ // @flow -import { - createStackNavigator, - type StackNavigationProp, - type StackNavigationHelpers, -} from '@react-navigation/stack'; +import type { + StackNavigationProp, + StackNavigationHelpers, +} from '@react-navigation/core'; +import { createStackNavigator } from '@react-navigation/stack'; import * as React from 'react'; import { SafeAreaView } from 'react-native-safe-area-context'; import CommunityRolesHeaderLeftButton from './community-roles-header-left-button.react.js'; import CommunityRolesScreen from './community-roles-screen.react.js'; import CreateRolesScreen from './create-roles-screen.react.js'; import type { RootNavigationProp } from '../navigation/root-navigator.react.js'; import { type ScreenParamList, type RolesParamList, CommunityRolesScreenRouteName, CreateRolesScreenRouteName, } from '../navigation/route-names.js'; import { useStyles, useColors } from '../themes/colors.js'; const safeAreaEdges = ['bottom']; export type RolesNavigationProp> = StackNavigationProp; const RolesStack = createStackNavigator< ScreenParamList, RolesParamList, StackNavigationHelpers, >(); const communityRolesScreenOptions = { headerTitle: 'Create role', // eslint-disable-next-line react/display-name headerLeft: headerLeftProps => ( ), }; const createRolesScreenOptions = { headerTitle: 'Create role', }; type RolesNavigatorProps = { +navigation: RootNavigationProp<'RolesNavigator'>, ... }; // eslint-disable-next-line no-unused-vars function RolesNavigator(props: RolesNavigatorProps): React.Node { const styles = useStyles(unboundStyles); const colors = useColors(); const rolesScreenOptions = React.useMemo( () => ({ headerBackTitleVisible: false, headerStyle: { backgroundColor: colors.tabBarBackground, }, headerTintColor: colors.panelForegroundLabel, headerLeftContainerStyle: { paddingLeft: 12, }, }), [colors.tabBarBackground, colors.panelForegroundLabel], ); return ( ); } const unboundStyles = { container: { flex: 1, backgroundColor: 'modalBackground', }, }; export default RolesNavigator; diff --git a/native/root.react.js b/native/root.react.js index f09d82b15..09de55d8a 100644 --- a/native/root.react.js +++ b/native/root.react.js @@ -1,352 +1,352 @@ // @flow import { ActionSheetProvider } from '@expo/react-native-action-sheet'; import { BottomSheetModalProvider } from '@gorhom/bottom-sheet'; import AsyncStorage from '@react-native-async-storage/async-storage'; +import type { PossiblyStaleNavigationState } from '@react-navigation/core'; import { useReduxDevToolsExtension } from '@react-navigation/devtools'; import { NavigationContainer } from '@react-navigation/native'; -import type { PossiblyStaleNavigationState } from '@react-navigation/native'; import * as SplashScreen from 'expo-splash-screen'; import invariant from 'invariant'; import * as React from 'react'; import { Platform, UIManager, StyleSheet } from 'react-native'; import { GestureHandlerRootView } from 'react-native-gesture-handler'; import Orientation from 'react-native-orientation-locker'; import { SafeAreaProvider, initialWindowMetrics, } from 'react-native-safe-area-context'; import { Provider } from 'react-redux'; import { PersistGate as ReduxPersistGate } from 'redux-persist/es/integration/react.js'; import { ChatMentionContextProvider } from 'lib/components/chat-mention-provider.react.js'; import { EditUserAvatarProvider } from 'lib/components/edit-user-avatar-provider.react.js'; import { ENSCacheProvider } from 'lib/components/ens-cache-provider.react.js'; import IntegrityHandler from 'lib/components/integrity-handler.react.js'; import { MediaCacheProvider } from 'lib/components/media-cache-provider.react.js'; import { TunnelbrokerProvider } from 'lib/tunnelbroker/tunnelbroker-context.js'; import { actionLogger } from 'lib/utils/action-logger.js'; import { RegistrationContextProvider } from './account/registration/registration-context-provider.react.js'; import NativeEditThreadAvatarProvider from './avatars/native-edit-thread-avatar-provider.react.js'; import BackupHandler from './backup/backup-handler.js'; import { BottomSheetProvider } from './bottom-sheet/bottom-sheet-provider.react.js'; import ChatContextProvider from './chat/chat-context-provider.react.js'; import MessageEditingContextProvider from './chat/message-editing-context-provider.react.js'; import { FeatureFlagsProvider } from './components/feature-flags-provider.react.js'; import PersistedStateGate from './components/persisted-state-gate.js'; import VersionSupportedChecker from './components/version-supported.react.js'; import ConnectedStatusBar from './connected-status-bar.react.js'; import { SQLiteDataHandler } from './data/sqlite-data-handler.js'; import ErrorBoundary from './error-boundary.react.js'; import InputStateContainer from './input/input-state-container.react.js'; import LifecycleHandler from './lifecycle/lifecycle-handler.react.js'; import MarkdownContextProvider from './markdown/markdown-context-provider.react.js'; import { filesystemMediaCache } from './media/media-cache.js'; import { DeepLinksContextProvider } from './navigation/deep-links-context-provider.react.js'; import { defaultNavigationState } from './navigation/default-state.js'; import DisconnectedBarVisibilityHandler from './navigation/disconnected-bar-visibility-handler.react.js'; import { setGlobalNavContext } from './navigation/icky-global.js'; import { NavContext } from './navigation/navigation-context.js'; import NavigationHandler from './navigation/navigation-handler.react.js'; import { validNavState } from './navigation/navigation-utils.js'; import OrientationHandler from './navigation/orientation-handler.react.js'; import { navStateAsyncStorageKey } from './navigation/persistance.js'; import RootNavigator from './navigation/root-navigator.react.js'; import ConnectivityUpdater from './redux/connectivity-updater.react.js'; import { DimensionsUpdater } from './redux/dimensions-updater.react.js'; import { getPersistor } from './redux/persist.js'; import { store } from './redux/redux-setup.js'; import { useSelector } from './redux/redux-utils.js'; import { RootContext } from './root-context.js'; import { MessageSearchProvider } from './search/search-provider.react.js'; import Socket from './socket.react.js'; import { StaffContextProvider } from './staff/staff-context.provider.react.js'; import { useLoadCommFonts } from './themes/fonts.js'; import { DarkTheme, LightTheme } from './themes/navigation.js'; import ThemeHandler from './themes/theme-handler.react.js'; import { provider } from './utils/ethers-utils.js'; import { useTunnelbrokerInitMessage } from './utils/tunnelbroker-utils.js'; // Add custom items to expo-dev-menu import './dev-menu.js'; import './types/message-types-validator.js'; if (Platform.OS === 'android') { UIManager.setLayoutAnimationEnabledExperimental && UIManager.setLayoutAnimationEnabledExperimental(true); } const navInitAction = Object.freeze({ type: 'NAV/@@INIT' }); const navUnknownAction = Object.freeze({ type: 'NAV/@@UNKNOWN' }); SplashScreen.preventAutoHideAsync().catch(console.log); function Root() { const navStateRef = React.useRef(); const navDispatchRef = React.useRef(); const navStateInitializedRef = React.useRef(false); // We call this here to start the loading process // We gate the UI on the fonts loading in AppNavigator useLoadCommFonts(); const [navContext, setNavContext] = React.useState(null); const updateNavContext = React.useCallback(() => { if ( !navStateRef.current || !navDispatchRef.current || !navStateInitializedRef.current ) { return; } const updatedNavContext = { state: navStateRef.current, dispatch: navDispatchRef.current, }; setNavContext(updatedNavContext); setGlobalNavContext(updatedNavContext); }, []); const [initialState, setInitialState] = React.useState( __DEV__ ? undefined : defaultNavigationState, ); React.useEffect(() => { Orientation.lockToPortrait(); (async () => { let loadedState = initialState; if (__DEV__) { try { const navStateString = await AsyncStorage.getItem( navStateAsyncStorageKey, ); if (navStateString) { const savedState = JSON.parse(navStateString); if (validNavState(savedState)) { loadedState = savedState; } } } catch {} } if (!loadedState) { loadedState = defaultNavigationState; } if (loadedState !== initialState) { setInitialState(loadedState); } navStateRef.current = loadedState; updateNavContext(); actionLogger.addOtherAction('navState', navInitAction, null, loadedState); })(); // eslint-disable-next-line react-hooks/exhaustive-deps }, [updateNavContext]); const setNavStateInitialized = React.useCallback(() => { navStateInitializedRef.current = true; updateNavContext(); }, [updateNavContext]); const [rootContext, setRootContext] = React.useState(() => ({ setNavStateInitialized, })); const detectUnsupervisedBackgroundRef = React.useCallback( (detectUnsupervisedBackground: ?(alreadyClosed: boolean) => boolean) => { setRootContext(prevRootContext => ({ ...prevRootContext, detectUnsupervisedBackground, })); }, [], ); const frozen = useSelector(state => state.frozen); const queuedActionsRef = React.useRef([]); const onNavigationStateChange = React.useCallback( (state: ?PossiblyStaleNavigationState) => { invariant(state, 'nav state should be non-null'); const prevState = navStateRef.current; navStateRef.current = state; updateNavContext(); const queuedActions = queuedActionsRef.current; queuedActionsRef.current = []; if (queuedActions.length === 0) { queuedActions.push(navUnknownAction); } for (const action of queuedActions) { actionLogger.addOtherAction('navState', action, prevState, state); } if (!__DEV__ || frozen) { return; } (async () => { try { await AsyncStorage.setItem( navStateAsyncStorageKey, JSON.stringify(state), ); } catch (e) { console.log('AsyncStorage threw while trying to persist navState', e); } })(); }, [updateNavContext, frozen], ); const navContainerRef = React.useRef(); const containerRef = React.useCallback( (navContainer: ?React.ElementRef) => { navContainerRef.current = navContainer; if (navContainer && !navDispatchRef.current) { navDispatchRef.current = navContainer.dispatch; updateNavContext(); } }, [updateNavContext], ); useReduxDevToolsExtension(navContainerRef); const navContainer = navContainerRef.current; React.useEffect(() => { if (!navContainer) { return undefined; } return navContainer.addListener('__unsafe_action__', event => { const { action, noop } = event.data; const navState = navStateRef.current; if (noop) { actionLogger.addOtherAction('navState', action, navState, navState); return; } queuedActionsRef.current.push({ ...action, type: `NAV/${action.type}`, }); }); }, [navContainer]); const activeTheme = useSelector(state => state.globalThemeInfo.activeTheme); const theme = (() => { if (activeTheme === 'light') { return LightTheme; } else if (activeTheme === 'dark') { return DarkTheme; } return undefined; })(); const tunnelbrokerInitMessage = useTunnelbrokerInitMessage(); const gated: React.Node = ( <> ); let navigation; if (initialState) { navigation = ( ); } return ( {gated} {navigation} ); } const styles = StyleSheet.create({ app: { flex: 1, }, }); function AppRoot(): React.Node { return ( ); } export default AppRoot; diff --git a/native/tooltip/tooltip.react.js b/native/tooltip/tooltip.react.js index e7dc69d2a..b5f882960 100644 --- a/native/tooltip/tooltip.react.js +++ b/native/tooltip/tooltip.react.js @@ -1,592 +1,592 @@ // @flow -import type { RouteProp } from '@react-navigation/native'; +import type { RouteProp } from '@react-navigation/core'; import * as Haptics from 'expo-haptics'; import invariant from 'invariant'; import * as React from 'react'; import { View, TouchableWithoutFeedback, Platform, Keyboard, } from 'react-native'; import Animated from 'react-native-reanimated'; import { TooltipContextProvider, TooltipContext, type TooltipContextType, } from './tooltip-context.react.js'; import BaseTooltipItem, { type TooltipItemBaseProps, } from './tooltip-item.react.js'; import { ChatContext, type ChatContextType } from '../chat/chat-context.js'; import SWMansionIcon from '../components/swmansion-icon.react.js'; import type { AppNavigationProp } from '../navigation/app-navigator.react.js'; import { OverlayContext, type OverlayContextType, } from '../navigation/overlay-context.js'; import type { TooltipModalParamList } from '../navigation/route-names.js'; import { type DimensionsInfo } from '../redux/dimensions-updater.react.js'; import { useSelector } from '../redux/redux-utils.js'; import { useStyles } from '../themes/colors.js'; import { type VerticalBounds, type LayoutCoordinates, } from '../types/layout-types.js'; import type { LayoutEvent } from '../types/react-native.js'; import { AnimatedView } from '../types/styles.js'; /* eslint-disable import/no-named-as-default-member */ const { Value, Node, Extrapolate, add, multiply, interpolateNode } = Animated; /* eslint-enable import/no-named-as-default-member */ export type TooltipParams = { ...CustomProps, +presentedFrom: string, +initialCoordinates: LayoutCoordinates, +verticalBounds: VerticalBounds, +tooltipLocation?: 'above' | 'below' | 'fixed', +margin?: number, +visibleEntryIDs?: $ReadOnlyArray, +chatInputBarHeight?: number, +hideTooltip?: boolean, }; export type TooltipRoute> = RouteProp< TooltipModalParamList, RouteName, >; export type BaseTooltipProps = { +navigation: AppNavigationProp, +route: TooltipRoute, }; type ButtonProps = { ...Base, +progress: Node, +isOpeningSidebar: boolean, }; type TooltipProps = { ...Base, // Redux state +dimensions: DimensionsInfo, +overlayContext: ?OverlayContextType, +chatContext: ?ChatContextType, +styles: typeof unboundStyles, +tooltipContext: TooltipContextType, +closeTooltip: () => mixed, +boundTooltipItem: React.ComponentType, }; export type TooltipMenuProps = { ...BaseTooltipProps, +tooltipItem: React.ComponentType, }; function createTooltip< RouteName: $Keys, BaseTooltipPropsType: BaseTooltipProps = BaseTooltipProps, >( ButtonComponent: React.ComponentType>, MenuComponent: React.ComponentType>, ): React.ComponentType { class Tooltip extends React.PureComponent< TooltipProps, > { backdropOpacity: Node; tooltipContainerOpacity: Node; tooltipVerticalAbove: Node; tooltipVerticalBelow: Node; tooltipHorizontalOffset: Value = new Value(0); tooltipHorizontal: Node; tooltipScale: Node; fixedTooltipVertical: Node; constructor(props: TooltipProps) { super(props); const { overlayContext } = props; invariant(overlayContext, 'Tooltip should have OverlayContext'); const { position } = overlayContext; this.backdropOpacity = interpolateNode(position, { inputRange: [0, 1], outputRange: [0, 0.7], extrapolate: Extrapolate.CLAMP, }); this.tooltipContainerOpacity = interpolateNode(position, { inputRange: [0, 0.1], outputRange: [0, 1], extrapolate: Extrapolate.CLAMP, }); const { margin } = this; this.tooltipVerticalAbove = interpolateNode(position, { inputRange: [0, 1], outputRange: [margin + this.tooltipHeight / 2, 0], extrapolate: Extrapolate.CLAMP, }); this.tooltipVerticalBelow = interpolateNode(position, { inputRange: [0, 1], outputRange: [-margin - this.tooltipHeight / 2, 0], extrapolate: Extrapolate.CLAMP, }); const invertedPosition = add(1, multiply(-1, position)); this.tooltipHorizontal = multiply( invertedPosition, this.tooltipHorizontalOffset, ); this.tooltipScale = interpolateNode(position, { inputRange: [0, 0.2, 0.8, 1], outputRange: [0, 0, 1, 1], extrapolate: Extrapolate.CLAMP, }); this.fixedTooltipVertical = multiply( invertedPosition, props.dimensions.height, ); } componentDidMount() { Haptics.impactAsync(); } get tooltipHeight(): number { if (this.props.route.params.tooltipLocation === 'fixed') { return fixedTooltipHeight; } else { return tooltipHeight(this.props.tooltipContext.getNumVisibleEntries()); } } get tooltipLocation(): 'above' | 'below' | 'fixed' { const { params } = this.props.route; const { tooltipLocation } = params; if (tooltipLocation) { return tooltipLocation; } const { initialCoordinates, verticalBounds } = params; const { y, height } = initialCoordinates; const contentTop = y; const contentBottom = y + height; const boundsTop = verticalBounds.y; const boundsBottom = verticalBounds.y + verticalBounds.height; const { margin, tooltipHeight: curTooltipHeight } = this; const fullHeight = curTooltipHeight + margin; if ( contentBottom + fullHeight > boundsBottom && contentTop - fullHeight > boundsTop ) { return 'above'; } return 'below'; } get opacityStyle() { return { ...this.props.styles.backdrop, opacity: this.backdropOpacity, }; } get contentContainerStyle() { const { verticalBounds } = this.props.route.params; const fullScreenHeight = this.props.dimensions.height; const top = verticalBounds.y; const bottom = fullScreenHeight - verticalBounds.y - verticalBounds.height; return { ...this.props.styles.contentContainer, marginTop: top, marginBottom: bottom, }; } get buttonStyle() { const { params } = this.props.route; const { initialCoordinates, verticalBounds } = params; const { x, y, width, height } = initialCoordinates; return { width: Math.ceil(width), height: Math.ceil(height), marginTop: y - verticalBounds.y, marginLeft: x, }; } get margin() { const customMargin = this.props.route.params.margin; return customMargin !== null && customMargin !== undefined ? customMargin : 20; } get tooltipContainerStyle() { const { dimensions, route } = this.props; const { initialCoordinates, verticalBounds, chatInputBarHeight } = route.params; const { x, y, width, height } = initialCoordinates; const { margin, tooltipLocation } = this; const style = {}; style.position = 'absolute'; style.alignItems = 'center'; style.opacity = this.tooltipContainerOpacity; if (tooltipLocation !== 'fixed') { style.transform = [{ translateX: this.tooltipHorizontal }]; } const extraLeftSpace = x; const extraRightSpace = dimensions.width - width - x; if (extraLeftSpace < extraRightSpace) { style.left = 0; style.minWidth = width + 2 * extraLeftSpace; } else { style.right = 0; style.minWidth = width + 2 * extraRightSpace; } const inputBarHeight = chatInputBarHeight ?? 0; if (tooltipLocation === 'fixed') { const padding = 8; style.minWidth = dimensions.width - 16; style.left = 8; style.right = 8; style.bottom = dimensions.height - verticalBounds.height - verticalBounds.y - inputBarHeight + padding; style.transform = [{ translateY: this.fixedTooltipVertical }]; } else if (tooltipLocation === 'above') { style.bottom = dimensions.height - Math.max(y, verticalBounds.y) + margin; style.transform.push({ translateY: this.tooltipVerticalAbove }); } else { style.top = Math.min(y + height, verticalBounds.y + verticalBounds.height) + margin; style.transform.push({ translateY: this.tooltipVerticalBelow }); } if (tooltipLocation !== 'fixed') { style.transform.push({ scale: this.tooltipScale }); } return style; } render() { const { dimensions, overlayContext, chatContext, styles, tooltipContext, closeTooltip, boundTooltipItem, ...navAndRouteForFlow } = this.props; const tooltipContainerStyle = [styles.itemContainer]; if (this.tooltipLocation === 'fixed') { tooltipContainerStyle.push(styles.itemContainerFixed); } const items = [ , ]; if (this.props.tooltipContext.shouldShowMore()) { items.push( , ); } let triangleStyle; const { route } = this.props; const { initialCoordinates } = route.params; const { x, width } = initialCoordinates; const extraLeftSpace = x; const extraRightSpace = dimensions.width - width - x; if (extraLeftSpace < extraRightSpace) { triangleStyle = { alignSelf: 'flex-start', left: extraLeftSpace + (width - 20) / 2, }; } else { triangleStyle = { alignSelf: 'flex-end', right: extraRightSpace + (width - 20) / 2, }; } let triangleDown = null; let triangleUp = null; const { tooltipLocation } = this; if (tooltipLocation === 'above') { triangleDown = ; } else if (tooltipLocation === 'below') { triangleUp = ; } invariant(overlayContext, 'Tooltip should have OverlayContext'); const { position } = overlayContext; const isOpeningSidebar = !!chatContext?.currentTransitionSidebarSourceID; const buttonProps: ButtonProps = { ...navAndRouteForFlow, progress: position, isOpeningSidebar, }; const itemsStyles = [styles.items, styles.itemsFixed]; let tooltip = null; if (this.tooltipLocation !== 'fixed') { tooltip = ( {triangleUp} {items} {triangleDown} ); } else if ( this.tooltipLocation === 'fixed' && !this.props.route.params.hideTooltip ) { tooltip = ( {items} ); } return ( {tooltip} ); } getTooltipItem() { const BoundTooltipItem = this.props.boundTooltipItem; return BoundTooltipItem; } onPressMore = () => { Keyboard.dismiss(); this.props.tooltipContext.showActionSheet(); }; renderMoreIcon = () => { const { styles } = this.props; return ( ); }; onTooltipContainerLayout = (event: LayoutEvent) => { const { route, dimensions } = this.props; const { x, width } = route.params.initialCoordinates; const extraLeftSpace = x; const extraRightSpace = dimensions.width - width - x; const actualWidth = event.nativeEvent.layout.width; if (extraLeftSpace < extraRightSpace) { const minWidth = width + 2 * extraLeftSpace; this.tooltipHorizontalOffset.setValue((minWidth - actualWidth) / 2); } else { const minWidth = width + 2 * extraRightSpace; this.tooltipHorizontalOffset.setValue((actualWidth - minWidth) / 2); } }; } function ConnectedTooltip(props) { const dimensions = useSelector(state => state.dimensions); const overlayContext = React.useContext(OverlayContext); const chatContext = React.useContext(ChatContext); const { params } = props.route; const { tooltipLocation } = params; const isFixed = tooltipLocation === 'fixed'; const { hideTooltip, ...rest } = props; const { goBackOnce } = props.navigation; const closeTooltip = React.useCallback(() => { goBackOnce(); if (isFixed) { hideTooltip(); } }, [isFixed, hideTooltip, goBackOnce]); const styles = useStyles(unboundStyles); const boundTooltipItem = React.useCallback( innerProps => { const containerStyle = isFixed ? [styles.itemContainer, styles.itemContainerFixed] : styles.itemContainer; return ( ); }, [isFixed, styles, closeTooltip], ); const tooltipContext = React.useContext(TooltipContext); invariant(tooltipContext, 'TooltipContext should be set in Tooltip'); return ( ); } function MemoizedTooltip(props: BaseTooltipPropsType) { const { visibleEntryIDs } = props.route.params; const { goBackOnce } = props.navigation; const { setParams } = props.navigation; const hideTooltip = React.useCallback(() => { const paramsUpdate: any = { hideTooltip: true }; setParams(paramsUpdate); }, [setParams]); return ( ); } return React.memo(MemoizedTooltip); } const unboundStyles = { backdrop: { backgroundColor: 'black', bottom: 0, left: 0, position: 'absolute', right: 0, top: 0, }, container: { flex: 1, }, contentContainer: { flex: 1, overflow: 'hidden', }, icon: { color: 'modalForegroundLabel', }, itemContainer: { alignItems: 'center', flex: 1, flexDirection: 'row', justifyContent: 'center', padding: 10, }, itemContainerFixed: { flexDirection: 'column', }, items: { backgroundColor: 'tooltipBackground', borderRadius: 5, overflow: 'hidden', }, itemsFixed: { flex: 1, flexDirection: 'row', }, triangleDown: { borderBottomColor: 'transparent', borderBottomWidth: 0, borderLeftColor: 'transparent', borderLeftWidth: 10, borderRightColor: 'transparent', borderRightWidth: 10, borderStyle: 'solid', borderTopColor: 'tooltipBackground', borderTopWidth: 10, height: 10, top: Platform.OS === 'android' ? -1 : 0, width: 10, }, triangleUp: { borderBottomColor: 'tooltipBackground', borderBottomWidth: 10, borderLeftColor: 'transparent', borderLeftWidth: 10, borderRightColor: 'transparent', borderRightWidth: 10, borderStyle: 'solid', borderTopColor: 'transparent', borderTopWidth: 0, bottom: Platform.OS === 'android' ? -1 : 0, height: 10, width: 10, }, }; function tooltipHeight(numEntries: number): number { // 10 (triangle) + 37 * numEntries (entries) + numEntries - 1 (padding) return 9 + 38 * numEntries; } const fixedTooltipHeight: number = 53; export { createTooltip, fixedTooltipHeight };