Hideable View in React Native – Show/Hide View & It’s Content

As we know, there is no direct way to Show / Hide or change the visibility of a View in React Native. Here I have created a Custom component Hideable View in React Native. You can use this View component in place of the Native View component. Or you can even wrap your Any View, Button, Text, etc in this ‘HideableView‘ to hide it, when required.

via GIPHY

1. Create a new file named “HideableView.js” and add the following code in that file.

Custom HideableView Component

import React from 'react';
import PropTypes from 'prop-types';
import { View } from 'react-native';

const HideableView = (props) => {
  const { children, hide, style } = props;
  if (hide) {
    return null;
  }
  return (<View {...this.props} style={style}>{ children }</View>);
};

HideableView.propTypes = {
  children: PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.number, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.element])),
  ]).isRequired,
  hide: PropTypes.bool,
};

export default HideableView;

2. Import HideableView in your code, as shown below.

import HideableView from './HideableView.js';

Now you can use this HideableView component in place of native View Component.

How to use HideableView?

<HideableView hide={this.state.isHidden} style={{margin: 1}}>
          <Text>{"This text will be hidden"}</Text>
      </HideableView>

You can use this Hideable View in React Native as a normal view.

Enjoy 🙂

Don’t forget to visit our Coding Articles & Tutorials Knowledge Base for other helping solutions.

Next:

1. Run React Native App on a Specific Device or Simulator

2. Preload Images in React Native

Please share this post:
Native Mobile Application Developer (Android + IOS) having experience in Java, Swift, Kotlin, Objective C, Unity, C#, C/C++, NODE JS & PHP.

Ask a Question

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

%d bloggers like this: