0

I made a Fab component of native-base Fab. I would like to show badges for collapsible buttons. My solution works fine on iOS, but not on Android where the badge is not overflowing the button and thus is only partly shown.

    <Fab
        active={isFabActive}
        direction="up"
        containerStyle={{}}
        style={styles.fab}
        position="bottomRight"
        onPress={() => onPressFn || this.setState( { isFabActive: !isFabActive } )}>
        <Icon type={iconFont} name={iconName}/>
        {
            !onPressFn && buttons && buttons.map( ( i, index ) => (
                <Button iconCenter
                        style={{ backgroundColor: "#3B5998" }}
                        onPress={ i.onPressFn }
                        key={index}>
                    <Icon type={ i.iconFont || 'FontAwesome' } name={i.iconName}/>
                    {
                        i.badgeText !== undefined && <Badge style={styles.fabBadge}><Text>{i.badgeText}</Text></Badge>
                    }
                </Button>
            ))
        }

    </Fab>

const styles = StyleSheet.create( {
    fab: {
        backgroundColor: COLOR_PRIMARY
    },
    fabBadge: {
        position: 'absolute',
        right: -10,
        top: -10,
    }
} )

Issue on Android

terreb
  • 1,417
  • 2
  • 23
  • 40

1 Answers1

1

On android overflow: visible is not supported yet, if you want to make it visible add padding to parent view(<Fab />) to make it bigger so badge won't be cut.

Wojtek Szafraniec
  • 541
  • 3
  • 7