From c771b301f64cf90080795bc02d037e0effc86850 Mon Sep 17 00:00:00 2001
From: Mattermost Build <build@mattermost.com>
Date: Tue, 29 Apr 2025 16:49:03 +0300
Subject: [PATCH] Fix Find channels not being interactable (#8794) (#8818)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Fix Find channels not being interactable

* fix(e2e): Uncomment find channel tests

* Fix tsc

* Use platform select

---------


(cherry picked from commit f963855875d84d7c959e41ed6520bb5790ac6bb6)

Co-authored-by: Daniel Espino García <larkox@gmail.com>
Co-authored-by: yasserfaraazkhan <attitude3cena.yf@gmail.com>
---
 app/components/chips/base_chip.tsx                         | 7 +++++--
 .../picker/header/skintone_selector/skintone_selector.tsx  | 2 +-
 app/screens/find_channels/filtered_list/filtered_list.tsx  | 4 ++--
 app/screens/find_channels/quick_options/quick_options.tsx  | 4 ++--
 .../find_channels/unfiltered_list/unfiltered_list.tsx      | 4 ++--
 .../components/search_channels/search_channels.tsx         | 4 ++--
 6 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/app/components/chips/base_chip.tsx b/app/components/chips/base_chip.tsx
index a52fb869d..a1fe166c3 100644
--- a/app/components/chips/base_chip.tsx
+++ b/app/components/chips/base_chip.tsx
@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-import {Text, TouchableOpacity, useWindowDimensions} from 'react-native';
+import {Platform, Text, TouchableOpacity, useWindowDimensions} from 'react-native';
 import Animated, {FadeIn, FadeOut} from 'react-native-reanimated';
 
 import CompassIcon from '@components/compass_icon';
@@ -103,10 +103,13 @@ export default function BaseChip({
             </TouchableOpacity>
         );
     }
+
+    // https://mattermost.atlassian.net/browse/MM-63814?focusedCommentId=178584
+    const useFadeOut = showAnimation && Platform.OS !== 'android';
     return (
         <Animated.View
             entering={showAnimation ? FadeIn.duration(FADE_DURATION) : undefined}
-            exiting={showAnimation ? FadeOut.duration(FADE_DURATION) : undefined}
+            exiting={useFadeOut ? FadeOut.duration(FADE_DURATION) : undefined}
             style={style.container}
             testID={testID}
         >
diff --git a/app/screens/emoji_picker/picker/header/skintone_selector/skintone_selector.tsx b/app/screens/emoji_picker/picker/header/skintone_selector/skintone_selector.tsx
index 0039da9aa..37d63dc09 100644
--- a/app/screens/emoji_picker/picker/header/skintone_selector/skintone_selector.tsx
+++ b/app/screens/emoji_picker/picker/header/skintone_selector/skintone_selector.tsx
@@ -145,7 +145,7 @@ const SkinToneSelector = ({skinTone = 'default', containerWidth, isSearching, tu
             >
                 <Animated.View
                     style={widthAnimatedStyle}
-                    exiting={FadeOut}
+                    exiting={Platform.OS === 'android' ? undefined : FadeOut /* https://mattermost.atlassian.net/browse/MM-63814?focusedCommentId=178584 */}
                     entering={FadeIn}
                 >
                     <Animated.View style={[styles.container, opacityStyle]}>
diff --git a/app/screens/find_channels/filtered_list/filtered_list.tsx b/app/screens/find_channels/filtered_list/filtered_list.tsx
index 6d9414b7d..6d7cb6948 100644
--- a/app/screens/find_channels/filtered_list/filtered_list.tsx
+++ b/app/screens/find_channels/filtered_list/filtered_list.tsx
@@ -4,7 +4,7 @@
 import {debounce, type DebouncedFunc} from 'lodash';
 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {useIntl} from 'react-intl';
-import {Alert, FlatList, type ListRenderItemInfo, StyleSheet, View} from 'react-native';
+import {Alert, FlatList, type ListRenderItemInfo, Platform, StyleSheet, View} from 'react-native';
 import Animated, {FadeInDown, FadeOutUp} from 'react-native-reanimated';
 
 import {switchToGlobalThreads} from '@actions/local/thread';
@@ -336,7 +336,7 @@ const FilteredList = ({
     return (
         <Animated.View
             entering={FadeInDown.duration(100)}
-            exiting={FadeOutUp.duration(100)}
+            exiting={Platform.select({ios: FadeOutUp.duration(100)}) /* https://mattermost.atlassian.net/browse/MM-63814?focusedCommentId=178584 */}
             style={style.flex}
         >
             <FlatList
diff --git a/app/screens/find_channels/quick_options/quick_options.tsx b/app/screens/find_channels/quick_options/quick_options.tsx
index db817db0e..47d0cac49 100644
--- a/app/screens/find_channels/quick_options/quick_options.tsx
+++ b/app/screens/find_channels/quick_options/quick_options.tsx
@@ -3,7 +3,7 @@
 
 import React, {useCallback} from 'react';
 import {useIntl} from 'react-intl';
-import {StyleSheet, View} from 'react-native';
+import {Platform, StyleSheet, View} from 'react-native';
 import Animated, {FadeInDown, FadeOutUp} from 'react-native-reanimated';
 
 import CompassIcon from '@components/compass_icon';
@@ -66,7 +66,7 @@ const QuickOptions = ({canCreateChannels, canJoinChannels, close}: Props) => {
     return (
         <Animated.View
             entering={FadeInDown.duration(200)}
-            exiting={FadeOutUp.duration(100)}
+            exiting={Platform.select({ios: FadeOutUp.duration(100)}) /* https://mattermost.atlassian.net/browse/MM-63814?focusedCommentId=178584 */}
             style={styles.container}
         >
             <Animated.View style={styles.wrapper}>
diff --git a/app/screens/find_channels/unfiltered_list/unfiltered_list.tsx b/app/screens/find_channels/unfiltered_list/unfiltered_list.tsx
index ccd45a4e0..4cb1fb494 100644
--- a/app/screens/find_channels/unfiltered_list/unfiltered_list.tsx
+++ b/app/screens/find_channels/unfiltered_list/unfiltered_list.tsx
@@ -3,7 +3,7 @@
 
 import React, {useCallback, useEffect, useMemo, useState} from 'react';
 import {useIntl} from 'react-intl';
-import {SectionList, type SectionListRenderItemInfo, StyleSheet} from 'react-native';
+import {Platform, SectionList, type SectionListRenderItemInfo, StyleSheet} from 'react-native';
 import Animated, {FadeInDown, FadeOutUp} from 'react-native-reanimated';
 
 import {switchToChannelById} from '@actions/remote/channel';
@@ -81,7 +81,7 @@ const UnfilteredList = ({close, keyboardOverlap, recentChannels, showTeamName, t
     return (
         <Animated.View
             entering={FadeInDown.duration(200)}
-            exiting={FadeOutUp.duration(100)}
+            exiting={Platform.select({ios: FadeOutUp.duration(100)}) /* https://mattermost.atlassian.net/browse/MM-63814?focusedCommentId=178584 */}
             style={style.flex}
         >
             <SectionList
diff --git a/share_extension/components/search_channels/search_channels.tsx b/share_extension/components/search_channels/search_channels.tsx
index 9742ab459..24b0f3baa 100644
--- a/share_extension/components/search_channels/search_channels.tsx
+++ b/share_extension/components/search_channels/search_channels.tsx
@@ -4,7 +4,7 @@
 import {useNavigation} from '@react-navigation/native';
 import React, {useCallback, useMemo} from 'react';
 import {useIntl} from 'react-intl';
-import {FlatList, type ListRenderItemInfo, StyleSheet, View} from 'react-native';
+import {FlatList, type ListRenderItemInfo, Platform, StyleSheet, View} from 'react-native';
 import Animated, {FadeInDown, FadeOutUp} from 'react-native-reanimated';
 
 import NoResultsWithTerm from '@components/no_results_with_term';
@@ -94,7 +94,7 @@ const SearchChannels = ({
     return (
         <Animated.View
             entering={FadeInDown.duration(100)}
-            exiting={FadeOutUp.duration(100)}
+            exiting={Platform.select({ios: FadeOutUp.duration(100)}) /* https://mattermost.atlassian.net/browse/MM-63814?focusedCommentId=178584 */}
             style={style.flex}
         >
             <FlatList