android can't touch

Not sure this is possible also.

Thanks.

Hi,
If there is any element on top of the VideoPlayer.. even that element comes in the view of full screen

When the video is loading from url, I want to show the thumbnail image on the player.
Is there any way to achieve the same ?

how can I add a child component to render more components in the description box?

I tried to implement the logic below, I want to make the user go back to the previous screen when clicking on the backButton, but the event is not triggered!

My code:

export const VideoScreen = function (props: VideoScreenProps) {

  const navigation = useNavigation()

  const videoRef = React.useRef<VideoPlayerRef>();
  const videoHeight = useSharedValue(width * (9 / 16));
  const isFullScreen = useSharedValue(false);

  const [paused, setPaused] = useState(false);

  return (
    <SafeAreaProvider>
      <GestureHandlerRootView >
        <VideoPlayer
          ref={videoRef}
          navigation={navigation}
          theme={{
            minimumTrackTintColor: Colors.primary,
            bubbleBackgroundColor: Colors.primary,
          }}
          source={{
            uri: 'my url goes here!'
          }}
          onTapBack={() => {
            console.log('onTapBack') // <--------- does not print on the console when clicking on the backButton
            Alert.alert('onTapBack');
          }}
          headerBarTitle={'Darling in the Franxx'}
          onPausedChange={setPaused}
          videoHeight={videoHeight}
          paused={paused}
          isFullScreen={isFullScreen}
        />
      </GestureHandlerRootView>
    </SafeAreaProvider>
  );
}

Does it depend on lottie-react-native? I don't have lottie-react-native installed and I'm getting errors. Your documentation dependencies do not indicate that lottie-react-native is required

f you are sure the module exists, try these steps:

1. Clear watchman watches: watchman watch-del-all
2. Delete node_modules and run yarn install
3. Reset Metro's cache: yarn start --reset-cache
4. Remove the cache: rm -rf /tmp/metro-*
   1 | /* eslint-disable no-undef */

2 | import LottieView from 'lottie-react-native';
| ^

hi, player controls are not working on android.

import React from "react";
import Navigators from "./src/navigators";
import Store from "./src/Store";
import { Provider } from "react-redux";
import {
initialWindowMetrics,
SafeAreaProvider,
} from "react-native-safe-area-context";
import VideoPlayer from "react-native-reanimated-player";
import { useSharedValue } from "react-native-reanimated";

export default () => {
const videoHeight = useSharedValue(300);
const isFullScreen = useSharedValue(false);

return (

<VideoPlayer
showOnStart={true}
source={{
uri: "https://famee.bitwork.tech/public/uploads/BkHyttGZb9.mp4",
}}
headerTitle={"Title in full screen mode"}
onTapBack={() => {
// Alert.alert('onTapBack');
}}
onTapMore={() => {
// Alert.alert('onTapMore');
}}
onPausedChange={(state) => {
//Alert.alert(onPausedChange: ${state});
//setPaused(state);
}}
videoHeight={videoHeight}
//paused={paused}
isFullScreen={isFullScreen}
disableControl={false}
/>

);
};

at start controls shows but after playing video, they disapears

Is there something extra we have to do to get the fullscreen button press to work? There currently is no feedback or output when you press the icon.

If we add some view above the player, the full screen render incorrectly.
Please check the screenshots for the same.

hello, there is a bug with reanimated 3.

project detail:
"react": "18.2.0",
"react-native": "0.71.2",
"react-native-reanimated": "^3.0.2",
"react-native-reanimated-player": "^2.3.0",

I wanted to add a proximity banner inside the component video.

My idea is to move to another screen

With a behavior similar to that of the youtube player.

Is there any way to hide these controls ?

Back icon
Settings icon
Autoplay icon
Play pause icon

Please let me know.

Thanks

Firstly, I found this module from your react-native-awesome-slider. I've taken some time to look through the source code and example. It's great, using reanimated v2 for this kind of animation work is the way forward.

Whilst testing the example on an Android emulator I found that there is inconsistency between when singleTapHandler and doubleTapHandler when is fired. For example adding console.logs:

    const singleTapHandler = useAnimatedGestureHandler<
      GestureEvent<TapGestureHandlerEventPayload>
    >({
      onActive: () => {
        console.log('singleTapHandler')
        if (controlViewOpacity.value === 0) {
          controlViewOpacity.value = withTiming(1, controlAnimteConfig);
          setControlTimeout();
        } else {
          controlViewOpacity.value = withTiming(0, controlAnimteConfig);
        }
      },
    });

    const doubleTapHandler = useAnimatedGestureHandler<
      GestureEvent<TapGestureHandlerEventPayload>,
      {
        isAlive: boolean;
      }
    >({
      onStart: ({ x }, ctx) => {
        console.log('doubleTapHandler, onStart')
        if (x > leftDoubleTapBoundary && x < rightDoubleTapBoundary) {
          ctx.isAlive = false;
          return;
        } else {
          ctx.isAlive = true;
        }
      },
      onActive: ({ x, y, numberOfPointers }, ctx) => {
        console.log('doubleTapHandler, onActive')
        if (numberOfPointers !== 1) return;
        if (!ctx.isAlive) {
          resetControlTimeout();
          if (controlViewOpacity.value === 0) {
            showControlAnimation();
            return;
          }
        }

        if (x < leftDoubleTapBoundary) {
          doubleLeftOpacity.value = 1;
          rippleLeft.current?.onPress({ x, y });
          runOnJS(seekByStep)(true);
          return;
        }

        if (x > rightDoubleTapBoundary) {
          doubleRightOpacity.value = 1;
          rippleRight.current?.onPress({
            x: x - rightDoubleTapBoundary,
            y,
          });
          runOnJS(seekByStep)(false);

          return;
        }
      },
    });

If I tap the play button once:

1. singleTapHandler
2. doubleTapHandler, onStart

This is only one scenario I've observed but "doubleTapHandler, onStart'" is never logged out in all cases so you can never go 10s forward or backwards. Strangely this problem does not appear on the iOS simulator so my suspicion is that it might be to do with react-native-gesture-handler and its Android integration but I can't be sure as this module uses the v1 and the v2 changes are substantial (I noticed that you have v2 as on your todo).

Long story short have you seen this issue before and do you know what might be causing it?

I am trying to make youtube in expo and using react-native-reanimated-player to stream videos. However i am not able to see any control while clicking on video player. Player is not responding to any touch.