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

• 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