Text exceeds View on Iphone - ios

Question

Check this snippet:
import React, { Component } from 'react';
import { Text, View} from 'react-native';
export default class App extends Component {
render() {
return (
<View style={{margin: 80}}>
<View style={{ padding: 5, backgroundColor: 'honeydew', borderWidth: '1', borderColor: 'black'}}>
<View style={{margin:5, flexDirection: 'row'}}>
<View>
<Text style={{width:50}}>Test </Text>
</View>
<View style={{backgroundColor:'yellow'}}>
<Text>this text exceeds the bordered view on iphone, should just wrap and fill the view</Text>
</View>
</View>
</View>
</View>
);
}
}
The text with yellow background is rendered partially outside the view with the black border.
This can be tested here: https://snack.expo.io/HJRRjutuW
Why doesn't it render properly? And what should I change so it does?

Answer 1

Just remove flexDirection: 'row' from
<View style={{margin:5, flexDirection: 'row'}}>
also updated snack
https://snack.expo.io/rJ6N8tKdb
Or you can add flexWrap
<View style={{margin:5, flexDirection: 'row',flexWrap: 'wrap'}}>
output will be like
EDIT
import React, { Component } from 'react';
import { Text, View} from 'react-native';
export default class App extends Component {
render() {
return (
<View style={{margin: 80}}>
<View style={{ padding: 5, backgroundColor: 'honeydew', borderWidth: '1', borderColor: 'black'}}>
<View style={{margin:5, flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'space-between'}}>
<View >
<Text style={{width:50}}>Test </Text>
</View>
<View style={{flex:1,backgroundColor:'yellow'}}>
<Text>this text exceeds the bordered view on iphone, should just wrap and fill the view</Text>
</View>
</View>
</View>
</View>
);
}
}

Answer 2

If I measure the screenwidth and subtract the rest from it, it looks like I want it to, but this is not an elegant solution:
https://snack.expo.io/r1xCX5td-
import React, { Component } from 'react';
import { Text, View, Dimensions} from 'react-native';
export default class App extends Component {
render() {
let stretchWidth = Dimensions.get('window').width - 240;
return (
<View style={{margin: 80}}>
<View style={{ padding: 5, backgroundColor: 'honeydew', borderWidth: '1', borderColor: 'black'}}>
<View style={{margin:5, flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'space-between'}}>
<View style={{flexDirection: 'row'}}>
<Text style={{width:50}}>Test</Text>
</View>
<View style={{width:stretchWidth,backgroundColor:'yellow'}}>
<Text>this text exceeds the bordered view on iphone, should just wrap and fill the view</Text>
</View>
</View>
</View>
</View>
);
}
}