Corner video stuck in the actual frame and looping it

[ElMahdiAboulmanadel]

Firstly, thank you very much for this amazing component!

I installed and followed the usage instructions in a new Bare React Native app 0.75 using community cli. I can see the video (using the same uri in the examples) and also hear the sound perfectly but when I press and hold the video, the corner video gets stuck in the actual frame and repeats it. For information, I'm using React Navigation, navigation container and stack navigator and I put the videowrapper inside a bottom sheet.

            import * as React from 'react';
            import {Button} from '@ui/button';
            import {Text} from '@ui/text';
            import {HelpCircle} from '@lib/icons/Question';
            import {View, Dimensions} from 'react-native';
            import {useColorScheme} from '@lib/useColorScheme';
            import VideoWrapper from 'react-native-corner-video';
            import BottomSheetModal from '@components/ui/bottomDrawer';
            import type Video from 'react-native-video';

            // Constants for video source
            const VIDEO_SOURCE = 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4';

            function VideoContent({
              screenName,
              isVisible,
              onClose,
            }: {
              screenName: string;
              isVisible: boolean;
              onClose: () => void;
            }) {
              const {isDarkColorScheme} = useColorScheme();
              const windowHeight = Dimensions.get('window').height;
              const videoRef = React.useRef<typeof Video>(null);
              const [currentTime, setCurrentTime] = React.useState(0);

              // Handle video time updates
              const handleProgress = (progress: { currentTime: number }) => {
                setCurrentTime(progress.currentTime);
              };

              // Corner video configuration
              const cornerConfig = {
                videoProps: {
                  source: { uri: VIDEO_SOURCE },
                  resizeMode: 'cover',
                  controls: true,
                  repeat: true,
                  muted: false,
                  volume: 100,
                  playInBackground: true,
                  onProgress: handleProgress,
                  ref: videoRef,
                  controlsStyles: {
                    hideForward: true,
                    hideRewind: true,
                    hideNext: true,
                    hidePrevious: true,
                  },
                },
                cornerProps: {
                  width: 160,  // Smaller size for corner video
                  height: 90,  // 16:9 aspect ratio
                  top: 20,     // Padding from top
                  right: 20,   // Padding from right
                  bottom: 0,
                  left: 0,
                },
              };

              return (
                <BottomSheetModal
                  isVisible={isVisible}
                  onClose={onClose}
                  headerText={`Tutorial: How to use ${screenName}?`}
                  height={windowHeight * 0.85}
                  backdropOpacity={0.7}
                  containerStyle={{
                    backgroundColor: isDarkColorScheme ? '#1F1F1F' : '#fff',
                    shadowColor: 'black',
                    shadowOpacity: 0.2,
                    borderTopLeftRadius: 20,
                    borderTopRightRadius: 20,
                  }}>
                  <View className="p-4">
                    <View
                      style={{
                        marginTop: 15,
                        height: 500,
                        width: '100%',
                        backgroundColor: 'black',
                        borderRadius: 20,
                        overflow: 'hidden',
                      }}>
                      <VideoWrapper
                        {...cornerConfig}
                        style={{
                          height: 500,
                          borderRadius: 20,
                          width: '100%',
                        }}
                      />
                    </View>
                    <View className="mt-4">
                      <Text className="text-center text-sm text-gray-500">
                        Press and hold the video to minimize it while using the app
                      </Text>
                    </View>
                  </View>
                </BottomSheetModal>
              );
            }

            const TutorialVideo = ({screenName}: {screenName: string}) => {
              const [isVisible, setIsVisible] = React.useState(false);

              return (
                <>
                  <Button
                    onPress={() => setIsVisible(true)}
                    className="bg-transparent h-fit w-4">
                    <HelpCircle
                      strokeWidth={1.6}
                      className="text-black dark:text-white"
                    />
                  </Button>
                  <VideoContent
                    screenName={screenName}
                    isVisible={isVisible}
                    onClose={() => setIsVisible(false)}
                  />
                </>
              );
            };

            export default TutorialVideo;

