Menu
Here is my sceanario
var FlexWrap = React.createClass({
render:function(){
return(<View style={{flexDirection:'row'}}>
<Image source={{uri:profileImage}}
style={{width:100,height:100}}>
</Image>
<View style={{marginLeft:5}}>
<Text style={{marginTop:5,
marginBottom:5,
flexWrap:'wrap'}}>
This sample text
should be wrap
wrap wrap ....
</Text>
<Text style={{marginTop:5,
marginBottom:5,
flexWrap:'wrap'}}>
This sample text
should be wrap
wrap wrap ....
</Text>
</View>
</View>)
}
})
Here
'This sample text should be wrap wrap wrap ....'
is in single
line, but in my scenario based on the window width automatically the
text should be wrap.
Here i am using flexWrap: 'wrap' to wrap the text, but what is the correct way to wrap the text?
Please find the screenshot
Here is the working code for text wrap with flexDirection:'row'
var FlexWrap = React.createClass({
render:function(){
return(<View style={{flexDirection:'row'}}>
<Image source={{uri:profileImage}}
style={{width:100,height:100}}>
</Image>
<View style={{marginLeft:5,flex:1}}>//using flex:1
<Text style={{marginTop:5,
marginBottom:5
}}>
This sample text
should be wrap
wrap wrap ....
</Text>
<Text style={{marginTop:5,
marginBottom:5
}}>
This sample text
should be wrap
wrap wrap ....
</Text>
</View>
</View>)
}
})
401
To wrap React Native text on the screen, we can set flexWrap to 'wrap' .
Below, we set a container's flexWrap property to wrap to wrap the boxes inside it into multiple lines: import React, { useState } from "react"; import { StyleSheet, View } from "react-native"; export default function App() { return ( <> <View style={styles.
React Native allows you to automatically truncate text that will not fit within its <View> container. In most cases this is enough for the device to truncate the text, automatically adding ellipsis to the end of the string (…) after however many lines of text you have specified (In this case, we only want 1 line).
import React, {Component} from 'react'; import {View, Text, StyleSheet, TextInput, TouchableHighlight} from 'react-native'; export default class AddItems extends Component { onAdd() { alert('Hello'); } render() { return ( <View style={addItemStyles.
set flex: 1 to wrapper view of text
Help link
53
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
