Expo or React Native: How to tint the entire screen or just a portion even if app isn't active

Question

I'm looking for a way to tint the user's screen a certain shade, and change this tint overtime. (Think F.lux or Night Shift or any number of currently available blue light reducers). Is there any way to do this with React Native and/or Expo? I know iOS doesn't allow users to do this without Jailbreaking, but I believe this could be possible for Android at least? Thank you for your time.

Answer 1

App-wide filter solution (Android and web only, and the filter goes off if you switched to a different app)

You could make a filter with a <View/> React component that I named "filter" in the example below. This does not work on iOS because I didn't find a way to let iOS know that all user clicks are for elements below the filter, not the filter itself.

In the example below, your whole app is represented by <YourApp/> which is in this example a simple button.

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

export default function () {
  let [opacity] = useState(0.8);

  const YourApp = () => (
    <Button onPress={() => alert("clicked !!")} title="Click me" />
  );

  return (
    <View
      name="filterContainer"
      style={{
        flex: 1,
        width: "100%",
        height: "100%",
        position: "absolute",
        alignItems: "center",
        justifyContent: "center",
      }}
    >
      <View
        name="filter"
        style={{
           flex: 1,
           width: "100%",
           height: "100%",
           pointerEvents: "none",
           position: "absolute",
           elevation: 2,
           zIndex: 2,
           backgroundColor: "green",
           opacity: opacity,
        }}
       ></View>
      <View
        name="appContainer"
        style={{
           flex: 1,
           position: "absolute",
           elevation: 1,
           zIndex: 1,
        }}
      >
         <YourApp />
       </View>
    </View>
  );
}

Answer 2

System-wide brightness change (but no tint change, and this is iOS and Android only)

If you're using Expo, you could use SYSTEM_BRIGHTNESS (https://docs.expo.io/versions/latest/sdk/permissions/#permissionssystem_brightness).

NB : The system brightness in most simulators and on web browsers does not work. It only works on real devices.

Here is an example how to set system brightness to 10% :

 import * as Permissions from "expo-permissions";
 import * as Brightness from "expo-brightness";

 async function getAndSetSystemBrightnessAsync() {
    const { status } = await Permissions.askAsync(Permissions.SYSTEM_BRIGHTNESS);
    if (status === "granted") {
      // Set system brightness to 10 %
      await Brightness.setSystemBrightnessAsync(0.1);
      const bright = await Brightness.getSystemBrightnessAsync();
      console.log(bright);
    } else {
      // Web browsers
      console.error("System brightness permission not granted");
    }
}

useEffect(() => {
    // Ask for system brightness permission
    getAndSetSystemBrightnessAsync();
}, []);