0

I have implemented this using Animated library in native react-native where I interpolate when I am scrolling. The problem is it is very laggy on ios and somewhat laggy on android. Is there a library or a better way to do this header hiding when scrolling in react-native ?

Here is my current implementation:

const scrollY = new Animated.Value(0);
  const diffClamp = Animated.diffClamp(scrollY, 0, HEADER_HEIGHT);
  const translateY = diffClamp.interpolate({
    inputRange: [0, HEADER_HEIGHT],
    outputRange: [0, -HEADER_HEIGHT],
  });

return (

    <ExploreHeader
          ...          
         translateY={translateY}
    />
    
     <ExploreData
           ...
            scrollY={scrollY}
            offset={HEADER_HEIGHT}
            scrollRef={scrollRef}
          />

and in ExploreHeader I have this:

<Animated.View
      style={{
        position: 'absolute',
        top: 0,
        right: 0,
        left: 0,
        height: height,
        transform: [{translateY: translateY}],
        elevation: 100,
        zIndex: 100,
      }}>

and in ExploreData:

       <FlatList
          ...
          onScroll={(e) => {
            scrollY.setValue(e.nativeEvent.contentOffset.y);
          }}
          style={{paddingTop: offset}}
        />
SDB_1998
  • 305
  • 5
  • 18
  • in ios simulator have you cheked that slow animations are off (debug menu slow animations) on android animations always run slow in debug mode you have to run animations in release mode to get the correct feel – Adam Katz Sep 25 '21 at 16:14
  • 1
    hey @AdamKatz. I have a real ios app and android apps that are in stores and they are still slow – SDB_1998 Sep 25 '21 at 17:28
  • thanks for feedback, kills my suggestion dead in the water. – Adam Katz Sep 25 '21 at 17:54

0 Answers0