• BottomScheetModal code :

          import {useState, useEffect, ReactNode, useCallback} from 'react';
          import {
            Modal,
            View,
            TouchableOpacity,
            StyleSheet,
            Dimensions,
            Pressable,
            Animated,
            ViewStyle,
            StyleProp,
          } from 'react-native';
  
          import {X} from '@lib/icons/Close';
          import {Check} from '@lib/icons/Check';
          import {Text} from '@ui/text';
  
          const windowHeight = Dimensions.get('window').height;
          const windowWidth = Dimensions.get('window').width;
  
          interface CustomTextProps {
            text: string;
            size?: number;
            family?: string;
            letterSpacing?: number;
            align?: 'auto' | 'left' | 'right' | 'center' | 'justify';
            leading?: number;
            style?: object;
            className?: string;
          }
  
          const CustomText = ({
            text,
            size = 14,
            family = 'Poppins',
            letterSpacing = -0.02,
            align = 'left',
            leading,
            style = {},
            className = '',
          }: CustomTextProps) => (
            <Text
              className={`text-gray-900 dark:text-gray-100 ${className}`}
              style={[
                {
                  fontFamily: family,
                  letterSpacing: letterSpacing,
                  textAlign: align,
                  lineHeight: leading,
                },
                style,
              ]}>
              {text}
            </Text>
          );
  
          interface BottomSheetModalProps {
            isVisible: boolean;
            onClose: () => void;
            headerText?: string;
            headerComponent?: ReactNode;
            showCloseButton?: boolean;
            closeButtonPosition?: 'left' | 'right';
            customCloseButton?: ReactNode;
            children?: ReactNode;
            footer?: ReactNode;
            height?: number | string;
            backgroundColor?: string;
            borderRadius?: number;
            padding?: number;
            backdropColor?: string;
            backdropOpacity?: number;
            animationDuration?: number;
            animationType?: 'slide' | 'fade' | 'both';
            closeOnBackdropPress?: boolean;
            enableDragToClose?: boolean;
            dragThreshold?: number;
            containerStyle?: StyleProp<ViewStyle>;
            headerStyle?: StyleProp<ViewStyle>;
            contentStyle?: StyleProp<ViewStyle>;
            footerStyle?: StyleProp<ViewStyle>;
            successIcon?: boolean;
          }
  
          const BottomSheetModal = ({
            isVisible,
            onClose,
            headerText,
            headerComponent,
            showCloseButton = true,
            closeButtonPosition = 'right',
            customCloseButton,
            children,
            footer,
            height = windowHeight * 0.6,
            backgroundColor = 'white',
            borderRadius = 10,
            padding = 20,
            backdropColor = 'black',
            backdropOpacity = 0.3,
            animationDuration = 300,
            animationType = 'both',
            closeOnBackdropPress = true,
            enableDragToClose = true,
            dragThreshold = 50,
            containerStyle,
            headerStyle,
            contentStyle,
            footerStyle,
            successIcon = false,
          }: BottomSheetModalProps) => {
            const [modalVisible, setModalVisible] = useState(isVisible);
            const [fadeAnim] = useState(new Animated.Value(0));
            const [slideAnim] = useState(new Animated.Value(windowHeight));
  
            const animateIn = useCallback(() => {
              setModalVisible(true);
              Animated.parallel([
                Animated.timing(fadeAnim, {
                  toValue: 1,
                  duration: animationDuration,
                  useNativeDriver: true,
                }),
                Animated.spring(slideAnim, {
                  toValue: 0,
                  tension: 50,
                  friction: 10,
                  useNativeDriver: true,
                }),
              ]).start();
            }, [fadeAnim, slideAnim, animationDuration]);
  
            const animateOut = useCallback(() => {
              Animated.parallel([
                Animated.timing(fadeAnim, {
                  toValue: 0,
                  duration: animationDuration,
                  useNativeDriver: true,
                }),
                Animated.timing(slideAnim, {
                  toValue: windowHeight,
                  duration: animationDuration,
                  useNativeDriver: true,
                }),
              ]).start(() => {
                setModalVisible(false);
                onClose();
              });
            }, [fadeAnim, slideAnim, animationDuration, onClose]);
  
            useEffect(() => {
              if (isVisible) {
                animateIn();
              }
            }, [isVisible, animateIn]);
  
            const handleClose = useCallback(() => {
              animateOut();
            }, [animateOut]);
  
            const renderHeader = () => {
              if (headerComponent) {
                return headerComponent;
              }
  
              return (
                <View
                  style={[
                    styles.header,
                    closeButtonPosition === 'left' && styles.headerReverse,
                    headerStyle,
                  ]}
                  >
                  <View style={styles.headerContent}>
                    {successIcon && (
                      <View style={styles.successIconContainer}>
                        <Check className="text-white" size={16} />
                      </View>
                    )}
                      {headerText && (
                      <CustomText
                        text={headerText}
                        family="Poppins-med"
                        size={16}
                        className={`text-gray-500 dark:text-gray-400 ${successIcon ? 'text-green-600 dark:text-green-300' : ''}`}
                      />
                      )}
                  </View>
                  {showCloseButton && (
                    <TouchableOpacity
                      onPress={handleClose}
                      className="p-2 align-middle justify-end rounded-full hover:bg-gray-100 dark:hover:bg-gray-800">
                      {customCloseButton || <X className="text-gray-500 dark:text-gray-400" />}
                    </TouchableOpacity>
                  )}
                </View>
              );
            };
  
            if (!modalVisible && !isVisible) {
              return null;
            }
  
            return (
              <Modal
                transparent={true}
                visible={modalVisible}
                onRequestClose={handleClose}
                animationType="none">
                <View style={[StyleSheet.absoluteFill, styles.modalContainer]}>
                  <Animated.View
                    style={[
                      StyleSheet.absoluteFill,
                      {
                        backgroundColor: backdropColor,
                        opacity: fadeAnim.interpolate({
                          inputRange: [0, 1],
                          outputRange: [0, backdropOpacity],
                        }),
                      },
                    ]}>
                    <Pressable
                      onPress={closeOnBackdropPress ? handleClose : undefined}
                      style={StyleSheet.absoluteFill}
                    />
                  </Animated.View>
  
                  <Animated.View
                    style={[
                      styles.bottomSheet,
                      {
                        height: typeof height === 'number' ? height : windowHeight * 0.6,
                        borderTopLeftRadius: borderRadius,
                        borderTopRightRadius: borderRadius,
                        padding,
                        transform: [{
                          translateY: slideAnim,
                        }],
                      },
                      containerStyle,
                    ]} className='bg-white dark:bg-gray-900'>
                    {enableDragToClose && (
                      <View style={styles.dragHandle} className='bg-gray-200 dark:bg-white/20'/>
                    )}
  
                    {(headerText || headerComponent || showCloseButton) && renderHeader()}
  
                    <View style={[styles.content, contentStyle]}>
                      {children}
                    </View>
  
                    {footer && (
                      <View style={[styles.footer, footerStyle]}>
                        {footer}
                      </View>
                    )}
                  </Animated.View>
                </View>
              </Modal>
            );
          };
  
          const styles = StyleSheet.create({
            container: {
              flex: 1,
              justifyContent: 'center',
              alignItems: 'center',
            },
            modalContainer: {
              flex: 1,
              justifyContent: 'flex-end',
              backgroundColor: 'transparent',
            },
            openButton: {
              padding: 10,
              borderRadius: 5,
            },
            bottomSheet: {
              position: 'relative',
              width: '100%',
              borderWidth: 1,
              borderColor: 'rgba(0,0,0,0.1)',
            },
            header: {
              width: '100%',
              flexDirection: 'row',
              justifyContent: 'space-between',
              alignItems: 'center',
              marginBottom: 15,
            },
            headerReverse: {
              flexDirection: 'row-reverse',
            },
            headerContent: {
              flexDirection: 'row',
              alignItems: 'center',
              gap: 12,
            },
            successIconContainer: {
              width: 24,
              height: 24,
              borderRadius: 12,
              backgroundColor: '#22C55E', // Tailwind's green-500
              justifyContent: 'center',
              alignItems: 'center',
            },
            content: {
              flex: 1,
              width: '100%',
            },
            footer: {
              width: '100%',
              paddingTop: 15,
              borderTopWidth: 1,
              borderTopColor: 'rgba(0,0,0,0.1)',
            },
            dragHandle: {
              width: 40,
              height: 4,
              borderRadius: 2,
              alignSelf: 'center',
              marginBottom: 10,
            },
          });
  
          export default BottomSheetModal;

