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
<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 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
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;
xxxxxxxxxx
import React from 'react';
import { View, Text } from 'react-native';
const App = () => {
return (
<View>
<Text numberOfLines={2}>
This is an example text that will wrap onto multiple lines if it exceeds the specified number.
</Text>
</View>
);
};
export default App;