YouTube is one of the highest uses online video sharing platform available on internet. On a particular time every mobile application developer needs to user YouTube videos in their mobile application easily. So in react native there are a lot’s of ways to integrate YouTube video but most of them is unreliable. But using react-native-youtube custom component we can easily integrate YouTube videos in our android iOS mobile application. We can also add multiple videos in array format and they run one by one and also add YouTube video playlist using the react-native-youtube library. So in this tutorial we would React Native Integrate YouTube Video in Android iOS App Example Tutorial.
Note: We have to use YouTube video ID in our tutorial. You can find any YouTube video ID in Video URL. See the below screenshot, After the = sign you can find any YouTube video ID.
Contents in this project React Native Integrate YouTube Video in Android iOS App Example Tutorial:
1. Before getting started to coding part we have to manually install the react-native-youtube library in our react native project. So open your react native project Root directory in Command Prompt or Terminal and execute below command.
|
1
|
npm install react–native–youtube —save
|
Screenshot of Terminal:
Screenshot of Terminal after finish installing:
2. Now the installing part is completed. Next part is to link the newly installed YouTube library to your project index. So again open your react native project root directory in Command Prompt or Terminal and execute below link command to link the YouTube library.
|
1
|
react–native link react–native–youtube
|
Screenshot of Terminal:
3. Generate API Key for Library:
1. The react-native-youtube library is a professional library that works on YouTube basic terms. So In order to use the library we must generate the API key form Google Developer Console and use the API key in our react native project. Without the API key this won’t work. Go To Google Developer Console. Login using your Google Gmail account.
2. Select any old created project from Developer console or you can also create a new project. After done creating project goto APIs & Services -> Credentials.
3. Under Create Credentials Select API Key.
4. If will take a moment and now your API key will be visible on your computer screen. Simply Copy the API key on someplace safe because we will use it later.
5. Now the API creating part is done. Next step is to enable the YouTube Data using in current project. So when we use this API in our project it won’t display us an error. So goto Library.
6. Scroll down on the Library section and select YouTube Data API v3 .
7. Press the Enable button to Enable YouTube data api in your current project.
8. It will take some time then enable the YouTube Data API v3.
Here you go. Now we would use this API key into our react native project. So let’s get started coding.
4. Start Coding for App:
1. Open your react native project’s App.js file and Import StyleSheet, Text, PixelRatio, TouchableOpacity, View and Dimensions component.
|
1
2
3
|
import React, { Component } from ‘react’;
import { StyleSheet, Text, PixelRatio, TouchableOpacity, View, Dimensions } from ‘react-native’;
|
2. Import YouTube component from react-native-youtube library.
|
1
|
import YouTube from ‘react-native-youtube’;
|
3. Create our main export default class named as App extends Component. This would be our main View class.
|
1
2
3
4
|
export default class App extends Component {
}
|
4. Create constructor() in your class. Inside the constructor we would make 3 States named as isLoading, loadingStatus and fullscreen.
- isLoading : Used to check the Video status like video is loading or video is ready to play.
- loadingStatus : Holds 2 values buffering and Playing depends on status given by component.
- fullscreen : Used to manually enable and disable YouTube video full screen.
|
1
2
3
4
5
6
7
8
9
|
constructor(props){
super(props);
this.state = {
isLoading: false,
loadingStatus: null,
fullscreen: false,
}
}
|
5. Create a main Container View in render’s return block. We will put our all the components in this Root View.
|
1
2
3
4
5
6
7
8
|
render() {
return (
<View style={styles.MainContainer}>
</View>
);
}
|
6. Create YouTube component in Root View.
- ref : Is used to mange as reference of Video to enable previous and next functionality.
- apiKey : You have to put here you own API key.
- playlistId : You can pass here YouTube video playlist id to show video from Playlist.
- videoId : Pass here single YouTube video ID.
- videoIds : Pass here multiple ID’s in array format to enable showing multiple videos.
- fullscreen : To enable and disable full screen mode.
- style : Used to Style the YouTube video screen. We are setting up the height of Player according to width of screen in 16:9 ratio.
- onReady : To manage YouTube video status.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<YouTube
ref={component => {
this.Ref_Object = component;
}}
apiKey=“PUT YOUR API KEY HERE.”
videoId=“RXeLbs_ogDU”
//playlistId=”PLjwBf9QEIO96SwjFDoxcCbF6getsFI_0u”
// videoIds={[‘Hk3GMLrlCEo’, ‘S6tVYpKZ2fo’, ‘g0CWxEuN2VI’ ]}
fullscreen={this.state.fullscreen}
controls={1}
style={{ height: PixelRatio.roundToNearestPixel(
Dimensions.get(‘window’).width / (16 / 9)
), alignSelf: ‘stretch’ }}
onReady={e => this.setState({ isLoading: true })}
onChangeState={e => this.setState({ loadingStatus: e.state })}
onChangeFullscreen={e =>
this.setState({ fullscreen: e.isFullscreen })
}
/>
|
7. Creating Next, Previous buttons and Skip to 30 seconds and Skip to 5 minutes buttons with Video status.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
<View style={{ alignSelf: ‘center’, flexDirection: ‘row’}}>
<TouchableOpacity
style={styles.button}
onPress={() =>
this.Ref_Object && this.Ref_Object.previousVideo()
}>
<Text style={{ fontSize: 18, color: ‘red’ }}>Previous Video— </Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={() => this.Ref_Object && this.Ref_Object.nextVideo()}>
<Text style={{ fontSize: 18, color: ‘red’ }}> —Next Video</Text>
</TouchableOpacity>
</View>
<TouchableOpacity
style={styles.button}
onPress={() => this.Ref_Object && this.Ref_Object.seekTo(30)}>
<Text style={styles.buttonText}>Skip To 30 Seconds</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={() => this.Ref_Object && this.Ref_Object.seekTo(5 * 60)}>
<Text style={styles.buttonText}>Skip To 5 Minutes</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={() => this.setState({ fullscreen: true })}>
<Text style={styles.buttonText}>Set Video To Full Screen</Text>
</TouchableOpacity>
<Text style={styles.VideoLoad}>
{this.state.isLoading ? ‘Ready To Play…’ : ‘Loading Player…’}
</Text>
<Text style={styles.VideoLoad}>
Status: {this.state.loadingStatus}
</Text>
|
8. Creating Style.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
backgroundColor: ‘#fff’,
padding: 16,
alignItems: ‘center’
},
touchableGroup: {
alignSelf: ‘center’,
flexDirection: ‘column’,
},
button: {
padding: 5,
alignSelf: ‘center’,
},
buttonText: {
fontSize: 21,
color: ‘green’,
},
VideoLoad: {
textAlign: ‘center’,
color: ‘#000’,
marginBottom: 10,
},
});
|
9. Complete Source Code for App.js file class:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
|
import React, { Component } from ‘react’;
import { StyleSheet, Text, PixelRatio, TouchableOpacity, View, Dimensions } from ‘react-native’;
import YouTube from ‘react-native-youtube’;
export default class App extends Component {
constructor(props){
super(props);
this.state = {
isLoading: false,
loadingStatus: null,
fullscreen: false,
}
}
render() {
return (
<View style={styles.MainContainer}>
<YouTube
ref={component => {
this.Ref_Object = component;
}}
apiKey=“PUT YOUR API KEY HERE.”
videoId=“RXeLbs_ogDU”
//playlistId=”PLjwBf9QEIO96SwjFDoxcCbF6getsFI_0u”
// videoIds={[‘Hk3GMLrlCEo’, ‘S6tVYpKZ2fo’, ‘g0CWxEuN2VI’ ]}
fullscreen={this.state.fullscreen}
controls={1}
style={{ height: PixelRatio.roundToNearestPixel(
Dimensions.get(‘window’).width / (16 / 9)
), alignSelf: ‘stretch’ }}
onReady={e => this.setState({ isLoading: true })}
onChangeState={e => this.setState({ loadingStatus: e.state })}
onChangeFullscreen={e =>
this.setState({ fullscreen: e.isFullscreen })
}
/>
<View style={{ alignSelf: ‘center’, flexDirection: ‘row’}}>
<TouchableOpacity
style={styles.button}
onPress={() =>
this.Ref_Object && this.Ref_Object.previousVideo()
}>
<Text style={{ fontSize: 18, color: ‘red’ }}>Previous Video— </Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={() => this.Ref_Object && this.Ref_Object.nextVideo()}>
<Text style={{ fontSize: 18, color: ‘red’ }}> —Next Video</Text>
</TouchableOpacity>
</View>
<TouchableOpacity
style={styles.button}
onPress={() => this.Ref_Object && this.Ref_Object.seekTo(30)}>
<Text style={styles.buttonText}>Skip To 30 Seconds</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={() => this.Ref_Object && this.Ref_Object.seekTo(5 * 60)}>
<Text style={styles.buttonText}>Skip To 5 Minutes</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={() => this.setState({ fullscreen: true })}>
<Text style={styles.buttonText}>Set Video To Full Screen</Text>
</TouchableOpacity>
<Text style={styles.VideoLoad}>
{this.state.isLoading ? ‘Ready To Play…’ : ‘Loading Player…’}
</Text>
<Text style={styles.VideoLoad}>
Status: {this.state.loadingStatus}
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
backgroundColor: ‘#fff’,
padding: 16,
alignItems: ‘center’
},
touchableGroup: {
alignSelf: ‘center’,
flexDirection: ‘column’,
},
button: {
padding: 5,
alignSelf: ‘center’,
},
buttonText: {
fontSize: 21,
color: ‘green’,
},
VideoLoad: {
textAlign: ‘center’,
color: ‘#000’,
marginBottom: 10,
},
});
|
Screenshots:
Also Read :
Example of Navigation Drawer with Section Menu in React Navigation 5.x
Add Fixed Sticky Header on FlatList in React Native iOS Android Tutorial
Set onClickListener onPress on Button in React Native Android iOS
React Native Show Progress bar While Loading WebView Android iOS
View All Data From SQLite Database in React Native FlatList Example
