react-native-audio-player-button
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
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}
hasInternet={hasInternet}
playerPaddingTop='31%'
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 |
| hasInternet | false | boolean | false | For checking the internet status before playing the video |
| playerPaddingTop | null | string/number | true | The padding top of the video player |
| 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 |
| indicatorColor | '#ffffff' | string | true | The color of the loading indicator |
- 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
