I am new to react native so please help me to figure this out. I want to set background color to the text but this is some kind of different design.

I have tried with this code:-

<View style={styles.titleWrapper}>
     <View style={styles.titleInner}></View>
     <Text style={styles.title}>Mobile Verification</Text>
</View>

const styles = StyleSheet.create({
   titleWrapper: {
        justifyContent: 'center',
        alignContent: 'center',
        alignItems: 'center',
        marginTop: '8%',
        flexDirection: 'row'
    },
    titleInner: {
        backgroundColor: COLORS.LIME_GREEN,
        width: '50%',
        height: 22,
        position: 'absolute',
        bottom: 0,
        left: '23%',
        borderRadius: 14,
        opacity: 0.5,
    },
   title: {
        color: COLORS.BLACK,
        fontWeight: 'bold',
        fontSize: 25,
        textAlign: 'center',
    },
})

I want to implement same thing for other screens as well. Here the width of background color will be differ by text to text. So if length of text is short then we need width according to the text.

Please guide me how to apply the styles in it. Thanks in advance.