React-native-swiper: Is RN Swiper incompatible with React Navigation TabNavigator?

[borvanov]

When I use Swiper inside one of TabNavigation screen, slide's content become invisible (dots and right-left buttons still visible).

[qinfensky]

I have the same problem

[ghost]

I used a swiper inside Tab Navigator and it works fine for me. Try disabling swiping in TabBarOptions.

[qinfensky]

@roman2710 swipeEnabled and scrollEnabled are two options were closed, but the problem still exists, the image cannot be displayed.

[ghost]

Maybe there's something wrong with the picture. Try to render a simple Component

[borvanov]

No, it's not. This component was tested in StackNavigator and it's working
fine...

[qinfensky]

@roman2710 @Q404

Version:"react": "~15.4.1", "react-native": "0.42.3", "react-native-swiper": "^1.5.4",

No need for "StackNavigator", is a problem in "TabNavigator".

It works well in the ios emulator, but not in an Android emulator.

There are data, but no pictures are displayed.

Code：

It is normal in the ios simulator:

tabBarOptions:

I have done a lot of tests, but I still don 't know the question, please help me to see what the problem is? thank you.

[jiasaichao]

@qinfensky 是TabNavigator的问题react-native-swiper安卓用的ViewPagerAndroid所以有的问题
看： https://github.com/react-community/react-navigation/issues/662

[qinfensky]

@jiasaichao 我找到问题所在了，是‘lazyLoad: true,’，设置为‘true’就可以显示了，但是还是有明显缺陷，就是‘initialRouteName: 'Home'’这个TabNavigator指定初始路由的react-native-swiper不显示，其余的三个都正常显示，这是什么问题呢？

[afinal]

@qinfensky 您好，我和你有同样的问题，首屏渲染的不可以显示，其他的都可以显示，请问这个问题你解决了吗？

[afinal]

我现在的临时解决方案是，默认跳转到其他的Tab，然后其他页面componentDidMount的时候，setTimeout跳转回到第一个Tab，首次进入的时候，我准备加个浮层进度条，要不然会看到跳转的过程，就尴尬了

[ayalpani]

The same happens to me. Anyone with a workaround?

Here ist my TabNavigatorConfig:

{ // https://reactnavigation.org/docs/navigators/tab
    initialRouteName: 'NotificationsEpic',
    swipeEnabled: false,
    animationEnabled: false,
    tabBarComponent: TabBarComponent,
    tabBarPosition: 'bottom',
    lazyLoad: true,
    tabBarOptions: {
      style: {
        height: 60
      }
    }

[qinfensky]

@afinal @ayalpani
这个问题我解决了，展示我的代码。
I solved the problem and show my code.
1.

2.

解决问题，大家玩得愉快
Solve the problem, everyone have a good time.

[jiasaichao]

@qinfensky @afinal 我不准备解决这个问题了，自己写一个TabBar，我对TabBar要求也不高，点击切换就完了，想怎么显示自己控制，只用react-navigation中的StackNavigator，这样好扩展而且也有可能不用react-navigation用react-native-navigation这样切换起来比较方便，我一直纠结是用react-navigation还是react-native-navigation。

[qinfensky]

@jiasaichao 我上面贴了代码，这样也能很好的显示了，navigation用起来确实方便。目前问题算是解决了~

[jiasaichao]

@qinfensky 嗯，解决了就行，估计以后bug解决了，你这个setTimeout也就不用加了。

[afinal]

@qinfensky 确实是个不错的方案，setTimeout 0也是可以的

[ayalpani]

Thank you @qinfensky
Works!

[smartPiz]

still not working ...

[qinfensky]

@smartPiz show me the code

[StarOfLife]

如果我早点翻到的话，我就不发issue了 @qinfensky 还是你这个方法管用啊

[qinfensky]

@StarOfLife 哈哈，现在 "react-native" 升级到了 "0.44.0"，"react-navigation"升级到了 "^1.0.0-beta.9"之后，不需要添加定时器了，直接渲染是没问题的，试试吧~

[StarOfLife]

@qinfensky 我现在就是用的这个版本的，然后出的这个问题。现在只能是先用着定时器了

[qinfensky]

@StarOfLife 嗯，OK，能解决问题就好，有问题随时联络~

[Adar-Li]

@qinfensky 您好，这个代码能私发我一下吗？

[gusgard]

What works for me was to set the height and wrap the Swiper in a View with position absolute, and also add removeClippedSubviews={false}

import { Dimensions } from 'react-native';
const { height } = Dimensions.get('window');


<View style={{ position: 'absolute' }}>
        <Swiper
          height={height}
          removeClippedSubviews={false}
        >
        ...
...

Hope it helps.

[qinfensky]

timer invalid? @gusgard

[gusgard]

@qinfensky I didn't use any setTimeOut, if that is what you are asking

[cielu]

@qinfensky 不需要设置100，设置0就好了

[sayhei]

@gusgard your solution solve my problems,thx

[zoofei]

@qinfensky it work! thank

[wangweifeng66]

After I added the timer, I still could not display the picture and needed to slide manually @qinfensky
If the time setting of the timer is too short, there is no effect

[qinfensky]

@wangweifeng66 拼音？那就说中文啦，抱歉，我没在用这个组件了，现在具体细节我不知道了……

[montzkie18]

Hi guys, I ran into this issue as well on Android. Try setting animationEnabled to false on TabNavigatorConfig. That seems to fix the issue for me.

[d-gubert]

Disabling the animation works, but is a really big drawback for the usability of the TabNavigator component.

I'm looking for a better solution. Any help would be very appreciated :)

[sunnynegi]

Getting a same issue, Inside tabNavigator swiper content is not displaying, Any help provided on this issue will be helpful.
Any help on this group

[wutianlin]

Hi Guys,it looks like something wrong in showing images like this:

I have been add the timer but it still no work,I have no idea could you please help me?

[wutianlin]

Here are the timers:
componentDidMount(){
setTimeout(()=>{
this.setState({
swiperShow:true
});
},0)
}

[Hancoson]

@qinfensky 不错，可以解决问题

[karottc]

@StarOfLife 嗯，OK，能解决问题就好，有问题随时联络~

加了定时器还是无法解决。 0.52.3 版本

[zengyunLee]

@qinfensky why dose it work? what is the root cause?

[qinfensky]

@qinfensky为什么它的剂量有效？根本原因是什么？

I hadn't used this component for a long time, and I was just trying to delay display and I was able to solve my problem. Now that "Swiper" and "React-Navigation" have been updated a lot, I guess the problem has been solved and I haven't had time to test it yet.