react-native-prevent-interaction

A React Native component designed to prevent user interaction with the application UI during certain conditions, such as loading data or processing input. This component is particularly useful for enhancing user experience by preventing accidental taps or gestures on the UI elements when the app is in an intermediate state.

Features

Easy to integrate with any React Native project.
Highly customizable to fit various use cases.
Lightweight with no external dependencies.

Installation

Install via npm:

npm install react-native-prevent-interaction

Or using yarn:

yarn add react-native-prevent-interaction

Importing the Component

The PreventInteractionWhile component can be imported using either named or default import syntax. Here's how you can do it:

Using Named Import

import { PreventInteractionWhile } from 'react-native-prevent-interaction';

Using Default Import

import PreventInteractionWhile from 'react-native-prevent-interaction';

We recommend using named imports for consistency, especially if your project imports multiple exports from the library.

Usage

Here's a simple example to demonstrate how to use the PreventInteractionWhile component:

import React, { useState, useEffect } from 'react';
import { View, ActivityIndicator, Text, Button, Alert } from 'react-native';
import { PreventInteractionWhile } from 'react-native-prevent-interaction'; // or use default import

const ExampleApp = () => {
  const [loadingData, setLoadingData] = useState(true);

  useEffect(() => {
    // Simulate data fetching
    setTimeout(() => {
      setLoadingData(false);
    }, 2000);
  }, []);

  const handlePress = () => {
    Alert.alert("Button Clicked", "The button is active and not blocked by loading.");
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <PreventInteractionWhile whileCondition={loadingData} />
      <Button onPress={handlePress} title="Press Me" />
      {loadingData ? <ActivityIndicator size="large" /> : <Text>Data Loaded</Text>}
      <Text>The button above is enabled but cannot be interacted with while data is loading.</Text>
    </View>
  );
};

Props

whileCondition: A boolean that controls the visibility of the overlay. When true, user interaction is prevented.

Contributing

Contributions are welcome! Please open an issue or submit a pull request with your improvements or suggestions.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

For support, please open an issue in the GitHub repository.

Acknowledgments

Thanks to everyone who has contributed to this project!

cstayyab/react-native-prevent-interaction