Initial commit

.gitignore

@@ -0,0 +1 @@
+node_modules

README.md

@@ -1,2 +1,74 @@
 # react-native-fs-modal
+
 React native full screen modal component.
+
+### Demo
+
+![React Native Modal Component GIF](https://carquids.box.com/shared/static/lwu7uso8rx5wqwb9dlvdg6vdqit7szty.gif "React Native Modal Component GIF")
+
+### Usage
+
+_NOTE:_** If you are using the native status bar you will need to combine this plugin with the [react-native-overlay plugin](https://github.com/brentvatne/react-native-overlay)
+
+##### Using ref
+
+```js
+
+/**
+ * Two methods show/hide
+ */
+
+showModal () {
+  this.refs.modal.show();
+}
+
+hideModal () {
+  this.refs.modal.close();
+}
+
+...
+
+<Modal
+  // Use ref to allow open/close
+  ref={'modal'}
+
+  // Duration of animation (defaults 500)
+  duration={1000}
+
+  // Any tween function (defaults 'easeOutBack')
+  tween={'easeOutElastic'}
+
+  // Pass styles to modal
+  modalStyle={{borderRadius: 0}}
+
+  // Hide/show UIStatusBar (defaults to true)
+  hideStatusBar={true}
+  >
+
+  // Your modal's content
+  <View style={theme.padder}>
+    <Button
+      onPress={this.hideModal.bind(this)}
+      text={'Close modal'}/>
+  </View>
+</Modal>
+
+```
+
+
+##### Using a child component
+
+```js
+
+<Modal>
+
+  /**
+   * The hide func will be added to SomeComponent's props.
+   * This will allow you to add close buttons from within
+   * the modal's view.
+   */
+
+  <SomeComponent />
+</Modal>
+
+```

index.js

@@ -0,0 +1,156 @@
+'use strict';
+
+var React = require('react-native');
+var deviceScreen = require('Dimensions').get('window');
+var Tween = require('react-native-tween-animation');
+
+var {
+  StyleSheet,
+  View,
+  Component,
+  TouchableWithoutFeedback,
+  StatusBarIOS
+} = React;
+
+class Modal extends Component {
+
+  constructor (props) {
+    super(props);
+
+    this.state = {
+      modalUnderlay: {
+        top: deviceScreen.height,
+        opacity: 0
+      },
+      modal: {
+        top: deviceScreen.height
+      },
+      modalWrapper: {
+        height: 0
+      }
+    };
+  }
+
+  _showModalWrapper () {
+    this.setState({
+      modalWrapper: {
+        height: deviceScreen.height
+      },
+      modalUnderlay: {
+        top: 0
+      }
+    });
+  }
+
+  _hideModalWrapper () {
+    this.setState({
+      modalWrapper: {
+        height: 0
+      },
+      modalUnderlay: {
+        top: deviceScreen.height
+      }
+    });
+  }
+
+  _showModal () {
+    this.modalTween = new Tween({
+      start: {
+        top: deviceScreen.height,
+      },
+      end: {
+        top: 20,
+      },
+      duration: (this.props.hasOwnProperty('duration')) ? (
+        this.props.duration
+      ) : 500,
+      tween: (this.props.hasOwnProperty('tween')) ? (
+        this.props.tween
+      ) : 'easeOutBack',
+      frame: (tweenFrame) => this.setState({
+        modal: tweenFrame
+      })
+    });
+  }
+
+  show () {
+    if(this.props.hideStatusBar !== false)
+      StatusBarIOS.setHidden(true, StatusBarIOS.Animation['slide']);
+    this._showModalWrapper();
+    this.underlayTween = new Tween({
+      start: {
+        opacity: 0,
+      },
+      end: {
+        opacity: 0.6,
+      },
+      duration: 200,
+      tween: 'easeInQuad',
+      frame: (tweenFrame) => this.setState({
+        modalUnderlay: tweenFrame
+      }),
+      done: () => {
+        this._showModal();
+      }
+    });
+  }
+
+  close () {
+    if(this.props.hideStatusBar !== false)
+      StatusBarIOS.setHidden(false, StatusBarIOS.Animation['slide']);
+    this.modalTween.reverse(() => {});
+    this.underlayTween.reverse(() => {
+      this._hideModalWrapper();
+    });
+  }
+
+  renderChildren () {
+    return React.cloneElement(
+      this.props.children,
+      {closeModal: this.close.bind(this)}
+    );
+  }
+
+  render () {
+    return (
+    	<View style={[styles.modalWrapper, this.state.modalWrapper]}>
+        <View style={[styles.modalUnderlay, this.state.modalUnderlay]}></View>
+        <View style={[styles.modal, this.state.modal, this.props.modalStyle]}>
+          {this.renderChildren()}
+        </View>
+    	</View>
+    );
+  }
+};
+
+var styles = StyleSheet.create({
+  modalWrapper: {
+    position: 'absolute',
+    width: deviceScreen.width,
+    height: deviceScreen.height,
+    left: 0,
+    top: 0,
+    backgroundColor: 'transparent'
+  },
+
+  modalUnderlay: {
+    position: 'absolute',
+    width: deviceScreen.width,
+    height: deviceScreen.height,
+    left: 0,
+    backgroundColor: '#000'
+  },
+
+  modal: {
+    position: 'absolute',
+    width: deviceScreen.width-40,
+    height: deviceScreen.height-40,
+    left: 20,
+    backgroundColor: '#fff',
+    opacity: 1,
+    borderRadius: 4,
+    overflow: 'hidden'
+  }
+});
+
+module.exports = Modal;

package.json

@@ -0,0 +1,32 @@
+{
+  "name": "react-native-fs-modal",
+  "version": "0.1.0",
+  "description": "React native full screen modal component.",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/kirkness/react-native-fs-modal.git"
+  },
+  "keywords": [
+    "React-native",
+    "react",
+    "native",
+    "component",
+    "modal",
+    "full-screen",
+    "animation",
+    "tween"
+  ],
+  "author": "Henry Kirkness",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/kirkness/react-native-fs-modal/issues"
+  },
+  "homepage": "https://github.com/kirkness/react-native-fs-modal",
+  "dependencies": {
+    "react-native-tween-animation": "^1.0.1"
+  }
+}