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 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 2 months ago