Can't click Fab with Badge positioned over top right corner

Hi! Thanks for trying out NativeBase! Due to the overwhelming requests and issues/questions we ask you to add the following details with your issue.

Please check the existing open/closed issues for a possible duplicate before creating a new issue 😃

Also DO fill out the below form to give us a better idea about your environment and help us debug it quicker. Issues without the required details will mostly be unattended to.

react-native, react and native-base version

latest for each

Expected behaviour

fab is clickable, with badge in top right corner

Actual behaviour

fab is not clickable

Steps to reproduce (code snippet or screenshot)

<View pointerEvents={'none'} style={{position:'absolute',elevation:20,bottom:58,right:18}}>
    <Badge danger>
        <Text>1</Text>
    </Badge>
</View>
<Fab 
    style={{backgroundColor:'#00BCD4'}}
    position="bottomRight"
    active={false}
    onPress={()=>{alert('hi')}}
>
    <Icon name="md-chatboxes" />
</Fab>

Screenshot of emulator/device

Is the bug present in both ios and android or in any one of them?

Any other additional info which would help us debug the issue quicker.

i was able to position the badge over the fab, but the fab becomes unclickable. i can’t find any info about this on google, plz help.

[SupriyaKalghatgi]

@r3wt

i made the modifications as shown in your code and it still doesn’t work!

If you tried @akhil-geekyants 's snippet, then thats not possible to fail You probably mixed up your prototype with this

[akhil-ga]

@r3wt checked this. It is working fine for me. Attaching a gif.

Tested code

import React, { Component } from 'react';
import { Container, Header, View, Button, Icon, Fab, Badge, Text } from 'native-base';
export default class App extends Component {
  constructor() {
    super();
    this.state = {
      active: 'true'
    };
  }
  render() {
    return (
      <Container>
        <Header />
        <View style={{ flex: 1 }}>
          <View pointerEvents={'none'} style={{ position: 'absolute', elevation: 40, bottom: 58, right: 18, zIndex: 1 }}>
            <Badge danger>
              <Text>1</Text>
            </Badge>
          </View>
          <Fab
            style={{ backgroundColor: '#00BCD4' }}
            position="bottomRight"
            active={false}
            onPress={() => { alert('hi') }}
          >
            <Icon name="md-chatboxes" />
          </Fab>
        </View>
      </Container>
    );
  }
}

Gif