Gumlet Embed with React Native

Tutorial to make Gumlet embed work with React Native.

Install react-native-webview package

We will use a webview to open the embed code in the application.

npm install @gumlet/react-native-embed-player

Integrate webview with your application

import react-native-embed-player in your application code

Add the following import to your component/application file.

import { ReactNativeEmbedPlayerView } from "@gumlet/react-native-embed-player";

Use the Webview to embed a video URL

Use the following code in your component to allow embedding a Gumlet transcoded video into your application.

import { ReactNativeEmbedPlayerView } from "@gumlet/react-native-embed-player";

<ReactNativeEmbedPlayerView video_id="{YOUR_ASSET_ID}" style={styles.box} />

🚧
Adaptions needed according to your video and application
Adapt and replace <YOUR_ASSET_ID> with the video ID you need to play in the source URI of the above code. This video ID is the unique identifier of your video asset which is generated automatically by Gumlet while creating a video asset on the Gumlet platform via our API or dashboard.
Change the style of the Webview according to the design language of your application.
NOTE: Changing the styles of the Webview won't have any affect on the player controls and the UI of the video displayed in the webview.

👍
That's it
You can now play Gumlet Embedded videos in your React Native application.

Full code snippet

import React from 'react';
import type { PropsWithChildren } from 'react';
import { ReactNativeEmbedPlayerView } from "@gumlet/react-native-embed-player";
import { Colors } from 'react-native/Libraries/NewAppScreen';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
} from 'react-native';

function App(): JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';
  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  const styles = StyleSheet.create({
    box: {
      height: 240,
      width: 320,
      alignSelf: "center",
      alignContent: "center"
    }
  });

  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar
        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
        backgroundColor={backgroundStyle.backgroundColor}
      />
      <ScrollView
        contentInsetAdjustmentBehavior="automatic"
        style={backgroundStyle}>
        <View
          style={{
            backgroundColor: isDarkMode ? Colors.black : Colors.white,
          }}>
          <ReactNativeEmbedPlayerView 
            video_id="YOUR_ASSET_ID" 
            style={styles.box} 
          />
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

export default App;

Updated 6 days ago