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

Fix Viewpager on Android when using native navigation. #14867

Closed
wants to merge 1 commit into from

Conversation

ruiaraujo
Copy link
Contributor

See the "broken" video attached to really understand the problem easily.

On Android after navigating to any other screen using wix navigation library, the native viewpager would lose the settling page behaviour which is quite annoying for the users.

This is caused by the onAttachedToWindow that resets mFirstLayout to true inside ViewPager. By request another layout pass, everything works as expected.

Working video is the application with patched RN.

broken.mp4
working.mp4

@facebook-github-bot facebook-github-bot added GH Review: review-needed CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. labels Jul 6, 2017
@chirag04 chirag04 requested a review from javache July 6, 2017 14:46
@javache
Copy link
Member

javache commented Jul 6, 2017

cc @achen1

@javache javache removed their request for review July 6, 2017 18:24
@ruiaraujo
Copy link
Contributor Author

@javache Any chance of getting this reviewing this?

@andrerfneves
Copy link

@ruiaraujo this doesn't seem to fix my issue while using React Native Navigation. The issue is the same though. The viewpager loses the layout.

@facebook-github-bot
Copy link
Contributor

@ruiaraujo I tried to find reviewers for this pull request and wanted to ping them to take another look. However, based on the blame information for the files in this pull request I couldn't find any reviewers. This sometimes happens when the files in the pull request are new or don't exist on master anymore. Is this pull request still relevant? If yes could you please rebase? In case you know who has context on this code feel free to mention them in a comment (one person is fine). Thanks for reading and hope you will continue contributing to the project.

@pull-bot
Copy link

Warnings
⚠️

📋 Test Plan - This PR appears to be missing a Test Plan.

@facebook-github-bot label Needs more information

Generated by 🚫 dangerJS

@satya164
Copy link
Contributor

satya164 commented Oct 8, 2017

@andrerfneves how did you test this?

@facebook-github-bot
Copy link
Contributor

@ruiaraujo I tried to find reviewers for this pull request and wanted to ping them to take another look. However, based on the blame information for the files in this pull request I couldn't find any reviewers. This sometimes happens when the files in the pull request are new or don't exist on master anymore. Is this pull request still relevant? If yes could you please rebase? In case you know who has context on this code feel free to mention them in a comment (one person is fine). Thanks for reading and hope you will continue contributing to the project.

@stale
Copy link

stale bot commented Dec 20, 2017

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.

@stale stale bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Dec 20, 2017
@stale stale bot closed this Dec 27, 2017
@danilobuerger
Copy link
Contributor

@satya164 Test Plan:

  1. Checkout https://github.com/danilobuerger/react-native-viewpagerandroid-test
  2. Run yarn
  3. Run react-native run-android
  4. Follow Instructions provided in App
  5. Provide patched react-native aar
  6. Run react-native run-android
  7. Follow Instructions provided in App, notice how issue doesn't happen anymore.

@satya164 satya164 reopened this Dec 28, 2017
@stale stale bot removed the Stale There has been a lack of activity on this issue and it may be closed soon. label Dec 28, 2017
@satya164 satya164 self-assigned this Dec 28, 2017
@bood
Copy link

bood commented Jan 4, 2018

The fix does not seems to solve the problem of dynamic adding a page to ViewPager, code sample below:

import React, { Component } from 'react';
import { View, Text, ViewPagerAndroid } from 'react-native';

export default class DebugViewPager extends Component {
  constructor(props) {
    super(props);
    this.state = {
      npage: 2,
    };
  }
  render() {
    let pages = []
    for (var i = 1; i <= this.state.npage; i++) {
      let bg = (i % 2 == 0) ? 'blue' : 'yellow';
      pages.push(
        <View style={[styles.pageStyle], [{backgroundColor: bg}]} key={i}>
          <Text>Page {i}</Text>
        </View>
      )
    }
    viewPager = (<ViewPagerAndroid
             style={styles.viewPager}
             initialPage={0}>
      {pages}
    </ViewPagerAndroid>);
    return (
      <View style={styles.viewPager}>
        {viewPager}
        <Text style={styles.add} onPress={()=>{
            this.setState({npage: this.state.npage + 1})
        }}>
          Add Page
        </Text>
      </View>
    )
  }
}

var styles = {
  viewPager: {
    flex: 1,
    backgroundColor: 'white',
  },
  pageStyle: {
    alignItems: 'center',
    padding: 20,
  },
  add: {
    height: 100,
    width: 100,
    backgroundColor: 'red'
  }
}

@danilobuerger
Copy link
Contributor

@bood Why does this PR need to fix your unrelated problem? This fix is about:

Fix Viewpager on Android when using native navigation.

@bood
Copy link

bood commented Jan 4, 2018

That's embarrassing if it is not related at all.
I was asked to paste it here as #13463 seems to be related to the my issue, and this PR is intended to fix the issue? no?

@danilobuerger
Copy link
Contributor

My understanding of that issue is that it only talks about losing smooth scrolling after detach and reattach.

@danilobuerger
Copy link
Contributor

@satya164 Do you need anything else to get this merged?

@satya164
Copy link
Contributor

satya164 commented Jan 4, 2018

@danilobuerger I'll test it when I get time. holidays just got over

@ruiaraujo
Copy link
Contributor Author

@danilobuerger Thanks for following through, I have changed topic quite dramatically so it was hard for me to provide a test plan easily.

@danilobuerger
Copy link
Contributor

@satya164 I am frustrated. It has been 3 weeks since I made the test plan for you. When I posted:

A shame that nobody seems to care to get this merged.

You immediately jumped in and objected:

I can't merge things without having a way to test it if it actually works and doesn't break anything. I don't see how nobody cares to get this merged.

