Slide down and push other elements

[noctivityinc]

I have a flat list and a button to create a new item for that FlatList. When I click it, I want the flat list to slide down and the new item to fade in. I have this above the flat list:

<Animatable.View
          animation={newSheet ? "fadeIn" : "fadeOut"}
          style={{ width: "100%" }}
        >
          {renderNewItem()}
</Animatable.View>

which works to fade the new text input in and out, but it leaves a large blank spot at the top of the list. How can I first get the list to slide down and then fade in when the button is clicked? You can see the large blank spot at the top in this image:

[noctivityinc]

Figured it out. There was an element with a defined height inside the Animated View. Removed that and setup a custom animation to change the height and all good.