1.0.1 • Published 6 months ago
react-native-audio-recorder-button v1.0.1
react-native-audio-recorder-button
React Native Audio Recorder Button is a component for recording the audio and can play the recorded audio.
Installation
npm install react-native-audio-recorder-buttonInstalling dependencies
npm install react-native-permissions react-native-vector-icons react-native-sound @react-native-community/audio-toolkit react-native-easy-toast- react-native-permissions (follow the instruction in the doc to enable the permission)
- react-native-vector-icons
- react-native-sound
- @react-native-community/audio-toolkit
- react-native-easy-toast
Usage
import AudioRecorder from 'react-native-audio-recorder-button';
// ...
<AudioRecorder
filename='AUDIO_FILENAME'
onFinishRecord={(filePath) => {}}
containerStyle={{padding: 20}}
...
/>Properties
Basic
| Prop | Default | Type | Optional | Description |
|---|---|---|---|---|
| filename | '' | string | false | Filename of the recorded audio (ex: test-audio.mp4) |
| disabled | false | boolean | true | Status to disable the record button |
| primaryColor | '#1b91f7' | string | true | Primary color of the buttons |
| instructionToastMessage | '' | string | true | Toast message that will show when pressed on the record button (not long press) |
| androidPermissionTitle | '' | string | true | The title of the request microphone permission on Android |
| androidPermissionDescription | '' | string | true | The description of the request microphone permission on Android |
| iOSPermissionTitle | '' | string | true | The title of the request microphone permission on iOS |
| iOSPermissionDescription | '' | string | true | The description of the request microphone permission on iOS |
| iOSAlertCancelLabel | 'បិទ' | string | true | The left button label of the iOS permission alert |
| iOSAlertSettingsLabel | 'ការកំណត់' | string | true | The right button label of the iOS permission alert |
| onFinishRecord | {} | function | true | The function that will called when stop recording. It returns with the recorded audio file path and recorded audio duration |
| onDeleteAudio | {} | function | true | The function that will called deleteing the recorded audio |
Custom styles
| Prop | Default | Type | Optional | Description |
|---|---|---|---|---|
| containerStyle | {...} | style | true | Style of the recorder container |
| recordDurationLabelStyle | {...} | style | true | Style of the record duration label |
| recordButtonStyle | {...} | style | true | Style of the record button |
| micIconStyle | {...} | style | true | Style of the record button microphone icon |
| playDurationLabelStyle | {...} | style | true | Style of the playing audio duration label |
| playIconStyle | {...} | style | true | Style of the play icon style |
| pauseIconStyle | {...} | style | true | Style of the pause icon style |
Ref method
| Prop | Type | Optional | Description |
|---|---|---|---|
| setRecordButtonVisible | fuction | Optional | A reference fuction to set the visibility of the record button (ex: audioRef.current?.setRecordButtonVisible(true)) |
| setRecordedFile | fuction | Optional | A reference fuction to set audio file path and its duration (ex: audioRef.current?.setRecoredFile(FILE_PATH, 10)) |
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
Made with create-react-native-library