React Native Audio Player Button is a custom button with an icon for playing audio. The user is able to use this button as many as they want on the same screen without having the issue of overlapping playing audio.

Support

iOS & Android

Installation

npm install react-native-audio-player-button

Installing dependencies

npm install react-native-vector-icons react-native-sound

• react-native-vector-icons
• react-native-sound

Usage

import AudioPlayerButton from 'react-native-audio-player-button';
import FAIcon from 'react-native-vector-icons/FontAwesome';

//...
const [playingUuid, setPlayingUuid] = React.useState(null);

<AudioPlayerButton
  audio={require('sample.mp3')}
  itemUuid='abcdefg'
  isSpeakerIcon={true}
  rippled={true}
  iconPrimaryColor='#0088ff'
  iconSecondaryColor='#5da297'
  playingUuid={playingUuid}
  updatePlayingUuid={(uuid) => setPlayingUuid(uuid)}
  containerStyle={{marginTop: 16}}
  customIcon={<FAIcon/>}
  customIconSet={{play: 'play-circle', pause: 'pause-circle', mute: 'repeat'}}
/>

Properties

Basic

| Prop | Default | Type | Optional | Description | | :----------------- | :-----------: | :--------: | :--------: | :------------------------------------------------------------------------------------------- | | audio | null | .mp3 | false | The audio file that will be playing | | itemUuid | null | string | false | A unique uuid of the audio or the uuid of the button (to prevent playing audio overlap) | | playingUuid | null | string | false | The uuid of the audio that is currently playing | | isSpeakerIcon | false | boolean | true | If true, it will show a speaker icon. If false, it will show a normal play icon | | buttonColor | '#ffffff' | string | true | The color of the button | | buttonHeight | 48 or 56 | number | true | Height of the button | | buttonWidth | 48 or 56 | number | true | Width of the button | | rippled | false | boolean | true | If true, it will show a ripple animation while playing the audio | | rippleColor | '#000000' | string | true | Color of the ripple animation | | rippleHeight | 48 or 56 | number | true | The height of the ripple animation | | rippleWidth | 48 or 56 | number | true | The width of the ripple animation | | rippleRadius | 48 or 56 | number | true | The radius of the ripple animation (higher radius makes the ripple appear in a round shape) | | iconSize | 24 or 26 | number | true | The size of the icons (play and pause icon) | | iconPrimaryColor | '#000000' | string | true | The color of the icon before playing the audio | | iconSecondaryColor | '#808080' | string | true | The color of the icon while playing the audio | | playingUuid | '' | string | false | The uuid of the playing audio component (to prevent playing audio overlap each other) | | hasShadow | false | boolean | true | The shadow of the button (Android only) | | allowPause | false | boolean | true | Allow to pause the audio when toggle the button | | isFromAppBundle | false | boolean | false | Set to true to play the audio that is stored in the app bundle (ex: the downloaded audio) | | rippleScaleSize | 'medium' | string | true | The scale size of the ripple animation while the audio is playing |

• The default width, height of the button and ripple animation will be 56dp and 48dp for the low pixel devices

Custom styles

| Prop | Default | Type | Optional | Description | | :-------------------------- | :-----------: | :-------: | :--------: | :------------------------------------------------------------------------- | | containerStyle | {...} | style | true | Style of the button and ripple animation container | | buttonStyle | {...} | style | true | Style of the button | | iconStyle | {...} | style | true | Style of the audio icons (play and pause icon) | | rippleStyle | {...} | style | true | Style of the ripple animation | | customNotPlayingIconStyle | {...} | style | true | Style of the audio icon when is not playing | | customPlayingIconStyle | {...} | style | true | Style of the audio icon while playing |

Custom components

| Prop | Default | Type | Optional | Description | | :---------------- | :-------------------------------: | :----: | :--------: | :--------------------------------------------------- | | customIcon | {...} | comp | true | Custom audio icon component | | customIconSet | {{play: '', pause: '', mute: ''}} | hash | true | A hash of the custom icon names |

Child components

<AudioPlayerButton {...props}>
  <child components/>
</AudioPlayerButton>

• play: The icon that will be shown when the audio is not playing
• pause: The icon that will be shown while the audio is playing
• mute: The icon that will be shown when there is no audio file
• Default icon types of the button:
  • Speaker icon use Ionicons
  • Normal play icon use Feather icons

Events

| Prop | Default | Type | Optional | Description | | :---------------- | :-------: | :-------: | :--------: | :------------------------------------------------------------------- | | updatePlayingUuid | {...} | event | false | On press the button, to update the uuid of the playing item | | onPress | {...} | event | true | Event when pressing the button |

Contributing

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

Made with create-react-native-library