After creating a form placed alongside buttons, I encountered an issue where the form overlaps the buttons and prevents them from being clicked. Despite setting the z-index to -1, it seems that the form remains clickable even when not visible. Research indicates that changes in React v17 may affect z-index behavior, and attempts to use elevation have also proven ineffective.
Dependencies:
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, Dimensions,TextInput, Pressable } from 'react-native';
import styles from './styles';
import Svg, { Image, Ellipse, ClipPath } from 'react-native-svg';
import Animated, {useSharedValue, useAnimatedStyle, interpolate, withTiming, withDelay,
color} from 'react-native-reanimated';
Form code:
<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>
Functions used
const formAnimatedStyle = useAnimatedStyle(() => {
return{
opacity : imagePosition.value === 0 ? withDelay(400,withTiming(1,{duration:800})) : withTiming(0,{duration: 300})
}
})
CSS:
inputformcontainer:{
backgroundColor:'grey',
color: '#000',
marginBottom: 70,
justifyContent : "center",
zindex: -1,
...StyleSheet.absoluteFill,
}