NativeBase: Badge too large, positioned wrong and pushing down FooterTab Icon

react-native-cli: 2.0.1 react-native: 0.42.0

using the code example from the ReactBase 2.0 website like so:

         <Footer >
            <FooterTab>
              <Button>
                <Icon name="apps" />
                <Text>Apps</Text>
              </Button>
              <Button>
                <Badge style={{ backgroundColor: 'blue' }}><Text>51</Text></Badge>
                <Icon name="person" />
                 <Text>Contact</Text>
              </Button>
              <Button>
                <Icon name="camera" />
                 <Text>Camera</Text>
              </Button>
              <Button active>
                <Icon name="share" />
                 <Text>Share</Text>
              </Button>
            </FooterTab>
          </Footer>

gives me:

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 15 (1 by maintainers)

Most upvoted comments

You need to pass badge prop in the Button Something like this <Button badge> <Badge style={{ backgroundColor: 'blue' }}><Text>51</Text></Badge> <Icon name="person" /> <Text>Contact</Text> </Button>

shivrajkumar on Mar 17, 2017

I did something like this (absolute positioning), though its not to tested. I think it looks a bit strange on android for example.

...
<Badge style={{ position: 'absolute', right: 12, top: 3, paddingTop: 0, paddingBottom: 0, borderRadius: 100, height: 18 }}>
    <Text style={{ height: 16, fontSize: 12 }}>{this.props.numberOfOrders}</Text>
</Badge>
...

andidev on Mar 17, 2017

@shivrajkumar : is this fixed, or why would this issue be closed ? The problem seems to be in the recommended command node node_modules/native-base/ejectTheme.jsfor customising themes and styles … if you do as described and use the generated files you end up with the described problem your tab icons get pushed down by the badge

znafets on Mar 19, 2017