1

I have a Viewinside a SafeAreaView in a screen which has postion:absolute. When I include the view, a TouchableOpacity rendered in the header no longer responds in ANDROID (but always works fine in iOS).

Home screen:

render() {
  return (
    <SafeAreaView style={styles.SafeAreaContainer}>
      <View style={styles.homeBackgroundContainer}>  {/* <--- offending view! */}
        <BlueCircle style={styles.homeBackgroundSvg} />
      </View>
      <View style={styles.homeView}>
        <View style={styles.homeGreetingContainer}>
          <Title style={styles.homeGreeting}>Hi, </Title>
          <Title style={styles.homeGreetingName}>{username}</Title>
        </View>
        // Other components
      </View>
    </SafeAreaView>
    );
  }

styles.homeBackgroundContainer:

homeBackgroundContainer: {
  borderColor: COLOR.transparent,
  position: 'absolute',
  top: '-50%',
  left: '-25%',
  right: 0,
  bottom: 0,
},

The header is declared in the drawer navigator screen options. Note the TouchableOpacity in the header - this is used to open the drawer.

  • works in iOS
  • works from the "Content" screen
  • works when the homeBackgroundContainer(and its children) are commented out (Home Screen)
  • DOES NOT WORK IN ANDROID when homeBackgroundContainer is rendered (Home Screen).

Drawer Navigation & Header:

function DrawerContainer() {
  return (
    <Drawer.Navigator
      screenOptions={({navigation}) => ({
        headerLeft: titleLogo,
        headerStyle: {
          // colors only
        },
        headerTitle: () => {},
        headerRight: () => (
          <TouchableOpacity
            style={styles.hamburgerIconButton}
            onPress={() => navigation.toggleDrawer()}>
            <Image source={require('../assets/hamburger.png')} />
          </TouchableOpacity>
        ),
      })}>
      <Drawer.Screen
        name="Home"
        component={HomeScreen}
        options={{
          headerShown: true,
          // more options
        }}
      />
      <Drawer.Screen
        name="Content"
        component={ContentScreen}
        options={{
          headerShown: true,
        }}
      />
    </Drawer.Navigator>
  );
}

styles.hamburgerIconButton:

hamburgerIconButton: {
  marginRight: 20,
},

Other questions on SO have shown that absolute positioning can affect TouchableOpacity. I have tried setting the zIndex of the TouchableOpacity to 1, and also tried setting a positive elevation value but there is no change in behaviour.

Visually, I can see the header colors and content is rendered on top of the view which is the desired state. So if the header is rendered over the view, why isn't the TouchableOpacity responding?

sezmeralda
  • 153
  • 8

1 Answers1

1

To get the TouchableOpacityin a navigation header to respond on android when there's a view on the screen which has postion: absolute, I had to bring the headerStyle(not the touchable opacity style) forward on the z-axis.

screenOptions={() => ({
  headerStyle: {
    zIndex: 1,
  },
})};
sezmeralda
  • 153
  • 8