React Native Youtube-iframe

https://lonelycpp.github.io/react-native-youtube-iframe
Admin
A React Native wrapper for the YouTube iframe API that enables seamless video playback on iOS and...
Tokens:8,362
Snippets:67
Trust Score:8.3
Update:10 months ago
Show doc for...
Tokens:
Raw
### Basic YouTube Player Usage in React Native

Source: https://lonelycpp.github.io/react-native-youtube-iframe/component-ref-methods

Demonstrates the basic setup and usage of the YoutubePlayer component. It shows how to initialize the player with a video ID and access player controls like getting current time and duration via a button press. It uses the useRef hook to get a reference to the player instance.

```javascript
import React, {useRef} from 'react';
import YoutubePlayer, {YoutubeIframeRef} from "react-native-youtube-iframe";

const App = () => {
  const playerRef = useRef();
  // typescript  // const playerRef = useRef<YoutubeIframeRef>(null);

  return (
    <YoutubePlayer
      ref={playerRef}
      height={400}
      width={400}
      videoId={'AVAc1gYLZK0'}
    />
    <Button
      title="log details"
      onPress={() => {
        playerRef.current?.getCurrentTime().then(
          currentTime => console.log({currentTime})
        );
        playerRef.current?.getDuration().then(
          getDuration => console.log({getDuration})
        );
      }}
    />
  );
};

```

--------------------------------

### Example of Playlist ID and Video IDs

Source: https://lonelycpp.github.io/react-native-youtube-iframe/component-props

Demonstrates how to specify a playlist using either a playlist ID or an array of video IDs. This prop is used to control the sequence of videos played in the iframe.

```javascript
playList={'PLbpi6ZahtOH6Blw3RGYpWkSByi_T7Rygb'}
or
playList={['QRt7LjqJ45k', 'fHsa9DqmId8']}
```

--------------------------------

### Prevent Kebab Menu Interaction with TouchableOpacity Overlay

Source: https://lonelycpp.github.io/react-native-youtube-iframe/remove-context-share

This example shows how to make the kebab menu (three dots, including the share option) on the YouTube player un-interactable. It achieves this by placing an absolutely positioned `TouchableOpacity` over the top portion of the player. This overlay intercepts user touches, preventing them from reaching the actual menu elements within the webview. The height of the overlay needs to be adjusted to cover the target UI elements.

```jsx
<View>
  <YoutubePlayer height={300} videoId={'XSqi5s3rfqk'} />
  <TouchableOpacity
    // TouchableOpacity to "steal" taps
    // absolutely positioned to the top
    // height must be adjusted to
    // just cover the top 3 dots
    style={{
      top: 0,
      height: 50,
      width: '100%',
      position: 'absolute',
    }}
  />
</View>
```

--------------------------------

### Get Available YouTube Playback Rates

Source: https://lonelycpp.github.io/react-native-youtube-iframe/component-ref-methods

The getAvailablePlaybackRates() function returns a promise that resolves to an array of numbers representing the available playback speeds, ordered from slowest to fastest. Even if variable speeds are not supported, the array will always contain at least 1.

```javascript
playerRef.current?.getAvailablePlaybackRates().then(rates => console.log({rates}));
```

--------------------------------

### Get YouTube Player Volume

Source: https://lonelycpp.github.io/react-native-youtube-iframe/component-ref-methods

The getVolume() function returns a promise that resolves to the player's current volume level, represented as an integer between 0 and 100. This function returns the volume even if the player is muted.

```javascript
playerRef.current?.getVolume().then(volume => console.log({volume}));
```

--------------------------------

### Get Current YouTube Video Playback Time

Source: https://lonelycpp.github.io/react-native-youtube-iframe/component-ref-methods

The getCurrentTime() function returns a promise that resolves to the elapsed time in seconds since the video started playing.

```javascript
playerRef.current?.getCurrentTime().then(currentTime => console.log({currentTime}));
```

--------------------------------

### Get Current YouTube Playback Rate

Source: https://lonelycpp.github.io/react-native-youtube-iframe/component-ref-methods

