@raishid/react-native-voice-message-player

The @carchaze/react-native-voice-message-player is a flexible and feature-rich voice message player tailored for React Native applications. It's designed to provide developers with a seamless solution to integrate voice message playback into their apps with various customization options.

For a detailed list of changes, please refer to the CHANGELOG.md.

Maintainer Required 🤝

This project is currently looking for a maintainer. If you are interested, please reach out! 🚨

Features

• Theming and Styling: Customize to fit your app's look and feel.
• Profile Support: Attach user profiles with custom images.
• Custom Renderers: Fine-tune UI components.
• Download Progress: Display progress for downloading voice messages from URLs.
• Audio Playback Controls: Play, pause, and load voice messages with user feedback.

Demo

Installation

1npm install @carchaze/react-native-voice-message-player
2# or
3yarn add @carchaze/react-native-voice-message-player
4
5# On Ios
6cd ios && pod install && cd..

Usage

1. Import the RNVoiceMessagePlayer component into your React Native file:

1import RNVoiceMessagePlayer from '@carchaze/react-native-voice-message-player';

2. Use the RNVoiceMessagePlayer component in your render method:

1const localFile = require('./path/to/audio.*')
2const localUrl = "file:///path/to/audio.*"
3const onlineUrl = "https://example.com/audio.*"
4
5// Load local file
6<RNVoiceMessagePlayer source={localFile} />
7
8// Load local url
9<RNVoiceMessagePlayer source={localUrl} />
10<RNVoiceMessagePlayer source={{uri: localUrl}} />
11
12// Load online url
13<RNVoiceMessagePlayer source={onlineUrl} autoDownload={true} />

Props

Below is a detailed list of props you can use with the RNVoiceMessagePlayer:

Main Props

Prop	Description	Type	Required	Default Value
source	Source of the audio, either an object with URI or a require path.	{uri: string} | require()	true	-
timestamp	The timestamp of the voice message.	string	-	-
autoDownload	Whether to automatically download audio if given a URL.	boolean	-	false
customTheme	Custom theme to override the default theme.	Theme	-	-
containerStyle	Style for the main container.	ViewStyle	-	-
renderDownloadProgress	Custom render function for the download progress.	Function	-	-
renderText	Custom render function for the text.	Function	-	-
textNotDownloaded	Text to show when the audio is not downloaded.	string	-	'Download voice message'
textLoading	Text to show while loading the audio.	string	-	'Loading...'
textError	Text to show when there's an error.	string	-	'Audio is not playable'
ref	Reference to the component.	React.Ref	-	-

Chat Status Props

Prop	Description	Type	Required	Default Value
chatStatusProps.isNew	Whether the message is new.	boolean	-	false
chatStatusProps.isPlayed	Whether the message has been played.	boolean	-	false
chatStatusProps.status	Status of the chat message.	DefaultStatusString	-	'single-check'

Profile Props

Prop	Description	Type	Required	Default Value
profileProps.profilePosition	Position of the profile.	('left' | 'right')	-	'right'
profileProps.profileImageSource	Source for the profile image.	ImageSourcePropType	-	-
profileProps.profileMicSource	Source for the microphone icon.	ImageSourcePropType	-	-
profileProps.ProfileImagePressDisabled	Whether the profile image press is disabled.	boolean	-	-
profileProps.onProfileImagePress	Callback when profile image is pressed.	Function	-	-
profileProps.renderProfileMic	Custom render function for the microphone icon.	Function	-	-
profileProps.renderProfileImage	Custom render function for the profile image.	Function	-	-
profileProps.renderProfile	Custom render function for the whole profile.	Function	-	-
profileProps.profileContainerStyle	Style for the profile container.	ViewStyle	-	-

Bottom Props

Prop	Description	Type	Required	Default Value
bottomProps.renderBottomTimestamp	Custom render function for the bottom timestamp.	Function	-	-
bottomProps.renderBottomTimer	Custom render function for the bottom timer.	Function	-	-
bottomProps.bottomStatusSources	Sources for the bottom status.	DefaultStatusSources	-	-
bottomProps.bottomContainerStyle	Style for the bottom container.	ViewStyle	-	-
bottomProps.renderBottom	Custom render function for the bottom section.	Function	-	-

Left Action Props

Prop	Description	Type	Required	Default Value
leftActionProps.leftActionSources	Sources for the left action buttons.	DefaultActionSources	-	-
leftActionProps.leftActionContainerStyle	Style for the left action container.	ViewStyle	-	-
leftActionProps.renderLeftAction	Custom render function for the left actions.	Function	-	-

Track Props

Prop	Description	Type	Required	Default Value
trackProps.renderTrack	Custom render function for the audio track.	Function	-	-
trackProps.onTrackChange	Callback when the track changes.	Function	-	-
trackProps.onTrackChangeComplete	Callback when track change is complete.	Function	-	-
trackProps.onTrackChangeStart	Callback when track change starts.	Function	-	-

