CODEWITHSUNDEEP
javascriptandroidreactjsreact-native
Matheus Silva
Matheus Silva

Reputation: 118

Icon with absolute position outside the component can not be pressed

My application has a tab bar where the one icon should be with one part out covering the top screen. But in that part of the icon present on the tab can be clicked, while the one on the other component can not be clicked. How can I solve this?

Image

Tab bar code:

  <View style={{ backgroundColor: "#2d3238", flexDirection: "row", justifyContent: 'space-around', alignItems: 'center' }}>
    <TouchableWithoutFeedback onPress={() => this.props.navigation.navigate('Settings')}>
      <View style={{ padding: 5 }}>
        <AntDesign
          style={{ color: '#7d858e', marginVertical: 5 }}
          name="eyeo"
          size={30}
        />
      </View>
    </TouchableWithoutFeedback>
    <TouchableWithoutFeedback onPress={() => this.props.navigation.navigate('T')}>
      <View style={{ padding: 5 }}>
        <FontAwesome
          style={{ color: '#7d858e', marginRight: 35 }}
          name="group"
          size={22}
        />
      </View>
    </TouchableWithoutFeedback>
    <TouchableWithoutFeedback onPress={() => this.props.navigation.navigate('Map')}>
      <View style={{ position: 'absolute', left: (Dimensions.get('window').width / 2) - 40, top: -25, zIndex: 1 }}>
        <Image
          style={{ height: 80, width: 80 }}
          source={require('../../assets/center.png')}
        />
      </View>
    </TouchableWithoutFeedback>
    <TouchableWithoutFeedback onPress={() => this.props.navigation.navigate('Q')}>
      <View style={{ padding: 5 }}>
        <Entypo
          style={{ color: '#7d858e', marginLeft: 30, marginRight: 5 }}
          name="chat"
          size={22}
        />
      </View>
    </TouchableWithoutFeedback>
    <TouchableWithoutFeedback onPress={() => this.props.navigation.navigate('Home')}>
      <View style={{ padding: 5 }}>
        <FontAwesome
          style={{ color: '#7d858e', marginRight: 5 }}
          name="wifi"
          size={22}
        />
      </View>
    </TouchableWithoutFeedback>
  </View>

I solved it this way (ignore the mess), the difference is that now the button belongs to the whole screen, not just the tab bar:

 <React.Fragment>
  <View style={{ backgroundColor: "#2d3238", flexDirection: "row", justifyContent: 'space-around', alignItems: 'center' }}>
    <TouchableWithoutFeedback onPress={() => this.props.navigation.navigate('Settings')}>
      <View style={{ padding: 5 }}>
        <AntDesign
          style={{ color: '#7d858e', marginVertical: 5 }}
          name="eyeo"
          size={30}
        />
      </View>
    </TouchableWithoutFeedback>
    <TouchableWithoutFeedback onPress={() => this.props.navigation.navigate('T')}>
      <View style={{ padding: 5 }}>
        <FontAwesome
          style={{ color: '#7d858e', marginRight: 35 }}
          name="group"
          size={22}
        />
      </View>
    </TouchableWithoutFeedback>
    <TouchableWithoutFeedback onPress={() => this.props.navigation.navigate('Q')}>
      <View style={{ padding: 5 }}>
        <Entypo
          style={{ color: '#7d858e', marginLeft: 30, marginRight: 5 }}
          name="chat"
          size={22}
        />
      </View>
    </TouchableWithoutFeedback>
    <TouchableWithoutFeedback onPress={() => this.props.navigation.navigate('Home')}>
      <View style={{ padding: 5 }}>
        <FontAwesome
          style={{ color: '#7d858e', marginRight: 5 }}
          name="wifi"
          size={22}
        />
      </View>
    </TouchableWithoutFeedback>
  </View>
  <TouchableWithoutFeedback onPress={() => this.props.navigation.navigate('Map')}>
      <View style={{}} style={{ position: 'absolute', left: (Dimensions.get('window').width / 2) - 35, top: 608, zIndex: 1 }}>
        <Image
          style={{ height: 80, width: 80 }}
          source={require('../../assets/center.png')}
        />
      </View>
    </TouchableWithoutFeedback>
  </React.Fragment>

Upvotes: 1

Views: 472

Answers (1)

dentemm
dentemm

Reputation: 6379

Since absolute positioned buttons are a known react-native issue for Android, your best guess is to create a workaround. Refactor the Tab Bar to be the height including the button, and have the background of the upper part be transparent. I don't have the time to create a component now and test it out, but I could try later.

Upvotes: 2

Related Questions