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) &&
+ }
}
>