How to add badge to react-native-vector-icons-CodePudding

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>

CodePudding user response：

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

CodePudding user response：

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