React-native-swiper: when TabNavigator are nested，the react-native-swiper in the inner TabNavigator can‘t show

Created on 24 Oct 2017 · 9Comments · Source: leecade/react-native-swiper

just like this,the top TabNavigator is the inner .

wx20171024-180835

Source

AKMaS

Most helpful comment

@sunnynegi remove animationEnabled: false, swipeEnabled: false, ， useing setTimeout to delay rendering Swiper

export class SwiperDemo extends Component {
    constructor(props) {
        super(props);
        this.state = {
            swiperShow:false,
        };
    }
  componentDidMount(){
        setTimeout(()=>{
            this.setState({
                swiperShow:true
            });
        },0)
    }
   render() {
        if(this.state.swiperShow){ 
            return(
                <Swiper>
                  ...
                </Swiper>
            )
        }else {
            return (
                <View></View>
            );
        }
    }
}

guoguo0202 on 14 Nov 2017

👍4 ❤1

All 9 comments

but it look normal without the inner TabNavigator....
wx20171024-181231

AKMaS on 24 Oct 2017

same, but I'm using react-native-scrollable-tab-view
Did you try rotating the device? it works for me but its anoying.
I guess its something from Android, 'cause its not happening on iOS

hoscarcito on 30 Oct 2017

👍1

I use it in IOS, the same question.

Mttylzq on 30 Oct 2017

same here

"dependencies": {
"axios": "^0.16.2",
"impagination": "^1.0.0-alpha.3",
"mobx": "^3.3.1",
"mobx-react": "^4.3.3",
"native-base": "^2.3.3",
"react": "16.0.0-beta.5",
"react-native": "0.49.3",
"react-native-billing": "^2.4.0",
"react-native-fbsdk": "^0.6.3",
"react-native-keyboard-aware-scroll-view": "^0.3.0",
"react-native-root-toast": "^1.3.0",
"react-native-swiper": "^1.5.13",
"react-native-textinput-effects": "^0.4.1",
"react-native-vector-icons": "^4.4.2",
"react-navigation": "^1.0.0-beta.13"
},

astrocket on 6 Nov 2017

@hoscarcito I‘d also encountered the same question

smart1024 on 13 Nov 2017

try animationEnabled: false,
swipeEnabled: false,

add to TabNavigatorConfig

guoguo0202 on 14 Nov 2017

👍4

@guoguo0202 Done the same configuration with tab but, still have a same problem. Swiper is moving slow, when you try to slide the content.

sunnynegi on 14 Nov 2017

@sunnynegi remove animationEnabled: false, swipeEnabled: false, ， useing setTimeout to delay rendering Swiper

export class SwiperDemo extends Component {
    constructor(props) {
        super(props);
        this.state = {
            swiperShow:false,
        };
    }
  componentDidMount(){
        setTimeout(()=>{
            this.setState({
                swiperShow:true
            });
        },0)
    }
   render() {
        if(this.state.swiperShow){ 
            return(
                <Swiper>
                  ...
                </Swiper>
            )
        }else {
            return (
                <View></View>
            );
        }
    }
}

guoguo0202 on 14 Nov 2017

👍4 ❤1

@guoguo0202 , your solution works for me