initial launch 0.0.2

Author: vikrantnegi

Diff for: .gitignore

@@ -1,2 +1,8 @@
-node_modules/
-*.log
+node_modules/**/*
+.expo/*
+npm-debug.*
+*.jks
+*.p12
+*.key
+*.mobileprovision
+.vscode

Diff for: package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-animated-loader",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "react-native-animated-loader",
   "main": "src/index.js",
   "files":[
@@ -9,6 +9,9 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
+  "dependencies": {
+    "prop-types": "^15.6.2"
+  },
   "author": "vikrantnegi",
   "license": "MIT"
 }

Diff for: readme.md

@@ -1,3 +1,11 @@
-# react-native-animated-loader
+# React Native Animated Loader
 
-> Coming soon
+A React Native Loader Component which uses Airbnb's [Lottie](https://github.com/react-native-community/lottie-react-native) for beautiful loader animations.
+
+## Install
+
+```
+npm install react-native-animated-loader
+```
+
+> Docs Coming soon

Diff for: src/index.js

@@ -1 +1,88 @@
-console.log('Yeah!');
+import React from 'react';
+import { StyleSheet, View, Modal, ViewPropTypes } from 'react-native';
+import PropTypes from 'prop-types';
+import LottieAnimation from 'lottie-react-native';
+
+export default class AnimatedLoader extends React.PureComponent {
+  static defaultProps = {
+    visible: false,
+    overlayColor: 'rgba(0, 0, 0, 0.25)',
+    source: {},
+    animationType: 'none',
+    animationStyle: {},
+  };
+
+  static propTypes = {
+    animation: PropTypes.object,
+    visible: PropTypes.bool,
+    overlayColor: PropTypes.string,
+    animationType: PropTypes.oneOf(['none', 'slide', 'fade']),
+    source: PropTypes.object,
+    animationStyle: ViewPropTypes.style,
+  };
+
+  animation = React.createRef();
+
+  componentDidMount() {
+    if (this.animation.current) {
+      this.animation.current.play();
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    const { visible } = this.props;
+    if (visible !== prevProps.visible) {
+      if (this.animation.current) {
+        this.animation.current.play();
+      }
+    }
+  }
+
+  _renderLottie = () => {
+    const { source, animationStyle } = this.props;
+    return (
+      <LottieAnimation
+        {...this.props}
+        ref={this.animation}
+        source={source}
+        loop
+        style={[styles.animationStyle, animationStyle]}
+      />
+    );
+  };
+
+  render() {
+    const { visible, overlayColor, animationType } = this.props;
+
+    return (
+      <Modal
+        transparent
+        visible={visible}
+        animationType={animationType}
+        supportedOrientations={['portrait']}
+      >
+        <View style={[styles.container, { backgroundColor: overlayColor }]}>
+          <View>{this._renderLottie()}</View>
+        </View>
+      </Modal>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: 'transparent',
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  animationStyle: {
+    height: '100%',
+    width: '100%',
+  },
+});