0

I am creating a screen in react-native where I have to display text on a parent view. How do I make the whole text be displayed?

At first I thought its a problem with text not wrapping, so I tried this solution from one question here

<View style={{flexDirection:'row'}}> 
   <Text style={{flex: 1, flexWrap: 'wrap'}}> You miss fdddddd dddddddd 
     You miss fdd
     Another line
     and another one
   </Text>
</View>

I then tried numberOfLines={1}

This is my code 

<View style={{ width: '100%', height: '15%', position: 'absolute', alignSelf: 'center', backgroundColor: 'rgba(255, 255, 255, 0.4)', borderRadius: 5, marginTop: '90%', }}>
    <Text style={{ width: '80%', backgroundColor: 'transparent', alignSelf: 'center', textAlign: 'center', fontSize: 18, color: '#005F6A', marginTop: '5%' }}>
        {`Text the first &
        Text the second &
        text the third`}
     </Text>
</View>

I expect all text to be rendered but only the first line is rendered

daRula
  • 143
  • 2
  • 12

1 Answers1

1

Text is rendering correctly but as you have placed the property width=80% it's bounded to wrap the content to the new line. I have used the red color for parent view for more text clarity. Please try to run the below code and let me know if you face any issue. I will try to help you mate. 

<View style={{ backgroundColor: 'red', borderRadius: 5 }}>
            <Text style={{  backgroundColor: 'transparent',
                            textAlign: 'center',
                            fontSize: 18,
                            color: '#005F6A',
                            marginTop: '5%'
                        }}>
                        Text the first & Text the second & text the third, Text the fourth & text the fifth
                    </Text>
                </View>
shivam
  • 136
  • 13
  • It works just fine but when I add `marginTop: '90%'` the text disappear altogether but the parent view remains – daRula May 07 '19 at 08:21
  • It should not disappear, I have also increased `marginTop` to 90% and text is still there. Albeit it increased the size of the parent's view which should be fine as Text needs some space to enlarge its space. – shivam May 07 '19 at 09:13
  • Yup you right I also put `flexDirection: 'row'` and everything is fine thanks – daRula May 07 '19 at 09:21