├── .gitignore
├── HideableView.js
├── LICENSE
├── README.md
└── package.json
/.gitignore:
--------------------------------------------------------------------------------
1 | # OS Related Files
2 | #
3 | .DS_Store
4 | thumbs.db
5 |
6 | # Xcode
7 | #
8 | build/
9 | *.pbxuser
10 | !default.pbxuser
11 | *.mode1v3
12 | !default.mode1v3
13 | *.mode2v3
14 | !default.mode2v3
15 | *.perspectivev3
16 | !default.perspectivev3
17 | xcuserdata
18 | *.xccheckout
19 | *.moved-aside
20 | DerivedData
21 | *.hmap
22 | *.ipa
23 | *.xcuserstate
24 | project.xcworkspace
25 |
26 | # Android/IntelliJ
27 | #
28 | build/
29 | .idea
30 | .gradle
31 | local.properties
32 | *.iml
33 |
34 | # node.js
35 | #
36 | node_modules/
37 | npm-debug.log
38 |
39 | # BUCK
40 | buck-out/
41 | \.buckd/
42 | android/app/libs
43 | *.keystore
44 |
--------------------------------------------------------------------------------
/HideableView.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { PropTypes } from 'prop-types';
3 | import { Animated } from 'react-native';
4 |
5 | class HideableView extends Component {
6 | constructor(props) {
7 | super(props);
8 | this.state = {
9 | opacity: new Animated.Value(this.props.visible ? 1 : 0)
10 | }
11 | }
12 |
13 | animate(show) {
14 | const duration = this.props.duration ? parseInt(this.props.duration) : 500;
15 | Animated.timing(
16 | this.state.opacity, {
17 | toValue: show ? 1 : 0,
18 | duration: !this.props.noAnimation ? duration : 0
19 | }
20 | ).start();
21 | }
22 |
23 | shouldComponentUpdate(nextProps) {
24 | return this.props.visible !== nextProps.visible;
25 | }
26 |
27 | componentWillUpdate(nextProps, nextState) {
28 | if (this.props.visible !== nextProps.visible) {
29 | this.animate(nextProps.visible);
30 | }
31 | }
32 |
33 | render() {
34 | if (this.props.removeWhenHidden && !this.props.visible) {
35 | return null;
36 | }
37 |
38 | return (
39 |
40 | {this.props.children}
41 |
42 | )
43 | }
44 | }
45 |
46 | HideableView.propTypes = {
47 | visible: PropTypes.bool.isRequired,
48 | duration: PropTypes.number,
49 | removeWhenHidden: PropTypes.bool,
50 | noAnimation: PropTypes.bool
51 | }
52 |
53 | export default HideableView;
54 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) [2016] [Osagie Edebiri]
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 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ### React Native Hideable View
2 | ---
3 |
4 | A component for React Native that can show/hide its child components.
5 |
6 | ## Installation
7 |
8 | `npm install --save react-native-hideable-view`
9 |
10 | ## Usage
11 |
12 | ```
13 | import HideableView from 'react-native-hideable-view';
14 |
15 |
16 |
17 |
18 | ```
19 |
20 | ## Props
21 |
22 | Prop | Type | Default | Description
23 | ----------------- | -------- | -------- | --------------------
24 | visible | bool | false | Show/Hide the View
25 | duration | int | 500 | Animation time (ms)
26 | removeWhenHidden | bool | false | Unmount component when hidden
27 | noAnimation | bool | false | If true, no animation
28 |
29 | ## Example
30 |
31 | ```
32 | import React, { Component } from 'react';
33 | import { View, Text, TouchableOpacity } from 'react-native';
34 |
35 | import HideableView from 'react-native-hideable-view';
36 |
37 | class Example extends Component {
38 | constructor(props) {
39 | super(props);
40 | this.state = {
41 | visible: false
42 | };
43 | this.toggle = this.toggle.bind(this);
44 | }
45 |
46 | toggle() {
47 | this.setState({
48 | visible: !this.state.visible
49 | });
50 | }
51 |
52 | render() {
53 | return (
54 |
55 |
56 | I am always here.
57 |
58 |
59 |
60 | I appear and disappear at your behest.
61 |
62 |
63 |
64 | {this.state.visible ? 'Hide' : 'Show'}
65 |
66 |
67 | );
68 | }
69 | }
70 | ```
71 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-native-hideable-view",
3 | "version": "1.0.3",
4 | "description": "A view component that can toggle visibility of its child views with or without animation.",
5 | "main": "HideableView.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1"
8 | },
9 | "repository": {
10 | "type": "git",
11 | "url": "git+https://github.com/osagie/react-native-hideable-view.git"
12 | },
13 | "dependencies": {
14 | "react": ">=15.2.0",
15 | "react-native": ">=0.29.0"
16 | },
17 | "keywords": [
18 | "react-native",
19 | "hide",
20 | "toggle"
21 | ],
22 | "author": "Osagie Edebiri (http://osagiethegreat.com)",
23 | "license": "MIT",
24 | "bugs": {
25 | "url": "https://github.com/osagie/react-native-hideable-view/issues"
26 | },
27 | "homepage": "https://github.com/osagie/react-native-hideable-view#readme"
28 | }
29 |
--------------------------------------------------------------------------------