1

I am using a pressable below an image in a nested view having a background color inside of a parent container view however, onPress is not responding unless I position the pressable absolute (which is forcing me to reposition other components) or when I remove the backgroundColor from the child view or if move that pressable outside of the child view would work fine. What could be the root cause why it won't work within the view having an explicit backgroundColor rather than default. I feel there may be an issue with the event bubbling like view's backgroundColor is overlapping the pressable. An expert advice and/or fix is greatly appreciated. Only tested on android. Thank you

import React from 'react'
import {View, Text, Image,Pressable } from 'react-native';

const SignUp3Success = ({navigation}) => {
    return (

        <View style={{flex:1, justifyContent:'center', alignItems:'center', }}>
            
            <View style={{width:332, height:235, bottom:56 }}>
                <Image source={require('MyProjectName/src/images/binaryGlobe.png')}
                    style={{width:'100%', height:'100%',}} 
                    resizeMode='contain'  
                />
                <Text style={{fontSize:24, top:'5%'}}>Welcome!</Text>
                <Text style={{fontSize:16, top:'8%'}}>Your account has been created.</Text>

                <Pressable  style={
                                    ({pressed}) => 
                                        [{ 
                                            borderRadius:10, 
                                            alignItems: 'center', 
                                            justifyContent: 'center',
                                            height:42,
                                            width:'90%',
                                            alignSelf:'center',
                                            backgroundColor: pressed ? 'blue': 'green',
                                            elevation:3,
                                            top:'18%'
                                        }]
                                }
                                onPress={() => {alert('Hi you pressed me')}}
                            >
                    <Text style={{color:'white', fontSize:16, fontWeight:'bold'}}>Add a photo</Text>           
                </Pressable>      
            </View> 
        </View>      
    );
}
export default SignUp3Success

Without backgroundColor Without backgroundColor

With explicit backgroundColor With explicit backgroundColor

Rizwan
  • 71
  • 8

1 Answers1

0

I just used Snack Expo to quickly execute your code. The code that you posted works perfectly fine for me. I tried changing the background colors and the positionings, but it still works. Is the posted code the exact one that did not work for you?

PiaBa
  • 155
  • 5
  • Yes, this is exactly the code that did not work for me with backgroundColor defined for child view. – Rizwan Aug 13 '21 at 19:32