How to remove or unmount a component in React Native?

Question

I want to remove a component in my React Native code, just like the "el.parentNode.removeChild(el)" in JavaScript or "[view removeFromSuperview]" in Objective-C, but I didn't see any related API in React documents. Is there any way to make it?

@DavidWyly It's a very common situation. I don't think any code samples are necessary. — huimin, May 14 '15 at 22:54

score 30 · Answer 1 · edited Mar 28 '18 at 00:29

In React Native or generally in React as I understand you normally don't remove components by calling 'remove[..]' but by changing the markup of the component thus changing the virtual DOM.

Here's some sample code that removes a MapView of a screen.

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  SwitchIOS,
  MapView,
} = React;

var TestMap = React.createClass({

  getInitialState() {
    return {
      showMap: true,
    };
  },

  render: function() {
    var map = this.state.showMap ? <MapView style={styles.map}/> : null;
    return (
      <View style={styles.container}>
        <Text style={{marginBottom: 10}}>Remove a view in React Native</Text>
        <SwitchIOS
          onValueChange={(value) => this.setState({showMap: value})}
          style={{marginBottom: 10}}
          value={this.state.showMap}
          />
        {map}
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 50,
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  map: {
    height: 200,
    width: 300,
    margin: 10,
    borderWidth: 1,
    borderColor: '#000000',
  },

});

AppRegistry.registerComponent('TestMap', () => TestMap);

The relevant part being:

  render: function() {
    var map = this.state.showMap ? <MapView style={styles.map}/> : null;
    return (
      <View style={styles.container}>
        [..]
        {map}
      </View>
    );
  }

score 3 · Answer 2 · edited Nov 23 '20 at 00:29

3

Usually we don't unmount components directly. In React Native, we use navigator to mount/unmount components.

For example, navigator.pop() will "Transition back and unmount the current scene."

And there're some other methods that you can use, please check the doc: https://reactnative.dev/docs/navigation

edited Nov 23 '20 at 00:29

Joel

678
8
17

answered Nov 07 '16 at 10:19

湯凱甯

101
1
2

score 1 · Answer 3 · edited Mar 27 '18 at 19:07

If you're using zIndex on any of your views that you want to remove, sorry, it will not work at all as of 0.39.0. You'll end up with a blank ugly shell near where your view used to be

Also this method var map = this.state.showMap ? <MapView style={styles.map}/> : null;

can sometimes work but more often you need something a bit more complex, so try this:

  render () {
      var cUsers = function() {
        if (this.props.somePropety) {
          return (<SomeSpecialView/>)
        } else {
          return null // or something like (<Text>Some other view</Text>)
        }
      }.bind(this)
      return (
        <View style={style.container}>
          {cUsers()}
        </View>
      )
    }

bind(this) is important. There are other ways to .bind(this), too.

Hey I have this exact problem. Do you have any clue how to solve this? I have a modal made with position absolute and zIndex 1200. When the modal is done, I change the styles past to it to before it is activated but the background of the modal stays laid over the whole screen. Do you know the correct way to handle this problem? — wuno, Oct 03 '17 at 22:04

score 0 · Answer 4 · answered Apr 10 '23 at 02:30

0

If you are using @react-navigation/drawer you can use options={{unmountOnBlur: true}}

so something like this

<Drawer.Screen name="home" options={{unmountOnBlur: true}} component={yourcomp} />

answered Apr 10 '23 at 02:30

Jonathan Coletti

448
4
13

How to remove or unmount a component in React Native?

4 Answers4

Linked