How to forcefully unmount a component in react native?

I'm using reactnavigation stackNavigtor as the root structure.

When my app loads, it initially mounts a component based on intialRouteName - which is good so far. However, when I open my slideMenu and navigate to another screen, the component that I was just in, is not unmounted and still renders at the back, even though I have successfully navigated.

Ofcourse I can use the this.state({}) in my initial component to stop the render, but the issue is, I can't setup it in such a way that when I navigate to another screen, I'd prevent the render of the previous screen.

AppNavigation.js

/*
 * LaunchScreen loads first
 * I then navigate to Profile via (this.props.navigate('OpenDrawer')).
 *  - This opens CustomComponent and inside that, I select Profile
 * When I navigate to Profile, The LaunchScreen is not unmounted
*/
export const SignedIn = StackNavigator({
  LaunchScreen: {
    screen: $LaunchScreen
  },
  Profile: {
    screen: $Profile
  },
  EditProfile: {
    screen: EditProfile
  },
  MyDoctors: {
    screen: $Doctors
  }
}, {
  headerMode: "none",
  mode: "modal",
  initialRouteName: 'LaunchScreen' // this is the component that loads
});

export const HomeNav = StackNavigator({
  Home: {
    screen: SignedIn,
    navigationOptions: {
      gesturesEnabled: false
    }
  }
}, {
  headerMode: "none",
  mode: "modal",
  initialRouteName: "Home", // we enter this route when the app loads.
});

const PrimaryNav = StackNavigator({
  SignedIn: {
    screen: HomeNav,
    navigationOptions: {
      gesturesEnabled: false
    }
  },
  SignedOut: {
    screen: SignedOut,
    navigationOptions: {
      gesturesEnabled: false
    }
  },
  Loading: {
    screen: Loading
  }
}, {
  headerMode: "none",
  mode: "modal",
  initialRouteName: "Loading",
});

export default PrimaryNav;

LaunchScreen.js

// ... Imports {}


export default class LaunchScreen extends PureComponent<*, State> {
  constructor(props) {
    super(props);
    this.state = {
      index: 0,
    };
  }

  componentDidMount() {
  };

_renderScene = ({ route }) => {
    return (
      <SimplePage
        state           = {this.state}
        style           = {{ backgroundColor: 'white' }}
        type            = {this.state.type}
        updateIndex     = {this.updateIndex.bind(this)}

      />
    );
  };
  
  _renderHeader = props => {
  /*
   * "this.props.navigation.navigate('DrawerOpen')" opens the drawer from left side
   *
  */
    return (
      <View>
        <View style={styles.headerContainer}>
          <TouchableHighlight onPress={() => this.props.navigation.navigate('DrawerOpen')} activeOpacity={1.0} underlayColor="rgba(253,138,94,0)">
          </TouchableHighlight>
        </View>
      </View>
    );
  };


  render() {
    return (
        <TabViewAnimated
        style={[styles.container, this.props.style]}
        navigationState={this.state}
        renderScene={this._renderScene}
        renderHeader={this._renderHeader}
      />
    );
  }
}

What is the main question?

I would like to know how I can unmount a component when I navigate to another screen.

Answers:

Answer

You can use conditions like this:

render() {
  return (
    <View>
      <View style={styles.headerContainer}>
        { this.state.someCondition ?
          <SomeCoponent onPress={() => this.onPress}/> :
          <AnotherComponent onPress={() => this.onPress}/>
        }
      </View>
    </View>
  )
}

Take a look at the react-router:

render() {
  return (
    <View>
      <View style={styles.headerContainer}>
        <Router>
          <Route exact path="/" component={HomeComponent}/>
          <Route path="/news" component={NewsFeedComponent}/>
          <Route exact path="/another" component={AnotherComponent}/>
        </Router>
      </View>
    </View>
  )
}

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.