React Native Audio Card View is a card item with a title, a subtitle, and an audio player button.

Support

iOS & Android

Installation

npm install react-native-audio-card-view

Installing dependencies

npm install react-native-vector-icons react-native-sound react-native-audio-player-button

• react-native-vector-icons
• react-native-sound
• react-native-audio-player-button

Usage

import AudioCardView from 'react-native-audio-card-view';
import FAIcon from 'react-native-vector-icons/FontAwesome';

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

<AudioCardView
  audio={require('testing_audio.mp3')}
  audioPosition='top-left'
  containerStyle={{marginTop: 10, height: 120, width: '100%'}}
  title="Card item title"
  subtitle="Card item subtitle"
  customIcon={<FAIcon/>}
  customIconSet={{play: 'play-circle', pause: 'pause-circle', mute: 'repeat'}}
  onPress={() => console.log('do something')}
/>

Properties

Basic

| Prop | Default | Type | Optional | Description | | :------------------ | :-----------: | :--------: | :--------: | :------------------------------------------------------------------------------------------- | | uuid | null | string | false | A unique uuid of the audio or the uuid of the button (to prevent playing audio overlap) | | title | null | string | false | The title of the card item (maximum 2 lines) | | subtitle | null | string | false | The subtitle of the card item (maximum 1 lines) | | primaryColor | '#000000' | string | true | The color of the audio icon before playing the audio | | secondaryColor | '#808080' | string | true | The color of the audio icon while playing the audio | | audio | null | .mp3 | true | The audio file for playing | | playingUuid | null | string | true | The uuid of the playing audio | | disabled | false | boolean | true | The disabled status of the card item | | disabledColor | '#CDCCCC' | string | true | The background color of the card item when disabled | | audioPosition | 'top-left' | string | true | The position of the audio button ('top-left', 'left', 'right') | | showDraggableIcon | false | boolean | true | To show the 3 dots icon to indicate the card is draggable | | hideAudioPlayer | false | boolean | true | To hide the audio player button | | isFromAppBundle | false | boolean | true | Set to true to play the audio that is stored in the app bundle (ex: the downloaded audio) | | allowFlexibleHeight | false | boolean | true | Set to true to make the card height flexible based on the length of the title |

Custom styles

| Prop | Default | Type | Optional | Description | | :-------------------------- | :---------: | :-------: | :--------: | :--------------------------------------------------------- | | containerStyle | {...} | style | true | Style of the card item container | | labelContainerStyle | {...} | style | true | Style of the title and subtitle container | | titleStyle | {...} | style | true | Style of the title | | subtitleStyle | {...} | style | true | Style of the subtitle | | audioButtonContainerStyle | {...} | style | true | Style of the audio button container | | audioButtonStyle | {...} | style | true | Style of the audio button | | audioIconStyle | {...} | style | true | Style of the audio icon | | audioRippleStyle | {...} | style | true | Style of the audio ripple animation while playing | | draggableIconContainerStyle | {...} | style | true | Style of the draggable icon container | | draggableIconStyle | {...} | style | true | Style of the draggable icon | | 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 | | :----------------- | :-------------------------------: | :----: | :--------: | :--------------------------------------------------- | | customAudioIcon | {...} | comp | true | Custom audio icon component | | customAudioIconSet | {{play: '', pause: '', mute: ''}} | hash | true | A hash of the custom icon names |

Child component

<AudioCardView {...props}>
  <Text>Child component</Text>
</AudioCardView>

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 card item | | onLongPress | {...} | event | true | Event when long pressing the card item |

Contributing

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

Made with create-react-native-library