Couldn't work well with newest react-navigation's TabNavigator

[fondoger]

Which OS ?

Android

Version

Which versions are you using:

• react-native-swiper v1.5.13
• react-native v0.53.0
• react-navigation v1.1.2

I found that react-native-swiper couldn't work well with newest react-navigation(v1.1.2). We can't see the contents of swiper if we put the swiper in the first tab of react-navigation's TabNavigator, but everything is ok if we put the swiper in any other tabs except the first tab.

Code(make sure your react-navigation's version is above 1.0.0):

import React, { Component } from 'react';
import { Text } from 'react-native';
import { TabNavigator } from 'react-navigation'; // 1.1.2
import Swiper from 'react-native-swiper'; // 1.5.13
class Tab extends Component {
  render() {
    return (
      <Swiper>
        <Text>Hello, React</Text>
        <Text>Hello, Native</Text>
        <Text>Hello, Swiper</Text>
      </Swiper>
    )
  }
}
const App = TabNavigator({
  First: {
    screen: Tab,
    navigationOptions: {
      tabBarLabel: 'TabA',
    },
  },
  Second: {
    screen: Tab, 
    navigationOptions: {
      tabBarLabel: 'TabB',
    },
  },
  Thrid: {
    screen: Tab, 
    navigationOptions: {
      tabBarLabel: 'TabC',
    },
  },
})
export default App;

Screenshots:

Can't see contents of swiper in the first tab

Update

A solution is to delay the rendering of swiper. Below is the code. But I believe this is a bug, hope to fix it.

import React, { Component } from 'react';
import { Text } from 'react-native';
import { TabNavigator } from 'react-navigation'; // 1.1.2
import Swiper from 'react-native-swiper'; // 1.5.13
class Tab extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showSwiper: false,
    }
  }
  componentDidMount() {
    // Delay ten  millisecond will solve this.
    setTimeout(()=>{
      showSwiper: true,
    }, 10);
  }
  render() {
    return (
      <Swiper>
        <Text>Hello, React</Text>
        <Text>Hello, Native</Text>
        <Text>Hello, Swiper</Text>
      </Swiper>
    )
  }
}
const App = TabNavigator({
  First: {
    screen: Tab,
    navigationOptions: {
      tabBarLabel: 'TabA',
    },
  },
  Second: {
    screen: Tab, 
    navigationOptions: {
      tabBarLabel: 'TabB',
    },
  },
  Thrid: {
    screen: Tab, 
    navigationOptions: {
      tabBarLabel: 'TabC',
    },
  },
})
export default App;

Temporarily Solution

Temporarily delaying the rendering of swiper by setTimeout() will solve this.

[fondoger]

This is so wired.

[MariusMeiners]

seems like more of a problem in react-navigation to me ?

[AllenCai1991]

me too

[idlework]

Maybe this help for your information and debugging; the same occurs when you put the Swiper component in a react-native Modal