diff --git a/native/chat/chat.react.js b/native/chat/chat.react.js --- a/native/chat/chat.react.js +++ b/native/chat/chat.react.js @@ -54,6 +54,10 @@ 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 { + nuxTip, + NUXTipsContext, +} from '../components/nux-tips-context.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'; @@ -378,14 +382,43 @@ draftUpdater = ; } + const communityDrawerButtonRef = + React.useRef>(); + + const tipsContext = React.useContext(NUXTipsContext); + invariant(tipsContext, 'NUXTipsContext should be defined'); + const { registerTipButton } = tipsContext; + + const communityDrawerButtonOnLayout = React.useCallback(() => { + communityDrawerButtonRef.current?.measure( + (x, y, width, height, pageX, pageY) => { + registerTipButton(nuxTip.COMMUNITY_DRAWER, { + x, + y, + width, + height, + pageX, + pageY, + }); + }, + ); + }, [registerTipButton]); + const headerLeftButton = React.useCallback( (headerProps: StackHeaderLeftButtonProps) => { if (headerProps.canGoBack) { return ; } - return ; + return ( + + + + ); }, - [props.navigation], + [communityDrawerButtonOnLayout, props.navigation], ); const messageEditingContext = React.useContext(MessageEditingContext); 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,11 +1,16 @@ // @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 { CommunityDrawerNavigationProp } from './community-drawer-navigator.react.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 = { @@ -19,6 +24,16 @@ const styles = useStyles(unboundStyles); const { navigation } = props; + const tipsContext = React.useContext(NUXTipsContext); + invariant(tipsContext, 'NUXTipsContext should be defined'); + const { registerTipButton } = tipsContext; + + React.useEffect(() => { + return () => { + registerTipButton(nuxTip.COMMUNITY_DRAWER, null); + }; + }, [registerTipButton]); + return (