FlatList don't resize to full height using Animated component when translate in Y

user_16614099 0
Viewed 414

I had read a lot of examples with similar problems, but I can achieve the behaviour expected. I think is not the code but React Native.

I have a Component Header (View) and a FlatList, when I scroll down I want to hide the Component Header. The Component Header translate in Y successfully but the FlatList don't move up and a blank area keep in place.

Here the code:

const TestAnimatedFlatList = Animated.createAnimatedComponent(FlatList);
const [animatedValue, setanimatedValue] = useState(new Animated.Value(0));

let translateY = animatedValue.interpolate({
    inputRange: [0, 230],
    outputRange: [0, -230],
    extrapolate: Extrapolate.CLAMP,
  });

<View style={{ flex: 1 }}>
  <Animated.View style={{
     transform: [{translateY}], 
     backgroundColor: 'lightblue', 
     height: 230}}>
   </Animated.View>
   <TestAnimatedFlatList
        data = {dataT}
        renderItem={renderItem}
        keyExtractor={ (item) => item }
        style = {{flex: 1}}
        onScroll={Animated.event(
          [{nativeEvent: {
              contentOffset: {
                  y: animatedValue
              }
          }
      }],
          {useNativeDriver: true}
      )}
 />

The expected behaviour should be that when the Component Header disappear the FlatList up to the top replacing it and cover all the screen.

The actual behaviour:

State 1 State 2

I have try a lot of thing like: transforming the size and position of the FlatList at the same time but that don't render correctly when I scroll and start to jump. The other thing was putting the flat list inside the Component Header (View) with the same unwanted result.

Due to the complexity of my Component Header is not a good idea to put it as header in the FlatList. That's why I am using Animated component. Maybe the whole approach is not correctly.

I am using: React Native 0.63.53

flatlist react-native reactjs scrollview
1 Answers

If the goal is to hide header as scroll then you should render your header in Flatlist prop ListHeaderComponent like below

  <FlatList
      ListHeaderComponent={() => (<View style={{ backgroundColor: 'lightblue', height: 230}}/>)}
      data = {dataT}
      renderItem={renderItem}
      keyExtractor={ (item) => item }
      style = {{flex: 1}}/>

But if you want to animate then try below code:

const offset = useRef(new Animated.Value(0)).current;
const [animatedValue, setanimatedValue] = useState(new Animated.Value(0));

let scale = offset.interpolate({
            inputRange: [0, 230],
    outputRange: [1, 0],
            extrapolate: "clamp"
          });


<View style={{ flex: 1 }}>
  <Animated.View style={{
     transform: [{scale}], 
     backgroundColor: 'lightblue', 
     height: 230}}>
   </Animated.View>
   <Animated.FlatList
        data = {dataT}
        renderItem={renderItem}
        keyExtractor={ (item) => item }
        style = {{flex: 1}}
        onScroll={Animated.event(
          [{ nativeEvent: { contentOffset: { y: offset } } }],
          { useNativeDriver: true }
        )}
 />
</View>
user_68904140
Related