CODEWITHSUNDEEP
reactjsreact-native
Saeid
Saeid

Reputation: 2036

Dynamic view according to the length of the text

I am developing an App with react native and I have graphical problem. I need to have a dynamic yellow bar(which is in a view) for my text as below: enter image description here

So, it means that if I have a longer text, the bar should be longer and if the text is shorter, the bar also should be shorter and fit for it. By now I use the static method. I give 90 as the width to the bar which is not good. Here is the code:

<View style={[styles.rowSep, {width:90}]}/>
<Text style={[commonStyle.normalItem , {marginBottom:10}]}>
    {I18n.t("Il_Museum_Modena")}
</Text>

Here is the style:

rowSep: {
    height: 7,
    marginVertical: 4,
    //width: Dimensions.get('window').width,
    backgroundColor: '#FABB00',
    marginBottom:12,
         },

Can you help me to have dynamic yellow bar based on the length of the text. Thanks in advance.

Upvotes: 1

Views: 422

Answers (1)

heltdev
heltdev

Reputation: 943

You can wrap Text with View and set view StyleSheet to get effect what you want.

Example:

<View style={styles.textwrapper}>
  <Text>Just test</Text>
</View>

Style:

textwrapper: {
  borderBottomWidth: 5px,
  borderBottomColor: #234532,
  borderStyle: 'solid'
}

I haven't test this code, but I hope this give you some hints.

Upvotes: 2

Related Questions