Expand & Collapse a view such that the lower part doesnot go down , it will its position but the upper will move upward

Question

i have a view that will come by animating from right to left, the main animated view contains two child view , now i want to add a middle view in between that two child view as default the lower part goes down , but i want not to push down lower part, it will in its position,but the upper part will shift upwards and again on Pressing it will come down and view get collapsed, please help me...

<Animated.View style={{ position: 'absolute',marginTop:100,width: '100%', height: height * 0.14, backgroundColor: "#f1f1f1", transform: [{ translateX: animatedValue }] }}>
          <TouchableOpacity style={{ width: '100%', height: height * 0.07, flexDirection: 'row', justifyContent: 'space-between',borderWidth:1}}
           onPress={() =>{
             toggleExpandCollapse();
           }}
           >
          </TouchableOpacity>
   
          <View style={{ width: '100%', height: 200, backgroundColor: "#803CC9", marginTop: 4, justifyContent: 'center', alignItems: 'center'}}

          >
            <Text style={{ color: "#FFFFFF", fontFamily: 'Poppins-Regular', fontSize: 15, fontWeight: '500' }}>Book Now</Text>
          </View>
        </Animated.View>