touchable opacity not triggered when press on it

Question

I have login page that include two <TouchableOpacity> styled as buttons but when click on it nothing happened (cannot be clicked), I open inspector and I found that is wrapped with svg. I tired to use zIndex but doesn't work, here is the cod:

 return (
        < View style={styles.container} >
            <View style={styles.imageView}>
                <Image style={styles.logo} source={require("../assets/qlesse-logo.png")} />
            </View>
            <Animatable.View
                animation="fadeInUpBig"
                style={[styles.footer]}
            >

                <View style={styles.button}>
                    <Text style={styles.font}>Food for You!</Text>
                    <TouchableOpacity
                        onPress={() => navigation.navigate('login')}
                        style={[styles.signIn, {

                            backgroundColor: COLORS.primary2,
                            borderWidth: 1,
                            marginTop: 15,


                        }]}

                    >

                        <Text style={[styles.textSign, {
                            color: COLORS.white
                        }]}>Login</Text>

                    </TouchableOpacity>

                    <TouchableOpacity
                        onPress={() => navigation.navigate('login')}
                        style={[styles.signIn, {
                            borderColor: COLORS.primary2,
                            borderWidth: 1,
                            marginTop: 15
                        }]}
                    >
                        <Text style={[styles.textSign, {
                            color: COLORS.primary2
                        }]}>Sign Up</Text>
                    </TouchableOpacity>

                </View>

            </Animatable.View>



            <Svg width={width} height={height / 2} style={styles.svg} viewBox="10 0 360 70"
                preserveAspectRatio="xMidYMid meet">
                <G transform="translate(0.000000,288.000000) scale(0.100000,-0.100000)"
                    fill="#000000" stroke="none">
                    <Path
                        d="M1865 2843 c-27 -14 -79 -36 -115 -48 -36 -12 -112 -43 -170 -68
-145 -63 -223 -88 -305 -97 -38 -4 -155 -27 -260 -50 -104 -23 -212 -41 -238
-41 -91 0 -169 68 -198 171 -12 44 -29 65 -98 123 -51 42 -124 38 -301 -17
-78 -24 -143 -46 -145 -48 -2 -2 -11 -551 -20 -1219 -15 -1123 -15 -1222 0
-1288 14 -59 22 -76 48 -95 76 -58 301 -105 652 -137 160 -14 2210 -30 2419
-18 326 19 503 80 606 211 79 99 79 100 62 988 -7 344 -15 826 -19 1071 l-6
446 -41 -9 c-60 -14 -157 -3 -276 31 -131 38 -188 39 -419 6 -186 -27 -207
-32 -397 -88 -145 -43 -233 -53 -339 -38 -165 23 -218 55 -229 138 -13 100
-103 132 -211 76z"
                        fill={COLORS.black}
                        stroke={COLORS.black}

                    />
                </G>
            </Svg>

        </View >



    );
};



const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',

        backgroundColor: COLORS.primary,
    }, logo: {


        resizeMode: 'contain',
        width: width / 2,
        top: 0,
        position: 'absolute'
    },
    imageView: {

        justifyContent: 'center',
        alignItems: 'center',
        top: -230,

    },


    font: {
        fontFamily: "Akaya-Kanadaka",
        fontSize: SIZES.h2,
        color: COLORS.white,
        fontWeight: 'bold'
    },
    footer: {
        flex: Platform.OS === 'ios' ? 3 : 2,
        // bottom: 0,
        zIndex: 10,
        borderTopLeftRadius: 30,
        borderTopRightRadius: 30,
        paddingHorizontal: 20,
        //paddingVertical: 30
    },



    signIn: {
        width: '100%',
        height: 40,
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 15,
        zIndex: 10

    },
    textSign: {
        fontSize: 15,
        fontWeight: 'bold',
        fontFamily: "Roboto-Bold",


    },

    button: {
        elevation: 8,
        zIndex: 10,
        top: height / 1.5

    },
});

Answer 1

Check if <TouchableOpacity> is imported from 'react-native-gesture-handler'. If so, move that import to 'react-native'. the gesture handler library requires additional setup. This is an indication that these steps are not done properly. Fix that if it is being used anywhere else.