[
{
"path": "LICENSE",
"content": "The MIT License (MIT)\n\nCopyright (c) 2015 Joel Arvidsson\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n\n"
},
{
"path": "README.md",
"content": "# react-native-display\nThis module brings \"Display: none\" (css style) to turn on/off components from render. Using this module will improve your app performance and appearance with the enter/exit animations.\n\n\n\n## Installation\n\n`$ npm install react-native-display --save`\n\n## Dependencies\n[`react-native-animatable`](https://github.com/oblador/react-native-animatable)\n\n## Usage\n```js\nimport Display from 'react-native-display';\n```\n### Then, easy as:\n```js\n\n My custom components \n\n```\n\n## Properties\n#### ***`enter/exit`*** props using [react-native-animatable](https://github.com/oblador/react-native-animatable) for animation name.\n| Prop | Description | Default |\n|---|---|---|\n|**`enable`**|`true` to render. `false` to not render. |`true`|\n|**`defaultDuration`**|Default duration for enter and exit animations. |`250`|\n|**`enterDuration`**|Duration for enter animation. |`250`|\n|**`exitDuration`**|Duration for exit animation. |`250`|\n|**`enter`**|Animation name to run when render (***enable=true***).
Example: ***enter='fadeIn'*** |None|\n|**`exit`**|Animation name to run when not render (***enable=false***).
Example: ***exit='fadeOut'*** |None|\n|**`style`**|Same *react-native* style for `View`. |None|\n|**`keepAlive`**|When ***enable=false***
If `true` components will hide only ([`componentWillUnmount()`](https://facebook.github.io/react/docs/react-component.html#componentwillunmount) will not fire).
If `false` components will not render at all. Use it on complex components or on modules that required init on everytime that they are mount (for example: [react-native-camera](https://github.com/lwansbrough/react-native-camera)). |`false`|\n\n### Using inspector to validate that after exit animation component will not render: \n\n\n\n## Full example:\n```js\nimport React, { Component } from 'react';\nimport {\n AppRegistry,\n StyleSheet,\n Text,\n View,\n Button,\n} from 'react-native';\n\nimport Display from 'react-native-display';\n\nexport default class testdisplay extends Component {\n constructor(props) {\n super(props);\n\n this.state = {enable: true};\n }\n\n toggleDisplay() {\n let toggle = !this.state.enable;\n this.setState({enable: toggle});\n }\n\n render() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n }\n}\n\nconst styles = {\n button: {\n padding: 10,\n margin: 15,\n },\n center: {\n flexDirection: 'row',\n justifyContent: 'space-between',\n alignItems: 'center',\n },\n circle: {\n borderRadius: 50,\n height: 100,\n width: 100,\n margin: 15\n },\n}\n\nAppRegistry.registerComponent('testdisplay', () => testdisplay);\n```\n\n### Result:\n\n\n\n### TODO:\n* On start animation done event\n* On exit animation done event\n"
},
{
"path": "_config.yml",
"content": "theme: jekyll-theme-cayman"
},
{
"path": "display.js",
"content": "import React, { Component } from 'react';\r\nimport { \r\n View, \r\n Text, \r\n StyleSheet,\r\n Dimensions,\r\n} from 'react-native';\r\n\r\nimport * as Animatable from 'react-native-animatable';\r\nconst screen = Dimensions.get('window');\r\nconst WIDTH = screen.width;\r\nconst HEIGHT = screen.height;\r\n\r\nconst DEFAULT_DURATION = 250;\r\n\r\nexport default class Display extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n \r\n this.state = { enable: this.props.enable };\r\n }\r\n\r\n onEndAnimation(endState) {\r\n if (endState.finished == true) \r\n this.setState({enable: false});\r\n }\r\n\r\n shouldComponentUpdate(nextProps) {\r\n return true;\r\n }\r\n\r\n componentWillUpdate(nextProps, nextState) {\r\n\r\n if (nextProps.enable != this.props.enable) {\r\n if (nextProps.enable == false) {\r\n\r\n let duration = nextProps.exitDuration || nextProps.defaultDuration || DEFAULT_DURATION;\r\n\r\n if (nextProps.exit != null) {\r\n this.refs.display[nextProps.exit](duration).then((endState) => this.onEndAnimation(endState));\r\n }\r\n else\r\n nextState.enable = false;\r\n }\r\n else\r\n nextState.enable = true;\r\n }\r\n }\r\n\r\n enableStyle() {\r\n if (this.state.enable)\r\n return {};\r\n\r\n return {\r\n position: 'absolute',\r\n top: HEIGHT,\r\n left: WIDTH,\r\n height: 0,\r\n width: 0,\r\n };\r\n }\r\n\r\n render() {\r\n \r\n if (this.state.enable == false && this.props.keepAlive != true)\r\n return null;\r\n\r\n return (\r\n \r\n {this.props.children}\r\n \r\n );\r\n }\r\n\r\n componentDidUpdate(prevProps, prevState) {\r\n\r\n if (prevProps.enable != this.props.enable)\r\n if (this.props.enable == true) {\r\n\r\n this.refs.display.stopAnimation();\r\n\r\n let duration = this.props.enterDuration || this.props.defaultDuration || DEFAULT_DURATION;\r\n\r\n if (this.props.enter != null) {\r\n this.refs.display[this.props.enter](duration).then((endState) => { });\r\n }\r\n }\r\n }\r\n\r\n}"
}
]