Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

initialPage option - page not rendering - In Android #483

Closed
edelworksgithub opened this issue Nov 30, 2016 · 24 comments
Closed

initialPage option - page not rendering - In Android #483

edelworksgithub opened this issue Nov 30, 2016 · 24 comments

Comments

@edelworksgithub
Copy link

Hi I am using RN version 0.36.1
I need the second page (or a specific page) to be shown at first.
While using "InitialPage" props, TabBar position is correct, but the page is not showing... and when I swipe the first page is displaying.

Code is as below
var Page = React.createClass({ render() { return ( <View style={styles.container}> <Text style={styles.welcome}>Page {this.props.num}</Text> </View> ); } });

<ScrollableTabView initialPage={2} locked={false}> <Page num="1" tabLabel="React" /> <Page num="2" tabLabel="Flow"/> <Page num="3" tabLabel="Jest" /> </ScrollableTabView>

Screenshots

screen shot 2016-11-30 at 8 59 53 pm

screen shot 2016-11-30 at 9 02 00 pm

@edelworksgithub
Copy link
Author

edelworksgithub commented Dec 2, 2016

Kindly help me on this issue.

@skv-headless
Copy link
Collaborator

Can you reproduce this bug on example?

@edelworksgithub
Copy link
Author

@skv-headless I don't know to show you live example. Please suggest me an online tool.

The code is as below

var Page = React.createClass({ render() { return ( <View style={styles.container}> <Text style={styles.welcome}>Page {this.props.num}</Text> </View> ); } });

<ScrollableTabView initialPage={2} locked={false}> <Page num="1" tabLabel="React" /> <Page num="2" tabLabel="Flow"/> <Page num="3" tabLabel="Jest" /> </ScrollableTabView>

@skv-headless
Copy link
Collaborator

I can't reproduce this bug.
I mean in repository there are few examples https://github.com/skv-headless/react-native-scrollable-tab-view/tree/master/examples/FacebookTabsExample . If you can reproduce bug there you can send pull request showing a the problem.

@edelworksgithub
Copy link
Author

@skv-headless This issue is coming only in Android and working fine in IOS

@skv-headless
Copy link
Collaborator

What react-native-scrollable-tab-view version do you use? Please try the latest one

@edelworksgithub edelworksgithub changed the title initialPage option not working Proporly initialPage option - page not rendering - In Android Dec 2, 2016
@edelworksgithub
Copy link
Author

0.7.0
installed using npm install react-native-scrollable-tab-view --save
so I think the latest will be installed.

@edelworksgithub
Copy link
Author

@zhoujuanjuan
Copy link

@edelworksgithub I also have this issue,do you have handled this issue

@edelworksgithub
Copy link
Author

@zhoujuanjuan not yet.. might be the problem is with ScrollView.

@gullitmiranda
Copy link

same problem

work for me: v0.6.0...v0.7.0#commitcomment-20063817

@zhoujuanjuan
Copy link

@skv-headless I use RN version 0.29.2,react-native-scrollable-tab-view version 0.7.0 ,and I put SimpleExample.js to my project , when I set initialPage = 2,the current page not show
please help me to solve this issue...
may i improve RN version...

@leoJFeng
Copy link

leoJFeng commented Dec 7, 2016

me too...

@zhoujuanjuan
Copy link

change react-native-scrollable-tab-view to version 0.6.0,it works

@skv-headless
Copy link
Collaborator

contentOffset is not supported for android. Please use version 0.6.0 for now.
I will try to make fix that.
https://productpains.com/post/react-native/content-offsetinset-for-scrollview

@messense
Copy link

Same issue.

@skv-headless
Copy link
Collaborator

If someone wants to make pr https://facebook.github.io/react-native/docs/scrollview.html#methods you can try scrollTo somewhere in componentDidMount

@skv-headless
Copy link
Collaborator

Guys, please try version from master. After some feedback I'll release new version.

@nezaidu
Copy link

nezaidu commented Dec 23, 2016

Not working for me. Had to add time out.

@ranjithkumar8352
Copy link

@skv-headless Now It works with the version from master but there's a slight delay of 500ms. Tab is blank for half a second if initalPage is > 0

@skv-headless
Copy link
Collaborator

It works for example project. Please provide code snippet. We can continue discussion here #510

@messense
Copy link

Works for me.

@kubilaytural
Copy link

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

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

@devilyard
Copy link

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

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

this works

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

No branches or pull requests

10 participants