diff --git a/native/navigation/app-navigator.react.js b/native/navigation/app-navigator.react.js --- a/native/navigation/app-navigator.react.js +++ b/native/navigation/app-navigator.react.js @@ -6,12 +6,14 @@ import ActionResultModal from './action-result-modal.react.js'; import { CommunityDrawerNavigator } from './community-drawer-navigator.react.js'; +import CommunityDrawerTip from './community-drawer-tip.react.js'; import { createOverlayNavigator } from './overlay-navigator.react.js'; import type { OverlayNavigationProp, OverlayNavigationHelpers, } from './overlay-navigator.react.js'; import type { RootNavigationProp } from './root-navigator.react.js'; +import { CommunityDrawerTipRouteName } from './route-names.js'; import { UserAvatarCameraModalRouteName, ThreadAvatarCameraModalRouteName, @@ -153,6 +155,10 @@ name={VideoPlaybackModalRouteName} component={VideoPlaybackModal} /> + {pushHandler} diff --git a/native/navigation/community-drawer-button-base.react.js b/native/navigation/community-drawer-button-base.react.js new file mode 100644 --- /dev/null +++ b/native/navigation/community-drawer-button-base.react.js @@ -0,0 +1,19 @@ +// @flow + +import Icon from '@expo/vector-icons/Feather.js'; +import * as React from 'react'; + +import { useStyles } from '../themes/colors.js'; + +// eslint-disable-next-line no-unused-vars +export default function CommunityDrawerButtonBase(props: { ... }): React.Node { + const styles = useStyles(unboundStyles); + return ; +} + +const unboundStyles = { + drawerButton: { + color: 'listForegroundSecondaryLabel', + marginLeft: 16, + }, +}; diff --git a/native/navigation/community-drawer-button.react.js b/native/navigation/community-drawer-button.react.js --- a/native/navigation/community-drawer-button.react.js +++ b/native/navigation/community-drawer-button.react.js @@ -1,27 +1,29 @@ // @flow -import Icon from '@expo/vector-icons/Feather.js'; import invariant from 'invariant'; import * as React from 'react'; import { TouchableOpacity } from 'react-native'; +import type { AppNavigationProp } from './app-navigator.react.js'; +import CommunityDrawerButtonBase from './community-drawer-button-base.react.js'; import type { CommunityDrawerNavigationProp } from './community-drawer-navigator.react.js'; +import type { NUXTipRouteNames } from './route-names.js'; import type { TabNavigationProp } from './tab-navigator.react.js'; import { NUXTipsContext, nuxTip, } from '../components/nux-tips-context.react.js'; -import { useStyles } from '../themes/colors.js'; type Props = { +navigation: | TabNavigationProp<'Chat'> | TabNavigationProp<'Profile'> | TabNavigationProp<'Calendar'> - | CommunityDrawerNavigationProp<'TabNavigator'>, + | CommunityDrawerNavigationProp<'TabNavigator'> + | AppNavigationProp, + ... }; function CommunityDrawerButton(props: Props): React.Node { - const styles = useStyles(unboundStyles); const { navigation } = props; const tipsContext = React.useContext(NUXTipsContext); @@ -36,16 +38,9 @@ return ( - + ); } -const unboundStyles = { - drawerButton: { - color: 'listForegroundSecondaryLabel', - marginLeft: 16, - }, -}; - export default CommunityDrawerButton; diff --git a/native/navigation/community-drawer-tip.react.js b/native/navigation/community-drawer-tip.react.js new file mode 100644 --- /dev/null +++ b/native/navigation/community-drawer-tip.react.js @@ -0,0 +1,20 @@ +// @flow + +import * as React from 'react'; + +import CommunityDrawerButtonBase from './community-drawer-button-base.react.js'; +import { + type NUXTipsOverlayProps, + createNUXTipsOverlay, +} from '../tooltip/nux-tips-overlay.react.js'; + +const communityDrawerText = + 'You can use this view to explore the tree of channels ' + + 'inside a community. This shows you all of the channels you can see, ' + + "including ones you haven't joined."; + +const CommunityDrawerTip: React.ComponentType< + NUXTipsOverlayProps<'CommunityDrawerTip'>, +> = createNUXTipsOverlay(CommunityDrawerButtonBase, communityDrawerText); + +export default CommunityDrawerTip;