react-native-youtube-popup-player

React Native Youtube Popup Player is a custom Youtube iframe player with a popup style and can exit the player by swiping down/up.

Support

iOS & Android

Installation

npm install react-native-youtube-popup-player

Installing dependencies

npm install react-native-vector-icons react-native-modal react-native-webview react-native-youtube-iframe-player

• react-native-vector-icons
• react-native-modal
• react-native-webview
• react-native-youtube-iframe-player

Note:

You need to make configuration on iOS and Android by following the instruction from the above dependencies libraries.

Usage

import YoutubePopupPlayer from 'react-native-youtube-popup-player';

//...
const [modalVisible, setModalVisible] = React.useState(false);

<TouchableOpacity onPress={() => setModalVisible(true)}>
    <Text>Play video</Text>
</TouchableOpacity>

<YoutubePopupPlayer
  videoUrl='https://www.youtube.com/watch?abcdefghi'
  modalVisible={modalVisible}
  messageLabelStyle={{fontSize: xLargeFontSize()}}
  closeModal={() => setModalVisible(false)}
/>

Properties

Basic

Prop	Default	Type	Optional	Description
videoUrl	null	string	false	The use of the Youtube video
modalVisible	false	boolean	false	The status to open or close the video player popup modal
locale	'km'	string	true	The locale of the warning message (options: km or en)
messageIconSize	50	number	true	The size of the warning icon when there is no internet or no video url
iconColor	'#ffffff'	string	true	The color of the icon of the warning message
isTablet	false	boolean	true	The device is tablet or mobile
iframeHeight	210	number	true	The height of the iframe
loadingIndicatorColor	'#ffffff'	string	true	The color of the loading indicator
durationFontSize	11	number	true	The font size of the duration and play seconds

• The default icon size of the warning icon will be 50dp and 45dp for the low pixel devices

Custom styles

Prop	Default	Type	Optional	Description
messageLabelStyle	{...}	style	true	Style of the warning message label
closeButtonStyle	{...}	style	true	Style of the close button when the warning message is showing

Methods

Prop	Default	Type	Optional	Description
closeModal	{...}	method	false	Method to close the video player popup modal

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

---

Made with create-react-native-library