@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:

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

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 of @ngenux