Package Exports

@carpcai/expo-recorder
@carpcai/expo-recorder/lib/commonjs/index.js
@carpcai/expo-recorder/lib/module/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@carpcai/expo-recorder) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Expo Recorder

Audio recorder for your React Native apps 🎙️
This is a wrapper component that implements Expo Audio and features an animated waveform for your recording needs. 💪

[!NOTE] This package is mostly subjective and might not fit your use case and/or design.

I will try to make this as generic as possible, but if you want a very customized experience, feel free to copy its code and customize it the way you want. Alternatively, you could submit a PR if you think it will help the general public. See the contributing guide to get started.

Installation

npx expo install @hippo_scribe/expo-recorder

Dependencies

npx expo install expo-av react-native-reanimated react-native-gesture-handler

You might want to check out the individual installation instructions from this package's dependencies.

Usage

import { View, Button } from 'react-native'
import { Recorder, type RecorderRef } from '@lodev09/expo-recorder'

const App = () => {
  const recorder = useRef<RecorderRef>(null)

  const startRecord = () => {
    recorder.current?.startRecording()
  }

  const stopRecord = () => {
    recorder.current?.stopRecording()
  }

  const recordingStopped = (uri?: string) => {
    console.log(uri) // Save the uri somewhere! 🎉
  }

  return (
    <View>
      <Recorder ref={recorder} onRecordStop={recordingStopped} />
      <Button title="Record" onPress={startRecord} />
      <Button title="Stop" onPress={stopRecord} />
    </View>
  )
}

For complete usage, see example.

Also check out react-native-true-sheet, the Bottom Sheet used in this example.

Contributing

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

License

MIT