Embed Gumlet Video Player with React Native
Tutorial to make Gumlet embed work with React Native.
Set up react native webview
npm install react-native-webview
cd ios/
pod install
Install @gumlet/react-native-embed-player package
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 applicationAdapt 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 itYou 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;
Check out the repository here - https://github.com/gumlet/react-native-embed-player
Here is an example: https://github.com/gumlet/react-native-embed-player/tree/main/example
Updated 18 days ago