I am building my first application with react native. I am trying to create a reusable badge ponent which is supposed to stand as a notifier or counter for notifications at different parts of my application. The image below explains more.

I am trying to achieve the red circle on the top right corner of the speech bubble, to do this I figured I have to position the element to absolute, and I have but only that the element still creates a space in its parent element as though it is relatively postioned while it is still moved to the top right, I hop that was clear? This is my styling code.

style:{
    position: 'absolute',
    zIndex: 1,
    right:0,
    top:0
    alignItems: 'center',
    justifyContent: 'center',
    width: 24,
    height: 24,
    backgroundColor:'#ffff00',
    color: '#ffffff',
    borderRadius: 30
}

Would love to know what I'm missing here, thanks!

I am building my first application with react native. I am trying to create a reusable badge ponent which is supposed to stand as a notifier or counter for notifications at different parts of my application. The image below explains more.

I am trying to achieve the red circle on the top right corner of the speech bubble, to do this I figured I have to position the element to absolute, and I have but only that the element still creates a space in its parent element as though it is relatively postioned while it is still moved to the top right, I hop that was clear? This is my styling code.

style:{
    position: 'absolute',
    zIndex: 1,
    right:0,
    top:0
    alignItems: 'center',
    justifyContent: 'center',
    width: 24,
    height: 24,
    backgroundColor:'#ffff00',
    color: '#ffffff',
    borderRadius: 30
}

Would love to know what I'm missing here, thanks!

• javascript
• android
• css
• react-native

• 1 I found out what caused this, while developing react caches your project for fast reload (I use hot reload). To clear the cache, I had to restart my react native server and add the reset cache option like so react-native start --reset-cache it worked after this, a silly mistake I must say. :( – Daniel Barde Commented Dec 1, 2016 at 15:04

1 Answer 1

Hope it will help

<View style={{position: 'relative'}}>
   <Image /> //CommentIcon
   <View style={{position: 'absolute', right: 0, top: 0, borderRadius: 5, height: 10, width: 10, backgroundColor: '#00ff00'}}>
       <Text> 3 </Text>                    
   </View> 
</View>