I have used cat demo. When I scroll slowly towards header i can see entire scroll view getting vibrated. Could you please tell me how to fix it

[Pamu2018]

No description provided.

[benevbright]

Hi, thanks for your issue.
It's actually a bug from react-native and it occurs only on Android.

Check those out.
facebook/react-native#15445
facebook/react-native#19725

Hi, I'm looking into it, though.

[benevbright]

facebook/react-native#15445 (comment)

Here is a workaround and it works. I will write postinstall script for example.

Edit:

No workaround so far. This bug still remains.
facebook/react-native#21801

[benevbright]

Unfortunately, I was wrong.
It doesn't seem to a workaround.

[benevbright]

facebook/react-native#21801

[davidkalosi]

hi @benevbright any new development on that issue?

[Ashish-ish]

HI @benevbright any updates

[ddedic]

+1

[benevbright]

Hi.
Sorry, this issue is not fixed yet on react-native.
I was thinking to fix react-native but I couldn't manage time for that.
Tbh, I'm also still waiting 😢
facebook/react-native#21801

[alz10]

any solution for this?

[benevbright]

@Albert0405 Hi,
I saw your comment on react-native issue. facebook/react-native#21801 (comment)

I really appreciate.
But unfortunately, it doesn't work for this module. I tried that aproach already though and I gave a shot today again but no luck.

Could you test your code with the example of this module?
You can test it by simply modify the code in node_modules/react-navigation-collapsible/index.js.

react-navigation-collapsible/index.js

Lines 339 to 344 in 8dc33e3

	<Animated.View style={{ flex: 1, marginTop: paddingHeight, marginBottom: -paddingHeight, transform: [{ translateY }] }}>
	<MaterialTopTabNavigator
	screenProps={this.props}
	navigation={this.props.navigation}
	/>
	</Animated.View>

I tried changing here like below.

<Animated.View style={{ position: 'absolute', width: '100%', height: '100%', zIndex: 999, top: 0, marginTop: paddingHeight, marginBottom: -paddingHeight, transform: [{ translateY }] }}>
              <MaterialTopTabNavigator
                screenProps={this.props}
                navigation={this.props.navigation}
              />
            </Animated.View>

[brunohkbx]

Hey @benevbright, any update on this?
I had to implement this feature but this flickering problem made it not suitable for a production release :(

[fokoz]

Animation when collapsing is very laggy and shaking even on iOS, does anyone face this ?

[kartikpr]

Any updates?

[benevbright]

I heard it's fixed on RN 60.4. react-native-community/releases#130 (comment)
(But other says it's not. I guess I need to test)
I'll make some time for testing this (maybe weekend).

[kartikpr]

I hope its got fixed, thanks for the prompt reply.
Please keep us posted.

[benevbright]

I just updated example's react-native to 0.60.5 which is latest.
But the issue is still happening. I'm sorry about it.

GIF

[vinodache]

Hey, I do not have a fix yet but was wondering how twitter or instagram handled the similar widget in their UX. I thought they use react native too. Any one has an idea. For instance both twitter and instagram uses a sticky tab with a scrollable header.

Cheers
Vinod

[benevbright]

@vinodache I think it only works without having translateY on the ScrollView/Flatlist. There is no way to resolve this without the real fix from RN.
I can only guess that they're using paddingTop instead.
But I can't do that because we're using react-navigation's tab navigator.

[benevbright]

The bug never gets fixed on React Native.