diff --git a/app/components/tutorial_highlight/index.tsx b/app/components/tutorial_highlight/index.tsx index 182ad6e6e..2be624c19 100644 --- a/app/components/tutorial_highlight/index.tsx +++ b/app/components/tutorial_highlight/index.tsx @@ -2,7 +2,7 @@ // See LICENSE.txt for license information. import React, {useCallback} from 'react'; -import {Modal, StyleSheet, useWindowDimensions, View} from 'react-native'; +import {Modal, useWindowDimensions} from 'react-native'; import HighlightItem from './item'; @@ -11,11 +11,10 @@ type Props = { itemBounds: TutorialItemBounds; itemBorderRadius?: number; onDismiss: () => void; - onLayout: () => void; onShow?: () => void; } -const TutorialHighlight = ({children, itemBounds, itemBorderRadius, onDismiss, onLayout, onShow}: Props) => { +const TutorialHighlight = ({children, itemBounds, itemBorderRadius, onDismiss, onShow}: Props) => { const {width, height} = useWindowDimensions(); const handleShowTutorial = useCallback(() => { @@ -26,19 +25,13 @@ const TutorialHighlight = ({children, itemBounds, itemBorderRadius, onDismiss, o return ( 0} transparent={true} animationType='fade' onDismiss={onDismiss} onRequestClose={onDismiss} testID='tutorial_highlight' > - - {itemBounds.endX > 0 && - } {children} ); diff --git a/app/components/user_item/user_item.tsx b/app/components/user_item/user_item.tsx index 0c2881bb4..a3f4a9e9a 100644 --- a/app/components/user_item/user_item.tsx +++ b/app/components/user_item/user_item.tsx @@ -32,6 +32,7 @@ type Props = { rightDecorator?: React.ReactNode; onUserPress?: (user: UserProfile | UserModel) => void; onUserLongPress?: (user: UserProfile | UserModel) => void; + onLayout?: () => void; disabled?: boolean; viewRef?: React.LegacyRef; padding?: number; @@ -102,6 +103,7 @@ const UserItem = ({ locale, teammateNameDisplay, rightDecorator, + onLayout, onUserPress, onUserLongPress, disabled = false, @@ -159,6 +161,7 @@ const UserItem = ({ onPress={onPress} onLongPress={onLongPress} disabled={!(onUserPress || onUserLongPress)} + onLayout={onLayout} > - - - - - - Long-press on an item to view a user's profile - - - - + visible={false} + /> { - startTutorial(); - }, []); + if (showTutorial) { + startTutorial(); + } + }, [showTutorial]); const icon = useMemo(() => { if (!selectable && !selected) { @@ -190,17 +192,19 @@ function UserListRow({ viewRef={viewRef} padding={20} includeMargin={includeMargin} + onLayout={onLayout} /> {showTutorial && + {Boolean(itemBounds.endX) && + } } diff --git a/app/screens/home/channel_list/servers/servers_list/server_item/server_item.tsx b/app/screens/home/channel_list/servers/servers_list/server_item/server_item.tsx index efe10083e..c078856e4 100644 --- a/app/screens/home/channel_list/servers/servers_list/server_item/server_item.tsx +++ b/app/screens/home/channel_list/servers/servers_list/server_item/server_item.tsx @@ -213,9 +213,11 @@ const ServerItem = ({ }; const onLayout = useCallback(() => { - swipeable.current?.close(); - startTutorial(); - }, []); + if (showTutorial) { + swipeable.current?.close(); + startTutorial(); + } + }, [showTutorial]); const containerStyle = useMemo(() => { const style: StyleProp = [styles.container]; @@ -390,6 +392,7 @@ const ServerItem = ({ style={containerStyle} ref={viewRef} testID={serverItemTestId} + onLayout={onLayout} > + {Boolean(itemBounds.endX) && + } }