androidreact-nativeexpotint

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


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.


Solution

  • 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>
      );
    }