A few days later you had your test plan. You have everything you need. Was it just a trick? Did you just want me to get off your back? Do you really not care? If so, please tell me if there is somebody else that is willing to take a look at this and get it merged.

@satya164
Copy link
Contributor

@danilobuerger that's a shitty way to treat maintainers. listen, I contribute to React Native in my free time. and I haven't gotten the time to test the PR. even PRs on my own repos haven't been reviewed. it's been only 14 days. chill out, and maybe have some empathy for other people.

@danilobuerger
Copy link
Contributor

@satya164 it has been 21 days, not 14 days. Why do you think it was 14 days ago when I submitted the test plan?

screen shot 2018-01-18 at 18 07 31

I do have empathy, that's why I am asking if you know of anybody else who can get it merged as you clearly don't have time to do it. And personally, I don't think my attitude towards you is "shitty", I just want to get things done.

Rather what you are doing has a really chilling effect on new contributors. You are scaring them away, they are putting hard work into the PR, they are really trying and then they just get the cold shoulder. Why should anybody new contribute, if they get the feeling that things won't get merged?

@andrerfneves
Copy link

andrerfneves commented Jan 18, 2018

@danilobuerger @satya164 is but a contributor to the repo. He takes his free time to try and move the technology forward. He's not paid for it. It can take 1 day, 14 days, 21 days, or 6 months, it doesn't matter. If you'd like to complain about the RN open source repository as a whole, including how PRs are getting merged (or not), complain to Facebook directly.

I understand your frustration, dealt with a lot of this myself in the past. But it's the nature of open source software, especially really large packages/ecosystems like RN.

@brunolemos
Copy link
Contributor

brunolemos commented Jan 21, 2018

@danilobuerger I understand your frustration because I also have an open PR on this repo that's just a single line change and it's been open for more than 40 days. I also agree that this push away new contributions. But I understand how open source works so I try not to be hard on maintainers.

What I recommend for you is what I do on these situations: use a fork or, better, use the awesome patch-package to apply your fixes without a fork.

@danilobuerger
Copy link
Contributor

@brunolemos Thanks for the tip. However, how would you use patch-package in that case? I guess you would have to always recompile from source since you can't use the aar?

@brunolemos
Copy link
Contributor

If you can find this file inside node_modules, it will work. Just edit it with this PR changes and follow the instructions in the patch package readme.

@danilobuerger
Copy link
Contributor

@brunolemos I just tried it out and as I thought, it doesn't work as the build process uses the aar and not the source.

@brunolemos
Copy link
Contributor

Never tried this but if you edit the aar patch package might be able to patch it.

https://stackoverflow.com/a/38861263/2228575

@satya164
Copy link
Contributor

satya164 commented Feb 6, 2018

cc @hramos tested and works fine. can we get this merged?

@hramos
Copy link
Contributor

hramos commented Feb 8, 2018

@ruiaraujo please rebase and I can look into getting this imported. Thanks!

@ruiaraujo
Copy link
Contributor Author

@hramos done!

@pull-bot
Copy link

pull-bot commented Feb 8, 2018

Warnings
⚠️

📋 Test Plan - This PR appears to be missing a Test Plan.

⚠️

📋 Release Notes - This PR appears to be missing Release Notes.

@facebook-github-bot label Needs more information

@facebook-github-bot label Needs more information

Generated by 🚫 dangerJS

@facebook-github-bot
Copy link
Contributor

Something went wrong executing that command, @mkonicek could you take a look?

@satya164
Copy link
Contributor

satya164 commented Mar 5, 2018

@hramos friendly ping!

@facebook-github-bot facebook-github-bot added the Import Started This pull request has been imported. This does not imply the PR has been approved. label Mar 5, 2018
Copy link
Contributor

@facebook-github-bot facebook-github-bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@hramos is landing this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

@ruiaraujo ruiaraujo deleted the viewpagerFixes branch March 5, 2018 19:53
ferrannp pushed a commit to ferrannp/react-native-viewpager that referenced this pull request Feb 8, 2019
Summary:
See the "broken" video attached to really understand the problem easily.

On Android after navigating to any other screen using wix navigation library, the native viewpager would lose the settling page behaviour which is quite annoying for the users.

This is caused by the onAttachedToWindow that resets mFirstLayout to true inside ViewPager. By request another layout pass, everything works as expected.

Working video is the application with patched RN.

[broken.mp4](https://github.com/facebook/react-native/files/1128028/broken.mp4.zip)
[working.mp4](https://github.com/facebook/react-native/files/1128032/working.mp4.zip)
Closes facebook/react-native#14867

Differential Revision: D7154981

Pulled By: hramos

fbshipit-source-id: 2b3570800a5320ed2c12c488748d9e1358936c84
james-watkin added a commit to james-watkin/react-native-pager-view that referenced this pull request Dec 28, 2021
Summary:
See the "broken" video attached to really understand the problem easily.

On Android after navigating to any other screen using wix navigation library, the native viewpager would lose the settling page behaviour which is quite annoying for the users.

This is caused by the onAttachedToWindow that resets mFirstLayout to true inside ViewPager. By request another layout pass, everything works as expected.

Working video is the application with patched RN.

[broken.mp4](https://github.com/facebook/react-native/files/1128028/broken.mp4.zip)
[working.mp4](https://github.com/facebook/react-native/files/1128032/working.mp4.zip)
Closes facebook/react-native#14867

Differential Revision: D7154981

Pulled By: hramos

fbshipit-source-id: 2b3570800a5320ed2c12c488748d9e1358936c84
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. Import Started This pull request has been imported. This does not imply the PR has been approved.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

10 participants