• App.tsx :

          import '../global.css';
  
          import AsyncStorage from '@react-native-async-storage/async-storage';
          import {Theme, ThemeProvider} from '@react-navigation/native';
          import {StatusBar} from 'react-native';
          import * as React from 'react';
          import {NavigationContainer} from '@react-navigation/native';
          import {createNativeStackNavigator} from '@react-navigation/native-stack';
          import {NAV_THEME} from '@lib/constants';
          import {useColorScheme} from '@lib/useColorScheme';
          import {PortalHost} from '@rn-primitives/portal';
  
          import {DefaultTheme, DarkTheme} from '@react-navigation/native';
  
          import ContactUs from './AppScreens/ContactUs';
  
          import {VideoProvider} from 'react-native-corner-video';
  
          const LIGHT_THEME: Theme = {
            dark: false,
            colors: NAV_THEME.light,
          };
          const DARK_THEME: Theme = {
            dark: true,
            colors: NAV_THEME.dark,
          };
  
          const Stack = createNativeStackNavigator();
  
          export default function RootLayout() {
            const {colorScheme, setColorScheme, isDarkColorScheme} = useColorScheme();
            const [isColorSchemeLoaded, setIsColorSchemeLoaded] = React.useState(false);
  
            React.useEffect(() => {
              (async () => {
                const theme = await AsyncStorage.getItem('theme');
                if (!theme) {
                  AsyncStorage.setItem('theme', colorScheme);
                  setIsColorSchemeLoaded(true);
                  return;
                }
                const colorTheme = theme === 'dark' ? 'dark' : 'light';
                if (colorTheme !== colorScheme) {
                  setColorScheme(colorTheme);
  
                  setIsColorSchemeLoaded(true);
                  return;
                }
                setIsColorSchemeLoaded(true);
              })();
            }, []);
  
            if (!isColorSchemeLoaded) {
              return null;
            }
  
            return (
              <ThemeProvider value={isDarkColorScheme ? DARK_THEME : LIGHT_THEME}>
                <StatusBar
                  barStyle={isDarkColorScheme ? 'light-content' : 'dark-content'}
                  backgroundColor={
                    isDarkColorScheme
                      ? NAV_THEME.dark.background
                      : NAV_THEME.light.background
                  }
                />
                <VideoProvider>
                  <NavigationContainer
                    theme={isDarkColorScheme ? DarkTheme : DefaultTheme}>
                    <Stack.Navigator>
                      <Stack.Screen
                        name="ContactUs"
                        component={ContactUs}
                        options={{
                          headerShown: false,
                        }}
                      />
  
                    </Stack.Navigator>
                  </NavigationContainer>
                </VideoProvider>
                <PortalHost />
              </ThemeProvider>
            );
          }

