React Native: Prevent screen from being turned off

Question

Our specialized hardware for our customers runs Android in a kiosk mode with our React native always on.

The app should always be running, with the display on, waiting for new orders to arrive. But I have noticed that sometimes our customers "accidentally" turn off the screen using the power button on the side of the device.

Is there some way to prevent the power button from being able to turn off the screen and app?

Answer 1

You cannot do this only using React Native app, only Android OS can. Here's how to do it (you'll need to download a 3rd party app):

Download Button Remapper from the Play Store, open it, turn on its accessibility right, go to button settings, tap on the power button option and click on none. This will temporarily disable the power off button.

Answer 2

If you are using expo managed app you should give a look into KeepAwake

Installation :

expo install expo-keep-awake

Example hook:

import { useKeepAwake } from 'expo-keep-awake';
import React from 'react';
import { Text, View } from 'react-native';

export default function KeepAwakeExample() {
  useKeepAwake();
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>This screen will never sleep!</Text>
    </View>
  );
}

Example functions:

import { activateKeepAwake, deactivateKeepAwake } from 'expo-keep-awake';
import React from 'react';
import { Button, View } from 'react-native';

export default class KeepAwakeExample extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Button onPress={this._activate} title="Activate" />
        <Button onPress={this._deactivate} title="Deactivate" />
      </View>
    );
  }

  _activate = () => {
    activateKeepAwake(); 
    alert('Activated!');
  };

  _deactivate = () => {
    deactivateKeepAwake(); 
    alert('Deactivated!');
  };
}

And for bare apps usreact-native-keep-awake

Installation:

yarn add @sayem314/react-native-keep-awake

Example hooks:

import { useKeepAwake } from '@sayem314/react-native-keep-awake';
import React from 'react';
import { Text, View } from 'react-native';
 
export default function KeepAwakeExample {
  useKeepAwake();
 
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>This screen will never sleep!</Text>
    </View>
  );
}

Example components:

import KeepAwake from '@sayem314/react-native-keep-awake';
import React from 'react';
import { Text, View } from 'react-native';
 
export default function KeepAwakeExample {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <KeepAwake />
      <Text>This screen will never sleep!</Text>
    </View>
  );
}

Example functions:

import { activateKeepAwake, deactivateKeepAwake} from "@sayem314/react-native-keep-awake";
import React from "react";
import { Button, View } from "react-native";
 
export default class KeepAwakeExample extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
        <Button onPress={this._activate}>Activate</Button>
        <Button onPress={this._deactivate}>Deactivate</Button>
      </View>
    );
  }
 
  _activate = () => {
    activateKeepAwake();
  };
 
  _deactivate = () => {
    deactivateKeepAwake();
  };
}

Answer 3

I ended up using 'react-native-background-timer', that runs a small code in the background.

If the screen turns off using the power button, the background code identifies it, starts the screen and the app within five seconds.