Cannot add Buttons/Touchables to drawerContent

[yannb9]

Describe the bug I'm using your drawerContent function to feed the drawer. However I apparently cannot add TouchableOpacity tags to the drawer. I'm not getting any errors but it seems that they are not clickable for some reason.

To Reproduce Steps to reproduce the behavior: I'm just going to paste my code which is from the template you wrote:

import React from 'react'
import { View, Image, Text, StyleSheet, TouchableOpacity } from 'react-native'
import MenuDrawer from 'react-native-side-drawer'
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
import { faBars, faTimes, faMountain } from '@fortawesome/free-solid-svg-icons';

export default class Screen extends React.Component {
  state = {
    open:false
  };

  toggleOpen = () => {
    this.setState({ open: !this.state.open });
  };

  drawerContent = () => {
    return (
      <View style={styles.animatedBox}>
        <View style={{flexDirection:'row', width:100, height:50}}>
          <View style={{width:55, height:55}}>
            <Image 
              source={require('../assets/imgs/profile.jpeg')}
              style={{ width: "100%", height: "100%", borderRadius: 10 }}
            />
          </View>
          <View style={{flexDirection:'column', width:400, marginLeft:'5%'}}>
            <Text style={styles.welcome}>Hi,</Text>
            <Text style={styles.welcome_name}>Yann Bohbot</Text>
          </View>
        </View>
        <View style={{flex:1, flexDirection:'column', marginTop:'20%'}}>
        <TouchableOpacity onPress={() => console.log('bitch')}>
              <View style={{flexDirection:'row', paddingTop:'5%', height:50}}>
                <FontAwesomeIcon icon={ faMountain } size={ 27 } />
                <Text style={styles.menu}>Dashboard</Text>
              </View>
            </TouchableOpacity>
        </View>
      </View>
    );
  };

  render() {
    return (
      <View style={styles.container}>
        <MenuDrawer 
          open={this.state.open} 
          drawerContent={this.drawerContent()}
          drawerPercentage={75}
          animationTime={250}
          overlay={true}
          opacity={1}
        >
          <TouchableOpacity onPress={this.toggleOpen} style={styles.toggle}>
            <FontAwesomeIcon icon={ faBars } size={ 22 } style={this.state.open == true ? styles.menuOpen : styles.menuClose}/>
            <FontAwesomeIcon icon={ faTimes } size={ 22 } style={this.state.open == true ? styles.menuClose : styles.menuOpen}/>
          </TouchableOpacity>
        </MenuDrawer>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  welcome:{
    fontFamily: "Rubik Medium",
    color: "#2e384d",
    fontSize: 22,
  },
  welcome_name:{
    fontFamily: "Rubik Light",
    color: "#2e384d",
    fontSize: 22,
    // lineHeight:40
  },
  menu:{
    fontFamily: "Rubik Medium",
    color: "#2e384d",
    fontSize: 18,
    marginLeft:'5%'
  },
  animatedBox: {
    flex: 1,
    marginTop:'5%',
    backgroundColor: "#fff",
    paddingTop: '50%',
    paddingLeft:'5%',
    zIndex:1,
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
  },
  toggle:{
    width:22,
    height:22,
    marginLeft:'5%',
    marginTop: '10%',
  },
  menuOpen:{
    display: 'none',
    alignSelf:'flex-start',
    zIndex:1,

  },
  menuClose:{
    display: 'flex',
    alignSelf:'flex-start',
    zIndex:0
  }
})

Expected behavior TouchableOpacity to work Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [Galaxy S10]
• OS: [API29]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context Add any other context about the problem here.

[pedreviljoen]

@yannb9

Let me have a look into this 👍

[yannb9]

hey @pedreviljoen any updates ?

[pedreviljoen]

Hey @yannb9

It seems like there is an issue with Android triggering a touch event when there is z Index involved.

There is a issue with a possible fix on StackOverflow for this: https://stackoverflow.com/questions/53548361/react-native-touchableopacity-onpress-not-working-on-android

There is also another workaround you may want to test: https://stackoverflow.com/questions/34139687/react-native-touchableopacity-wrapping-floating-button-get-nothing/36720618#36720618