react-native-voicechat-recording

Voice recording button in chat for Android only, Ios comming soon.

Installation

npm install react-native-voicechat-recording

OR

yarn add react-native-voicechat-recording

Basic Android Example

Usage

import {NativeEventEmitter, NativeModules,StyleSheet, View} from 'react-native';
import React, {useEffect} from 'react';
import VoiceChatRecords from 'react-native-voicechat-recording';

const resolveAssetSource = require('react-native/Libraries/Image/resolveAssetSource');

const {VoiceChatRecord} = NativeModules;
const eventEmitter = new NativeEventEmitter(VoiceChatRecord);

const App = () => {
  const prepareIcon = (path: any): any => {
    const resolvedImage = resolveAssetSource(path);
    return resolvedImage;
  };

// useEffect to get audio recorded path and related stuff after recording
  useEffect(() => {
    // Subscribe to the onAudioRecorded event
    const subscription = eventEmitter.addListener('onAudioRecorded', (data) => {
      try {
        const parsedData = JSON.parse(data);
        parsedData.filePath = parsedData.filePath.replace(/\\/g, '');
        console.log('File path after removing backslashes:', parsedData);
        // Now you can use parsedData normally
      } catch (error) {
        console.error('Error parsing data:', error);
      }
    });

    return () => {
      subscription.remove(); // Clean up the subscription on unmount
    };
  }, [eventEmitter]);

  return (
   <VoiceChatRecords
        style={styles.voiceChatRecord}
        micIcon={prepareIcon(require('./icon.png'))} // Load mic icon png
        micIconSize={150} // Set mic icon size required
        arrowIconsSize={60} // Set arrow icons size required
        lockText="Lock" // Set lock text required
        cancelText="Cancel" // Set cancel text required
        lockTextSize={16} // Set lock text size required
        cancelTextSize={16} // Set cancel text size required
        lockTextColor="#CC3233" // Set lock text color required in hex
        cancelTextColor="#DFdd33" // Set cancel text color required in hex
        lockMargin={120} // Set swipe margin for lock text required
        cancelMargin={120} // Set swipe margin for cancel text required
        micBackViewColor="#00000000" // Set background color for mic view required
      />
  );
};

const styles = StyleSheet.create({
  voiceChatRecord: {
    height:'100%',
    width:'100%',
  },
});

export default App;

Contributing

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

License

MIT

Made with create-react-native-library