# @carchaze/react-native-voice-message-player
> An intuitive and customizable React Native module for playing voice messages seamlessly in chat interfaces. This package offers out-of-the-box components and easy-to-use configurations to integrate voice message playback functionality in your application.
Latest version **1.0.5** (published 2024-07-26) · MIT license · 0 weekly downloads
## Install
```sh
npm install @carchaze/react-native-voice-message-player
pnpm add @carchaze/react-native-voice-message-player
yarn add @carchaze/react-native-voice-message-player
bun add @carchaze/react-native-voice-message-player
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.0.5 |
| Published | 2024-07-26 |
| First published | 2023-08-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 206 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Author | CarChaze |
| Maintainers | hamzaxeros, carchaze |
| Keywords | voice, message, react-native, player, audio-player |
## Links
- npm: https://www.npmjs.com/package/@carchaze/react-native-voice-message-player
- Repository: https://github.com/carchaze-org/react-native-voice-message-player
- Homepage: https://github.com/carchaze-org/react-native-voice-message-player#readme
- Issues: https://github.com/carchaze-org/react-native-voice-message-player/issues
- npm.io page: https://npm.io/package/@carchaze/react-native-voice-message-player
## Dependencies (5)
- [react](https://npm.io/package/react.md) 18.2.0
- [prop-types](https://npm.io/package/prop-types.md) ^15.8.1
- [react-native](https://npm.io/package/react-native.md) 0.72.3
- [react-native-sound](https://npm.io/package/react-native-sound.md) ^0.11.2
- [@ptomasroos/react-native-multi-slider](https://npm.io/package/@ptomasroos/react-native-multi-slider.md) ^2.2.2
## Recent versions
- 1.0.5 (latest) — 2024-07-26
- 1.0.4 — 2023-08-10
- 1.0.3 — 2023-08-09
- 1.0.2 — 2023-08-09
- 1.0.1 — 2023-08-09
- 1.0.0 — 2023-08-09
## README
# @carchaze/react-native-voice-message-player
\
[](LINK_TO_PUBLISH_ACTION)
[](https://github.com/carchaze-org/react-native-voice-message-player/blob/master/LICENSE)
[](https://github.com/prettier/prettier)
[](http://makeapullrequest.com)
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](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
```bash
npm install @carchaze/react-native-voice-message-player
# or
yarn add @carchaze/react-native-voice-message-player
# On Ios
cd ios && pod install && cd..
```
## Usage
1. Import the `RNVoiceMessagePlayer` component into your React Native file:
```jsx
import RNVoiceMessagePlayer from '@carchaze/react-native-voice-message-player';
```
2. Use the `RNVoiceMessagePlayer` component in your render method:
```jsx
const localFile = require('./path/to/audio.*')
const localUrl = "file:///path/to/audio.*"
const onlineUrl = "https://example.com/audio.*"
// Load local file
// Load local url
// Load online url
```
## 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](LICENSE).
## Contributors
A big thank you to all the contributors who have helped make this project better!
## 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](https://reactnative.dev)
- [CarChaze Pvt Ltd](https://github.com/carchaze-org)
- [react-native-sound](https://github.com/zmxv/react-native-sound)
- [prop-types](https://www.npmjs.com/package/prop-types)
- [react](https://reactjs.org)
- [Hamza Hussain](https://github.com/hamzaxeros)
## Contact
If you have any questions or need assistance, feel free to reach out to us:
- Email: hamza@carchaze.com
- GitHub Issues: [Report Issue](https://github.com/carchaze-org/react-native-voice-message-player/issues)
## 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](https://github.com/carchaze-org/react-native-voice-message-player/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](https://github.com/carchaze-org/react-native-voice-message-player/issues/new).
### 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](CODE_OF_CONDUCT.md). 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.
---
_Source: https://npm.io/package/@carchaze/react-native-voice-message-player · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
