npm package: @ngenux/react-native-mask-view
Description: React Native component that offers a highly customizable mask view with dynamic visibility and position features.
Author: ng-sushil
Latest version: 0.1.2

# @ngenux/react-native-mask-view
## _Dynamic Masking Component for React Native_

`@ngenux/react-native-mask-view` is a versatile React Native component that provides dynamic masking capabilities. It allows for animated visibility and position changes of its child components, offering both translational and visibility animations.

## Installation
To install `@ngenux/react-native-mask-view`, run the following command in your project directory:

```bash
npm install @ngenux/react-native-mask-view
```


## Usage
Import the `MaskView` component from `@ngenux/react-native-mask-view` and wrap it around the element you want to apply dynamic masking to.

## Props
- `initialPosition`: Initial position of the mask view, with `x` and `y` coordinates (default: `{ x: 0, y: 0 }`).
- `translatable`: If true, enables the mask view to move to random positions (default: `false`).
- `toggleDisplay`: If true, toggles the visibility of the mask view at a set interval (default: `false`).
- `displayDuration`: Duration for which the mask view remains visible before toggling (default: `35000ms`).
- `translateDuration`: Duration for each translation animation of the mask view (default: `15000ms`).
- `MaskWidth`: Width of the mask view (default: `50`).
- `MaskHeight`: Height of the mask view (default: `50`).
- `boundaryWidth`: Maximum width boundary for translation.
- `boundaryHeight`: Maximum height boundary for translation.
- `orientation`: Current orientation of the view, 'landscape' or 'portrait'.
- `width`: Width of the container area (default: `360`).
- `height`: Height of the container area (default: `750`).

## Methods
The component does not expose external methods but handles internal animations and translations based on the props provided.

## Tips
- Adjust `boundaryWidth` and `boundaryHeight` in accordance with `MaskWidth` and `MaskHeight` to ensure the mask view does not move outside the intended area.
- To ensure the component functions correctly after orientation changes, provide the `orientation`, `width`, and `height` props. These will help the `Mask`  adjust its position and boundaries in response to changes in the device's orientation.


## Example
```jsx
import * as React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import MaskView from '@ngenux/react-native-mask-view';

export default function App() {
  return (
    <View style={styles.container}>
      <MaskView
        translatable={false}
        toggleDisplay={true}
        initialPosition={{ x: 200, y: 400 }}
        translateDuration={1000}
        MaskWidth={150}
        MaskHeight={50}
        orientation='PORTRAIT'
      >
        <View
          style={{
            alignItems: 'flex-end',
            justifyContent: 'center',
            opacity: 0.5,
          }}
        >
          <Text
            style={{
              fontWeight: 'bold',
              fontSize: 9,
              color: 'black',
            }}
          >
            @ngenux/react-native-mask-view
          </Text>
        </View>
      </MaskView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

```
---
## License
MIT

## Author


Developed by [ng-sushil](https://github.com/ng-sushil) of [@ngenux](https://www.ngenux.com/)