Question 34347 in React native Question posted in
The official React Native documentation can be found here.

How to add badge to react-native-vector-icons – React native

enter image description here

I’m trying to make this look like an exact badge. Below is the way I tried to achieve this,

     <View style={{alignSelf: 'flex-end', margin: 10}}>
        <View
          style={{
            backgroundColor: 'red',
            padding: 3,
            borderRadius: 10,
            alignItems: 'center',
          }}>
          <Text style={{color: '#fff'}}>26</Text>
        </View>
        <View>
          <Ionicon name="ios-notifications-outline" color="#000" size={30} />
        </View>
      </View>
Tags:

2

Answers


  1. 0

    You can achieve that by using absolute positioning for your badge.

    Login or Signup to reply.
  2. 0

    You can easily achieve this with flex

    Parent component position relative

    Child component position absolute,top -50% , right -50%

    Change the numbers till u get what u want

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search