A view component that can toggle visibility of its child views with or without animation.
JavaScript
Latest commit 159b05a Jan 1, 2017 @osagie 1.0.3
Permalink
Failed to load latest commit information.
.gitignore Initial commit. Dec 31, 2016
HideableView.js Pass styles through, fixed removeWhenHidden Jan 1, 2017
LICENSE Initial commit. Dec 31, 2016
README.md Updated Readme. Dec 31, 2016
package.json 1.0.3 Jan 1, 2017

README.md

React Native Hideable View


A component for React Native that can show/hide its child components.

Installation

npm install --save react-native-hideable-view

Usage

import HideableView from 'react-native-hideable-view';

<HideableView visible={boolean}>
  <YourView />
</HideableView>

Props

Prop Type Default Description
visible bool false Show/Hide the View
duration int 500 Animation time (ms)
removeWhenHidden bool false Unmount component when hidden
noAnimation bool false If true, no animation

Example

import React, { Component } from 'react';
import { View, Text, TouchableOpacity  } from 'react-native';

import HideableView from 'react-native-hideable-view';

class Example extends Component {
    constructor(props) {
        super(props);
        this.state = {
            visible: false
        };
        this.toggle = this.toggle.bind(this);
    }

    toggle() {
        this.setState({
            visible: !this.state.visible
        });
    }

    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.title}>
                    I am always here.
                </Text>
                <HideableView hidden={this.state.hidden}>
                    <Text>
                      I appear and disappear at your behest.
                    </Text>
                </HideableView>
                <TouchableOpacity onPress={this.toggle}>
                    <Text>{this.state.visible ? 'Hide' : 'Show'}</Text>
                </TouchableOpacity>
            </View>
        );
    }
}