react-native-masked-animated-view

A React Native component for creating masked animations.

Installation

To install the package, use npm or yarn:

1npm install react-native-masked-animated-view @react-native-masked-view/masked-view

or

1yarn add react-native-masked-animated-view @react-native-masked-view/masked-view

Additional Setup for iOS

If you're using this library in an iOS project, make sure to navigate to the ios directory and run pod install to install the necessary CocoaPods dependencies:

1cd ios
2pod install

Usage

Here's a basic example of how to use MaskedAnimatedView in your React Native project.

1import React, {useState} from 'react';
2import {
3  StyleSheet,
4  SafeAreaView,
5  View,
6  Text,
7  Image,
8  Pressable,
9  StatusBar,
10} from 'react-native';
11import {
12  MaskedAnimatedView,
13  MAVAnimationState,
14} from 'react-native-masked-animated-view';
15
16const maskItem = require('./path/to/your/maskItem.png');
17
18const App = () => {
19  const [animationState, setAnimationState] = useState(
20    MAVAnimationState.LOADED,
21  );
22
23  const renderMaskItem = () => (
24    <View style={styles.maskItemContainer}>
25      <Text style={styles.enterText}>ENTER</Text>
26      <Image source={maskItem} style={styles.maskItemImage} />
27    </View>
28  );
29
30  const handlePress = () => {
31    setAnimationState(
32      animationState === MAVAnimationState.LOADING
33        ? MAVAnimationState.LOADED
34        : MAVAnimationState.LOADING,
35    );
36  };
37
38  return (
39    <SafeAreaView style={styles.container}>
40      <StatusBar backgroundColor="black" barStyle="light-content" />
41      <Pressable style={styles.button} onPress={handlePress}>
42        <MaskedAnimatedView
43          animationState={animationState}
44          backgroundColor="green"
45          maskItem={renderMaskItem()}
46          maskElementStyle={{}}>
47          <View style={styles.innerView} />
48        </MaskedAnimatedView>
49      </Pressable>
50    </SafeAreaView>
51  );
52};
53
54const styles = StyleSheet.create({
55  container: {
56    flex: 1,
57  },
58  button: {
59    flex: 1,
60  },
61  maskItemContainer: {
62    alignItems: 'center',
63    justifyContent: 'center',
64  },
65  enterText: {
66    fontSize: 20,
67    color: 'black',
68    fontWeight: 'bold',
69  },
70  maskItemImage: {
71    width: 150,
72    height: 150,
73  },
74  innerView: {
75    flex: 1,
76    backgroundColor: 'black',
77  },
78});
79
80export default App;

For more detailed example, please refer to the example directory in the repository.

Props

Prop Name	Type	Default	Description
children	node	null	The content to be masked by the animated view.
animationState	enum	MAVAnimationState.LOADING	The state of the animation. Can be MAVAnimationState.LOADING or MAVAnimationState.LOADED.
maskItem	ReactNode	null	The item to be used as the mask (e.g., an image or a custom component).
backgroundColor	string	black	The background color of the view.
maskColor	string	white	The color of the mask element's background.
maskElementStyle	object	{ height: 80, width: 80 }	The style of the mask element.

Animation States

The animationState prop controls the state of the animation. It can have the following values:

• LOADING: The animation is in the loading state.
• LOADED: The animation is in the loaded state.

Development

If you want to contribute or run the example project, follow these steps:

1. Clone the repository:

1git clone https://github.com/orcunorcun/react-native-masked-animated-view.git
2cd react-native-masked-animated-view

2. Install dependencies:

1npm install
2cd example
3npm install

3. Run the example project:

1npm start

License

MIT