How to change ringer mode to Silent/Ring/Vibrate on click in react-native android application?

Question

I am creating an application for android using react-native. I need to change the ringer mode to Silent or Ring or Vibrate on click as per request and the ringer mode should have to change for the phone. How do I achieve this functionality?

Answer 1

You can use react-native-ringer-mode, although iOS not supported because of the limitations, it works like a charm on Android.

Install the package.

npm install react-native-ringer-mode

Add the line below to your AndroidManifest.xml since it is required to change mode to or from silent mode.

<uses-permission android:name="android.permission.ACCESS_NOTIFICATION_POLICY" />

And you can use it like this. Code example taken from the package README.

import React from 'react';
import { View, Button } from 'react-native';

import {
  useRingerMode,
  RINGER_MODE,
  checkDndAccess,
  requestDndAccess,
} from 'react-native-ringer-mode';

export default function App() {
  const { mode, setMode } = useRingerMode();

  const changeMode = async (newMode) => {
    if (newMode === RINGER_MODE.silent || mode === RINGER_MODE.silent) {
      const hasDndAccess = await checkDndAccess();
      
      if (hasDndAccess === false) {
        // This function opens the DND settings.
        // You can ask user to give the permission with a modal before calling this function.
        requestDndAccess();
        return;
      }
    }

    setMode(newMode);
  };

  return (
    <View>
      <Button title="Silent" onPress={() => changeMode(RINGER_MODE.silent)} />
      <Button title="Normal" onPress={() => changeMode(RINGER_MODE.normal)} />
      <Button title="Vibrate" onPress={() => changeMode(RINGER_MODE.vibrate)} />
    </View>
  );
}