Underline behind text React Native

Question

I want to make a specific underline behind text in a specific area of the title, like this:

How do I do it with React Native?

This is the situation right now:

 <View style={[styles.container, {width}]}>
            <Image source={item.image} style={[styles.image, {width, resizeMode: 'contain'}]}/>
            <View style={{flex: 0.2}}>
                <Text style={[styles.title]}>{item.title}</Text>
            </View>
 </View>

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center'
    },
    image: {
        flex: 0.6,
        justifyContent:'center'
    },
    title: {
        fontWeight: "600",
        fontSize: "26",
        color: 'black',
        textAlign: 'center',

    }
})

I've seen this thread with css Thick underline behind text

Saad Mehmood · Answer 1 · 2023-02-14T21:33:26.387

You have to position the title absolute to achieve that. In the following code, I have implemented an example I hope it will help you.

<View style={{marginTop: 20, height: 200, position: 'relative'}}>
      <View style={styles.line}></View>
      <Text style={styles.title}>Specific Title</Text>
 </View>

const styles = StyleSheet.create({
  title: {
    fontSize: 44,
    fontWeight: '500',
    lineHeight: 45,
    position: 'absolute',
    top: 20,
  },
  line: {
    marginTop: 40,
    marginLeft: 50,
    borderRadius: 10,
    height: 15,
    width: 100,
    backgroundColor: '#3F8ED6',
  },
})

result

Underline behind text React Native

1 Answers1