In this article, we are going to describe how to add a video player in your React Native app in order to support the playing of YouTube videos. Video is the present and the future of the Internet, as you can already see through apps such as TikTok, YouTube, Instagram or Facebook. Video support is a feature that makes your app more lively, more interactive and more fun. By the end of this article, you will be able to embed any YouTube video of your choice in a React Native app easily. For you to understand this tutorial you should be familiar with the use of and in React Native. useRef useState To play YouTube videos in React Native, we will be making use of the npm dependency named We will use this library by fully integrating it into an app. react-native-youtube-iframe . Installation You need to install first. Simply run: react-native-webview yarn add react-native-webview or npm install react-native-webview then install react-native-youtube-iframe: yarn add react-native-youtube-iframe or npm install react-native-youtube-iframe Usage React ; {View} ; YoutubePlayer ; App = { ( <YoutubePlayer height={300} play={true} videoId={'84WIaK3bl_s'} /> </View> /** * Sample React Native App * https://github.com/facebook/react-native * * @format * @flow strict-local */ import from 'react' import from 'react-native' import from 'react-native-youtube-iframe' const => () return < > View ); }; The required props here are and the of the YouTube video you intend to play in the React Native app. As seen in the app below, we have a Casey Neistat travel vlog on display: height videoId The prop is set to true, so let us take it a step further and control play and pause actions: play React, {useState, useCallback} ; {Button, View, Alert} ; YoutubePlayer ; App = { [playing, setPlaying] = useState( ); togglePlaying = { setPlaying( !prev); } ( <YoutubePlayer height={300} play={playing} videoId={'84WIaK3bl_s'} /> <Button title={playing ? 'pause' : 'play'} onPress={togglePlaying} /> </View> ); }; /** * Sample React Native App * https://github.com/facebook/react-native * * @format * @flow strict-local */ import from 'react' import from 'react-native' import from 'react-native-youtube-iframe' const => () const false const => () ( ) => prev return < > View Now we have a control to play and pause the YouTube video. It would be nice to add a feature to tell the user that the video is done playing by passing a callback such as the prop provided by the dependency: onChangeState React, {useState} ; {Button, View, Alert} ; YoutubePlayer ; App = { [playing, setPlaying] = useState( ); onStateChange = { (state === ) { setPlaying( ); Alert.alert( ); } } togglePlaying = { setPlaying( !prev); } ( <YoutubePlayer height={300} play={playing} videoId={'84WIaK3bl_s'} onChangeState={onStateChange} /> <Button title={playing ? 'pause' : 'play'} onPress={togglePlaying} /> </View> ); }; /** * Sample React Native App * https://github.com/facebook/react-native * * @format * @flow strict-local */ import from 'react' import from 'react-native' import from 'react-native-youtube-iframe' const => () const false const ( ) => state if 'ended' false 'video has finished playing!' const => () ( ) => prev return < > View Now that we’re done learning the basic usage of this YouTube player dependency, let us go ahead and build a complete control for our video player to play, pause, skip, and mute. React, {useState, useRef} ; {View, Alert, StyleSheet} ; YoutubePlayer ; {Icon} ; App = { [playing, setPlaying] = useState( ); [isMute, setMute] = useState( ); controlRef = useRef(); onStateChange = { (state === ) { setPlaying( ); Alert.alert( ); } (state !== ) { setPlaying( ); } }; togglePlaying = { setPlaying( !prev); }; seekBackAndForth = { .log( ); controlRef.current?.getCurrentTime().then( { control === ? controlRef.current?.seekTo(currentTime + , ) : controlRef.current?.seekTo(currentTime - , ); }); }; muteVideo = setMute(!isMute); ControlIcon = ( <View style={styles.container}> <YoutubePlayer height={300} ref={controlRef} play={playing} mute={isMute} videoId={'84WIaK3bl_s'} onChangeState={onStateChange} /> <View style={styles.controlContainer}> <ControlIcon onPress={() => seekBackAndForth('rewind')} name="skip-previous" /> <ControlIcon onPress={togglePlaying} name={playing ? 'pause' : 'play-arrow'} /> <ControlIcon onPress={() => seekBackAndForth('forward')} name="skip-next" /> </View> <ControlIcon onPress={muteVideo} name={isMute ? 'volume-up' : 'volume-off'} /> </View> ); }; const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: 'darkblue', }, controlContainer: { flexDirection: 'row', justifyContent: 'space-around', }, }); import from 'react' import from 'react-native' import from 'react-native-youtube-iframe' import from 'react-native-elements' const => () const false const false const const ( ) => state if 'ended' false 'video has finished playing!' if 'playing' false const => () ( ) => prev const ( ) => control console 'currentTime' ( ) => currentTime 'forward' 15 true 15 true const => () const ( ) => {name, onPress} ); return ( < = = = = /> Icon onPress {onPress} name {name} size {40} color "#fff" We have added more custom controls to the original component we already had before and added callbacks to seek forward and backward using the ref. playerRef The mute control is basically managed by the state but it is worthy of note that the dependency provides a method (returns a promise that resolves to true if the video is muted, false if not) to determine if the video is muted or not. isMute isMuted Conclusion Embedding and playing YouTube videos in your React Native app is seamless and a more affordable way of displaying videos in your app, given that YouTube will support the costs of hosting the video itself. The npm dependency we described is really easy to use and is highly customisable, as we have seen in the above snippet where we added forward and rewind controls. Next time you’re looking to add YouTube video support to React Native apps, refer to this tutorial. If you enjoyed the project, please consider sharing the link with your friends and community. Cheers! Previously published at https://www.instamobile.io/react-native-tutorials/play-youtube-videos-react-native/
![Build Your Own Currency Exchange Web App in ~100 lines using CRA [A Step By Step Guide]](https://images.unsplash.com/photo-1521897258701-21e2a01f5e8b?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjEwMDk2Mn0&auto=format)
