Dynamic view according to the length of the text

Question

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:

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.

There are 2 possible ways to do this. Either have underline applied via css, that way your underline will grow with text. Or add 2 elements ( one for text and one for the underline and make them take 100% width of their container. — Shobhit Chittora, Apr 09 '18 at 14:30
@ShobhitChittora: Thanks for your answer, It is a little unclear for me. Can I Kindly ask you to write it as a answer? Thanks in advance. — Saeid, Apr 09 '18 at 14:44

score 2 · Accepted Answer · answered Apr 09 '18 at 15:11

2

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.

answered Apr 09 '18 at 15:11

heltdev

943
1
8
19

thanks for the answer, but it did' work. In fact, it make the bar to fit the container(screen). So, if the text is shorter than the container(which always is), the lowness of the bar will not be fitted based on the text and it comes longer. – Saeid Apr 09 '18 at 15:20
you should set view stylesheet to adjust width to text. There are many solution for it. – heltdev Apr 09 '18 at 15:22
1

you can do it with flex and alignself properties. – heltdev Apr 09 '18 at 15:24
I am completely new in the react native world. can you give me a link or guide so that I understand how to do that. Thanks – Saeid Apr 09 '18 at 15:26
https://stackoverflow.com/questions/38233789/react-native-view-auto-width-by-text-inside please read this answer – heltdev Apr 09 '18 at 15:27
Thanks a lot. You made my day. :) – Saeid Apr 09 '18 at 15:30
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/168666/discussion-between-heltdev-and-reza). – heltdev Apr 10 '18 at 17:17

Dynamic view according to the length of the text

1 Answers1