Related
so i've been doing react native for a while and after running my app on different devices all the components are not exactly what they are
this is an example :
import React from 'react';
import {StyleSheet, Text, View, Image, TouchableOpacity } from 'react-native';
import 'react-native-gesture-handler';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor:'#F5F5F8'
},
tinyLogo: {
width: 308,
height: 282,
resizeMode: 'contain',
alignSelf:'center',
top: 80
},
logo: {
width: 66,
height: 58,
},
text: {
textAlign: 'center',
color: "#2E3E5C",
fontSize: 22,
fontFamily: 'arial',
fontWeight: 'bold',
width: "100%",
marginTop:70
},
btnContainer: {
backgroundColor: "#CB5C17",
height: 60,
width:327,
borderRadius: 30,
justifyContent: 'center',
alignItems: 'center',
marginTop: 99
},
headline: {
justifyContent: 'center',
alignItems: 'center',
marginTop: 100
}
});
const OnBoarding = ({ navigation }) => {
return (
<View style={ styles.container }>
<Image style={styles.tinyLogo}
source={require('../assets/TacosLogo.png')} />
<View style={styles.headline}>
<Text style={styles.text} >HOT AND FRENCH TACOS</Text>
<Text style={{ textAlign: 'center', color: "#9FA5C0", fontSize: 17, fontFamily: 'arial', fontWeight: 'bold', marginTop: 16, letterSpacing: 1 }} >The best taste</Text>
<TouchableOpacity activeOpacity={0.8} style={styles.btnContainer} onPress={() =>
navigation.navigate('Login')
}>
<Text style={{ color: 'white', fontSize: 15, fontWeight: 'bold', letterSpacing: 0.7, fontFamily: 'arial'}} >Commencer</Text>
</TouchableOpacity>
</View>
</View>
);
}
export default OnBoarding;
this is what it looks like on my android device Xiaomi Redmi 9 (6.53') 2340 x 1080 pixels
and this is what it looks like on other android device Huawei y6 (6.09') 1560 x 720 pixels
they dont look the same at all , even the dimensions
is there any solution for this ?
Try avoid spacing using hardcoded values like,
marginTop: 100,
marginTop: 99,
marginBottom: 70,
because you want your app to run on different device sizes.
Try Depending more on flexbox space-between and other alignment properties, rather than hardcoding the values.
Read more about it from here https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Or wrap the content in ScrollView component depending on the use case you have.
There is also some libraries that may help you by getting responsive values rather than hardcoded ones.
like: https://github.com/NewBieBR/react-native-normalize
https://github.com/marudy/react-native-responsive-screen#readme
How can I 'flex' my images so they resize to the screen size? There is too much space around the images when viewed using my iPad. I'd like the images to resize proportionate to the screen size.
I've tried adding a 'flex' value to each image, but they don't resize.
I'm trying to use 'flex'. How can I size the images to about 1/5 of the screen width?
<View
style={{
height: "30%",
flexDirection: "row",
backgroundColor: "red",
justifyContent: "space-between"
}}
>
<Image
source={require("../img/RGUC_Connect_logo.png")}
resizeMode="contain"
style={{
flex: 5,
height: undefined,
width: undefined
}}
/>
<Image
source={require("../img/logo.png")}
resizeMode="contain"
style={{
flex: 5,
height: undefined,
width: undefined,
}}
/>
</View>
I have problem with styling of the Text, I have two lines of the Text, the first line of the text appears correct on the center of the row, but second line of the code, is not in the center. How to fix that?
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', flexDirection: 'row' }}>
<Text
style={{ marginLeft: 5, fontWeight: '500', fontFamily: 'Arial', fontSize: ratio * 14, color: '#3c3c3c' }}
numberOfLines={2} > {title}
</Text>
</View>
You need to use textAlign:'center',
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
flexDirection: "row"
}}
>
<Text
style={{
textAlign:'center', //Added
marginLeft: 5,
fontWeight: "500",
fontFamily: "Arial",
fontSize: ratio * 14,
color: "#3c3c3c"
}}
numberOfLines={2}
>
{title}
</Text>
</View>
You just need to add textAlign in Text component
style={{textAlign: 'center', marginLeft: 5, fontWeight:'500',fontFamily: 'Arial', fontSize: ratio * 14, color:'#3c3c3c'}}
numberOfLines={2} >
Check snack demo here : https://snack.expo.io/SJyEEwM3b
import React, { Component } from 'react';
import { Text, View } from 'react-native';
export default class App extends Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', flexDirection: 'row' }}>
<Text
style={{ textAlign: 'center', marginLeft: 5, fontWeight: '500', fontFamily: 'Arial', fontSize: 1 * 14, color: '#3c3c3c' }}
numberOfLines={2} > some text some text some text some text some text some text some text some text
</Text>
</View>
);
}
}
I was wondering there is a way I can align vertically in React Native. I'm trying to position on the bottom but I don't think I can find a good way to do it.
If anyone knows how to solve this issue, please let me know.
You can use the flex property, justifyContent to achieve this. Full documentation here.
<View style={{justifyContent: 'center'}}>
<Text>Vertically Centered Text</Text>
</View>
to align any content including text both horizontally and vertically, simply use the following in the container which holds it
container :{
justifyContent: 'center', //Centered horizontally
alignItems: 'center', //Centered vertically
flex:1
}
You can use an android-only style property textAlignVertical
To align text on top:
style={{textAlignVertical: 'top'}}
To align text on center:
style={{textAlignVertical: 'center'}}
To align text on bottom:
style={{textAlignVertical: 'bottom'}}
This problems occurs especially when you are using image or icon. I had a same problem my solution:
<View style={{ flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
<Icon type="MaterialCommunityIcons" name="barcode" />
<Text style={{ textAlign: 'center' }}>{urun_data.barkod}</Text>
</View>
I had a similar problem and looked at many of the other posts here. Here is what worked for me.
I created an initial view, and nested the elements I wanted vertically centered within that view. I made the mistake of including 'flex: 1' in the initial view, which screwed up the vertical alignment.
The code:
<View style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center'}}>
<Text>Content here to be vertically aligned</Text>
<Switch>...</Switch>
</View>
RN version >= 0.55.2 is support to "textAlignVertical" now.
<TextInput
style={styles.text}
onChangeText={text => console.log('text >>>>>>>', text)}
value='sample text'
/>
text: {
textAlign: 'center',
textAlignVertical: 'center',
}
Working with both cases flex: 1 and set height of the <Text> component.
Text vertical center alignment summary
Case 1: There is only one Text under View
Ios: Use flex with alignItems/justifyContent to be more centered,
Adr: height = lineHeight, includeFontPadding: false more centered
Case 2: There are two Texts in a line view and the two Text fonts are different, and the Text with a smaller font size does not need to use the height.
The larger one is aligned using the above method. The smaller one can only be used with font-size, but not with the line-height and height attributes. In this case, both texts can be centered.
Case 3: There are two Texts in a line view and the two Text fonts are different, and the Text with a smaller font size must use the height.
The one with the larger font size is aligned using the above method, and the smaller font size uses height with padding and includeFontPadding to achieve alignment.
And Demo
<View
style={{
flexDirection: 'row',
height: 38,
borderWidth: 1,
borderColor: '#000',
alignItems: 'center'
}}
>
<Text
style={{
fontSize: 24
}}
>
测试
</Text>
<Text
style={{
fontSize: 24,
lineHeight: 36,
height: 36,
includeFontPadding: false
}}
>
测试
</Text>
</View>
<View
style={{
flexDirection: 'row',
height: 38,
borderWidth: 1,
borderColor: '#000',
alignItems: 'center'
}}
>
<Text
style={{
fontSize: 24
}}
>
ios设备
</Text>
<Text
style={{
fontSize: 16
}}
>
更对齐
</Text>
</View>
<View
style={{
flexDirection: 'row',
height: 38,
borderWidth: 1,
borderColor: '#000',
alignItems: 'center'
}}
>
<Text
style={{
fontSize: 24,
lineHeight: 36,
height: 36,
includeFontPadding: false
}}
>
安卓
</Text>
<Text
style={{
fontSize: 12,
height: 18,
includeFontPadding: false,
paddingVertical: 2,
paddingHorizontal: 1,
paddingTop: DeviceInfo.isIOS ? 3 : 2,
}}
>
更对齐
</Text>
</View>
The flex: 1 makes the child view take up all the remaining space in the parent view. So remember to make sure the parent is occupying the space it is supposed to.
I would advocate wrapping your content in a <SafeAreaView> tag so that is adjusts content to the device it is in. But you could use any other view type.
<SafeAreaView style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Centered Text</Text>
</SafeAreaView>
flex: 1 makes the view take up the full width and heigh of the view its in
justifyContent: 'center' vertically centers the children
alignItems: 'center' horizontally centers the children
You can also use textAlign: center on the Text element and remove the alignItems: 'center'. This of course would only center the text in the Text object and wouldn't work if you had multiple elements that needed to be centered.
You can use flexbox with justifyContent: 'flex-end' to achieve vertical centering.
Here's a snack: https://snack.expo.io/#rynek/vertical-centering-with-flexbox-in-react-native
Here's a somewhat ugly solution to the problem. The ScrollView will take up the remaining vertical space, pushing the text down to the bottom.
<View>
<ScrollView>{}</ScrollView>
<Text>Your text</Text>
</View>
Or..
<View>
<View style={{ flex: 1 }}>{}</View>
<Text>Your text</Text>
</View>
use flex:1 property on both as on container of the Text component and itself inside the Text component.Because if u don't define the height and width its not working.
<View style={{
flex:1,
}} >
<Text style={{
flex:1,
color: COLORS.primary,
fontFamily: "FredokaOne-Regular",
fontSize:40,
textAlign:"center",
textAlignVertical:"center",
}}
numberOfLines={2} >
Travia War
</Text>
</View>
Simply use the alignItems for the vertical alignment
alignItems: 'flex-start' //for start the View : vertical-align: top
alignItems: 'flex-end' // for vertical-align: bottom
alignItems: 'center' // for vertical-align: middle
<View style={{ flexDirection: 'row', alignItems: 'flex-start'}}>
<View> <Text>hello 1</Text> </View>
<View> <Text>hello 2</Text> </View>
</View>
Check this example with changing of alignItems
I have already read several flexbox tutorial, but I still cannot make this simple task to work.
How can I make the red box to 100% width?
Code:
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Natives
</Text>
<Text style={styles.line1}>
line1
</Text>
<Text style={styles.instructions}>
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
</Text>
</View>
style:
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
borderWidth: 1,
flexDirection: 'column',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
borderWidth: 1,
},
line1: {
backgroundColor: '#FDD7E4',
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
borderWidth: 1,
},
Thank you!
Update 1:
Suggestion by Nishanth Shankar, adding
flex:1 for the wrapper,
flexDirection: 'row'
Output:
Code:
<View style={styles.container}>
<View style={{flex:1}}>
<Text style={styles.welcome}>
Welcome to React Natives
</Text>
</View>
<View style={{flex:1}}>
<Text style={styles.line1}>
line1
</Text>
</View>
<View style={{flex:1}}>
<Text style={styles.instructions}>
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
</Text>
</View>
</View>
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
borderWidth: 1,
flexDirection: 'row',
flexWrap: 'wrap',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
borderWidth: 1,
},
line1: {
backgroundColor: '#FDD7E4',
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
borderWidth: 1,
},
Simply add alignSelf: "stretch" to your item's stylesheet.
line1: {
backgroundColor: '#FDD7E4',
alignSelf: 'stretch',
textAlign: 'center',
},
You should use Dimensions
First, define Dimensions.
import { Dimensions } from "react-native";
var width = Dimensions.get('window').width; //full width
var height = Dimensions.get('window').height; //full height
then, change line1 style like below:
line1: {
backgroundColor: '#FDD7E4',
width: width,
},
Editted:
In order to flex only the center text, a different approach can be taken - Unflex the other views.
Let flexDirection remain at 'column'
remove the alignItems : 'center' from container
add alignSelf:'center' to the textviews that you don't want to flex
You can wrap the Text component in a View component and give the View a flex of 1.
The flex will give :
100% width if the flexDirection:'row' in styles.container
100% height if the flexDirection:'column' in styles.container
Here you go:
Just change the line1 style as per below:
line1: {
backgroundColor: '#FDD7E4',
width:'100%',
alignSelf:'center'
}
First add Dimension component:
import { AppRegistry, Text, View,Dimensions } from 'react-native';
Second define Variables:
var height = Dimensions.get('window').height;
var width = Dimensions.get('window').width;
Third put it in your stylesheet:
textOutputView: {
flexDirection:'row',
paddingTop:20,
borderWidth:1,
borderColor:'red',
height:height*0.25,
backgroundColor:'darkgrey',
justifyContent:'flex-end'
}
Actually in this example I wanted to make responsive view and wanted to view only 0.25 of the screen view so I multiplied it with 0.25, if you wanted 100% of the screen don't multiply it with any thing like this:
textOutputView: {
flexDirection:'row',
paddingTop:20,
borderWidth:1,
borderColor:'red',
height:height,
backgroundColor:'darkgrey',
justifyContent:'flex-end'
}
Use javascript to get the width and height and add them in View's style.
To get full width and height, use Dimensions.get('window').width
https://facebook.github.io/react-native/docs/dimensions.html
getSize() {
return {
width: Dimensions.get('window').width,
height: Dimensions.get('window').height
}
}
and then,
<View style={[styles.overlay, this.getSize()]}>
width: '100%' and alignSelf: 'stretch' didn't work for me. Dimensions didn't suite my task cause I needed to operate on a deeply nested view. Here's what worked for me, if I rewrite your code. I just added some more Views and used flex properties to achieve the needed layout:
{/* a column */}
<View style={styles.container}>
{/* some rows here */}
<Text style={styles.welcome}>
Welcome to React Natives
</Text>
{/* this row should take all available width */}
<View style={{ flexDirection: 'row' }}>
{/* flex 1 makes the view take all available width */}
<View style={{ flex: 1 }}>
<Text style={styles.line1}>
line1
</Text>
</View>
{/* I also had a button here, to the right of the text */}
</View>
{/* the rest of the rows */}
<Text style={styles.instructions}>
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
</Text>
</View>
just remove the alignItems: 'center' in the container styles and add textAlign: "center" to the line1 style like given below.
It will work well
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: '#F5FCFF',
borderWidth: 1,
}
line1: {
backgroundColor: '#FDD7E4',
textAlign:'center'
},
Style ={{width : "100%"}}
try this:
StyleSheet generated: {
"width": "80%",
"textAlign": "center",
"marginTop": 21.8625,
"fontWeight": "bold",
"fontSize": 16,
"color": "rgb(24, 24, 24)",
"fontFamily": "Trajan Pro",
"textShadowColor": "rgba(255, 255, 255, 0.2)",
"textShadowOffset": {
"width": 0,
"height": 0.5
}
}
Noted: Try to fully understanding about flex concept.
<View style={{
flex: 2,
justifyContent: 'center',
alignItems: 'center'
}}>
<View style ={{
flex: 1,
alignItems: 'center,
height: 50,
borderWidth: 1,
borderColor: '#000'
}}>
<Text>Welcome to React Nativ</Text>
</View>
<View style={{
flex: 1,
alignItems: 'center,
borderWidth: 1,
borderColor: 'red ',
height: 50
}}
>
<Text> line 1 </Text>
</View>
<View style={{
flex: 1,
alignItems: 'center,
height: 50,
borderWidth: 1,
borderColor: '#000'
}}>
<Text>
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
</Text>
</View>
</View>
Simply use width:'100%'
line1: {
backgroundColor: '#FDD7E4',
width: '100%'
},