fix: android issues

Author: Petr Konecny

example/examples/EnteringAnimationExample.tsx

@@ -33,9 +33,9 @@ const Slide = ({ image, title, index }: { image: string; title: string; index: n
 
   return (
     <View key={index} style={styles.slide}>
-      <Image key={image} source={{ uri: image }} style={styles.image} contentFit="cover" />
+      <Image source={{ uri: image }} style={styles.image} contentFit="cover" />
       <LinearGradient colors={['transparent', 'rgba(0,0,0,0.8)']} style={styles.gradient}>
-        <SlideAnimatedView {...animationConfig}>
+        <SlideAnimatedView style={styles.textContainer} {...animationConfig}>
           <Text style={styles.title}>{title}</Text>
           <Text style={styles.subtitle}>
             Animation: {animationNames[index % animationNames.length]}
@@ -68,6 +68,9 @@ export default function EnteringAnimationExample() {
 }
 
 const styles = StyleSheet.create({
+  textContainer: {
+    flex: 1,
+  },
   container: {
     flex: 1,
     backgroundColor: '#fff',

example/examples/VideoCarouselExample.tsx

@@ -3,29 +3,30 @@ import {
   CarouselContextProvider,
   useAutoCarouselSlideIndex,
 } from '@strv/react-native-hero-carousel'
-import { SafeAreaView, StyleSheet, View, Text, Pressable } from 'react-native'
+import { SafeAreaView, StyleSheet, View, Text, Pressable, Dimensions, Platform } from 'react-native'
 import { useVideoPlayer, VideoView } from 'expo-video'
 import { LinearGradient } from 'expo-linear-gradient'
 import { useActiveSlideEffect, useIsActiveSlide } from '@/hooks/useActiveSlideEffect'
 import { useEffect, useRef, useState } from 'react'
 import { TimerPagination } from './components/TimerPagination'
 import { useEvent, useEventListener } from 'expo'
 
+const { width, height } = Dimensions.get('window')
 // Sample video URLs - these are publicly available videos that work well for testing
 const videos = [
-  'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
-  'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4',
   'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4',
   'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4',
   'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4',
+  'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
+  'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4',
 ]
 
 const videoTitles = [
-  'Big Buck Bunny',
-  'Elephants Dream',
   'For Bigger Blazes',
   'For Bigger Escapes',
   'For Bigger Fun',
+  'Big Buck Bunny',
+  'Elephants Dream',
 ]
 
 const Slide = ({ videoUri, title, index }: { videoUri: string; title: string; index: number }) => {
@@ -58,26 +59,33 @@ const Slide = ({ videoUri, title, index }: { videoUri: string; title: string; in
   }, [isActiveSlide, duration, runAutoScroll])
 
   return (
-    <Pressable
-      key={index}
-      style={styles.slide}
-      onPress={() => {
-        if (isPlaying) {
-          player.pause()
-          intervalRef.current?.pause()
-        } else {
-          player.play()
-          intervalRef.current?.resume()
-        }
-      }}
-    >
-      <VideoView player={player} style={styles.video} contentFit="cover" nativeControls={false} />
-      <LinearGradient colors={['rgba(0,0,0,0.8)', 'transparent']} style={styles.topGradient} />
-      <LinearGradient colors={['transparent', 'rgba(0,0,0,0.8)']} style={styles.gradient}>
-        <Text style={styles.title}>{title}</Text>
-        <Text style={styles.subtitle}>Swipe to navigate • Tap to play/pause</Text>
-      </LinearGradient>
-    </Pressable>
+    <View style={styles.slide}>
+      <Pressable
+        key={index}
+        style={styles.slide}
+        onPress={() => {
+          if (isPlaying) {
+            player.pause()
+            intervalRef.current?.pause()
+          } else {
+            player.play()
+            intervalRef.current?.resume()
+          }
+        }}
+      >
+        <VideoView
+          player={player}
+          style={styles.video}
+          contentFit={Platform.OS === 'android' ? 'fill' : 'cover'}
+          nativeControls={false}
+        />
+        <LinearGradient colors={['rgba(0,0,0,0.8)', 'transparent']} style={styles.topGradient} />
+        <LinearGradient colors={['transparent', 'rgba(0,0,0,0.8)']} style={styles.gradient}>
+          <Text style={styles.title}>{title}</Text>
+          <Text style={styles.subtitle}>Swipe to navigate • Tap to play/pause</Text>
+        </LinearGradient>
+      </Pressable>
+    </View>
   )
 }
 
@@ -110,8 +118,8 @@ const styles = StyleSheet.create({
     overflow: 'hidden',
   },
   video: {
-    width: '100%',
-    height: '100%',
+    width: width,
+    height: height,
   },
   gradient: {
     position: 'absolute',

src/components/SlideAnimatedView/index.tsx

@@ -16,6 +16,7 @@ type SlideAnimatedViewProps = {
   layout?: AnimatedProps<ViewProps>['layout']
   enteringThreshold?: number
   exitingThreshold?: number
+  style?: AnimatedProps<ViewProps>['style']
 }
 
 export const SlideAnimatedView = ({
@@ -25,6 +26,7 @@ export const SlideAnimatedView = ({
   layout,
   enteringThreshold = 0.99,
   exitingThreshold = 0.01,
+  style,
 }: SlideAnimatedViewProps) => {
   const { index, total } = useAutoCarouselSlideIndex()
   const { scrollValue } = useCarouselContext()
@@ -36,7 +38,7 @@ export const SlideAnimatedView = ({
       thisValue: 1,
       valueAfter: 0,
     })
-  })
+  }, [index, total, scrollValue])
 
   // Track when value becomes 1 to trigger entering animation
   useAnimatedReaction(
@@ -57,14 +59,15 @@ export const SlideAnimatedView = ({
         runOnJS(setShouldShow)(false)
       }
     },
+    [enteringThreshold, exitingThreshold],
   )
 
   if (!shouldShow) {
     return null
   }
 
   return (
-    <Animated.View entering={entering} exiting={exiting} layout={layout}>
+    <Animated.View entering={entering} exiting={exiting} layout={layout} style={style}>
       {children}
     </Animated.View>
   )