fix: improve image and animation styles across screens

app/events/[eventId]/index.tsx

@@ -4,6 +4,7 @@ import { useCallback, useState } from "react";
 import {
   Dimensions,
   Image,
+  Platform,
   RefreshControl,
   SafeAreaView,
   ScrollView,
@@ -72,8 +73,11 @@ export default function EventScreen() {
               {query.data.imageUrl && (
                 <Image
                   source={{ uri: query.data.imageUrl }}
-                  width={Dimensions.get("window").width}
-                  height={Dimensions.get("window").width / (100 / 35)}
+                  style={{
+                    width: Dimensions.get("window").width,
+                    height: Dimensions.get("window").width / (100 / 35),
+                  }}
+                  className="object-contain"
                   resizeMode="contain"
                 />
               )}

app/index.tsx

@@ -54,7 +54,7 @@ export default function HomeScreen() {
         >
           <FadeInView>
             <EventList
-              className={cn("opacity-100 transition duration-500", {
+              className={cn("opacity-100 transition-all duration-500", {
                 "opacity-50": isRefreshing,
               })}
               eventsWithRoute={query.data}

components/fade-in-view.tsx

@@ -1,5 +1,4 @@
 import { ReactNode } from "react";
-import { Platform } from "react-native";
 import { preview } from "react-native-ide";
 import Animated, { FadeIn as AnimatedFadeIn } from "react-native-reanimated";
 
@@ -12,11 +11,7 @@ export const FadeInView = ({
   children?: ReactNode;
   props?: any;
 }) => {
-  const isWeb = Platform.OS === "web";
-
-  return isWeb ? (
-    <>{children}</>
-  ) : (
+  return (
     <Animated.View entering={AnimatedFadeIn} {...props}>
       {children}
     </Animated.View>