xxxxxxxxxx
import React from 'react';
import { View, Text } from 'react-native';
const Example = () => {
return (
<View>
<Text numberOfLines={2} ellipsizeMode="tail">
This is a long text that will be wrapped after two lines and will show an ellipsis in the end if required.
</Text>
</View>
);
};
export default Example;
xxxxxxxxxx
<View
style={{ flexDirection: 'row' }}
>
<Text style={{ flexShrink: 1 }}>
Really really long text
</Text>
</View>
xxxxxxxxxx
import React from 'react';
import { View, Text } from 'react-native';
const App = () => {
return (
<View style={{ width: 200 }}>
<Text numberOfLines={2} ellipsizeMode="tail">
This is a long text that will be wrapped within this container.
</Text>
</View>
);
};
export default App;
xxxxxxxxxx
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
const App = () => {
return (
<View style={styles.container}>
<Text style={styles.text}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor felis et tortor dignissim fermentum. Etiam suscipit nunc vel lacinia rhoncus. Vivamus accumsan orci vitae velit vestibulum, vel mattis eros viverra.
</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 10,
backgroundColor: '#fff',
},
text: {
flexWrap: 'wrap',
},
});
export default App;