react-native-prevent-background

Simple library for React Native that prevents displaying the app's current screen while in the background (suitable for apps that contain sensitive information)

Installation

yarn add react-native-prevent-background

or

npm install react-native-prevent-background

Usage

Available props

| Property | Type | Default | Description | | ------------------- | --------- | ----------- | ----------------------------------------------------------------------------------------------------- | | block | boolean | true | Conditions to enable background preview prevention (e.g. useful to enable only when app is incognito) | | style | ViewStyle | backgroundColor: '#999999' | Style for default view (does not work when used with customPreventView prop) | | customPreventView | ReactNode | undefined | Use to replace the default view (useful when you want to change it to suit each purpose) |

A simple example

// ...
import PreventBackground from 'react-native-prevent-background';

// ...

return (
  <View>
    {/* ... rest */}

    {/* must be listed last for work properly */}
    <PreventBackground />
  </View>
);

Example with customPreventView

// ...
import { BlurView } from '@react-native-community/blur';
import PreventBackground from 'react-native-prevent-background';

// ...

const CustomPreventionView = () => {
  return (
    <View>
      <BlurView
        style={StyleSheet.absoluteFillObject}
        blurType="dark"
        blurAmount={10}
        reducedTransparencyFallbackColor="white"
      />
      <View style={styles.center}>
        <Text style={styles.text}>Sensitive content</Text>
      </View>
    </View>
  );
};

const App = () => {
  // ...

  return (
    <View>
      {/* ... rest */}

      {/* must be listed last for work properly */}
      <PreventBackground />
    </View>
  );
};

// ...

Contributing

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

License

MIT

Made with create-react-native-library