fix: ui redesign bugs (#3529)

## 🎯 Goal

This PR includes a batch of follow-up fixes on top of the redesign
branch, focused on sample app UX regressions, channel list actions, and
Android behaviour.

On the platform side, it improves Android behaviour by removing the old
IME hack from keyboard avoiding logic and makes our
`KeyboardCompatibleView` compatible with ETE on `Android` 🚀 . It also
rounds out the redesign polish by making filters toggleable and
reflecting the related behaviour in sample app screens.

Included changes

- enable audio recording in threads
- use the correct outlined video icon
- hide read indicators for deleted last messages
- fix back navigation in channel creation screens
- fix Android keyboard avoiding without the IME hack
- remove mark unread for own messages (this was never working well)
- make filters toggleable
- reflect filter behavior in sample app screens
- add muted icon/state to details bottom sheet
- make swipe actions always use mute


## 🛠 Implementation details

<!-- Provide a description of the implementation -->

## 🎨 UI Changes

<!-- Add relevant screenshots -->

<details>
<summary>iOS</summary>


<table>
    <thead>
        <tr>
            <td>Before</td>
            <td>After</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <!--<img src="" /> -->
            </td>
            <td>
                <!--<img src="" /> -->
            </td>
        </tr>
    </tbody>
</table>
</details>


<details>
<summary>Android</summary>

<table>
    <thead>
        <tr>
            <td>Before</td>
            <td>After</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <!--<img src="" /> -->
            </td>
            <td>
                <!--<img src="" /> -->
            </td>
        </tr>
    </tbody>
</table>
</details>

## 🧪 Testing

<!-- Explain how this change can be tested (or why it can't be tested)
-->

## ☑️ Checklist

- [ ] I have signed the [Stream
CLA](https://docs.google.com/forms/d/e/1FAIpQLScFKsKkAJI7mhCr7K9rEIOpqIDThrWxuvxnwUq2XkHyG154vQ/viewform)
(required)
- [ ] PR targets the `develop` branch
- [ ] Documentation is updated
- [ ] New code is tested in main example apps, including all possible
scenarios
  - [ ] SampleApp iOS and Android
  - [ ] Expo iOS and Android

Author: isekovanic

examples/SampleApp/android/app/src/main/java/com/sampleapp/MainActivity.kt

@@ -1,12 +1,8 @@
 package io.getstream.reactnative.sampleapp
 
+import android.graphics.Color
 import android.os.Build
 import android.os.Bundle
-import android.view.View
-import androidx.core.graphics.Insets
-import androidx.core.view.ViewCompat
-import androidx.core.view.WindowInsetsCompat
-import androidx.core.view.updatePadding
 import com.facebook.react.ReactActivity
 import com.facebook.react.ReactActivityDelegate
 import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled
@@ -17,28 +13,12 @@ class MainActivity : ReactActivity() {
   override fun onCreate(savedInstanceState: Bundle?) {
     super.onCreate(null)
 
-    if (Build.VERSION.SDK_INT >= 35) {
-      val rootView = findViewById<View>(android.R.id.content)
+    window.navigationBarColor = Color.TRANSPARENT
+    window.statusBarColor = Color.TRANSPARENT
 
-      val initial = Insets.of(
-        rootView.paddingLeft,
-        rootView.paddingTop,
-        rootView.paddingRight,
-        rootView.paddingBottom
-      )
-
-      ViewCompat.setOnApplyWindowInsetsListener(rootView) { v, insets ->
-        val ime = insets.getInsets(WindowInsetsCompat.Type.ime())
-
-        v.updatePadding(
-          left = initial.left,
-          top = initial.top,
-          right = initial.right,
-          bottom = initial.bottom + ime.bottom
-        )
-
-        insets
-      }
+    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
+      window.isNavigationBarContrastEnforced = false
+      window.isStatusBarContrastEnforced = false
     }
   }
 

examples/SampleApp/android/app/src/main/res/values/styles.xml

@@ -2,7 +2,9 @@
 
     <!-- Base application theme. -->
     <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
-        <!-- Customize your theme here. -->
+        <item name="android:navigationBarColor">@android:color/transparent</item>
+        <item name="android:statusBarColor">@android:color/transparent</item>
+        <item name="android:enforceNavigationBarContrast">false</item>
     </style>
 
 </resources>

examples/SampleApp/src/components/ChannelDetailProfileSection.tsx

@@ -1,15 +1,17 @@
 import React, { useMemo } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
-import { useTheme } from 'stream-chat-react-native';
+
+import { ChannelPreviewMutedStatus, useTheme } from 'stream-chat-react-native';
 
 type ChannelDetailProfileSectionProps = {
   avatar: React.ReactNode;
+  muted?: boolean;
   subtitle: string;
   title: string;
 };
 
 export const ChannelDetailProfileSection = React.memo(
-  ({ avatar, subtitle, title }: ChannelDetailProfileSectionProps) => {
+  ({ avatar, muted, subtitle, title }: ChannelDetailProfileSectionProps) => {
     const {
       theme: { semantics },
     } = useTheme();
@@ -19,9 +21,12 @@ export const ChannelDetailProfileSection = React.memo(
       <View style={styles.container}>
         {avatar}
         <View style={styles.heading}>
-          <Text style={[styles.title, { color: semantics.textPrimary }]} numberOfLines={2}>
-            {title}
-          </Text>
+          <View style={styles.titleRow}>
+            <Text style={[styles.title, { color: semantics.textPrimary }]} numberOfLines={2}>
+              {title}
+            </Text>
+            {muted ? <ChannelPreviewMutedStatus /> : null}
+          </View>
           {subtitle ? (
             <Text style={[styles.subtitle, { color: semantics.textSecondary }]} numberOfLines={1}>
               {subtitle}
@@ -49,8 +54,16 @@ const useStyles = () =>
           gap: 8,
           width: '100%',
         },
+        titleRow: {
+          alignItems: 'center',
+          flexDirection: 'row',
+          gap: 4,
+          justifyContent: 'center',
+          maxWidth: '100%',
+        },
         title: {
           fontSize: 22,
+          flexShrink: 1,
           fontWeight: '600',
           lineHeight: 24,
           textAlign: 'center',

examples/SampleApp/src/screens/ChannelScreen.tsx

@@ -273,7 +273,7 @@ export const ChannelScreen: React.FC<ChannelScreenProps> = ({ navigation, route
         messageInputFloating={messageInputFloating}
         onPressMessage={onPressMessage}
         initialScrollToFirstUnreadMessage
-        keyboardVerticalOffset={Platform.OS === 'ios' ? 0 : -300}
+        keyboardVerticalOffset={0}
         messageActions={messageActions}
         MessageLocation={MessageLocation}
         messageId={messageId}

examples/SampleApp/src/screens/GroupChannelDetailsScreen.tsx

@@ -1,10 +1,17 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import { Pressable, ScrollView, StyleSheet, Switch, Text, View } from 'react-native';
+
 import { SafeAreaView } from 'react-native-safe-area-context';
+
 import { RouteProp, useNavigation } from '@react-navigation/native';
+
+import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
+import type { ChannelMemberResponse, UserResponse } from 'stream-chat';
+
 import {
   ChannelAvatar,
   useChannelPreviewDisplayName,
+  useIsChannelMuted,
   useOverlayContext,
   useTheme,
   Pin,
@@ -26,9 +33,6 @@ import { GoForward } from '../icons/GoForward';
 import { LeaveGroup } from '../icons/LeaveGroup';
 import { Mute } from '../icons/Mute';
 import { Picture } from '../icons/Picture';
-
-import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
-import type { ChannelMemberResponse, UserResponse } from 'stream-chat';
 import type { StackNavigatorParamList } from '../types';
 
 const MAX_VISIBLE_MEMBERS = 5;
@@ -55,6 +59,7 @@ export const GroupChannelDetailsScreen: React.FC<GroupChannelDetailsProps> = ({
   const {
     theme: { semantics },
   } = useTheme();
+  const { muted: channelMuted } = useIsChannelMuted(channel);
 
   const [muted, setMuted] = useState(
     chatClient?.mutedChannels.some((mute) => mute.channel?.id === channel?.id),
@@ -197,6 +202,7 @@ export const GroupChannelDetailsScreen: React.FC<GroupChannelDetailsProps> = ({
       <ScrollView contentContainerStyle={styles.scrollContent} style={styles.container}>
         <ChannelDetailProfileSection
           avatar={<ChannelAvatar channel={channel} size='2xl' />}
+          muted={channelMuted}
           title={displayName}
           subtitle={memberStatusText}
         />
@@ -317,11 +323,7 @@ export const GroupChannelDetailsScreen: React.FC<GroupChannelDetailsProps> = ({
         onClose={closeContactDetail}
         visible={selectedMember !== null}
       />
-      <EditGroupBottomSheet
-        channel={channel}
-        onClose={closeEditSheet}
-        visible={editVisible}
-      />
+      <EditGroupBottomSheet channel={channel} onClose={closeEditSheet} visible={editVisible} />
     </SafeAreaView>
   );
 };

examples/SampleApp/src/screens/NewDirectMessagingScreen.tsx

@@ -1,5 +1,5 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { Platform, StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native';
 import { useFocusEffect } from '@react-navigation/native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import {
@@ -204,9 +204,20 @@ export const NewDirectMessagingScreen: React.FC<NewDirectMessagingScreenProps> =
     initChannel();
   }, [chatClient, selectedUserIds, selectedUsersLength]);
 
+  const onBackPress = useCallback(() => {
+    reset();
+
+    if (!navigation.canGoBack()) {
+      navigation.reset({ index: 0, routes: [{ name: 'MessagingScreen' }] });
+      return;
+    }
+
+    navigation.goBack();
+  }, [navigation, reset]);
+
   const renderUserSearch = ({ inSafeArea }: { inSafeArea: boolean }) => (
     <View style={[{ backgroundColor: white }, focusOnSearchInput ? styles.container : undefined]}>
-      <ScreenHeader inSafeArea={inSafeArea} onBack={reset} titleText='New Chat' />
+      <ScreenHeader inSafeArea={inSafeArea} onBack={onBackPress} titleText='New Chat' />
       <TouchableOpacity
         activeOpacity={1}
         onPress={() => {
@@ -341,7 +352,7 @@ export const NewDirectMessagingScreen: React.FC<NewDirectMessagingScreenProps> =
         channel={currentChannel.current}
         EmptyStateIndicator={EmptyMessagesIndicator}
         enforceUniqueReaction
-        keyboardVerticalOffset={Platform.OS === 'ios' ? 0 : -300}
+        keyboardVerticalOffset={0}
         onChangeText={setMessageInputText}
         overrideOwnCapabilities={{ sendMessage: true }}
         SendButton={NewDirectMessagingSendButton}

examples/SampleApp/src/screens/NewGroupChannelAddMemberScreen.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { FlatList, StyleSheet, TextInput, TouchableOpacity, View } from 'react-native';
 import { Search, useTheme } from 'stream-chat-react-native';
 
@@ -79,6 +79,17 @@ export const NewGroupChannelAddMemberScreen: React.FC<Props> = ({ navigation })
   const { onChangeSearchText, onFocusInput, removeUser, reset, searchText, selectedUsers } =
     useUserSearchContext();
 
+  const onBackPress = useCallback(() => {
+    reset();
+
+    if (!navigation.canGoBack()) {
+      navigation.reset({ index: 0, routes: [{ name: 'MessagingScreen' }] });
+      return;
+    }
+
+    navigation.goBack();
+  }, [navigation, reset]);
+
   const onRightArrowPress = () => {
     if (selectedUsers.length === 0) {
       return;
@@ -93,7 +104,7 @@ export const NewGroupChannelAddMemberScreen: React.FC<Props> = ({ navigation })
   return (
     <View style={styles.container}>
       <ScreenHeader
-        onBack={reset}
+        onBack={onBackPress}
         // eslint-disable-next-line react/no-unstable-nested-components
         RightContent={() => (
           <RightArrowButton disabled={selectedUsers.length === 0} onPress={onRightArrowPress} />

examples/SampleApp/src/screens/OneOnOneChannelDetailScreen.tsx

@@ -1,8 +1,19 @@
 import React, { useCallback, useState } from 'react';
 import { ScrollView, StyleSheet, Switch } from 'react-native';
-import { ChannelAvatar, Delete, useTheme, Pin, CircleBan } from 'stream-chat-react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
+import type { RouteProp } from '@react-navigation/native';
+import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
+
+import {
+  ChannelAvatar,
+  CircleBan,
+  Delete,
+  useChannelMuteActive,
+  Pin,
+  useTheme,
+} from 'stream-chat-react-native';
+
 import { ChannelDetailProfileSection } from '../components/ChannelDetailProfileSection';
 import { ConfirmationBottomSheet } from '../components/ConfirmationBottomSheet';
 import { ListItem } from '../components/ListItem';
@@ -13,11 +24,8 @@ import { File } from '../icons/File';
 import { GoForward } from '../icons/GoForward';
 import { Mute } from '../icons/Mute';
 import { Picture } from '../icons/Picture';
-import { getUserActivityStatus } from '../utils/getUserActivityStatus';
-
-import type { RouteProp } from '@react-navigation/native';
-import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import type { StackNavigatorParamList } from '../types';
+import { getUserActivityStatus } from '../utils/getUserActivityStatus';
 
 type OneOnOneChannelDetailScreenRouteProp = RouteProp<
   StackNavigatorParamList,
@@ -44,6 +52,7 @@ export const OneOnOneChannelDetailScreen: React.FC<Props> = ({
     theme: { semantics },
   } = useTheme();
   const { chatClient } = useAppContext();
+  const userMuted = useChannelMuteActive(channel);
 
   const [confirmationVisible, setConfirmationVisible] = useState(false);
   const [blockUserConfirmationVisible, setBlockUserConfirmationVisible] = useState(false);
@@ -141,6 +150,7 @@ export const OneOnOneChannelDetailScreen: React.FC<Props> = ({
       <ScrollView contentContainerStyle={styles.scrollContent} style={styles.container}>
         <ChannelDetailProfileSection
           avatar={<ChannelAvatar channel={channel} size='2xl' />}
+          muted={userMuted}
           title={user.name || user.id}
           subtitle={activityStatus}
         />

examples/SampleApp/src/screens/ThreadScreen.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import { Platform, StyleSheet, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 
 import {
   AlsoSentToChannelHeaderPressPayload,
@@ -149,11 +149,11 @@ export const ThreadScreen: React.FC<ThreadScreenProps> = ({
   return (
     <View style={[styles.container, { backgroundColor: white }]}>
       <Channel
-        audioRecordingEnabled={false}
+        audioRecordingEnabled={true}
         AttachmentPickerSelectionBar={CustomAttachmentPickerSelectionBar}
         channel={channel}
         enforceUniqueReaction
-        keyboardVerticalOffset={Platform.OS === 'ios' ? 0 : -300}
+        keyboardVerticalOffset={0}
         messageActions={messageActions}
         messageInputFloating={messageInputFloating}
         MessageLocation={MessageLocation}

package/src/components/AttachmentPicker/components/AttachmentPickerContent.tsx

@@ -21,7 +21,7 @@ import {
 } from '../../../contexts';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useAttachmentPickerState, useStableCallback } from '../../../hooks';
-import { Camera, FilePickerIcon, PollThumbnail, Recorder } from '../../../icons';
+import { Camera, FilePickerIcon, PollThumbnail, VideoIcon } from '../../../icons';
 import { primitives } from '../../../theme';
 import { CommandSuggestionItem } from '../../AutoCompleteInput/AutoCompleteSuggestionItem';
 
@@ -197,7 +197,7 @@ export const AttachmentCameraPicker = (
     />
   ) : (
     <AttachmentPickerGenericContent
-      Icon={videoOnly ? Recorder : Camera}
+      Icon={videoOnly ? VideoIcon : Camera}
       onPress={openCameraPicker}
       height={height}
       buttonText={t('Open Camera')}