├── LICENSE
├── README.md
├── _config.yml
└── display.js


/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2015 Joel Arvidsson
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # react-native-display
  2 | This 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.
  3 | 
  4 | ![intro](https://cloud.githubusercontent.com/assets/9949238/22396351/f1452940-e55f-11e6-8e9b-ae26396c2051.gif)
  5 | 
  6 | ## Installation
  7 | 
  8 | `$ npm install react-native-display --save`
  9 | 
 10 | ## Dependencies
 11 | [`react-native-animatable`](https://github.com/oblador/react-native-animatable)
 12 | 
 13 | ## Usage
 14 | ```js
 15 | import Display from 'react-native-display';
 16 | ```
 17 | ### Then, easy as:
 18 | ```js
 19 | <Display enable={this.state.enable}>
 20 |   <Text> My custom components </Text>
 21 | </Display>
 22 | ```
 23 | 
 24 | ## Properties
 25 | #### ***`enter/exit`***  props using [react-native-animatable](https://github.com/oblador/react-native-animatable) for animation name.
 26 | | Prop | Description | Default |
 27 | |---|---|---|
 28 | |**`enable`**|`true` to render. `false` to not render. |`true`|
 29 | |**`defaultDuration`**|Default duration for enter and exit animations. |`250`|
 30 | |**`enterDuration`**|Duration for enter animation. |`250`|
 31 | |**`exitDuration`**|Duration for exit animation. |`250`|
 32 | |**`enter`**|Animation name to run when render (***enable=true***).<br/>Example: ***enter='fadeIn'*** |None|
 33 | |**`exit`**|Animation name to run when not render (***enable=false***).<br/>Example: ***exit='fadeOut'*** |None|
 34 | |**`style`**|Same *react-native* style for `View`. |None|
 35 | |**`keepAlive`**|When ***enable=false*** <br /> If `true` components will hide only ([`componentWillUnmount()`](https://facebook.github.io/react/docs/react-component.html#componentwillunmount) will not fire). <br />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`|
 36 | 
 37 | ### Using inspector to validate that after exit animation component will not render: 
 38 | 
 39 | ![demo2](https://cloud.githubusercontent.com/assets/9949238/22395957/8bde370e-e555-11e6-8440-38b85c7c284c.gif)
 40 | 
 41 | ## Full example:
 42 | ```js
 43 | import React, { Component } from 'react';
 44 | import {
 45 |   AppRegistry,
 46 |   StyleSheet,
 47 |   Text,
 48 |   View,
 49 |   Button,
 50 | } from 'react-native';
 51 | 
 52 | import Display from 'react-native-display';
 53 | 
 54 | export default class testdisplay extends Component {
 55 |   constructor(props) {
 56 |     super(props);
 57 | 
 58 |     this.state = {enable: true};
 59 |   }
 60 | 
 61 |   toggleDisplay() {
 62 |     let toggle = !this.state.enable;
 63 |     this.setState({enable: toggle});
 64 |   }
 65 | 
 66 |   render() {
 67 |     return (
 68 |       <View>
 69 |         <View style={styles.button}>
 70 |           <Button
 71 |             onPress={this.toggleDisplay.bind(this)}
 72 |             title="Toggle display"
 73 |             color="#34495e"
 74 |             accessibilityLabel="Toggle display for show/hide circles"
 75 |           />
 76 |         </View>
 77 |         <View style={styles.center}>
 78 |           <Display 
 79 |             enable={this.state.enable} 
 80 |             enterDuration={500} 
 81 |             exitDuration={250}
 82 |             exit="fadeOutLeft"
 83 |             enter="fadeInLeft"
 84 |           >
 85 |             <View style={[styles.circle, {backgroundColor: '#2ecc71'}]} />
 86 |           </Display>
 87 |           <Display 
 88 |             enable={this.state.enable} 
 89 |             enterDuration={500} 
 90 |             exitDuration={250}
 91 |             exit="fadeOutDown"
 92 |             enter="fadeInUp"
 93 |           >
 94 |             <View style={[styles.circle, {backgroundColor: '#9b59b6'}]} />
 95 |           </Display>
 96 |           <Display 
 97 |             enable={this.state.enable} 
 98 |             enterDuration={500} 
 99 |             exitDuration={250}
100 |             exit="fadeOutRight"
101 |             enter="fadeInRight"
102 |           >
103 |             <View style={[styles.circle, {backgroundColor: '#3498db'}]} />
104 |           </Display>
105 |         </View>
106 |       </View>
107 |     );
108 |   }
109 | }
110 | 
111 | const styles = {
112 |   button: {
113 |     padding: 10,
114 |     margin: 15,
115 |   },
116 |   center: {
117 |     flexDirection: 'row',
118 |     justifyContent: 'space-between',
119 |     alignItems: 'center',
120 |   },
121 |   circle: {
122 |     borderRadius: 50,
123 |     height: 100,
124 |     width: 100,
125 |     margin: 15
126 |   },
127 | }
128 | 
129 | AppRegistry.registerComponent('testdisplay', () => testdisplay);
130 | ```
131 | 
132 | ### Result:
133 | 
134 | ![demo](https://cloud.githubusercontent.com/assets/9949238/22395868/50f73278-e553-11e6-8081-f253db9d8e22.gif)
135 | 
136 | ### TODO:
137 | * On start animation done event
138 | * On exit animation done event
139 | 


--------------------------------------------------------------------------------
/_config.yml:
--------------------------------------------------------------------------------
1 | theme: jekyll-theme-cayman


--------------------------------------------------------------------------------
/display.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import { 
 3 |   View, 
 4 |   Text, 
 5 |   StyleSheet,
 6 |   Dimensions,
 7 | } from 'react-native';
 8 | 
 9 | import * as Animatable from 'react-native-animatable';
10 | const screen = Dimensions.get('window');
11 | const WIDTH = screen.width;
12 | const HEIGHT = screen.height;
13 | 
14 | const DEFAULT_DURATION = 250;
15 | 
16 | export default class Display extends Component {
17 | 
18 |   constructor(props) {
19 |     super(props);
20 |     
21 |     this.state = { enable: this.props.enable };
22 |   }
23 | 
24 |   onEndAnimation(endState) {
25 |     if (endState.finished == true) 
26 |       this.setState({enable: false});
27 |   }
28 | 
29 |   shouldComponentUpdate(nextProps) {
30 |     return true;
31 |   }
32 | 
33 |   componentWillUpdate(nextProps, nextState) {
34 | 
35 |     if (nextProps.enable != this.props.enable) {
36 |       if (nextProps.enable == false) {
37 | 
38 |         let duration = nextProps.exitDuration || nextProps.defaultDuration || DEFAULT_DURATION;
39 | 
40 |         if (nextProps.exit != null) {
41 |           this.refs.display[nextProps.exit](duration).then((endState) => this.onEndAnimation(endState));
42 |         }
43 |         else
44 |           nextState.enable = false;
45 |       }
46 |       else
47 |         nextState.enable = true;
48 |     }
49 |   }
50 | 
51 |   enableStyle() {
52 |     if (this.state.enable)
53 |       return {};
54 | 
55 |     return {
56 |       position: 'absolute',
57 |       top: HEIGHT,
58 |       left: WIDTH,
59 |       height: 0,
60 |       width: 0,
61 |     };
62 |   }
63 | 
64 |   render() {
65 |     
66 |     if (this.state.enable == false && this.props.keepAlive != true)
67 |       return null;
68 | 
69 |     return (
70 |       <Animatable.View ref="display" style={[this.props.style, this.enableStyle.bind(this)()]}>
71 |         {this.props.children}
72 |       </Animatable.View>
73 |     );
74 |   }
75 | 
76 |   componentDidUpdate(prevProps, prevState) {
77 | 
78 |     if (prevProps.enable != this.props.enable)
79 |       if (this.props.enable == true) {
80 | 
81 |         this.refs.display.stopAnimation();
82 | 
83 |         let duration = this.props.enterDuration || this.props.defaultDuration || DEFAULT_DURATION;
84 | 
85 |         if (this.props.enter != null) {
86 |           this.refs.display[this.props.enter](duration).then((endState) => {  });
87 |         }
88 |       }
89 |   }
90 | 
91 | }


--------------------------------------------------------------------------------