Next Release

examples/SampleApp/src/components/BottomTabs.tsx

@@ -131,7 +131,7 @@ export const BottomTabs: React.FC<BottomTabBarProps> = (props) => {
   const {
     theme: { semantics },
   } = useTheme();
-  const { bottom } = useSafeAreaInsets();
+  const { bottom, left, right } = useSafeAreaInsets();
 
   return (
     <View
@@ -141,6 +141,8 @@ export const BottomTabs: React.FC<BottomTabBarProps> = (props) => {
           backgroundColor: semantics.backgroundCoreElevation1,
           borderTopColor: semantics.borderCoreSubtle,
           paddingBottom: bottom,
+          paddingLeft: left,
+          paddingRight: right,
         },
       ]}
     >

examples/SampleApp/src/components/ToastComponent/Toast.tsx

@@ -1,4 +1,4 @@
-import { Dimensions, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import Animated, { Easing, SlideInDown, SlideOutDown } from 'react-native-reanimated';
 import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
 
@@ -7,8 +7,6 @@ import { useInAppNotificationsState, useTheme } from 'stream-chat-react-native';
 
 import { useLegacyColors } from '../../theme/useLegacyColors';
 
-const { width } = Dimensions.get('window');
-
 type KnownSeverity = 'error' | 'success' | 'warning' | 'info';
 
 const severityIconMap: Record<KnownSeverity, string> = {
@@ -67,7 +65,9 @@ const styles = StyleSheet.create({
     alignItems: 'flex-end',
   },
   toast: {
-    width: width * 0.9,
+    // Percentage of the parent's content box, so the container's safe area padding is already
+    // accounted for. A window-derived width is not.
+    width: '90%',
     borderRadius: 12,
     padding: 12,
     marginBottom: 8,

examples/SampleApp/src/screens/AdvancedUserSelectorScreen.tsx

@@ -1,13 +1,14 @@
 import React, { useState } from 'react';
 import { Alert, StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { KeyboardCompatibleView, useTheme, version } from 'stream-chat-react-native';
 
 import { useAppContext } from '../context/AppContext';
 import { useLegacyColors } from '../theme/useLegacyColors';
 
 const styles = StyleSheet.create({
+  safeArea: { flex: 1 },
   bottomContainer: {
     paddingHorizontal: 16,
   },
@@ -168,102 +169,104 @@ export const AdvancedUserSelectorScreen: React.FC = () => {
     return isValid;
   };
   return (
-    <KeyboardCompatibleView keyboardVerticalOffset={0}>
-      <View
-        style={[
-          styles.container,
-          {
-            backgroundColor: white_snow,
-            paddingBottom: bottom,
-          },
-        ]}
-      >
-        <View style={styles.innerContainer}>
-          <View style={styles.labelsContainer}>
-            <LabeledTextInput
-              error={apiKeyError}
-              label='Chat API Key'
-              onChangeText={(text) => {
-                setApiKeyError(false);
-                setApiKey(text);
-              }}
-              value={apiKey}
-            />
-            <LabeledTextInput
-              error={userIdError}
-              label='User ID'
-              onChangeText={(text) => {
-                setUserIdError(false);
-                setUserId(text);
-              }}
-              value={userId}
-            />
-            <LabeledTextInput
-              error={userTokenError}
-              label='User Token'
-              onChangeText={(text) => {
-                setUserTokenError(false);
-                setUserToken(text);
-              }}
-              value={userToken}
-            />
-            <LabeledTextInput
-              label='Username (optional)'
-              onChangeText={(text) => {
-                setUserName(text);
-              }}
-              value={userName}
-            />
-          </View>
-          <View style={styles.bottomContainer}>
-            <TouchableOpacity
-              onPress={async () => {
-                if (!isValidInput()) {
-                  return;
-                }
+    <SafeAreaView edges={['left', 'right']} style={styles.safeArea}>
+      <KeyboardCompatibleView keyboardVerticalOffset={0}>
+        <View
+          style={[
+            styles.container,
+            {
+              backgroundColor: white_snow,
+              paddingBottom: bottom,
+            },
+          ]}
+        >
+          <View style={styles.innerContainer}>
+            <View style={styles.labelsContainer}>
+              <LabeledTextInput
+                error={apiKeyError}
+                label='Chat API Key'
+                onChangeText={(text) => {
+                  setApiKeyError(false);
+                  setApiKey(text);
+                }}
+                value={apiKey}
+              />
+              <LabeledTextInput
+                error={userIdError}
+                label='User ID'
+                onChangeText={(text) => {
+                  setUserIdError(false);
+                  setUserId(text);
+                }}
+                value={userId}
+              />
+              <LabeledTextInput
+                error={userTokenError}
+                label='User Token'
+                onChangeText={(text) => {
+                  setUserTokenError(false);
+                  setUserToken(text);
+                }}
+                value={userToken}
+              />
+              <LabeledTextInput
+                label='Username (optional)'
+                onChangeText={(text) => {
+                  setUserName(text);
+                }}
+                value={userName}
+              />
+            </View>
+            <View style={styles.bottomContainer}>
+              <TouchableOpacity
+                onPress={async () => {
+                  if (!isValidInput()) {
+                    return;
+                  }
 
-                try {
-                  await loginUser({
-                    apiKey,
-                    userId,
-                    userName,
-                    userToken,
-                  });
-                } catch (e) {
-                  Alert.alert(
-                    `Login resulted in error. Please make sure you have entered valid credentials. Error: ${(e as Error).message}`,
-                  );
-                  console.warn(e);
-                }
-              }}
-              style={[
-                styles.bottomInnerContainer,
-                {
-                  backgroundColor: button_background,
-                },
-              ]}
-            >
-              <Text
-                style={{
-                  color: button_text,
+                  try {
+                    await loginUser({
+                      apiKey,
+                      userId,
+                      userName,
+                      userToken,
+                    });
+                  } catch (e) {
+                    Alert.alert(
+                      `Login resulted in error. Please make sure you have entered valid credentials. Error: ${(e as Error).message}`,
+                    );
+                    console.warn(e);
+                  }
                 }}
+                style={[
+                  styles.bottomInnerContainer,
+                  {
+                    backgroundColor: button_background,
+                  },
+                ]}
+              >
+                <Text
+                  style={{
+                    color: button_text,
+                  }}
+                >
+                  Login
+                </Text>
+              </TouchableOpacity>
+              <Text
+                style={[
+                  styles.versionText,
+                  {
+                    color: grey_gainsboro,
+                  },
+                ]}
               >
-                Login
+                Stream SDK v{version}
               </Text>
-            </TouchableOpacity>
-            <Text
-              style={[
-                styles.versionText,
-                {
-                  color: grey_gainsboro,
-                },
-              ]}
-            >
-              Stream SDK v{version}
-            </Text>
+            </View>
           </View>
         </View>
-      </View>
-    </KeyboardCompatibleView>
+      </KeyboardCompatibleView>
+    </SafeAreaView>
   );
 };

examples/SampleApp/src/screens/ChannelDetailsScreen.tsx

@@ -1,5 +1,9 @@
 import React, { useCallback } from 'react';
 
+import { StyleSheet } from 'react-native';
+
+import { SafeAreaView } from 'react-native-safe-area-context';
+
 import { useNavigation, type RouteProp } from '@react-navigation/native';
 import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
 
@@ -125,7 +129,9 @@ const ChannelDetailsScreenInner = () => {
         ChannelMemberActionsSheet: MemberActionsSheet,
       }}
     >
-      <ChannelDetails onBack={onBack} />
+      <SafeAreaView edges={['left', 'right']} style={styles.flex}>
+        <ChannelDetails onBack={onBack} />
+      </SafeAreaView>
     </WithComponents>
   );
 };
@@ -141,3 +147,7 @@ export const ChannelDetailsScreen: React.FC<Props> = ({
     </ChannelDetailsContextProvider>
   );
 };
+
+const styles = StyleSheet.create({
+  flex: { flex: 1 },
+});

examples/SampleApp/src/screens/ChannelFilesScreen.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
 
+import { SafeAreaView } from 'react-native-safe-area-context';
+
 import type { RouteProp } from '@react-navigation/native';
 import {
   ChannelDetailsContextProvider,
@@ -32,11 +34,13 @@ export const ChannelFilesScreen: React.FC<ChannelFilesScreenProps> = ({
   useTheme();
 
   return (
-    <View style={[styles.flex]}>
+    <SafeAreaView edges={['left', 'right']} style={[styles.flex]}>
       <ScreenHeader titleText='Files' />
       <ChannelDetailsContextProvider channel={channel}>
-        <FileAttachmentList />
+        <View style={styles.flex}>
+          <FileAttachmentList />
+        </View>
       </ChannelDetailsContextProvider>
-    </View>
+    </SafeAreaView>
   );
 };

examples/SampleApp/src/screens/ChannelImagesScreen.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
 
+import { SafeAreaView } from 'react-native-safe-area-context';
+
 import type { RouteProp } from '@react-navigation/native';
 import { ChannelDetailsContextProvider, MediaList } from 'stream-chat-react-native';
 
@@ -24,11 +26,13 @@ export const ChannelImagesScreen: React.FC<ChannelImagesScreenProps> = ({
   },
 }) => {
   return (
-    <View style={[styles.flex]}>
+    <SafeAreaView edges={['left', 'right']} style={[styles.flex]}>
       <ScreenHeader titleText='Photos and Videos' />
       <ChannelDetailsContextProvider channel={channel}>
-        <MediaList />
+        <View style={styles.flex}>
+          <MediaList />
+        </View>
       </ChannelDetailsContextProvider>
-    </View>
+    </SafeAreaView>
   );
 };

examples/SampleApp/src/screens/ChannelListScreen.tsx

@@ -10,6 +10,8 @@ import {
   View,
 } from 'react-native';
 
+import { SafeAreaView } from 'react-native-safe-area-context';
+
 import { NavigationProp, useNavigation, useScrollToTop } from '@react-navigation/native';
 import { Channel, MessageResponse } from 'stream-chat';
 import {
@@ -175,7 +177,8 @@ export const ChannelListScreen: React.FC = () => {
   }
 
   return (
-    <View
+    <SafeAreaView
+      edges={['left', 'right']}
       style={[
         styles.flex,
         {
@@ -192,6 +195,7 @@ export const ChannelListScreen: React.FC = () => {
             {
               backgroundColor: white,
               borderColor: grey_whisper,
+              marginHorizontal: 8,
             },
           ]}
         >
@@ -258,6 +262,6 @@ export const ChannelListScreen: React.FC = () => {
           </View>
         </View>
       </View>
-    </View>
+    </SafeAreaView>
   );
 };