1

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.

Peter
  • 135
  • 2
  • 7

2 Answers2

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>
  );
}
Etienne Tonnelier
  • 2,119
  • 1
  • 15
  • 14
  • Thank you for your reply! I'm more going for something that tints the whole screen and it stays tinted even after you switch away from the app! So kinda a permanent overlay that allows normally interaction with apps below it if that makes sense. This example you've demonstrated is wonderful, but I don't think the green would still be present if you switched to a different app, correct? Thank you Etienne! – Peter Oct 03 '20 at 13:58
  • 1
    de nada :) Yes the green screen goes away as soon as you close the app (and it doesn't really work on iOS). Some apps on Android use the `SYSTEM_ALERT_WINDOW` permission. You probably have to eject from Expo and use a react native bridge to use `android.view.WindowManager`. I will try a POC in the next few weeks. A nice android example of an app on top of other apps is available at https://github.com/noln/system-alert-window-example On iOS, it does not seem possible : https://stackoverflow.com/questions/39473722/how-to-draw-over-other-apps-with-the-ios-sdk – Etienne Tonnelier Oct 04 '20 at 10:31
1

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();
}, []);
Etienne Tonnelier
  • 2,119
  • 1
  • 15
  • 14