Mounting / unmounting react components on tab change

[mihail]

Hi,

Probably a dumb question but I really cannot sort it out, when the app is first loading, all the tab components get mounted, the componentDidMount is called.
What I’am aiming is to only mount the active tab component and on tab change to unmount the current component and mount the next selected one.

For example, by default the Home should be mounter but LastTen and Search to be left untouched, if I switch to LastTen then I want the Home to be unmounted and only LastTen mounted.

Thanks!!!

class Tabs extends React.Component {
  renderTabs() {
    return [
      {
        content: <Home key="home" navigator={this.props.navigator} />,
        tab: <Tab key="home" label="Home" icon="ion-ios-home-outline" />
      },
      {
        content: <LastTen key="last10" navigator={this.props.navigator} />,
        tab: <Tab key="last10" label="Last photos" icon="ion-ios-albums-outline" />
      },
      {
        content: <Search key="forms" navigator={this.props.navigator} />,
        tab: <Tab key="search" label="Search" icon="ion-search" />
      }
    ];
  }

  render() {
    return (
      <Page>
        <Tabbar
          renderTabs={this.renderTabs.bind(this)}
        />
      </Page>
    );
  }
}