revert bottom-sheet changes, fix theme

Author: oliverlaz

sample-apps/react-native/dogfood/ios/Podfile.lock

@@ -1777,7 +1777,7 @@ PODS:
     - ReactCommon/turbomodule/core
     - SocketRocket
     - Yoga
-  - react-native-image-picker (7.2.3):
+  - react-native-image-picker (8.2.1):
     - boost
     - DoubleConversion
     - fast_float
@@ -3412,7 +3412,7 @@ SPEC CHECKSUMS:
   React-Mapbuffer: e4a65db5f4df53369f39558c0cf2f480f6d3d6c7
   React-microtasksnativemodule: 86334c5c06315e0bccb7b6e6f2c905e92f98b615
   react-native-blob-util: 7f71e0af02279ef38a2ba43e8c2fcb79cf927732
-  react-native-image-picker: a340c7cd3566cedd56aacd5e61b6b492e9fe2139
+  react-native-image-picker: 6051cfd030121b880a58f1cc0e5e33e9887804e4
   react-native-mmkv: 7b9c7469fa0a7e463f9411ad3e4fe273bd5ff030
   react-native-netinfo: cec9c4e86083cb5b6aba0e0711f563e2fbbff187
   react-native-safe-area-context: ee1e8e2a7abf737a8d4d9d1a5686a7f2e7466236

sample-apps/react-native/dogfood/src/hooks/useTheme.ts

@@ -24,6 +24,7 @@ const getChatStyle = (colorScheme: ColorSchemeName): DeepPartial<Theme> => ({
           grey_whisper: '#1C1E22',
           grey_dark: '#F7F7F8',
           icon_background: '#FFFFFF',
+          light_blue: '#005FFF',
           modal_shadow: '#000000',
           overlay: '#FFFFFFCC', // CC = 80% opacity
           shadow_icon: '#00000080', // 80 = 50% opacity

sample-apps/react-native/dogfood/src/screens/LiveStream/BottomSheetChatWrapper.tsx

@@ -13,8 +13,10 @@ import {
   BottomSheetModal,
   BottomSheetModalProvider,
   BottomSheetView,
+  useBottomSheetInternal,
 } from '@gorhom/bottom-sheet';
 import {
+  Platform,
   StyleSheet,
   Text,
   TouchableOpacity,
@@ -143,9 +145,9 @@ const BottomSheetChatWrapper = React.forwardRef<
   }, [callId, chatClient]);
 
   // This function is to bring back the bottom sheet to the initial snap point for iOS when the focus is outside message input
-  // const focusOutsideMessageInput = () => {
-  //   bottomSheetModalRef.current?.snapToIndex(0);
-  // };
+  const focusOutsideMessageInput = () => {
+    bottomSheetModalRef.current?.snapToIndex(0);
+  };
 
   useImperativeHandle(ref, () => ({
     open: () => {
@@ -195,7 +197,7 @@ const BottomSheetChatWrapper = React.forwardRef<
         >
           <LivestreamChat
             channel={chatChannel}
-            // focusOutsideMessageInput={focusOutsideMessageInput}
+            focusOutsideMessageInput={focusOutsideMessageInput}
           />
         </BottomSheetView>
       </BottomSheetModal>
@@ -207,28 +209,45 @@ BottomSheetChatWrapper.displayName = 'BottomSheetChatWrapper';
 
 type LivestreamChatProps = {
   channel: ChannelType;
-  // focusOutsideMessageInput: () => void;
+  focusOutsideMessageInput: () => void;
 };
 
-const LivestreamChat = ({ channel }: LivestreamChatProps) => {
+const LivestreamChat = ({
+  channel,
+  focusOutsideMessageInput,
+}: LivestreamChatProps) => {
+  const { shouldHandleKeyboardEvents } = useBottomSheetInternal();
+
+  /**
+   * Done as per the text input behaviour from BottomSheetTextInput(https://github.com/gorhom/react-native-bottom-sheet/blob/master/src/components/bottomSheetTextInput/BottomSheetTextInput.tsx)
+   * to solve the issue around keyboard hiding the text input in the chat inside bottom sheet.
+   * The tip in https://ui.gorhom.dev/components/bottom-sheet/keyboard-handling/ is followed.
+   */
+  useEffect(() => {
+    return () => {
+      // Reset the flag on unmount
+      shouldHandleKeyboardEvents.value = false;
+    };
+  }, [shouldHandleKeyboardEvents]);
+
   return (
     <View style={styles.chatContainer}>
       <Channel
-        // // On Android, the default behaviour is as expected so we do not need to apply the fix to the text input to work with keyboard.
-        // additionalTextInputProps={
-        //   Platform.OS === 'ios'
-        //     ? {
-        //         // Done as per https://ui.gorhom.dev/components/bottom-sheet/keyboard-handling/ to solve keyboard hiding the text input in the chat inside bottom sheet.
-        //         onBlur: () => {
-        //           shouldHandleKeyboardEvents.value = false;
-        //           focusOutsideMessageInput();
-        //         },
-        //         onFocus: () => {
-        //           shouldHandleKeyboardEvents.value = true;
-        //         },
-        //       }
-        //     : {}
-        // }
+        // On Android, the default behaviour is as expected so we do not need to apply the fix to the text input to work with keyboard.
+        additionalTextInputProps={
+          Platform.OS === 'ios'
+            ? {
+                // Done as per https://ui.gorhom.dev/components/bottom-sheet/keyboard-handling/ to solve keyboard hiding the text input in the chat inside bottom sheet.
+                onBlur: () => {
+                  shouldHandleKeyboardEvents.value = false;
+                  focusOutsideMessageInput();
+                },
+                onFocus: () => {
+                  shouldHandleKeyboardEvents.value = true;
+                },
+              }
+            : {}
+        }
         // Hides the sticky date header component on the top of the MessageList
         hideStickyDateHeader={true}
         channel={channel}

sample-apps/react-native/dogfood/src/screens/Meeting/ChatScreen.tsx

@@ -17,7 +17,7 @@ import { AuthenticationProgress } from '../../components/AuthenticatingProgress'
 import { Channel as ChannelType } from 'stream-chat';
 import { MeetingStackParamList } from '../../../types';
 import { NativeStackScreenProps } from '@react-navigation/native-stack';
-import { useI18n, useTheme } from '@stream-io/video-react-native-sdk';
+import { useTheme } from '@stream-io/video-react-native-sdk';
 import {
   useAppGlobalStoreSetState,
   useAppGlobalStoreValue,
@@ -33,7 +33,6 @@ const ChannelHeader = () => {
   const chatLabelNoted = useAppGlobalStoreValue(
     (store) => store.chatLabelNoted,
   );
-  const { t } = useI18n();
   const appStoreSetState = useAppGlobalStoreSetState();
   const [isNoted, setIsNoted] = useState<boolean>(!!chatLabelNoted);
 
@@ -44,10 +43,8 @@ const ChannelHeader = () => {
   return (
     <View style={styles.header}>
       <Text style={styles.headerText}>
-        ℹ️{' '}
-        {t(
-          'Messages are currently visible to anyone with the link and valid session.',
-        )}
+        ℹ️ Messages are currently visible to anyone with the link and valid
+        session.
       </Text>
       <Pressable
         style={styles.notedButton}
@@ -56,7 +53,7 @@ const ChannelHeader = () => {
           appStoreSetState({ chatLabelNoted: true });
         }}
       >
-        <Text style={styles.notedButtonText}>{t('Noted')}</Text>
+        <Text style={styles.notedButtonText}>Noted</Text>
       </Pressable>
     </View>
   );
@@ -81,8 +78,8 @@ export const ChatScreen = ({ route }: ChatScreenProps) => {
 
   return (
     <SafeAreaView>
-      <StatusBar barStyle={'light-content'} />
-      <Channel channel={channel}>
+      <StatusBar barStyle="default" />
+      <Channel channel={channel} keyboardVerticalOffset={120}>
         <ChannelHeader />
         <MessageList />
         <MessageInput />