Related
I want my app to add text underneath the goal section but flex is not letting me do that even if I create new components in native P.S Still a beginner
import React, { useState } from "react";
import { StyleSheet, View, TextInput, Button, Text } from "react-native";
export default function App() {
return (
<View style={styles.Container}>
<View style={styles.GoalInp}>
<TextInput
placeholder="Course Goal"
style={{ overflow: "scroll" }}
onChangeText={goalInputHandler}
value={enteredGoal}
/>
</View>
<View>
<Button title="ADD" onPress={addGoalHandler} />
</View>
<View>
{couseGoals.map(goal => (
<Text>{goal}</Text>
))}
</View>
</View>
);
}
const styles = StyleSheet.create({
Container: {
padding: 50,
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center"
},
GoalInp: {
borderWidth: 1,
width: "80%",
padding: 10,
borderColor: "black"
}
});
You need to bring the listing outside the Container View, as the flex-direction of Container is row, all items will be in a row including form.
My modified code is given below
<View style={styles.wrapper}>
<View style={styles.Container}>
<View style={styles.GoalInp}>
<TextInput
placeholder="Course Goal"
style={{ overflow: "scroll" }}
/>
</View>
<View>
<Button title="ADD" onPress={this.addGoalHandler} />
</View>
</View>
<View>
{this.state.couseGoals.map(goal => (
<Text>{goal}</Text>
))}
</View>
</View>
const styles = StyleSheet.create({
wrapper:{
flex:1,
},
Container: {
padding: 50,
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center"
},
GoalInp: {
borderWidth: 1,
width: "80%",
padding: 10,
borderColor: "black"
},
});
I think that you use to much Vieuw elements.
You should for example use a Text for where your text need to print out.
But I think I have it.
You wrapped everything into a View with a style of;
flexDirection: "row",
Not that good if you don't want to have the whole View on one line....
Issue solved?
I am developing a react-native application and I have a top bar and a bottom bar. There is an image between these two bars, and I need it to take up the maximum space it can regardless of the images original size without getting in the way of the two bars. I've been trying for a while and I can't figure out how to do this.
I have tried a bunch of things with flexbox and setting the image size, but I can't get it to work.
import React from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
import Topbar from './topbar.js'
export default function App() {
return (
<View style = {{
flex: 1,
flexDirection: 'column',
justifyContent: 'space-between'
}}>
<View>
<Topbar />
</View>
<View>
<Image source={require('./image2.jpg')} />
</View>
<View>
<Topbar />
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
// here are my bars
import React, { Component } from "react";
import {
Image, StyleSheet, View, Text,Dimensions
} from "react-native";
import Animated from "react-native-reanimated";
const {screenwidth, screenheight } = Dimensions.get("window");
export default class Topbar extends Component {
render() {
return (
<View style ={{
width: screenwidth,
height: 80,
backgroundColor: "#C0C0C0",
flexDirection: 'row',
justifyContent: 'space-between',
}}>
</View>
)
}
}
const styles = StyleSheet.create({
topbarbackground: {
width: screenwidth,
height: 80,
backgroundColor: "#C0C0C0",
}
})
I need to see the bars and the image and it has to take up the entirety of the phone screen.
I'm not pretty sure what you are trying to get. You can try using ImageBackground component and set the resizeMode to cover. Example:
Cover the entire Screen
<ImageBackground
source={img}
imageStyle={{ resizeMode: 'cover' }}
style={{ width: '100%', height: '100%' }}>
<Topbar/>
<View style={{ flex: 1 }}/>
<Bottombar/>
</ImageBackground>
Cover the available space
<View style={{ flex: 1 }}>
<Topbar/>
<ImageBackground
source={img}
imageStyle={{ resizeMode: 'cover' }}
style={{ width: '100%', flex: 1 }}/>
<Bottombar/>
</View>
I have a profile image in my header component and the source of it comes from database as a string array. What my problem is when i fetch user picture from database, it is slightly cutted from the top. So the head of user use looks like cutted. The image is in a view with borderRadius in order to make it circular.
What i tried:
resizeMode: 'cover',
resizeMode: 'contain',
position:'absolute',
bottom: 0,
and none of them are worked so far.
If you help me i will be appreciated,
thanks.
PS: i have looked several(more than 10) topics in stackoverflow and i could not make it.
Update
Here is my Header Component:
<View style={styles.container}>
<View style={styles.backButtonContainer} >
{isBackButtonIconVisible ? this._renderBackButtonIcon() : null}
</View>
<View style={styles.textContainer} >
<Text style={styles.text}>{text}</Text>
</View>
<View style={styles.profileButtonContainer}>
{isProfileIconVisible ? this._renderProfileIcon() : null}
{isProfilePictureVisible ? this._renderProfilePicture() : null}
</View>
</View>
Rendering Profile Picture:
_renderProfilePicture() {
let profileIcon = (
<View style={styles.profileButtonContainer} >
<CircularProfilePicture
onPress={this.props.onProfilePress}
ProfilePictureSourceUri={this.props.ProfilePictureSourceUri}
></CircularProfilePicture>
</View>
);
return profileIcon;
}
Here is my CircularProfilePicture component
class CircularProfilePicture extends Component {
render() {
const {onPress} = this.props;
return (
<View style={styles.container}>
<TouchableOpacity
onPress={() => onPress()}
>
<Image source={{ uri: 'data:image/png;base64,' + this.props.ProfilePictureSourceUri }}
style={styles.image} />
</TouchableOpacity>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 10,
},
image:{
width: 55,
height: 60,
alignSelf: 'center',
resizeMode: 'cover',
}
});
try this:
padding:3px; // putting your image in the middle of div, setting in px the
value you need
position:absolute;
width: 200px; // the value that you have designed your div
height: 200px; //the value that you have designed your div
border-radius:30%; // set the value you need;
-moz-border-radius: 30%; //ancient mozzila versions
-webkit-border-radius:30%; //ancient chrome or Safari versions
If I understand you correctly I think the style props alignItems and justifyContent might help you center the Image inside the View. Either that or position the View absolute and use flex: 1 on the Image to make it take upp all available space in the View.
Suppose this is the layout:
<View style={styles.container}>
<View style={styles.titleWrapper}>
...
...
</View>
<View style={styles.inputWrapper}>
...
...
</View>
<View style={styles.footer}>
<TouchableOpacity>
<View style={styles.nextBtn}>
<Text style={styles.nextBtnText}>Next</Text>
</View>
</TouchableOpacity>
</View>
</View>
I want to make the view with the styles of footer to position at the bottom of the screen. I tried giving the alignSelf property to the footer, but instead of positioning at the bottom, it positions it to the right side of the screen. How can I make the footer item stick to the end? Thank you.
I would use the following approach:
<View style={styles.container}>
<View style={styles.contentContainer}> {/* <- Add this */}
<View style={styles.titleWrapper}>
...
</View>
<View style={styles.inputWrapper}>
...
</View>
</View>
<View style={styles.footer}>
...
</View>
</View>
var styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
},
titleWrapper: {
},
inputWrapper: {
},
contentContainer: {
flex: 1 // pushes the footer to the end of the screen
},
footer: {
height: 100
}
});
This way the styles of titleWrapper and inputWrapper can be updated without breaking the layout of your app and the components themselves are easier to re-use :)
In React Native, the default value of flexDirection is column (unlike in CSS, where it is row).
Hence, in flexDirection: 'column' the cross-axis is horizontal and alignSelf works left/right.
To pin your footer to the bottom, apply justifyContent: 'space-between' to the container
for me the answer was to create a container view for the elements, then for the style.
bottomContainer: {
flex: 1,
justifyContent: 'flex-end',
}
Absolutely position is another way to fix footer, just like:
footer: {
position: 'absolute',
height: 40,
left: 0,
top: WINDOW_HEIGHT - 40,
width: WINDOW_WIDTH,
}
To fix a View to the bottom, simply use: marginTop: 'auto' .
This worked for me after searching like an hour on the net. I tried experimenting and it worked!
Consider a screen structure
<View style={styles.container}>
<View style={styles.body}> ... </View>
<View style={styles.footer}>...</View>
</View>
You can do it cleanly using Flexbox approach utilizing flex-grow.
const Styles = StyleSheet.create({
container:{
flexDirection: 'column', // inner items will be added vertically
flexGrow: 1, // all the available vertical space will be occupied by it
justifyContent: 'space-between' // will create the gutter between body and footer
},
})
Note: In case of nested elements, you have to ensure that the parent container has enough height to work with when using flexGrow. Set backgroundColor on parents and child to debug.
To do this you can use the Stylesheet element position: 'absolute'.
/*This is an Example to Align a View at the Bottom of Screen in React Native */
import React, { Component } from 'react';
import { StyleSheet, View, Text } from 'react-native';
export default class App extends Component {
render() {
return (
<View style={styles.containerMain}>
<Text> Main Content Here</Text>
<View style={styles.bottomView}>
<Text style={styles.textStyle}>Bottom View</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
containerMain: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
bottomView: {
width: '100%',
height: 50,
backgroundColor: '#EE5407',
justifyContent: 'center',
alignItems: 'center',
position: 'absolute', //Here is the trick
bottom: 0, //Here is the trick
},
textStyle: {
color: '#fff',
fontSize: 18,
},
});
You can use this style:
row: {
flexDirection: 'row',
height: 50,
justifyContent: 'center',
alignItems: 'center',
position: 'absolute', //Here is the trick
bottom: 0,
}
embed other content in a scrollview
<View style={styles.container}>
<ScrollView> {/* <- Add this */}
<View style={styles.titleWrapper}>
...
</View>
<View style={styles.inputWrapper}>
...
</View>
</ScrollView>
<View style={styles.footer}>
...
</View>
</View>
In react native, there are some properties like position: 'absolute', bottom: 0, which you will want to give to your button view
Quick example in essence, based on #David's answer:
<View style={{flex: 1}}>
<View style={{flex: 1}}>
<Text>Main content</Text>
</View>
<Text>Footer</Text>
</View>
import React from 'react'
import { View, StyleSheet } from 'react-native'
function moveToBottom(component) {
return (
<View style={styles.container}>
{component}
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'flex-end',
marginBottom: 36
}
})
export default moveToBottom
Now in our screen, we just need to import:
import moveToBottom from 'library/utils/moveToBottom'
and wrap our button:
{
moveToBottom(
<ImageButton
style={styles.button}
title={strings.onboarding.welcome.button}
onPress={() => {
this.props.navigation.navigate('Term')
}} />
)
}
I tested it and I approve it's the best option to respect the layout without having fixed things to bottom, which is not possible if you use react-native-web in addition of react-native, because people resize and elements overlap on each over.
Source: https://medium.com/react-native-training/position-element-at-the-bottom-of-the-screen-using-flexbox-in-react-native-a00b3790ca42
I have a case in which I have to show a image in the bottom like this, as you can see the sky-blue image is not poped-up with keyboard.
so for this I have created a functional component for image in bottom.
import React, { useEffect, useState } from "react";
import { Keyboard, View, Image } from "react-native";
export const BottomImage = (props) => {
const [shouldShow, showImage] = useState(true);
useEffect(() => {
Keyboard.addListener("keyboardDidShow", _keyboardDidShow);
Keyboard.addListener("keyboardDidHide", _keyboardDidHide);
return () => {
Keyboard.removeListener("keyboardDidShow", _keyboardDidShow);
Keyboard.removeListener("keyboardDidHide", _keyboardDidHide);
};
}, []);
let _keyboardDidShow = () => {
showImage(false)
}
let _keyboardDidHide = () => {
showImage(true)
}
return (<ViewToRender show={shouldShow} src={props.image} />)
}
function ViewToRender(props) {
return props.show ? <Image style={{ position: 'absolute', bottom: 0 }} source={props.src} /> : <View />
}
and to use this Bottom image you have to pass your image to it like :
<BottomImage image={AppImage.signupbottom} />
This can be a bit tricky given that parent components can still affect the height of children with 'absolute' styles, I also tried doing "bottom: 0, height: 'auto'" like with normal HTML/CSS, but it didn't work out well, down the line I'll probably create a general component which makes sure the view can fit into the screen size. End result of view with contents
<View> component parameters
style={{
position: 'absolute',
left: 0,
padding: ContainerPadding,
top: TopOffset,
width: ScreenWidth
}}
onLayout={(event) => {
var {x, y, width, height} = event.nativeEvent.layout; // get the View's dimensions after 1st render
SetTopOffset(ScreenHeight - height - HeaderHeight); // Set 'top' to: screen size - height (of view) - parent top offset (optional if no parent offset)
}}
With useState:
const [TopOffset, SetTopOffset] = useState<number>(0); // Controls 'top' of screen
HeaderHeight is the height which is added to all my page components, you can remove this variable if you do not have any top spacing. (currently set to 64 default and this variable is updated based on device)
ScreenWidth & ScreenHeight are calculated here: export const ScreenWidth = Dimensions.get('screen').width; export const ScreenHeight = Dimensions.get('screen').height;
ContainerPadding is a general padding number used across my project (currently set to 12.5)
The following code can be found in this live example
I've got the following react native element:
'use strict';
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
} = React;
var SampleApp = React.createClass({
render: function() {
return (
<View style={styles.container}>
<View style={styles.descriptionContainerVer}>
<View style={styles.descriptionContainerHor}>
<Text style={styles.descriptionText} numberOfLines={5} >
Here is a really long text that you can do nothing about, its gonna be long wether you like it or not, so be prepared for it to go off screen. Right? Right..!
</Text>
</View>
</View>
<View style={styles.descriptionContainerVer2}>
<View style={styles.descriptionContainerHor}>
<Text style={styles.descriptionText} numberOfLines={5} >Some other long text which you can still do nothing about.. Off the screen we go then.</Text>
</View>
</View>
</View>);
}
});
AppRegistry.registerComponent('SampleApp', () => SampleApp);
with the following styles:
var styles = StyleSheet.create({
container:{
flex:1,
flexDirection:'column',
justifyContent: 'flex-start',
backgroundColor: 'grey'
},
descriptionContainerVer:{
flex:0.5, //height (according to its parent)
flexDirection: 'column', //its children will be in a row
alignItems: 'center',
backgroundColor: 'blue',
// alignSelf: 'center',
},
descriptionContainerVer2:{
flex:0.5, //height (according to its parent)
flexDirection: 'column', //its children will be in a row
alignItems: 'center',
backgroundColor: 'orange',
// alignSelf: 'center',
},
descriptionContainerHor:{
//width: 200, //I DON\'T want this line here, because I need to support many screen sizes
flex: 0.3, //width (according to its parent)
flexDirection: 'column', //its children will be in a column
alignItems: 'center', //align items according to this parent (like setting self align on each item)
justifyContent: 'center',
flexWrap: 'wrap'
},
descriptionText: {
backgroundColor: 'green',//Colors.transparentColor,
fontSize: 16,
color: 'white',
textAlign: 'center',
flexWrap: 'wrap'
}
});
This results in the following screen:
How can I stop the text from going off the screen and keep it confined in the middle of the screen with a width of i.e. 80% of the parent.
I don't think I should use width because I will be running this on MANY different mobile screens and I want it to be dynamic, so I think I should rely totally on flexbox.
(That was the initial reason why I had flex: 0.8 within the descriptionContainerHor.
What I want to achieve is something like this:
Thank you!
I found solution from below link.
[Text] Text doesn't wrap #1438
<View style={{flexDirection:'row'}}>
<Text style={{flex: 1, flexWrap: 'wrap'}}> You miss fdddddd dddddddd
You miss fdd
</Text>
</View>
Below is the Github profile user link if you want to thank him.
Ally Rippley
Edit: Tue Apr 09 2019
As #sudoPlz mentioned in comments it works with flexShrink: 1 updating this answer.
The solution to that issue is flexShrink: 1.
<View
style={{ flexDirection: 'row' }}
>
<Text style={{ flexShrink: 1 }}>
Really really long text...
</Text>
</View>
Depending on your set up, you may also also need to add flexShrink: 1 to the <View>'s parent as well, to get this to work, so play with that and you'll make it.
The solution was discovered by Adam Pietrasiak in this thread.
This is a known bug. flexWrap: 'wrap' didn't work for me but this solution seems to work for most people
Code
<View style={styles.container}>
<Text>Some text</Text>
</View>
Styles
export default StyleSheet.create({
container: {
width: 0,
flexGrow: 1,
flex: 1,
}
});
you just need to have a wrapper for your <Text> with flex like below;
<View style={{ flex: 1 }}>
<Text>Your Text</Text>
</View>
This worked for me
<View style={{flexShrink:1}}>
<Text>some long random text...</Text>
</View>
Most of the times, we see this problem when using flexDirection: 'row' because in other case, it is handled properly.
Anyway, here are the two ways to wrap the text properly;
FIRST METHOD:
To wrap the text to next line and not leave the display, we can do so by restricting the width of the <Text>;
<Text style={{width: "60%"}}>some long text goes here ...</Text>
The above code will restrict the width of the text to 60% of the available width and if the whole text doesn't fit in that, it will wrap itself, i.e, remaining text will move to next line and so on.
SECOND METHOD
set flexShrink: 1 on both text element as well as its parent element which is wrapping it.
e.g,
<View style={{ flexShrink: 1, justifyContent: 'space-between', alignItems: 'center', flex: 1, flexDirection: 'row'}}>
<Text>First long string which goes long....</Text>
<Text style={{flexShrink: 1}}>This is a long long text which must go out of the screen if we dont style it properly and not do some logic here</Text>
</View>
Other styles are just to show that result is working properly. flexShrink: 1 is the only thing which you need.
Another solution that I found to this issue is by wrapping the Text inside a View. Also set the style of the View to flex: 1.
It works if you remove flexDirection: row from descriptionContainerVer and descriptionContainerVer2 respectively.
UPDATE (see comments)
I made a few changes to achieve what I think you're after. First of all I removed the descriptionContainerHor component. Then I set the flexDirection of the vertical views to row and added alignItems: 'center' and justifyContent: 'center'. Since the vertical views are now in fact stacked along the horizontal axis I removed the Ver part from the name.
So now you have a wrapper view that should vertically and horizontally align it's content and stack it along the x-axis. I then simply put two invisible View components on the left and right side of the Text component to do the padding.
Like this:
<View style={styles.descriptionContainer}>
<View style={styles.padding}/>
<Text style={styles.descriptionText} numberOfLines={5} >
Here is a really long text that you can do nothing about, its gonna be long wether you like it or not, so be prepared for it to go off screen. Right? Right..!
</Text>
<View style={styles.padding}/>
</View>
And this:
descriptionContainer:{
flex:0.5, //height (according to its parent),
flexDirection: 'row',
backgroundColor: 'blue',
alignItems: 'center',
justifyContent: 'center',
// alignSelf: 'center',
},
padding: {
flex: 0.1
},
descriptionText: {
backgroundColor: 'green',//Colors.transparentColor,
fontSize: 16,
flex: 0.8,
color: 'white',
textAlign: 'center',
flexWrap: 'wrap'
},
Then you get what I believe you were after.
FURTHER IMPROVEMENTS
Now if you would like to stack multiple text areas within the blue and orange views you can do something like this:
<View style={styles.descriptionContainer2}>
<View style={styles.padding}/>
<View style={styles.textWrap}>
<Text style={styles.descriptionText} numberOfLines={5} >
Some other long text which you can still do nothing about.. Off the screen we go then.
</Text>
<Text style={styles.descriptionText} numberOfLines={5} >
Another column of text.
</Text>
</View>
<View style={styles.padding}/>
</View>
Where textWrapis styled like this:
textWrap: {
flexDirection: 'column',
flex: 0.8
},
Hope this helps!
<View style={{flexDirection:'row'}}>
<Text style={{flex: 1, flexWrap: 'wrap'}}>
This will work
I had this same issue and to fix it I had to make sure ALL View parents had style={{flex: 1}}
I tried many of the answers above but none worked for me.
I achieved the best result by putting flexShrink on the Text element itself and flexGrow on both the parent View and the Text element.
I needed flexDirection: row on the parent because I want to have an icon on the right
<View style={flexDirection: 'row', flexGrow: 1}>
<Text style={
flexGrow: 1,
flexShrink: 1,
paddingLeft: 16,
paddingRight: 8,
alignItems: 'center',
}>
A long text that needs to wrap into multiple lines
</Text>
</View>
<Image source={rightArrow}/>
It looks like this:
In version 0.62.2 of React Native, i just put "flex-shrink: 1" in Container of my "Text", but remember the flex-direction:row in View of container. Thank you guys for the help.
My code:
export const Product = styled.View`
background: #fff;
padding: 15px 10px;
border-radius: 5px;
margin: 5px;
flex-direction: row;
`;
export const ProductTitleContainer = styled.View`
font-size: 16px;
margin-left: 5px;
flex-shrink: 1;
`;
export const ProductTitle = styled.Text`
font-size: 16px;
flex-wrap: wrap;
`;
`;
I wanted to add that I was having the same issue and flexWrap, flex:1 (in the text components), nothing flex was working for me.
Eventually, I set the width of my text components' wrapper to the width of the device and the text started wrapping.
const win = Dimensions.get('window');
<View style={{
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignSelf: 'center',
width: win.width
}}>
<Text style={{ top: 0, alignSelf: 'center' }} >{image.title}</Text>
<Text style={{ alignSelf: 'center' }}>{image.description}</Text>
</View>
I think you can do something like this, I have attached a picture with code for a better idea:
So, we can do something like this:
TermsOfService = {
fontFamily: 'Verlag-Book';
fontSize: 14px;
textAlign: center;
},
HighlightedText = {
font-family: 'Verlag-Book';
font-size: 14px;
text-align: center;
color: ${COLORS.PRIMARY_ADMIRAL_BLUE};
},
Container: {
width: 100%;
alignSelf: center;
alignItems: center;
justifyContent: center;
flexDirection: row;
flexWrap: wrap;
}
And is your Component just use it like this:
<View style={Container}>
<Text style={TermsOfService}>By joining, you agree to the some thing </Text>
<Text style={HighlightedText}>this is highlighted </Text>
<Text style={TermsOfService}>and </Text>
<Text style={HighlightedText}>and this as well</Text>
</View>
<View style={{flexDirection:'row'}}>
<Text style={{ flex: number }}> You miss fdddddd dddddddd
You miss fdd
</Text>
</View>
{ flex: aNumber } is all you need!
Just set 'flex' to a number that suit for you. And then the text will wrap.
Non of the answers work for me, so I decided to use a hack, which is to split the text by whitespace and render each of the word separately.
Although it's a hack, the upside is that I don't have to worry so much about messing up the wrapping due to the parent's container style.
// This code is written in Typescript
import React from 'react'
import { StyleSheet, View, Text } from 'react-native'
const styles = StyleSheet.create({
container: {
display: 'flex',
flexWrap: 'wrap',
flexDirection: 'row',
flex: 1,
justifyContent: 'center',
paddingVertical: 8,
},
})
export const WrapText: React.FC<{
text: string
}> = ({ text }) => {
return (
<View style={styles.container}>
{text.split(' ').map((word, index) => (
<Text key={index}>
{word}{' '}
</Text>
))}
</View>
)
}
const Example = <WrapText text="Hello this is a working hack that wraps your text."/>
P/S: Of course this only works for alphabetical writing systems, other writing systems that does not utilise spaces (e.g. Chinese writings) will not wrap using this component.
Unfortunately none of the above worked for me.
I found this npm package you could use the package directly:
https://github.com/Bang9/react-native-wrapped-text
Or create something similar like this:
<View style={{ alignItems: "center", alignSelf: "center", width: "100%" }}>
<View style={{ flexDirection: "row", flexWrap: "wrap"}}>
<Text style={{ textAlign: "center"}}>Long text, sooo looong...</Text>
</View>
</View>
Based on :
https://github.com/Bang9/react-native-wrapped-text/blob/master/src/index.js
Use height: 'auto' in text style.
Tried everything nothing worked but this ->
wrapText:{
width:"65%"
},
listItemLeft:{
fontWeight:"bold",
margin:3
},
<View style={styles.wrapText}>
<Text style={styles.listItemLeft}>{item.left}</Text>
</View>
<SafeAreaView style={{flex:1}}>
<View style={{alignItems:'center'}}>
<Text style={{ textAlign:'center' }}>
This code will make your text centered even when there is a line-break
</Text>
</View>
</SafeAreaView>
try to use this prop adjustsFontSizeToFit={true} in text component like this.
<Text adjustsFontSizeToFit={true}>
my solution below:
<View style={style.aboutContent}>
<Text style={[styles.text,{textAlign:'justify'}]}>
// text here
</Text>
</View>
style:
aboutContent:{
flex:8,
width:widthDevice-40,
alignItems:'center'
},
text:{
fontSize:widthDevice*0.04,
color:'#fff',
fontFamily:'SairaSemiCondensed-Medium'
},
result:
[
<Text style={{width: 200}} numberOfLines={1} ellipsizeMode="tail">Your text here</Text>