The getPlaybackRate() function returns a promise that resolves to the current playback rate of the video. The default rate is 1 (normal speed), but it can include values like 0.25, 0.5, 1.5, and 2.

```javascript
playerRef.current?.getPlaybackRate().then(playbackRate => console.log({playbackRate}));
```

--------------------------------

### Get YouTube Video Duration

Source: https://lonelycpp.github.io/react-native-youtube-iframe/component-ref-methods

The getDuration() function returns a promise that resolves to the total duration of the video in seconds. For live events, it returns the elapsed time since the stream began. This function returns 0 until the video's metadata is loaded.

```javascript
playerRef.current?.getDuration().then(getDuration => console.log({getDuration}));
```

--------------------------------

### Event Handling: onReady

Source: https://lonelycpp.github.io/react-native-youtube-iframe/component-props

This function is executed once the YouTube player has fully loaded and is ready to accept commands. It's typically used to initiate playback or perform other actions immediately after the player is ready.

```javascript
onReady={(event) => {
  // Player is ready, execute actions
}}
```

--------------------------------

### Initial Player Parameters

Source: https://lonelycpp.github.io/react-native-youtube-iframe/component-props

Defines parameters that are initialized when the player mounts, affecting initial player behavior and appearance.

```APIDOC
## initialPlayerParams

### Description
A set of parameters that are initialized when the player mounts. Changing these parameters might cause the player to restart or not change at all until it is remounted.

### Method
`initialPlayerParams` (object)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **loop** (boolean) - Optional - Defaults to `false`. Whether the video should loop.
- **controls** (boolean) - Optional - Defaults to `true`. Whether to display player controls.
- **cc_lang_pref** (string) - Optional - Preferred language for closed captions.
- **showClosedCaptions** (boolean) - Optional - Defaults to `false`. Whether to show closed captions.
- **color** (string) - Optional - Defaults to `'red'`. The color of the player's buffer and play progress bar.
- **start** (Number) - Optional - The time in seconds where the video should start.
- **end** (Number) - Optional - The time in seconds where the video should end.
- **preventFullScreen** (boolean) - Optional - Defaults to `false`. Whether to prevent the fullscreen button from appearing.
- **playerLang** (String) - Optional - The language of the player's interface.
- **iv_load_policy** (Number) - Optional - Controls how annotations are loaded.
- **modestbranding** (boolean) - Optional - Defaults to `false`. Whether to use modest branding for the YouTube logo.
- **rel** (boolean) - Optional - Defaults to `false`. Whether to show related videos at the end of the video.

### Request Example
```json
{
  "initialPlayerParams": {
    "loop": true,
    "controls": false,
    "start": 10,
    "modestbranding": true
  }
}
```

### Response
#### Success Response (N/A)
This is a configuration parameter, not an API call with a direct response.

#### Response Example
N/A
```

--------------------------------

### getYoutubeMeta

Source: https://lonelycpp.github.io/react-native-youtube-iframe/module-methods

Fetches metadata for a given YouTube video using the oEmbed specification. This includes information such as the video title, author, thumbnail details, and embeddable HTML.

