1.0.3 • Published 1 year ago
react-native-youtube-popup-player v1.0.3
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-playerInstalling dependencies
npm install react-native-vector-icons react-native-modal react-native-webview react-native-youtube-iframe-playerNote:
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
50dpand45dpfor 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