In this tutorial, we will add microphone permissions to our Android app and request them using the React Native Typescript layer.
Add Permission for RECORD_AUDIO in the Manifest File
First, add the RECORD_AUDIO permission in the main AndroidManifest.xml file. This permission is required to access the microphone.
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<application
android:name=".MainApplication"
android:label="@string/app_name"
android:icon="@mipmap/ic_launcher"
android:roundIcon="@mipmap/ic_launcher_round"
android:allowBackup="false"
android:theme="@style/AppTheme">
<activity
android:name=".MainActivity"
android:label="@string/app_name"
android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
android:launchMode="singleTask"
android:windowSoftInputMode="adjustResize"
android:exported="true">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>Request Microphone Permissions from the User
Next, request microphone permissions from the user in the React Native Typescript layer. In this example, we will request permissions inside a useEffect block.
import React, {useEffect, useState} from 'react';
import {PermissionsAndroid, SafeAreaView, Text} from 'react-native';
const MicPermissions = () => {
const [audioAccessGranted, setAudioAccessGranted] = useState(false);
useEffect(() => {
requestMicPermission();
}, []);
const requestMicPermission = async () => {
try {
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.RECORD_AUDIO,
);
setAudioAccessGranted(granted === PermissionsAndroid.RESULTS.GRANTED);
} catch (err) {
return setAudioAccessGranted(false);
}
};
return (
<>
<Text style={{fontSize: 40}}>
{audioAccessGranted ? 'Can use microphone' : 'No Access'}
</Text>
</>
);
};
function App(): JSX.Element {
return (
<SafeAreaView>
<MicPermissions />
</SafeAreaView>
);
}
export default App;This code will prompt the user to provide permission for recording audio when the app is launched. If the permission is granted, it will display “Can use microphone”; otherwise, it will display “No Access”.
Verifying Permissions Request
After implementing the above steps, your Android app should now ask the user to provide permissions for recording audio. This ensures that your app has the necessary permissions to access the device’s microphone, which is essential for features that require audio input.
Conclusion
By following these steps, you have successfully added and requested microphone permissions in your React Native Android app. This setup ensures that your app can interact with the device’s microphone, allowing for audio input functionalities.