fix: ui redesign bugs

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')}

package/src/components/AttachmentPicker/components/AttachmentTypePickerButton.tsx

@@ -19,7 +19,7 @@ import { useAttachmentPickerState } from '../../../hooks/useAttachmentPickerStat
 import {
   Camera,
   Picture,
-  Recorder,
+  VideoIcon,
   FilePickerIcon,
   PollThumbnail,
   CommandsIcon,
@@ -121,7 +121,7 @@ export const CameraPickerButton = () => {
       />
       {Platform.OS === 'android' ? (
         <AttachmentTypePickerButton
-          Icon={Recorder}
+          Icon={VideoIcon}
           selected={selectedPicker === 'camera-video'}
           onPress={onVideoRecorderPickerPress}
         />

package/src/components/ChannelList/hooks/__tests__/useChannelActionItems.test.tsx

@@ -110,7 +110,7 @@ describe('useChannelActionItems', () => {
       'destructive',
     ]);
     expect(result.current.map((item) => item.placement)).toEqual([
-      'both',
+      'swipe',
       'both',
       'sheet',
       'sheet',
@@ -266,7 +266,7 @@ describe('getChannelActionItems', () => {
 
     expect(actionItems[0].action).toBe(channelActions.unmuteChannel);
     expect(actionItems[0].label).toBe('Unmute Group');
-    expect(actionItems[0].placement).toBe('both');
+    expect(actionItems[0].placement).toBe('swipe');
 
     expect(actionItems[1].action).toBe(channelActions.unarchive);
     expect(actionItems[1].label).toBe('Unarchive Group');

package/src/components/ChannelList/hooks/useChannelActionItems.tsx

@@ -112,7 +112,7 @@ export const buildDefaultChannelActionItems: BuildDefaultChannelActionItems = (
         : muteActive
           ? t('Unmute Group')
           : t('Mute Group'),
-      placement: isDirectChat ? 'sheet' : 'both',
+      placement: isDirectChat ? 'sheet' : 'swipe',
       type: 'standard',
     },
   ];