```APIDOC
## GET /oembed/v1/embed

### Description
Fetches metadata of a youtube video using the oEmbed Spec - https://oembed.com/#section7.

### Method
GET

### Endpoint
/oembed/v1/embed

### Parameters
#### Query Parameters
- **videoId** (String) - Required - The ID of the YouTube video.

### Request Example
```json
{
  "videoId": "sNhhvQGsMEc"
}
```

### Response
#### Success Response (200)
- **author_name** (String) - The name of the author/owner of the video.
- **author_url** (String) - YouTube channel link of the video.
- **height** (Number) - The height in pixels required to display the HTML.
- **html** (String) - The HTML required to embed a video player.
- **provider_name** (String) - The name of the resource provider.
- **provider_url** (String) - The URL of the resource provider.
- **thumbnail_height** (Number) - The height of the video thumbnail.
- **thumbnail_url** (String) - The URL of the video thumbnail.
- **thumbnail_width** (Number) - The width of the video thumbnail.
- **title** (String) - YouTube video title.
- **type** (String) - The oEmbed version number.
- **version** (String) - The resource type.
- **width** (Number) - The width in pixels required to display the HTML.

#### Response Example
```json
{
  "author_name": "ExampleChannel",
  "author_url": "https://www.youtube.com/user/ExampleChannel",
  "height": 360,
  "html": "<iframe width=\"640\" height=\"360\" src=\"https://www.youtube.com/embed/sNhhvQGsMEc\" frameborder=\"0\" allowfullscreen></iframe>",
  "provider_name": "YouTube",
  "provider_url": "https://www.youtube.com",
  "thumbnail_height": 360,
  "thumbnail_url": "https://i.ytimg.com/vi/sNhhvQGsMEc/hqdefault.jpg",
  "thumbnail_width": 480,
  "title": "Example Video Title",
  "type": "video",
  "version": "1.0",
  "width": 640
}
```
```

--------------------------------

### WebView Integration

Source: https://lonelycpp.github.io/react-native-youtube-iframe/component-props

Props for configuring the underlying react-native-webview component.

```APIDOC
## webViewProps

### Description
Props that are supplied to the underlying webview (react-native-webview). A full list of props can be found in the `react-native-webview` documentation.

### Method
`webViewProps` (object)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **props** (object) - An object containing props to be passed to the `react-native-webview` component.

### Request Example
```json
{
  "webViewProps": {
    "originWhitelist": ["*"]
  }
}
```

### Response
#### Success Response (N/A)
This is a configuration prop.

#### Response Example
N/A
```

--------------------------------

### Player Configuration: Dimensions and Volume

Source: https://lonelycpp.github.io/react-native-youtube-iframe/component-props

These props allow setting the dimensions and volume of the YouTube player. 'width' and 'height' define the player's size, while 'volume' controls the audio level from 0 to 100.

```javascript
height={200}
width={300}
volume={50}
```

--------------------------------

### Player Configuration: Base URL and Local HTML

Source: https://lonelycpp.github.io/react-native-youtube-iframe/component-props

The 'baseUrlOverride' prop allows specifying a custom URL for the iframe source, useful for self-hosting. 'useLocalHTML' enables rendering using locally generated HTML content within the webview.

```javascript
baseUrlOverride="https://your-custom-domain.com/iframe.html"
useLocalHTML={true}
```

--------------------------------

### Event Handling: onPlaybackQualityChange

Source: https://lonelycpp.github.io/react-native-youtube-iframe/component-props

This function is called when the video playback quality changes. It receives a string indicating the new quality level, such as 'small', 'medium', 'hd720', etc. This can be useful for adapting the user experience based on available bandwidth.

```javascript
onPlaybackQualityChange={(quality) => {
  // Handle quality change
}}
```

--------------------------------

### Fetch YouTube Video Metadata with getYoutubeMeta

Source: https://lonelycpp.github.io/react-native-youtube-iframe/module-methods

The `getYoutubeMeta` function fetches metadata for a given YouTube video ID using the oEmbed specification. It returns a Promise that resolves with an object containing various details about the video, such as title, author, thumbnail information, and embeddable HTML. This function is useful for displaying video information before or after playback.

```javascript
import { Alert } from 'react-native';
import { getYoutubeMeta } from 'react-native-youtube-iframe';

getYoutubeMeta('sNhhvQGsMEc').then(meta => {
  Alert.alert('title of the video : ' + meta.title);
});

```

--------------------------------

### Render YouTube Video with Play/Pause Button (React Native)

Source: https://lonelycpp.github.io/react-native-youtube-iframe/basic-usage

This snippet demonstrates how to embed a YouTube player in a React Native application. It allows users to play and pause the video and triggers an alert when the video playback ends. Dependencies include React, React Native core components (Button, View, Alert), and the YoutubePlayer from react-native-youtube-iframe.

