How do I remove a View in React Native

Question

I am still quite new to react and till now I am still not able to understand how to remove a View when the user clicks on a specific button. For example lets say I have this block of code:

import React, { Component } from 'react'
import { AppRegistry, View, Text, TouchAbleOpacity } from 'react-native'

class Example extends Component {
    removeView(){
        // what should I do here?
    }

    render(){
        return (
            <View>
                <View> // View to be removed
                    <TouchAbleOpacity onPress={() => this.removeView()}>
                      <Text>Remove View</Text>
                    </TouchAbleOpacity>
                </View>
            </View>
        )
    }
}

AppRegistry.registerComponent('example', () => Example);

How do I programmatically remove the View element?

Saleel · Accepted Answer · 2016-10-17 14:25:55Z

5

Try something like this:

class Example extends Component {
    constructor(props) {
      super(props);
      this.state = {
        showView: true,
      }
    }

    removeView(){
       this.setState({
         showView: false,
       });
    }

    render(){
        return (
           <View style={{flex: 1, alignItems: 'center', justifyContent: 'center' }}>
           {this.state.showView && (
                <View style={{backgroundColor: 'red', height: 100, width: 100 }}> // View to be removed
                    <TouchableHighlight onPress={() => this.removeView()}>
                      <Text>Remove View</Text>
                    </TouchableHighlight>
                </View>
           )}
           </View>
        )
    }
}

answered Oct 17, 2016 at 14:25

Saleel

8995 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nagaraj Jayaraman Over a year ago

How it will work for multiple View and TouchableHighlight? state is for common!

Lian van der Vyver · Accepted Answer · 2016-10-17 14:24:35Z

2

I do it like this:

import React, { Component } from 'react'
import { AppRegistry, View, Text, TouchAbleOpacity } from 'react-native'

class Example extends Component {

    constructor() {
      super();
      this.state = {
        showView:true
      }
    }

    removeView(){
        this.setState({
          showView:false
        })
    }

    render(){
        return (
            <View>
                {this.renderView()}
            </View>
        )
    }

    renderView(){
      if(this.state.showView){
        return(
          <View>
              <TouchAbleOpacity onPress={() => this.removeView()}>
                <Text>Remove View</Text>
              </TouchAbleOpacity>
          </View>
        );
      }
    }
}

AppRegistry.registerComponent('example', () => Example);

answered Oct 17, 2016 at 14:24

Lian van der Vyver

2,2141 gold badge20 silver badges26 bronze badges

5 Comments

Alex Over a year ago

Is it 100% removed though? Or is it like adding a "hide class into a div"? also, will it work for multiple views?

Lian van der Vyver Over a year ago

Yes the View gets unmounted and yes you can do this for multiple views.

Alex Over a year ago

You're basically showing all the views if showView is set to true, so when the user clicks on the button wouldn't that remove all of the views?

Lian van der Vyver Over a year ago

Sorry I misunderstood your question with the multiple views. That is a good question by the way. I will need to think how I will do that never had to do it like that before.

Lian van der Vyver Over a year ago

@Alex, I ran into the same problem today. I had to remove buttons. So I created a new question on how to remove multiple components.

Collectives™ on Stack Overflow

How do I remove a View in React Native

2 Answers 2

1 Comment

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related