fix: reanimated warnings and expo layout

Author: isekovanic

examples/ExpoMessaging/app/channel/[cid]/index.tsx

@@ -4,17 +4,16 @@ import {
   Channel,
   MessageInput,
   useChatContext,
-  MessageFlashList,
   ThreadContextValue,
+  MessageList,
 } from 'stream-chat-expo';
 import { Stack, useLocalSearchParams, useRouter } from 'expo-router';
 import { AuthProgressLoader } from '../../../components/AuthProgressLoader';
 import { AppContext } from '../../../context/AppContext';
 import { useHeaderHeight } from '@react-navigation/elements';
 import InputButtons from '../../../components/InputButtons';
 import { MessageLocation } from '../../../components/LocationSharing/MessageLocation';
-import { SafeAreaView } from 'react-native-safe-area-context';
-import { StyleSheet } from 'react-native';
+import { Platform, StyleSheet, View } from 'react-native';
 
 export default function ChannelScreen() {
   const { client } = useChatContext();
@@ -67,26 +66,27 @@ export default function ChannelScreen() {
   }
 
   return (
-    <SafeAreaView edges={['bottom']} style={styles.container}>
+    <View style={styles.container}>
+      <Stack.Screen
+        options={{ title: 'Channel Screen', contentStyle: { backgroundColor: 'white' } }}
+      />
       <Channel
         audioRecordingEnabled={true}
         channel={channel}
         onPressMessage={onPressMessage}
-        keyboardVerticalOffset={headerHeight}
+        keyboardVerticalOffset={Platform.OS === 'ios' ? headerHeight : undefined}
         MessageLocation={MessageLocation}
         thread={thread}
       >
-        <Stack.Screen options={{ title: 'Channel Screen' }} />
-
-        <MessageFlashList
+        <MessageList
           onThreadSelect={(thread: ThreadContextValue['thread']) => {
             setThread(thread);
             router.push(`/channel/${channel.cid}/thread/${thread?.cid ?? ''}`);
           }}
         />
         <MessageInput InputButtons={InputButtons} />
       </Channel>
-    </SafeAreaView>
+    </View>
   );
 }
 

package/src/components/MessageInput/components/InputButtons/index.tsx

@@ -1,13 +1,7 @@
 import React, { useEffect } from 'react';
 import { StyleSheet } from 'react-native';
 
-import Animated, {
-  useAnimatedStyle,
-  useSharedValue,
-  withTiming,
-  ZoomIn,
-  ZoomOut,
-} from 'react-native-reanimated';
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
 
 import { OwnCapabilitiesContextValue } from '../../../../contexts';
 import {
@@ -60,11 +54,7 @@ export const InputButtonsWithContext = (props: InputButtonsWithContextProps) =>
   }
 
   return hasAttachmentUploadCapabilities ? (
-    <Animated.View
-      entering={ZoomIn.duration(200)}
-      exiting={ZoomOut.duration(200)}
-      style={[styles.attachButtonContainer, attachButtonContainer, animatedStyle]}
-    >
+    <Animated.View style={[styles.attachButtonContainer, attachButtonContainer, animatedStyle]}>
       <AttachButton />
     </Animated.View>
   ) : null;