```javascript
import React, { useState, useCallback, useRef } from "react";
import { Button, View, Alert } from "react-native";
import YoutubePlayer from "react-native-youtube-iframe";

export default function App() {
  const [playing, setPlaying] = useState(false);

  const onStateChange = useCallback((state) => {
    if (state === "ended") {
      setPlaying(false);
      Alert.alert("video has finished playing!");
    }
  }, []);

  const togglePlaying = useCallback(() => {
    setPlaying((prev) => !prev);
  }, []);

  return (
    <View>
      <YoutubePlayer
        height={300}
        play={playing}
        videoId={"iee2TATGMyI"}
        onChangeState={onStateChange}
      />
      <Button title={playing ? "pause" : "play"} onPress={togglePlaying} />
    </View>
  );
}
```

--------------------------------

### Playback Control and Events

Source: https://lonelycpp.github.io/react-native-youtube-iframe/component-props

This section details methods for controlling video playback rate and the event that fires when the playback rate changes.

```APIDOC
## playbackRate API

### Description
Sets the suggested playback rate for the current video. If the playback rate changes, it will only affect the video that is currently cued or being played. This function does not guarantee that the playback rate will actually change. If the playback rate does change, the `onPlaybackRateChange` event will fire.

### Method
`setPlaybackRate(suggestedRate: Number)`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **suggestedRate** (Number) - The suggested playback rate for the video.

### Request Example
```json
{
  "suggestedRate": 1.5
}
```

### Response
#### Success Response (N/A)
This method does not return a value directly, but may trigger the `onPlaybackRateChange` event.

#### Response Example
N/A

---

## onPlaybackRateChange Event

### Description
This event fires whenever the video playback rate changes. Your application should respond to this event rather than assuming the playback rate will automatically change after calling `setPlaybackRate`.

### Method
`onPlaybackRateChange(playbackRate: Number)`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
N/A

### Response
#### Success Response (N/A)
This is an event listener, not a direct API call.

#### Response Example
```javascript
(playbackRate) => {
  console.log(`Playback rate changed to: ${playbackRate}`);
}
```
```

--------------------------------

### Content Scaling

Source: https://lonelycpp.github.io/react-native-youtube-iframe/component-props

Prop for controlling the scale factor of the meta tag for initial-scale and maximum-scale.

```APIDOC
## contentScale

### Description
Scale factor for initial-scale and maximum-scale in the `<meta />` tag on the webpage. Defaults to `1.0`.
Note: Enabling `allowWebViewZoom` disables the `maximum-scale` attribute in the webpage.

### Method
`contentScale` (Number)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **scale** (Number) - The scale factor for content scaling.

### Request Example
```json
{
  "contentScale": 1.5
}
```

### Response
#### Success Response (N/A)
This is a configuration number.

#### Response Example
N/A
```

--------------------------------

### Styling Props

Source: https://lonelycpp.github.io/react-native-youtube-iframe/component-props

Props for customizing the appearance of the YouTube iframe player and its container.

```APIDOC
## viewContainerStyle

### Description
A style prop that will be given to the webview container.

### Method
`viewContainerStyle` (object)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **style** (object) - A React Native style object for the container.

### Request Example
```json
{
  "viewContainerStyle": {
    "backgroundColor": "#f0f0f0"
  }
}
```

### Response
#### Success Response (N/A)
This is a styling prop.

#### Response Example
N/A

---

## webViewStyle

### Description
A style prop that will be given to the webview.

### Method
`webViewStyle` (object)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **style** (object) - A React Native style object for the webview.

### Request Example
```json
{
  "webViewStyle": {
    "flex": 1
  }
}
```

### Response
#### Success Response (N/A)
This is a styling prop.

#### Response Example
N/A
```

--------------------------------

### Android Autoplay and WebView Zoom

Source: https://lonelycpp.github.io/react-native-youtube-iframe/component-props

Configuration options for enabling autoplay on certain Android devices and controlling webview zoom behavior.

