Blank Tab Content with initialPage value 1

[ishita-kothari]

Hello,

I have 2 tabs in my react-native app. First tab has "favourite" content and Second tab has "All" content. When the array of "favourite" content is empty, I need to show "All" contents. For this I am using initialPage={1}. I can see the active tab, but the content is not visible. I just see blank screen.

If I scroll to tab 0 and then scroll back to tab 1, the content is visible. I tried every solution provided in few issues but didn't find any luck. Can anyone please help?

Thanks!

[SupriyaKalghatgi]

+1

[syzer]

also React.createClass is deprecated to it needs a bit of face lifting :)

[koansang]

+1 only iOS, Android is show.

[syzer]

Did you try prerenderingSiblingsNumber={1}?

[hjumeau]

+1 on IOS, use prerenderingSiblingsNumber={1} doesn't fix the problem.

[luco]

Any updates? Can't use this yet.

[syzer]

Would fix it but current maintainer @skv-headless is gone missing :D
So all it would is 36 open PR's => 37 open PR's.

[antoinerousseau]

maybe @brentvatne can help along with @skv-headless ?

[syzer]

The next week, I might have couple hour to drill to that.. but no promises on that.
We had performance issues with tab switching 7.4 so we need to come back to this package :D

[antoinerousseau]

I switched to react-native-tab-view but thanks anyway

[skv-headless]

facebook/react-native#15808

[skv-headless]

close for #750

[ghost]

I have the same problem with iOS. What is the solution to resolved this issues?

[SupriyaKalghatgi]

@syzer When can we expect fix for this

[syzer]

currently not working on this issue

[kubilaytural]

Try this. It worked. Ideal for changing first pages.

componentDidMount() {
setTimeout(() => this.scrollableTabView.goToPage(1), 300);
}
...
.....
...
<ScrollableTabView
ref={(ref) => { this.scrollableTabView = ref; }}

[Balasnest]

Issue is still there. This make me to move out from the lib. Any solution for this?

[syzer]

@Balasnest did you try @kubilaytural solution or|and using prerenderingSiblingsNumber={1} ?

[Balasnest]

@syzer Yes. @kubilaytural solution is helped me.

[Balasnest]

@syzer Most of the time data is not loading. Very rarely its working out. I guess settimeout is not working exactly. How can resolve this?

[syzer]

have you tried using react timing functions?
or does bigger timeout help ? if so you could patch it

to be honest i'm not sure how i patched it 😄 it was august last year or so :)

you could also try this replacement:
https://www.npmjs.com/package/react-native-scrollable-tab-view-fix

[hanzoow]

Try this. It worked. Ideal for changing first pages.

componentDidMount() {
setTimeout(() => this.scrollableTabView.goToPage(1), 300);
}
...
.....
...
<ScrollableTabView
ref={(ref) => { this.scrollableTabView = ref; }}

ty, fixed the problem