diff --git a/native/chat/text-message-tooltip-modal.react.js b/native/chat/text-message-tooltip-modal.react.js index fe3ec8065..1787c2164 100644 --- a/native/chat/text-message-tooltip-modal.react.js +++ b/native/chat/text-message-tooltip-modal.react.js @@ -1,68 +1,68 @@ // @flow import Clipboard from '@react-native-clipboard/clipboard'; import invariant from 'invariant'; import * as React from 'react'; import { createMessageReply } from 'lib/shared/message-utils'; import type { DispatchFunctions, BindServerCall } from 'lib/utils/action-utils'; import type { InputState } from '../input/input-state'; import { displayActionResultModal } from '../navigation/action-result-modal'; import { createTooltip, type TooltipParams, type TooltipRoute, type BaseTooltipProps, } from '../navigation/tooltip.react'; import type { ChatTextMessageInfoItemWithHeight } from '../types/chat-types'; import { onPressReport } from './message-report-utils'; import { navigateToSidebar } from './sidebar-navigation'; import TextMessageTooltipButton from './text-message-tooltip-button.react'; export type TextMessageTooltipModalParams = TooltipParams<{ +item: ChatTextMessageInfoItemWithHeight, }>; const confirmCopy = () => displayActionResultModal('copied!'); function onPressCopy(route: TooltipRoute<'TextMessageTooltipModal'>) { Clipboard.setString(route.params.item.messageInfo.text); setTimeout(confirmCopy); } function onPressReply( route: TooltipRoute<'TextMessageTooltipModal'>, dispatchFunctions: DispatchFunctions, bindServerCall: BindServerCall, inputState: ?InputState, ) { invariant( inputState, 'inputState should be set in TextMessageTooltipModal.onPressReply', ); inputState.addReply(createMessageReply(route.params.item.messageInfo.text)); } const spec = { entries: [ - { id: 'copy', text: 'Copy', onPress: onPressCopy }, { id: 'reply', text: 'Reply', onPress: onPressReply }, - { - id: 'report', - text: 'Report', - onPress: onPressReport, - }, { id: 'sidebar', text: 'Thread', onPress: navigateToSidebar, }, + { id: 'copy', text: 'Copy', onPress: onPressCopy }, + { + id: 'report', + text: 'Report', + onPress: onPressReport, + }, ], }; const TextMessageTooltipModal: React.ComponentType< BaseTooltipProps<'TextMessageTooltipModal'>, > = createTooltip<'TextMessageTooltipModal'>(TextMessageTooltipButton, spec); export default TextMessageTooltipModal; diff --git a/native/navigation/tooltip.react.js b/native/navigation/tooltip.react.js index 7d64ae9d4..0be1dfdf2 100644 --- a/native/navigation/tooltip.react.js +++ b/native/navigation/tooltip.react.js @@ -1,633 +1,769 @@ // @flow +import { + useActionSheet, + type ShowActionSheetWithOptions, +} from '@expo/react-native-action-sheet'; import type { RouteProp } from '@react-navigation/native'; import * as Haptics from 'expo-haptics'; import invariant from 'invariant'; import * as React from 'react'; import { View, StyleSheet, TouchableWithoutFeedback, Platform, TouchableOpacity, + Keyboard, } from 'react-native'; import Animated from 'react-native-reanimated'; import { useDispatch } from 'react-redux'; import { type ServerCallState, serverCallStateSelector, } from 'lib/selectors/server-calls'; import type { Dispatch } from 'lib/types/redux-types'; import { createBoundServerCallsSelector, useDispatchActionPromise, type DispatchActionPromise, type ActionFunc, type BindServerCall, type DispatchFunctions, } from 'lib/utils/action-utils'; import { ChatContext, type ChatContextType } from '../chat/chat-context'; import CommIcon from '../components/comm-icon.react'; import { SingleLine } from '../components/single-line.react'; import SWMansionIcon from '../components/swmansion-icon.react'; import { type InputState, InputStateContext } from '../input/input-state'; import { type DimensionsInfo } from '../redux/dimensions-updater.react'; import { useSelector } from '../redux/redux-utils'; import { type VerticalBounds, type LayoutCoordinates, } from '../types/layout-types'; import type { LayoutEvent } from '../types/react-native'; import { AnimatedView, type ViewStyle, type TextStyle } from '../types/styles'; import type { AppNavigationProp } from './app-navigator.react'; import { OverlayContext, type OverlayContextType } from './overlay-context'; import type { TooltipModalParamList } from './route-names'; /* 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 TooltipEntry> = { +id: string, +text: string, +onPress: ( route: TooltipRoute, dispatchFunctions: DispatchFunctions, bindServerCall: BindServerCall, inputState: ?InputState, navigation: AppNavigationProp, viewerID: ?string, chatContext: ?ChatContextType, ) => mixed, }; type TooltipItemProps = { +spec: TooltipEntry, +onPress: (entry: TooltipEntry) => void, +containerStyle?: ViewStyle, +labelStyle?: TextStyle, }; type TooltipSpec = { +entries: $ReadOnlyArray>, +labelStyle?: ViewStyle, }; export type TooltipParams = { ...CustomProps, +presentedFrom: string, +initialCoordinates: LayoutCoordinates, +verticalBounds: VerticalBounds, +location?: 'above' | 'below' | 'fixed', +margin?: number, +visibleEntryIDs?: $ReadOnlyArray, +chatInputBarHeight?: number, }; 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, +serverCallState: ServerCallState, +viewerID: ?string, // Redux dispatch functions +dispatch: Dispatch, +dispatchActionPromise: DispatchActionPromise, // withOverlayContext +overlayContext: ?OverlayContextType, // withInputState +inputState: ?InputState, +chatContext: ?ChatContextType, + +showActionSheetWithOptions: ShowActionSheetWithOptions, + +actionSheetShown: boolean, + +setActionSheetShown: (actionSheetShown: boolean) => void, }; + function createTooltip< RouteName: $Keys, BaseTooltipPropsType: BaseTooltipProps = BaseTooltipProps, >( ButtonComponent: React.ComponentType>, tooltipSpec: TooltipSpec, ): React.ComponentType { class TooltipItem extends React.PureComponent> { render() { let icon; if (this.props.spec.id === 'copy') { icon = ; } else if (this.props.spec.id === 'reply') { icon = ; } else if (this.props.spec.id === 'report') { icon = ( ); } else if (this.props.spec.id === 'sidebar') { icon = ( ); + } else if (this.props.spec.id === 'more') { + icon = ( + + ); } return ( {icon} {this.props.spec.text} ); } onPress = () => { this.props.onPress(this.props.spec); }; } class Tooltip extends React.PureComponent< TooltipProps, > { backdropOpacity: Node; tooltipContainerOpacity: Node; tooltipVerticalAbove: Node; tooltipVerticalBelow: Node; tooltipHorizontalOffset: Value = new Value(0); tooltipHorizontal: Node; tooltipScale: 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, }); this.tooltipHorizontal = multiply( add(1, multiply(-1, position)), this.tooltipHorizontalOffset, ); this.tooltipScale = interpolateNode(position, { inputRange: [0, 0.2, 0.8, 1], outputRange: [0, 0, 1, 1], extrapolate: Extrapolate.CLAMP, }); } componentDidMount() { Haptics.impactAsync(); } get entries(): $ReadOnlyArray> { const { entries } = tooltipSpec; const { visibleEntryIDs } = this.props.route.params; if (!visibleEntryIDs) { return entries; } const visibleSet = new Set(visibleEntryIDs); return entries.filter(entry => visibleSet.has(entry.id)); } get tooltipHeight(): number { if (this.props.route.params.location === 'fixed') { return fixedTooltipHeight; } else { return tooltipHeight(this.entries.length); } } get location(): 'above' | 'below' | 'fixed' { const { params } = this.props.route; const { location } = params; if (location) { return location; } 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 { ...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 { ...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, location } = this; const style = {}; style.position = 'absolute'; (style.alignItems = 'center'), (style.opacity = this.tooltipContainerOpacity); 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 (location === '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; } else if (location === '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 }); } style.transform.push({ scale: this.tooltipScale }); return style; } render() { const { dimensions, serverCallState, viewerID, dispatch, dispatchActionPromise, overlayContext, inputState, chatContext, + showActionSheetWithOptions, + actionSheetShown, + setActionSheetShown, ...navAndRouteForFlow } = this.props; const tooltipContainerStyle = [styles.itemContainer]; if (this.location === 'fixed') { tooltipContainerStyle.push(styles.itemContainerFixed); } const { entries } = this; const items = entries.map((entry, index) => { let style; if (this.location === 'fixed') { style = index !== entries.length - 1 ? styles.itemMarginFixed : null; } else { style = index !== entries.length - 1 ? styles.itemMargin : null; } return ( ); }); + if (this.location === 'fixed' && entries.length > 3) { + items.splice(3); + + const moreSpec = { + id: 'more', + text: 'More', + onPress: this.onPressMore, + }; + + const moreTooltipItem = ( + + ); + + items.push(moreTooltipItem); + } + 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 { location } = this; if (location === 'above') { triangleDown = ; } else if (location === 'below') { triangleUp = ; } invariant(overlayContext, 'Tooltip should have OverlayContext'); const { position } = overlayContext; const isOpeningSidebar = !!chatContext?.currentTransitionSidebarSourceID; const buttonProps: ButtonProps = { ...navAndRouteForFlow, progress: position, isOpeningSidebar, }; const itemsStyle = [styles.items]; if (this.location === 'fixed') { itemsStyle.push(styles.itemsFixed); } + let tooltip = {items}; + if (this.props.actionSheetShown) { + tooltip = null; + } + return ( {triangleUp} - {items} + {tooltip} {triangleDown} ); } onPressBackdrop = () => { this.props.navigation.goBackOnce(); }; onPressEntry = (entry: TooltipEntry) => { this.props.navigation.goBackOnce(); const dispatchFunctions = { dispatch: this.props.dispatch, dispatchActionPromise: this.props.dispatchActionPromise, }; entry.onPress( this.props.route, dispatchFunctions, this.bindServerCall, this.props.inputState, this.props.navigation, this.props.viewerID, this.props.chatContext, ); }; + onPressMore = () => { + Keyboard.dismiss(); + this.props.setActionSheetShown(true); + + const { entries } = this; + const options = entries.map(entry => entry.text); + + const { + destructiveButtonIndex, + cancelButtonIndex, + } = this.getPlatformSpecificButtonIndices(options); + + // We're reversing options to populate the action sheet from bottom to + // top instead of the default (top to bottom) ordering. + options.reverse(); + + const containerStyle = { + paddingBottom: 24, + }; + + const icons = [ + , + , + , + , + ]; + + const onPressAction = (selectedIndex?: number) => { + if (selectedIndex === cancelButtonIndex) { + this.props.navigation.goBackOnce(); + return; + } + const index = entries.length - (selectedIndex ?? 0); + const entry = entries[Platform.OS === 'ios' ? index : index - 1]; + this.onPressEntry(entry); + }; + + this.props.showActionSheetWithOptions( + { + options, + cancelButtonIndex, + destructiveButtonIndex, + containerStyle, + icons, + }, + onPressAction, + ); + }; + + getPlatformSpecificButtonIndices = (options: Array) => { + const destructiveButtonIndex = Platform.OS === 'ios' ? 1 : undefined; + const cancelButtonIndex = Platform.OS === 'ios' ? 0 : -1; + + // The "Cancel" action is iOS-specific + if (Platform.OS === 'ios') { + options.push('Cancel'); + } + + return { destructiveButtonIndex, cancelButtonIndex }; + }; + bindServerCall = (serverCall: ActionFunc): F => { const { cookie, urlPrefix, sessionID, currentUserInfo, connectionStatus, } = this.props.serverCallState; return createBoundServerCallsSelector(serverCall)({ dispatch: this.props.dispatch, cookie, urlPrefix, sessionID, currentUserInfo, connectionStatus, }); }; 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); } }; } return React.memo(function ConnectedTooltip( props: BaseTooltipPropsType, ) { + const { showActionSheetWithOptions } = useActionSheet(); + const dimensions = useSelector(state => state.dimensions); const serverCallState = useSelector(serverCallStateSelector); const viewerID = useSelector( state => state.currentUserInfo && state.currentUserInfo.id, ); const dispatch = useDispatch(); const dispatchActionPromise = useDispatchActionPromise(); const overlayContext = React.useContext(OverlayContext); const inputState = React.useContext(InputStateContext); const chatContext = React.useContext(ChatContext); + + const [actionSheetShown, setActionSheetShown] = React.useState( + false, + ); + return ( ); }); } const styles = StyleSheet.create({ backdrop: { backgroundColor: 'black', bottom: 0, left: 0, position: 'absolute', right: 0, top: 0, }, + bottomSheetIcon: { + color: '#000000', + }, container: { flex: 1, }, contentContainer: { flex: 1, overflow: 'hidden', }, icon: { color: '#FFFFFF', }, itemContainer: { alignItems: 'center', flex: 1, flexDirection: 'row', justifyContent: 'center', padding: 10, }, itemContainerFixed: { flexDirection: 'column', }, itemMargin: { borderBottomColor: '#404040', borderBottomWidth: 1, }, itemMarginFixed: { borderRightColor: '#404040', borderRightWidth: 1, }, items: { backgroundColor: '#1F1F1F', borderRadius: 5, overflow: 'hidden', }, itemsFixed: { flex: 1, flexDirection: 'row', }, label: { color: '#FFFFFF', fontSize: 14, lineHeight: 17, textAlign: 'center', }, triangleDown: { borderBottomColor: 'transparent', borderBottomWidth: 0, borderLeftColor: 'transparent', borderLeftWidth: 10, borderRightColor: 'transparent', borderRightWidth: 10, borderStyle: 'solid', borderTopColor: '#1F1F1F', borderTopWidth: 10, height: 10, top: Platform.OS === 'android' ? -1 : 0, width: 10, }, triangleUp: { borderBottomColor: '#1F1F1F', 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 }; diff --git a/native/root.react.js b/native/root.react.js index 599011096..444520d6d 100644 --- a/native/root.react.js +++ b/native/root.react.js @@ -1,293 +1,296 @@ // @flow +import { ActionSheetProvider } from '@expo/react-native-action-sheet'; import AsyncStorage from '@react-native-async-storage/async-storage'; 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, View, StyleSheet, LogBox } from 'react-native'; 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/integration/react'; import { actionLogger } from 'lib/utils/action-logger'; import ChatContextProvider from './chat/chat-context-provider.react'; import PersistedStateGate from './components/persisted-state-gate'; import ConnectedStatusBar from './connected-status-bar.react'; import CoreDataProvider from './data/core-data-provider.react'; import { SensitiveDataHandler } from './data/sensitive-data-handler.react'; import { SQLiteContextProvider } from './data/sqlite-context-provider'; import ErrorBoundary from './error-boundary.react'; import InputStateContainer from './input/input-state-container.react'; import LifecycleHandler from './lifecycle/lifecycle-handler.react'; import { defaultNavigationState } from './navigation/default-state'; import DisconnectedBarVisibilityHandler from './navigation/disconnected-bar-visibility-handler.react'; import { setGlobalNavContext } from './navigation/icky-global'; import { NavContext } from './navigation/navigation-context'; import NavigationHandler from './navigation/navigation-handler.react'; import { validNavState } from './navigation/navigation-utils'; import OrientationHandler from './navigation/orientation-handler.react'; import { navStateAsyncStorageKey } from './navigation/persistance'; import RootNavigator from './navigation/root-navigator.react'; import ConnectivityUpdater from './redux/connectivity-updater.react'; import { DimensionsUpdater } from './redux/dimensions-updater.react'; import { getPersistor } from './redux/persist'; import { store } from './redux/redux-setup'; import { useSelector } from './redux/redux-utils'; import { RootContext } from './root-context'; import Socket from './socket.react'; import { StaffContextProvider } from './staff/staff-context.provider.react'; import { DarkTheme, LightTheme } from './themes/navigation'; import ThemeHandler from './themes/theme-handler.react'; import './themes/fonts'; LogBox.ignoreLogs([ // react-native-reanimated 'Please report: Excessive number of pending callbacks', ]); 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); 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; } 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 gated: React.Node = ( <> ); let navigation; if (initialState) { navigation = ( ); } return ( - - - - - {gated} - - - - - {navigation} - - - + + + + + + {gated} + + + + + {navigation} + + + + ); } const styles = StyleSheet.create({ app: { flex: 1, }, }); function AppRoot(): React.Node { return ( ); } export default AppRoot;