How to make safe area clickable in react native

Question

I have been running into a problem. I have address on top right corner in my application running on Ipad. I am working on a funcitonality when I click on my address 5 times, it should open the alert. The area highlighted in red rectangle box is not clickable. Rest of the shaded area which is not inside red rectangle box is clickable. I also checked on left side of screen. The whole safe area region is not responding on my clicks

Here is the code snippet of my JSX:

 return (
      <View style={styles.settings}>
        <View style={styles.wrappedComponent} testID="wrapped-component">
          {children}
          <TouchableWithoutFeedback onPress={handleTap}>
          <View style={styles.container} />
          </TouchableWithoutFeedback>
        </View>
      </View>
  );

Here are my styles:

import { StyleSheet } from 'react-native';

export default StyleSheet.create({
  settings: {
    flex: 1,
  },
  wrappedComponent: {
    position: 'relative',
    flex: 1,
  },
  container: {
    position: 'absolute',
    flex: 1,
    top: 0,
    bottom: 0,
    left: '58%',
    right: 0,
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
    justifyContent: 'center',
    height: '12%',
    marginTop: 20,
  },
  rectangle: {
    width: '35%',
    height: 100,
    backgroundColor: 'red',
  },
});

The address is displaying in top right corner of screen, safe area of Ipad. Problem is when I click on address it is not clickable. However click is responding on bottom of address. Is there any way to make my address clickable?