Audio Event Callbacks

Prop	Description	Type	Required	Default Value
onPlay	Callback when the audio starts playing.	Function	-	-
onPause	Callback when the audio is paused.	Function	-	-
onError	Callback when there's an error.	Function	-	-
onLoading	Callback while the audio is loading.	Function	-	-
onDownload	Callback when the audio starts downloading.	Function	-	-
onDownloadSuccess	Callback when the audio download is successful.	Function	-	-
onDownloadSaved	Callback when the downloaded audio is saved.	Function	-	-
onDownloadFailed	Callback when the audio download fails.	Function	-	-
onLoadStart	Callback when the audio starts loading.	Function	-	-
onLoadSuccess	Callback when the audio loading is successful.	Function	-	-
onLoadFailed	Callback when the audio loading fails.	Function	-	-

License

This project is licensed under the MIT License.

Contributors

A big thank you to all the contributors who have helped make this project better!

CarChaze Pvt Ltd

Hamza Hussain

Credits

We'd like to thank the following libraries and resources that have contributed to the development of React Native Voice Message Player:

• React Native
• CarChaze Pvt Ltd
• react-native-sound
• prop-types
• react
• Hamza Hussain

Contact

If you have any questions or need assistance, feel free to reach out to us:

• Email: hamza@carchaze.com
• GitHub Issues: Report Issue

FAQs

General

1. What is the primary purpose of React Native Voice Message Player?

Answer: The @carchaze/react-native-voice-message-player is designed to provide developers a seamless solution to integrate voice message playback in their React Native apps with various customization options.

2. Is this package free to use?

Answer: Yes, the package is open-source and free to use. We appreciate contributions from the community to improve it further!

Technical

3. Which versions of React Native are supported?

Answer: The package supports React Native versions 0.60 and above. For older versions, you might encounter compatibility issues.

4. How do I customize the theme of the player?

Answer: You can use the customTheme prop to override the default styles and match your app's theme. Refer to the Props section for more details.

5. Are there any known issues with the package?

Answer: All known issues are tracked on our GitHub issues page. If you encounter a problem, please check there first, and if it's a new issue, feel free to report it.

Contributing

6. I found a bug! How can I report it?

Answer: We appreciate your feedback! Please report any bugs or issues on our GitHub repository's issues page.

7. I have a feature request. Where can I submit it?

Answer: Feature requests can be submitted on our GitHub repository. We welcome contributions and suggestions from the community.

8. How can I contribute to the project?

Answer: Please refer to our Contributing Guidelines for detailed steps on how to contribute. We appreciate all forms of contributions, from code to documentation and testing.

Miscellaneous

9. Are there plans for future features or improvements?

Answer: We continuously aim to improve the package and add new features. Keep an eye on our GitHub repository for the latest updates and planned features.

10. How can I support the project?

Answer: Using the package, reporting bugs, suggesting features, and contributing to the codebase are all great ways to support the project. Additionally, giving the repository a star on GitHub helps boost its visibility in the community!

Contributing Guidelines

At CarChaze, we value the power of the community and believe in the open-source spirit. We are thrilled you're considering contributing to the React Native Voice Message Player package. Before you start, please ensure you've read and understood these guidelines.

Reporting Bugs or Suggesting Enhancements

If you come across any issues or have ideas for improvements:

1. Check the issues page to ensure your problem or suggestion hasn't been reported or addressed already.
2. If your issue isn't listed, you can create a new one.

Code Contributions

1. Fork and Clone: Fork the react-native-voice-message-player repository, then clone your fork onto your machine.
2. Create a New Branch: It's a best practice to create a new branch for each feature or fix you are working on.
3. Make Necessary Changes: Write your code, ensuring you follow CarChaze's coding standards. Make sure the package functions as intended and doesn't introduce new issues.
4. Test: Ensure your changes are well-tested. Add or update tests as necessary.
5. Pull Request: Submit a pull request to the main branch. Provide a comprehensive description of the changes and link the related issues.

Documentation

If you're making changes to features that are already documented, make sure you update the corresponding parts of the documentation. If you introduce a new feature, please add related documentation.

Stay Updated

Ensure you pull changes from the main repository to your fork regularly to stay updated. This helps reduce merge conflicts when submitting a PR.

Community and Behavior

Please remember to adhere to CarChaze's Code of Conduct. We foster an inclusive and respectful community, and we expect contributors to do the same.

Recognition

Every contributor gets recognized! All accepted contributions will see the contributor's name added to the Credits section of our README.

Questions?

If you have any questions about contributing or face issues while setting up, don't hesitate to reach out. Create an issue, and a team member will assist you.

Thank you for being a part of CarChaze's open-source initiatives! Your efforts help make the React Native ecosystem even better.