React-native: ScrollView sticky header flickers in the latest builds ( > RN 0.47.1 )

[muhammedbasilsk]

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

1. react-native -v:
   react-native-cli: 2.0.1
react-native: 0.47.1
2. node -v:
   v6.11.1
3. npm -v:
   3.10.10

Then, specify:

• Target Platform:
  iOS and Android
  
• Development Operating System:
  macOS
  
• Build tools:
  react-native run-android
  react-native run-ios

Steps to Reproduce

1. Launch the app.
2. Scroll down and up
3. Watch the sticky header behavior

Expected Behavior

Sticky header should be fixed to the top when scrolling down. And should be stayed without moving unless scrolled back to top and reached at it's actual position. Works well in iOS and Android version RN0.46.4.

Actual Behavior

With the latest RN release verison (0.47.0), (0.47.1) and pre-release version (v0.48.0-rc.0) sticky header flickers when scrolling down and up.

Reproducible Demo

Created an expo for this. But the expo SDK have RN version 0.46.1.
Issue can't be seen in expo. But the code can be used.
expo snack

[nihgwu]

ref https://github.com/facebook/react-native/issues/2700#issuecomment-321260084

[linjson]

you should change code in ReactScrollView.java

 @Override
  protected void onScrollChanged(int x, int y, int oldX, int oldY) {
    super.onScrollChanged(x, y, oldX, oldY);

    if (mOnScrollDispatchHelper.onScrollChanged(x, y)) {
      if (mRemoveClippedSubviews) {
        updateClippingRect();
      }

      if (mFlinging) {
        mDoneFlinging = false;
      }

      ReactScrollViewHelper.emitScrollEvent(this);
    }
  }

find this onScrollChangedmethod,then delete if (mOnScrollDispatchHelper.onScrollChanged(x, y))

[muhammedbasilsk]

Okay, I will try this change in the RNAndroid.
Looks like now velocity is brought into the onScrollChanged method.
Need to try different cases anyway.
Thanks for suggestion @linjson

[onlydave]

Removing the if statement didn't seem to improve much for me on 0.47.1

[muhammedbasilsk]

@onlydave it is more than just condition if I guess.
I checked the code and found the velocity is being introduced. So removing the if condition may break other areas. Need to check different areas for impacts.

I am using RN0.46.4. Which doesn't have this issue. But have issue in flexbox layouting.
Flex box layout issue is fixed in the RN0.47.1, but due to the flickering, I am not able to upgrade.
Hope to get fixed issue in the upcoming releases.

[janicduplessis]

This is a regression caused by https://github.com/facebook/react-native/commit/f954f3d9b674b13977f722bc3b8dc6c1b99fe6c7, we're looking into a fix!

[muhammedbasilsk]

thanks for the update @janicduplessis, really appreciate it.

[gigeos]

To inform people who search informations, it's not fixed in 0.48.1

[nihgwu]

It should be fixed in 0.48.2

[onlybenyang]

This issue not fixed on 0.49.x

[rupamgho123]

@janicduplessis any idea whether this bug will be fixed in future react versions

[eli-isbell-h360]

@rupamgho123 Upgrading to 0.51.0 seems to have fixed this problem for me, working on both iOS and Android.

[shleyZ]

@janicduplessis This issue not fixed on RN 0.55.3

[CharlieOrlando]

Experiencing the same issue in 0.55.4

[wanghe826]

same issue in 0.54.3