[ElMahdiAboulmanadel]

Here is the fix that worked perfectly for me:

• MyApp/node_modules/react-native-corner-video/src/components/CornerVideo.tsx

        /* eslint-disable react-hooks/exhaustive-deps */
        import React, { useEffect, useRef, useState } from 'react';
        import {
          ActivityIndicator,
          Image,
          StyleSheet,
          TouchableOpacity,
        } from 'react-native';
        import Animated, {
          useAnimatedStyle,
          useSharedValue,
          withSpring,
        } from 'react-native-reanimated';
        import { Gesture, GestureDetector } from 'react-native-gesture-handler';
        import Video from 'react-native-video';
  
        import type { CornerVideoProps } from './VideoWrapper';
        import { Measure, VideoProvider } from 'react-native-corner-video';
        import { handler } from '../utils/handler';
  
        interface Props {
          currentTime: number;
          props: CornerVideoProps;
          positions: Measure;
        }
  
        const CornerVideo = ({ currentTime, props, positions }: Props) => {
          const { cornerProps, videoProps } = props;
  
          const [loaded, setLoaded] = useState<boolean>(false);
          const ref = useRef(Video.prototype);
          const width = useSharedValue(positions.w);
          const height = useSharedValue(positions.h);
          const top = useSharedValue(positions.y);
          const left = useSharedValue(positions.x);
          const dragX = useSharedValue(0);
          const dragY = useSharedValue(0);
          const offsetX = useSharedValue(0);
          const offsetY = useSharedValue(0);
  
          useEffect(() => {
            animate();
          }, []);
  
          useEffect(() => {
            setLoaded(false);
            // @ts-ignore
          }, [props.videoProps.source.uri]);
  
          const animate = () => {
            width.value = withSpring(cornerProps.width, { damping: 15 });
            height.value = withSpring(cornerProps.height, { damping: 15 });
            top.value = withSpring(cornerProps.top, { damping: 15 });
            left.value = withSpring(cornerProps.left, { damping: 15 });
          };
  
          const onGesture = Gesture.Pan()
            .onUpdate((e) => {
              dragX.value = offsetX.value + e.translationX;
              dragY.value = offsetY.value + e.translationY;
            })
            .onEnd((e) => {
              const { x, y } = handler({
                e,
                props: {
                  cornerProps,
                  videoProps,
                },
              });
              offsetX.value = x;
              offsetY.value = y;
              dragX.value = withSpring(x, { damping: 15 });
              dragY.value = withSpring(y, { damping: 15 });
            });
  
          const dragStyle = useAnimatedStyle(() => {
            return {
              transform: [{ translateX: dragX.value }, { translateY: dragY.value }],
            };
          });
  
          const animatedStyle = useAnimatedStyle(() => {
            return {
              width: width.value,
              height: height.value,
              top: top.value,
              left: left.value,
            };
          });
  
          return (
            <GestureDetector gesture={onGesture}>
              <Animated.View
                style={[
                  styles.cornerVideo,
                  {
                    width: positions.w,
                    height: positions.h,
                    top: positions.y,
                    left: positions.x,
                  },
                  dragStyle,
                  animatedStyle,
                ]}
              >
                <Video
                  ref={ref}
                  style={styles.videoPlayer}
                  resizeMode="cover"
                  onLoad={ () => {
                    ref.current.seek(currentTime)
                  }
                  }
                  onReadyForDisplay={() => {
                    setLoaded(true);
                  }}
                  {...videoProps}
  
                  source={{
                    uri: videoProps.source?.uri,
                  }}
                />
                {!loaded && (
                  <ActivityIndicator
                    style={{ position: 'absolute' }}
                    color="#444"
                    size="small"
                  />
                )}
                <TouchableOpacity
                  activeOpacity={0.8}
                  onPress={() => VideoProvider.hide()}
                  style={styles.closeBtn}
                >
                  <Image
                    style={styles.closeImg}
                    source={require('../assets/close.png')}
                    resizeMode="contain"
                  />
                </TouchableOpacity>
              </Animated.View>
            </GestureDetector>
          );
        };
  
        const styles = StyleSheet.create({
          cornerVideo: {
            width: 150,
            height: 100,
            position: 'absolute',
            justifyContent: 'center',
            alignItems: 'center',
            top: 50,
            left: 7,
            borderRadius: 10,
            overflow: 'hidden',
            backgroundColor: '#EEE',
          },
          videoPlayer: {
            width: '100%',
            height: '100%',
          },
          closeBtn: {
            justifyContent: 'center',
            alignItems: 'center',
            position: 'absolute',
            top: 5,
            left: 5,
            width: 25,
            height: 25,
            borderRadius: 15,
            backgroundColor: 'rgba(0,0,0, .4)',
          },
          closeImg: {
            tintColor: '#fff',
            width: 10,
            height: 10,
          },
        });
  
        export default CornerVideo;

[ElMahdiAboulmanadel]

I used Patch-package to create the following patch, feel free to use it. react-native-corner-video+1.0.2.patch