Issue with Formview blocking the main view in react native android application - react-native

Question

<View style={styles.bottomContainer} >
<Animated.View style = {buttonAnimatedStyle}>
<Pressable style={styles.button} onPress = {loginHandler} >
<Text style={styles.buttontext} >LOG IN</Text>
</Pressable>
</Animated.View>
<Animated.View style = {buttonAnimatedStyle}>
<Pressable style={styles.button} >
<Text style={styles.buttontext} onPress = {registerHandler} >REGISTER</Text>
</Pressable>
</Animated.View>
<Animated.View style={[styles.inputformcontainer, formAnimatedStyle ]}>
<TextInput placeholder="Email"
placeholderTextColor="#9b1306"
style={styles.textinput}/>
<TextInput placeholder="Full Name"
placeholderTextColor="#9b1306"
style={styles.textinput}/>
<TextInput placeholder="Password"
placeholderTextColor="#9b1306"
style={styles.textinput}/>
<View style = {styles.formButton}>
<Text style={styles.buttontext}> LOG IN </Text>
</View>
</Animated.View>
</View>
Here is the Styling of above views:
bottomContainer: {
justifyContent: 'center',
height: height / 3,
},
inputformcontainer:{
backgroundColor:'grey',
color: '#000',
marginBottom: 70,
...StyleSheet.absoluteFill,
justifyContent : "center",
},
DETAILS OF THE CODE
so basically I am trying to create an aninated view where the "forminput" container should pop up when user taps on log in or register button. But the problem is that my buttons dont work when because the forminput container lands on top of them somehow (eventho it is invisible). The person I am following used
zIndex: -1
to place it underneath the view but it does not work in android.
PS: I have also tried "elevation" Prop but that doest seem to work either.