CODEWITHSUNDEEP
javascriptreact-nativeinterpolationreact-animated
David Henry
David Henry

Reputation: 3062

Animating Header Using Transform React Native

Using React Native, I am trying to mimic the below animation. The header (Map Pin and Stamba Hotel Tbilisi) scrolls up with the FlatList, but then if the user scrolls down the header is immediately scrolled down with the FlatList. Kindly note this animation is adhering to the SareAreaView.

enter image description here

The problems I am having are the following;

  1. When the user scrolls up the FlatList doesn't go with it, therefore, leaving a blank white area.
  2. When the user scrolls back down the Header is not immediately scrolling down.
  3. The header does not go under the SafeAreaView

COMPONENT TREE

return (
  <SafeAreaView style={{ zIndex: 1, flex: 1 }}>
    <Animated.View style={[styles.header, { transform: [{ translateY }] }]}>
      <HomeHeader2 />
    </Animated.View>
    {loading ? 
      <View/> : <FlatList/>
    }
  </SafeAreaView>
)

HANDLING ANIMATION

// FLATLIST PROP TO HANDLE ANIMATION
onScroll={ Animated.event([{nativeEvent:
  { contentOffset: { y: scrollY } } }], {
      useNativeDriver: false,
  })
}
// INTERPOLATE OVER SCROLLY
  const scrollY = useRef(new Animated.Value(0)).current;
  const translateY = scrollY.interpolate({
    inputRange: [0, 50],
    outputRange: [0, -50],
    extrapolateRight: "clamp",
  });

STYLING

const styles = StyleSheet.create({
  header: {
    backgroundColor: "blue",
    justifyContent: "center",
    alignItems: "center",
    position: "relative", // AS SHOULD BE UNDER SAFEAREAVIEW
    left: 0,
    right: 0,
    top: 0,
  },
});

Am I on the right track here or is there a better approach?

Upvotes: 1

Views: 113

Answers (0)

Related Questions