Animated.View component misbehaving when adding entering and leaving transitions

[AlexMachin1997]

Hi everyone,

It's my first time posting here so if I'm missing anything let me know I'm happy to provide any additional details 😃

I'm just in the process of going through an Airbnb clone using expo sdk v52 with the new architecture enabled and I noticed something quite odd with how the Animated.view component works.

So on one of my screens I've got a fixed footer which always sits at the bottom of my screen, this works fine until you add an entering or exiting.

How am using Animated.View component for my fixed footer:

<Animated.View
     style={{
       position: "absolute",
       height: 100,
       bottom: 0,
       left: 0,
       right: 0,
       backgroundColor: "#fff",
       paddingVertical: 10,
       paddingHorizontal: 20,
       borderTopColor: Colors.grey,
       borderTopWidth: StyleSheet.hairlineWidth,
     }}
     entering={SlideInDown.delay(200)}
   >
     <View
       style={{
         flexDirection: "row",
         justifyContent: "space-between",
         alignItems: "center",
       }}
     >
       <TouchableOpacity style={styles.footerText}>
         <Text style={styles.footerPrice}>€{listing.price}</Text>
         <Text>night</Text>
       </TouchableOpacity>

       <TouchableOpacity
         style={[defaultStyles.btn, { paddingRight: 20, paddingLeft: 20 }]}
       >
         <Text style={defaultStyles.btnText}>Reserve</Text>
       </TouchableOpacity>
     </View>
   </Animated.View>

With entering/leaving animations:

You can see it's not gone all the way down to the bottom of the screen, it's stuck part of the way up.

Without entering/leaving animations:

This is how it should look once the animation is complete.

Has anyone else come across a similar issue whilst using an animated view with or without using "position: absolute" ? It seems to get stuck there until you cause a re-render then it sometimes fixed it self somehow.

Thanks,

Alex M

[MatiPl01]

Hey @AlexMachin1997!

Your problem looks familiar to me. Can you check which navigator does this app use? If it's a @react-navigation/native-stack, the issue is caused by the top-screen header measurement. The height of the header might not be available when the layout animation starts, hence, the layout animation can look weird and start/finish at the wrong position. In such a case, you can check if the issue still persists when you disable the header in the navigator.

You can disable header in this way:

<Stack.Navigator
  ...
  screenOptions={{
    ...
    header: () => null, // add this
  }}>
  ...
</Stack.Navigator>

Let me know if the issue is related to the @react-navigation/native-stack or if it is a separate problem.

[MatiPl01]

Thanks @dcorbin for your detailed description!

The issue you described is a separate problem. It is likely caused by the react's view recycling. When react reuses the same view, the layout animation may not be applied properly or it may even be applied on a view which doesn't have any layout animation assigned.

This behavior is a little bit tricky but we are already aware of the issue and are working on a solution.

[dcorbin]

Better news than I hoped. Is there any mitigation strategy until the problem is solved? Can you provide a link to the issue so that I can track it? Thanks.

[MatiPl01]

Sorry for the late response. There is no public issue where you can track the progress. There are some other layout animation problems that we are working on so this will be possibly fixed together with them. It may take some time so it's hard to estimate when fix will be ready.

[dcorbin]

No worries on the response delay. I just assumed the holiday. If you don't object, I will create an issue to cover it and post it here, because of course I want to be sure to know when it it fixed.

[MatiPl01]

Yeah, you can create the issue. I think we could have to discuss what is the best way to track progress so that it is visible to other people as well.

[dcorbin]

Issue created: #6869