Avoid blocking TabBarItem re-onLayout callback

[ethanshar]

Description

Avoid blocking TabBarItem re-onLayout callback

To reproduce (copy in playground)

const twoItems = [
  {label: 'February', key: 'feb'},
  {label: 'April', key: 'apr'}
];
const threeItems = [
  {label: 'February', key: 'feb'},
  {label: 'March', key: 'mar'},
  {label: 'April', key: 'apr'}
];

export default class PlaygroundScreen extends Component {
  state = {
    items: twoItems
  };

  onPress = () => {
    this.setState({
      items: this.state.items.length === 2 ? threeItems : twoItems
    });
  };

  render() {
    return (
      <View bg-grey80 flex>
        <View center padding-page>
          <Button label="Change items" onPress={this.onPress}/>
        </View>
        <TabController items={this.state.items}>
          <TabController.TabBar/>
        </TabController>
      </View>
    );
  }
}

Changelog

Fix issue with TabController items not calculating their layout after change in items

[M-i-k-e-l]

I think this change is unnecessary.

[ethanshar]

I changed it on purpose cause I want it to be clear it depends on the prop being passed.
While the width ref is kept for later use.

[vidmantasz]

this causes infinite onLayout update