```APIDOC
## forceAndroidAutoplay

### Description
Changes the user agent string to make autoplay work on the iframe player for some Android devices.

### Method
`forceAndroidAutoplay` (boolean)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **enable** (boolean) - Set to `true` to force Android autoplay.

### Request Example
```json
{
  "forceAndroidAutoplay": true
}
```

### Response
#### Success Response (N/A)
This is a configuration boolean.

#### Response Example
N/A

---

## allowWebViewZoom

### Description
Controls whether the embedded webview allows user to zoom in. Defaults to `false`.

### Method
`allowWebViewZoom` (boolean)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **enable** (boolean) - Set to `true` to allow webview zooming.

### Request Example
```json
{
  "allowWebViewZoom": true
}
```

### Response
#### Success Response (N/A)
This is a configuration boolean.

#### Response Example
N/A
```

--------------------------------

### Event Handling: onFullScreenChange

Source: https://lonelycpp.github.io/react-native-youtube-iframe/component-props

This event fires when the player enters or exits fullscreen mode. It provides a boolean status indicating the new fullscreen state. Note: This functionality is primarily supported on Android.

```javascript
onFullScreenChange={(status) => {
  // Handle fullscreen change
}}
```

--------------------------------

### Event Handling: onChangeState

Source: https://lonelycpp.github.io/react-native-youtube-iframe/component-props

This function is called when the player's state changes. It receives a string representing the new state, such as 'playing', 'paused', 'buffering', etc. It's crucial for managing UI updates based on player activity.

```javascript
onChangeState={(event) => {
  // Handle state change
}}
```

--------------------------------

### WebView: Enable Hardware Texture for YouTube Player

Source: https://lonelycpp.github.io/react-native-youtube-iframe/navigation-crash

Setting `renderToHardwareTextureAndroid` to `true` within the webview props of the YouTubePlayer component can mitigate crashes on Android. This setting relates to how the webview's content is rendered and textured, potentially improving compatibility with certain Android versions or other webview components.

```javascript
<YoutubePlayer  webViewProps={{
    renderToHardwareTextureAndroid: true,
  }}  //  {...otherProps}/>
```

--------------------------------

### React Navigation: Use Translation-Only Animations

Source: https://lonelycpp.github.io/react-native-youtube-iframe/navigation-crash

This workaround involves configuring react-navigation's Stack.Screen to use transition animations that are limited to translations. This can prevent conflicts that lead to crashes when using webviews, including the YouTubePlayer. The specific interpolator used is forHorizontalIOS.

```javascript
<Stack.Screen  component={ScreenWithWebview}  options={{    cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,  }}/>
```

--------------------------------

### Seek to Specific Time in YouTube Video

Source: https://lonelycpp.github.io/react-native-youtube-iframe/component-ref-methods

The seekTo() function allows seeking to a specified time in the video. It takes the target time in seconds and a boolean flag to allow seeking ahead. If the player is paused, it remains paused; otherwise, it plays the video. The player seeks to the closest keyframe before the specified time.

```javascript
playerRef.current?.seekTo(seconds, allowSeekAhead);
```

--------------------------------

### Event Handling: onError

Source: https://lonelycpp.github.io/react-native-youtube-iframe/component-props

This function is triggered when an error occurs within the YouTube player. It receives an error string that describes the reason for the error, such as invalid parameters or video not found.

```javascript
onError={(error) => {
  // Handle error
}}
```

--------------------------------

### React Native YouTube Iframe Props

Source: https://lonelycpp.github.io/react-native-youtube-iframe/component-props

This section details the properties available for configuring the YouTube Iframe component in React Native.

