react-native-kiosk

react-native-kiosk

A simple kiosk mode for Android in react native.

Does not work with Expo because of its native dependencies.

Installation

npm install react-native-kiosk

Android Installation

In MainActivity.java add the following code:

//...
import android.app.ActivityManager;
import android.content.Context;
import android.content.Intent;
import android.os.Bundle;
import com.reactnativekiosk.Immersive;

public class MainActivity extends ReactActivity {
    //...

    @Override
    public void onBackPressed() {
        if( !Immersive.getActive() ) super.onBackPressed();
        else Immersive.fullscreen(getWindow());
    }

    @Override
    protected void onPause() {
        super.onPause();
        if(Immersive.getActive()) Immersive.moveToFront(getTaskId(),(ActivityManager) getSystemService(Context.ACTIVITY_SERVICE));
    }

    @Override
    protected void onResume() {
        super.onResume();
        if(Immersive.getActive()) Immersive.fullscreen(getWindow());
    }

    @Override
    protected void onUserLeaveHint() {
        super.onUserLeaveHint();
        if(Immersive.getActive()) {
        Immersive.moveToFront(getTaskId(), (ActivityManager) getSystemService(Context.ACTIVITY_SERVICE));
        Immersive.fullscreen(getWindow());
        }
    }

    @Override
    public void onWindowFocusChanged(boolean hasFocus) {
        super.onWindowFocusChanged(hasFocus);
        if(Immersive.getActive()) Immersive.fullscreen(getWindow());
        if (!hasFocus) {
        Intent closeDialog = new Intent(Intent.ACTION_CLOSE_SYSTEM_DIALOGS);
        sendBroadcast(closeDialog);
        }
    }
}

The next step is to put this here in the AndroidManifest.xml:

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

And below in the <intent-filter>:

<intent-filter>
    <action android:name="android.intent.action.MAIN" />
    <category android:name="android.intent.category.HOME" />
    <category android:name="android.intent.category.LAUNCHER" />
</intent-filter>

Example in JS

import Kiosk from "react-native-kiosk";

// ...
const App = () => {
  const handleFullscreen = () => {
    Kiosk.fullscreen();
  };

  const handleExitFullscreen = () => {
    Kiosk.exitFullscreen();
  };

  return (
    <View >
      <TouchableOpacity onPress={handleFullscreen} >
        <Text>Enter</Text>
      </TouchableOpacity>

      <TouchableOpacity onPress={handleExitFullscreen} >
        <Text>Exit</Text>
      </TouchableOpacity>

    </View>
  );
};

Contributing

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

License

MIT