Gumlet Embed with React Native

Tutorial to make Gumlet embed work with React Native.

Suggest Edits

Install react-native-webview package

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

npm install react-native-webview

Integrate webview with your application

import react-native-webview in your application code

Add the following import to your component/application file.

import { WebView } from 'react-native-webview';

Use the Webview to embed video URL

Add the following lines of code in your component to allow embedding a Gumlet transcoded video to your application.

<WebView
  mediaPlaybackRequiresUserAction={true}
  style={{ height: 240, width: 320, alignSelf: "center", alignContent: "center" }}
  source={{ uri: 'https://play.gumlet.io/embed/<YOUR_ASSET_ID>' }}
/>

🚧

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 { WebView } from 'react-native-webview';
import { Colors } from 'react-native/Libraries/NewAppScreen';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
} from 'react-native';


const backgroundStyle = {
  backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
};

function App(): JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  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,
          }}>
          <WebView
            mediaPlaybackRequiresUserAction={true}
            style={{ height: 240, width: 320, alignSelf: "center", alignContent: "center" }}
            source={{ uri: 'https://play.gumlet.io/embed/<YOUR_ASSET_ID>' }}
          />
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

Updated 7 months ago