```APIDOC
## React Native YouTube Iframe Component Props

This document outlines the props available for the `react-native-youtube-iframe` component.

### `height`
- **Type**: Number
- **Required**: Yes
- **Description**: Specifies the height of the webview container. The recommended minimum dimensions for embedded players are 200px by 200px. For 16:9 players, a width of at least 480px and a height of 270px is recommended.

### `width`
- **Type**: Number
- **Required**: No
- **Description**: Specifies the width of the webview container. The player will expand to fit its parent's width unless specific flexbox properties are applied. If `alignItems` or `justifyContent` are set on the parent, a width is required.

### `videoId`
- **Type**: String
- **Required**: No
- **Description**: The YouTube Video ID of the video to be played.

### `playList`
- **Type**: String Array
- **Required**: No
- **Description**: Specifies a playlist to play. This can be either a playlist ID or an array of video IDs.
  * Example (playlist ID): `playList='PLbpi6ZahtOH6Blw3RGYpWkSByi_T7Rygb'`
  * Example (video IDs): `playList=['QRt7LjqJ45k', 'fHsa9DqmId8']`

### `playListStartIndex`
- **Type**: Number
- **Required**: No
- **Description**: Starts the playlist from the specified index. This prop only works when `playList` is an array of video IDs.

### `play`
- **Type**: Boolean
- **Required**: No
- **Description**: A flag to control playback. Set to `true` to play, `false` to pause. Ensure this flag is synchronized with the `onChangeState` event to handle user-initiated pauses correctly. Autoplay is generally supported due to webview APIs, but `forceAndroidAutoplay` may be needed for older Android devices.

### `ref`
- **Type**: YoutubeIframeRef
- **Required**: No
- **Description**: Provides access to the player's reference, allowing control over player functions. Refer to Player Functions Documentation for available methods.

### `baseUrlOverride`
- **Type**: String
- **Required**: No
- **Description**: Allows specifying a custom URL to serve the iframe code. Useful for self-hosting. Default: `https://lonelycpp.github.io/react-native-youtube-iframe/iframe.html`

### `useLocalHTML`
- **Type**: Boolean
- **Required**: No
- **Description**: If `true`, uses locally generated HTML to render the content within the webview.

### `onChangeState`
- **Type**: function(event: string)
- **Required**: No
- **Description**: Callback function that fires when the player's state changes. The `event` parameter is a string representing the new state.
  * Possible states: `unstarted`, `video cue`, `buffering`, `playing`, `paused`, `ended`.

### `onReady`
- **Type**: function(event: string)
- **Required**: No
- **Description**: Callback function that fires when the player has finished loading and is ready to accept API calls. Useful for initiating actions like playing a video immediately after load.

### `onError`
- **Type**: function(error: string)
- **Required**: No
- **Description**: Callback function that fires when an error occurs within the player. The `error` parameter is a string describing the error.
  * Possible errors: `invalid_parameter`, `HTML5_error`, `video_not_found`, `embed_not_allowed`.

### `onFullScreenChange`
- **Type**: function(status: string)
- **Required**: No
- **Description**: Callback function that fires when the player enters or exits fullscreen mode. The `status` parameter is a boolean indicating the new fullscreen state. (Android only; iOS support is in progress).

### `onPlaybackQualityChange`
- **Type**: function(quality: string)
- **Required**: No
- **Description**: Callback function that fires when the video playback quality changes. The `quality` parameter is a string representing the new playback quality.
  * Possible qualities: `small`, `medium`, `large`, `hd720`, `hd1080`, `highres`.

### `mute`
- **Type**: Boolean
- **Required**: No
- **Description**: A flag to mute the video when set to `true`.

### `volume`
- **Type**: Number
- **Required**: No
- **Description**: Sets the volume level of the player. Accepts an integer between 0 and 100.

```

--------------------------------

### WebView: Adjust Opacity to 0.99 for YouTube Player

Source: https://lonelycpp.github.io/react-native-youtube-iframe/navigation-crash

This workaround for the YouTubePlayer component involves slightly reducing the opacity of the underlying webview to `0.99`. This subtle change can resolve rendering or layering issues that cause crashes on Android, especially when other webviews are present in the application.

```javascript
<YoutubePlayer  webViewStyle={{opacity: 0.99}}  //  {...otherProps}/>
```

--------------------------------

### WebView: Tweak Android Layer Type for YouTube Player

Source: https://lonelycpp.github.io/react-native-youtube-iframe/navigation-crash

This solution adjusts the `androidLayerType` prop for the YouTubePlayer's webview. It conditionally sets the layer type to 'hardware' for Android versions 22 and below, and 'none' for others. This can resolve rendering issues and prevent crashes related to hardware acceleration on specific Android API levels.

```javascript
<YoutubePlayer  webViewProps={{
    androidLayerType:      Platform.OS === 'android' && Platform.Version <= 22 ? 'hardware' : 'none',
  }}  //  {...otherProps}/>
