Screen goes blank when switching between tabs

[lrettig]

I encountered a very, very odd bug. In an app with a tab bar, when I switch to the second tab, the screen flashes the contents of the tab and then goes blank. However, it only happens under very specific situations:

1. Only on my iPhone, i.e., not in the simulator
2. Only when debugging with Chrome is turned off
3. When I tap on a TouchableHighlight to make the transition, it seems to always happen; when I tap on the tab bar, it happens only sometimes

I know this sounds odd but I can recreate the issue reliably. Here's a screencast:

I also put together a barebones example here: https://github.com/lrettig/router-tab-bug-example

I can still interact with the blank screen. If there's a button there, I can still tap it, which leads me to believe that opacity is going to zero somewhere. My best guess is that it's a non-deterministic issue with animations, probably with the default Animations.None and NoTransition defined in Animations.js. If I set a sceneConfig on the routes in question to use a different animation--any animation--the issue appears to go away.

Here's some other things I noticed, in case it helps. If I change:

<Schema name="tab" type="switch" icon={TabIcon} />

to

<Schema name="tab" type="replace" icon={TabIcon} />

the problem goes away. If I instead change it to "push", the problem gets worse, affecting both screens. Also, in this code:

class TabIcon extends React.Component {
  render () {
    return (
      <Text
        style={this.props.selected ?
        {color: 'red'} : {color: 'black'}}>
        {this.props.title}
      </Text>
    );
  }
}

If I simplify the style code, removing this.props.selected, or remove the style code entirely, it happens much less often, but it still happens sometimes.

Note that it happens when running from packaged JS code, making this a serious production issue.

I'm completely stumped.

Here's the packages I'm running:

$ npm -v
3.3.6
$ node -v
v5.0.0
$ react-native -v
react-native-cli: 0.1.10
react-native: 0.19.0
$ grep version node_modules/react-native-router-flux/package.json
  "version": "2.1.8"

[aksonov]

TabBar is not 'core' of this component and provided more for reference as example. It has known problems with performance (for example some methods are called several times, etc.) Any improving PR would be appreciated.

[lrettig]

Hi Pavel, thanks for taking a look at this. I would love to try to fix it, but I don't understand the interactions among the tab bar + router + animations well enough. And I'm really struggling to understand why this issue only happens when Chrome debugging is turned off, which as you can imagine makes debugging very hard!

[aksonov]

Could you check with latest version? I've done some changes into TabBar recently

[lrettig]

I just tried to recreate this, using both the older (2.1.8) and latest version of the library, and I couldn't recreate it on either of two devices. No idea what happened. I'll close this.

[keeth]

Seeing this issue. It happens on my iPad but not in Simulator.