react-native-screen-mic-recorder

A screen and microphone record module for React Native.

This is a cusomized and improved fork of react-native-record-screen

• Support iOS >= 11.0 (only on real device)

• Support Android

  • minSdkVersion = 26
  • compileSdkVersion = 29
  • targetSdkVersion = 29
  • use HBRecorder

Installation

1yarn add react-native-screen-mic-recorder

iOS

add Usage Description in info.plist

<key>NSCameraUsageDescription</key>
<string>Please allow use of camera</string>
<key>NSMicrophoneUsageDescription</key>
<string>Please allow use of microphone</string>

Install pods from the ios folder

1npx pod-install

Android

Add permissions in AndroidManifest.xml

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_INTERNAL_STORAGE" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.FOREGROUND_SERVICE" />

Usage

See the example application for full Android and iOS Example

Record Screen

1import ScreenRecorder from 'react-native-screen-mic-recorder'
2
3// This options can be passed to startRecording
4const options = {
5  mic: true | false // defaults to true
6  width: ? // Defaults to Dimensions.get('window').width, ignored on Android
7  height: ? // Defaults to Dimensions.get('window').height, ignored on Android
8  androidBannerStopRecordingHandler: fn() // Android Only: Callback function to handle stop recording from notification baner
9}
10
11
12// Start Recording
13const recordingStatus = await ScreenRecorder.startRecording(options).catch((error) => {
14  console.warn(error) // handle native error
15})
16
17if (recordingStatus === 'started') ... // Recording has started 
18if (recordingStatus === 'userDeniedPermission') Alert.alert('Plesae grant permission in order to record screen')
19
20// Stop Recording
21const uri = await ScreenRecorder.stopRecording().catch((error) =>
22  console.warn(error) // handle native error
23)
24// uri is the path to the recorded video
25
26const androidBannerStopRecordingHandler = (uri) => {
27  console.log('video uri, recording stopped from Android notification banner', uri)
28}

Delete recorded video

The recorded video is saved inside the App Sandbox and can be added to the camera roll with appropriate code. Once done you can delete the recorded video with

1  ScreenRecorder.deleteRecording(uri)

License

MIT