```

--------------------------------

### Player Control: Playback and Mute

Source: https://lonelycpp.github.io/react-native-youtube-iframe/component-props

The 'play' prop controls whether the video should play or pause. The 'mute' prop, when set to true, will mute the video's audio.

```javascript
play={true}
mute={false}
```

--------------------------------

### React Navigation: Disable Transitions for YouTube Player Screens

Source: https://lonelycpp.github.io/react-native-youtube-iframe/navigation-crash

To prevent crashes when using the YouTubePlayer, this solution suggests disabling all transition animations for screens that contain the component. This is achieved by setting `animationEnabled` to `false` in the Stack.Screen options within react-navigation.

```javascript
<Stack.Screen  component={ScreenWithWebview}  options={{    animationEnabled: false,  }}/>
```

--------------------------------

### Show Elapsed Time with setInterval in React Native

Source: https://lonelycpp.github.io/react-native-youtube-iframe/elapsed-time

This snippet shows how to display the elapsed time of a YouTube video. It uses `setInterval` to poll `playerRef.current.getCurrentTime()` every 100ms and formats the time into MM:SS:ms. Ensure you `await` the promise returned by `getCurrentTime()`.

```javascript
import React, {useState, useRef, useEffect} from 'react';
import {Text, View} from 'react-native';
import YoutubePlayer from 'react-native-youtube-iframe';

const App = () => {
  const [elapsed, setElapsed] = useState(0);
  const playerRef = useRef();

  useEffect(() => {
    const interval = setInterval(async () => {
      const elapsed_sec = await playerRef.current.getCurrentTime(); // this is a promise. dont forget to await
      // calculations
      const elapsed_ms = Math.floor(elapsed_sec * 1000);
      const ms = elapsed_ms % 1000;
      const min = Math.floor(elapsed_ms / 60000);
      const seconds = Math.floor((elapsed_ms - min * 60000) / 1000);

      setElapsed(
        min.toString().padStart(2, '0') +
          ':' +
          seconds.toString().padStart(2, '0') +
          ':' +
          ms.toString().padStart(3, '0'),
      );
    }, 100); // 100 ms refresh. increase it if you don't require millisecond precision

    return () => {
      clearInterval(interval);
    };
  }, []);

  return (
    <>
      <YoutubePlayer
        height={250}
        ref={playerRef}
        videoId={'DC471a9qrU4'}
      />
      <View>
        <View style={{flexDirection: 'row'}}>
          <Text style={{flex: 1}}>{'elapsed time'}</Text>
          <Text style={{flex: 1, color: 'green'}}>{elapsed}</Text>
        </View>
    </>
  );
};

```

--------------------------------

### Disable Long-Press Context Menu with Pressable and View

Source: https://lonelycpp.github.io/react-native-youtube-iframe/remove-context-share

This snippet demonstrates how to disable the context menu that appears on a long-press gesture on the YouTube player. It involves wrapping the `<YoutubePlayer />` component within a `View` that has `pointerEvents="none"` to prevent direct touch events from reaching the player. An outer `Pressable` component is then used to intercept and handle or ignore these presses and long-presses.

```jsx
<Pressable  onPress={() => {    // handle or ignore  }}  onLongPress={() => {    // handle or ignore  }}>
  <View pointerEvents="none">
    <YoutubePlayer (...) />
  </View>
</Pressable>
```

--------------------------------

### Check if YouTube Video is Muted

Source: https://lonelycpp.github.io/react-native-youtube-iframe/component-ref-methods

The isMuted() function returns a promise that resolves to a boolean value: true if the video is muted, and false otherwise.

```javascript
playerRef.current?.isMuted().then(isMuted => console.log({isMuted}));
```
Tokens:
Raw