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

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.

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

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

facebook/react-native#21801

hi @benevbright any new development on that issue?

HI @benevbright any updates

+1

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

any solution for this?

@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>

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

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

Any updates?

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).

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

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

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

@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.

The bug never gets fixed on React Native.

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