iOS

In ios, using TabBarIOS can build native tabbar, but here are two things you should know:

  1. The component inside the tabbar won’t trigger react life cycle, which means it only trigger componentDidMount once when you switch tab at first time and will never trigger componentWillUnmount
  2. No method on tabbar to notify the behaviour of switch

I really needed a way to notify every component of the switching of the tabbar, so I finally used AsynceStorage to ahieve this, although it is asynchronous, but for small data it works quickly like synchronous.

Android

In react-native, Android doesn’t have tabbar component, I recommend to use react-native-scrollable-tab-view, but the thing is it is made by using of scroll, so all the components are mount at first time which may serious affect App’s performance.

My final choice

I hope my app:

  1. Built for both iOS and Android
  2. All components shouldn’t be mounted at same time

so I finally decide to use an old way, just render different component in different tab, in my app.js:

render () {
    const {tab} = this.state
    const {game, player, actions} = this.props

    return (
      <View style={styles.container}>
        {tab === 'game' &&
          <Game {...game} actions={actions} />
        }
        {tab === 'players' &&
          <Player {...player} actions={actions} />
        }
      </View>
    )
  }

I abandon the pretty animation what react-native-scrollable-tab-view implement or the app’s performance will be worse.

In the future, I still can improve this by renderig the main component(like Game, Player) only in the first time when entering them, then keep it never to be unmounted.

Lasy loading and repeat using, these are the key points when implementing a tabbar.