Toggling tabs not working after poping back in Android

[AndrewJikun]

I have a react-native-scrollable-tab-view working well in screen A and then push to screen B. In Screen B I do nothing and pop back to screen A. then in Screen A I can not toggle tabs in Screen A any more. It works well in IOS but bad in Android.

[AndrewJikun]

react-native-scrollable-tab-view version: 0.8.0. React native version:0.51

[AndrewJikun]

@skv-headless could you please fix it?

[oankarberg]

+1

[fpauer]

+1

[zerotalk]

+1

[dylanslade]

+1

[lukaleli]

+1

[jenswellmeyer]

+1

[jenswellmeyer]

Should be related to this:
facebook/react-native#14867

[fpauer]

Hey Guys,

I solved my problem setting style flex to 1 when component is visible. We use react-native-navigation, so we implemented setOnNavigatorEvent to detect when the component is visible or not.

  constructor(props) {
    super(props);
      this.state = {
        contentProps: {
          style: { flex: 1 }
        }
      }; 
      this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
   }
  
onNavigatorEvent(event) {
    switch (event.id) {
      case 'willAppear':
        this.setState({contentProps: {style: { flex: 1}}});
        break;
      case 'willDisappear':
        this.setState({contentProps: {style: { flex: 0}}});
        break;
    }
 }

<ScrollableTabView
        contentProps={this.state.contentProps}
>

Why ?

There is a bug for viewPagerAndroid when navigation goes back to previous screen after pushes a new one, it does not trigger onLayout again and the component does not re-render. As it was suggested in these threads below to reinforce layout state by changing flex style when the screen is visible or not.

wix/react-native-navigation#1317
#684

[Tritty]

@fpauer Perfect. It works for me! Thank you so much!

[kubilaytural]

@fpauer Thank's. I works for me!

[harrydema]

@fpauer Can you please show the full class? As my event is not fired. I am passing the navigator through props to the child screens.

[theRedster]

#797

This will probably fix it for most people.

find the index.js in node_modules/react-scrollable-tab-view and replace the contents. Fixed it for me and works with ios and android still.