Skip to content

Is RN Swiper incompatible with React Navigation TabNavigator? #389

Open
@borvanov

Description

@borvanov

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

default

Activity

quentin996007

quentin996007 commented on Apr 19, 2017

@quentin996007

I have the same problem

ghost

ghost commented on Apr 19, 2017

@ghost

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

quentin996007

quentin996007 commented on Apr 19, 2017

@quentin996007

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

ghost

ghost commented on Apr 20, 2017

@ghost

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

borvanov

borvanov commented on Apr 20, 2017

@borvanov
Author
quentin996007

quentin996007 commented on Apr 20, 2017

@quentin996007

@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.
bug

Code:
code1
code2

It is normal in the ios simulator:
iosbug

tabBarOptions:
tabbug

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

jiasaichao commented on Apr 20, 2017

@jiasaichao

@qinfensky 是TabNavigator的问题react-native-swiper安卓用的ViewPagerAndroid所以有的问题
看: react-navigation/react-navigation#662

quentin996007

quentin996007 commented on Apr 21, 2017

@quentin996007

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

afinal

afinal commented on Apr 25, 2017

@afinal

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

afinal

afinal commented on Apr 25, 2017

@afinal

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

ayalpani

ayalpani commented on Apr 26, 2017

@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
      }
    }
quentin996007

quentin996007 commented on Apr 27, 2017

@quentin996007

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

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

jiasaichao

jiasaichao commented on Apr 27, 2017

@jiasaichao

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

quentin996007

quentin996007 commented on Apr 27, 2017

@quentin996007

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

jiasaichao

jiasaichao commented on Apr 27, 2017

@jiasaichao

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

15 remaining items

sayhei

sayhei commented on Aug 4, 2017

@sayhei

@gusgard your solution solve my problems,thx

zoofei

zoofei commented on Aug 31, 2017

@zoofei

@qinfensky it work! thank

wangweifeng66

wangweifeng66 commented on Sep 4, 2017

@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

quentin996007

quentin996007 commented on Sep 4, 2017

@quentin996007

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

montzkie18

montzkie18 commented on Sep 5, 2017

@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

d-gubert commented on Oct 9, 2017

@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

sunnynegi commented on Nov 9, 2017

@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

wutianlin commented on Nov 10, 2017

@wutianlin

Hi Guys,it looks like something wrong in showing images like this:
image
I have been add the timer but it still no work,I have no idea could you please help me?

wutianlin

wutianlin commented on Nov 10, 2017

@wutianlin

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

Hancoson

Hancoson commented on Nov 30, 2017

@Hancoson

@qinfensky 不错,可以解决问题

added a commit that references this issue on Dec 7, 2017
karottc

karottc commented on Sep 27, 2018

@karottc

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

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

zengyunLee

zengyunLee commented on Dec 26, 2018

@zengyunLee

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

quentin996007

quentin996007 commented on Dec 27, 2018

@quentin996007

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @ayalpani@d-gubert@karottc@montzkie18@gusgard

        Issue actions

          Is RN Swiper incompatible with React Navigation TabNavigator? · Issue #389 · leecade/react-native-swiper