I'm currently working on a react native application and I have an issue with flex.
At each time I add flex: 1 in the style of a View or a Text element, its height equal 0, which cause the element to disapear.
This is what I'm trying to design:
(of course the colors are only here to help the comprehension)
My code:
return (
<View style={{paddingVertical: 7, display: 'flex', flexDirection: 'row', alignItems: "center", justifyContent: 'center', height: 50, borderWidth: 1}}>
<View style={{flex: 1}}>
<View style={{display: 'flex', flexDirection: 'column'}}>
<View style={{flex: 1}}>
<View style={{display: 'flex', flexDirection: 'row'}}> <View style={{flex: 1, backgroundColor: '#0f0'}}>
<Text>
First name Last name
</Text>
</View>
<View style={{flex: 1}}>
<Text style={{textAlign: 'center'}}>
27 km
</Text>
</View>
</View>
</View>
<View style={{flex: 1}}>
<Text style={{textAlign: 'center'}}>Booked ride</Text>
</View>
</View>
</View>
<View style={{flex: 0}}>
<TouchableOpacity onPress={this.onTake}>
<Text style={styles.btnBox}>
Take
</Text>
</TouchableOpacity>
</View>
</View>
)
This is what I currenlty have (with two elements repeated):
The first nested <View> is useless, remove it and adjust the next one like this:
return (
<View
style={{
paddingVertical: 7,
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
height: 50,
borderWidth: 1,
}}>
<View style={{ flex: 1, flexDirection: 'column' }}>
<View style={{ flex: 1 }}>
<View style={{ display: 'flex', flexDirection: 'row' }}>
<View style={{ flex: 1, backgroundColor: '#0f0' }}>
<Text>First name Last name</Text>
</View>
<View style={{ flex: 1 }}>
<Text style={{ textAlign: 'center' }}>27 km</Text>
</View>
</View>
</View>
<View style={{ flex: 1 }}>
<Text style={{ textAlign: 'center' }}>Booked ride</Text>
</View>
</View>
<View style={{ flex: 0 }}>
<TouchableOpacity onPress={this.onTake}>
<Text>Take</Text>
</TouchableOpacity>
</View>
</View>
I've also created a snack in case you want to take a look: example.
Now you can align your texts as you pref :)
Related
I just learned about RN. I'm confused to make many markers in 1 map but the data must be from firebase
<View style={{ alignItems: "center" }}>
<View style={{ justifyContent: "center", alignItems: "center", marginTop: 10 }}>
<MapView
showsUserLocation={true}
style={{ width: 350, height: 200, marginRight: 20, marginLeft: 20 }}
initialRegion={{
latitude: -2.92532,
longitude: 132.29339,
latitudeDelta: 0.00431,
longitudeDelta: 0.0431,
}}>
<FlatList numColumns={4} data={Object.keys(this.state.data)} renderItem={({ item }) => {
return (
<MapView.Marker coordinate={{ latitude: parseFloat(this.state.data[item].latitude), longitude: parseFloat(this.state.data[item].longitude) }}
pinColor={"red"}
title={this.state.data[item].nama}
/>
)
}} />
</MapView>
</View>
</View>
I have this React Native proyect (with Expo), and i have 2 buttons on the bottom of the container. When i open the keyboard to write something, those items come up with the keyboard. ¿How can i avoid that?
Here's the container code ->
render() {
return (
<View style={{flex: 1}}>
<Text style={styles.titulo}>Nueva Tarjeta</Text>
<View style={{ flex: 1}}>
<CreditCardInput
requiresName={true}
allowScroll={true}
labels={{
name: "Nombre del titular",
number: "Número de tarjeta",
expiry: "Venc",
cvc: "CVC",
}}
cardScale={1}
labelStyle={{ fontFamily: "OpenSansRegular" }}
placeholders={{
name: "Juan Perez",
number: "1234 1234 1234 1234",
expiry: "MM/AA",
cvc: "123",
}}
onChange={this._onChange}
/>
</View>
<View style={{ flexDirection: "row", alignSelf: "center",
justifyContent: 'flex-end', marginBottom: 10}}>
<TouchableOpacity style={styles.botonVolver}>
<Text style={styles.textoVolver}>Volver</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.botonAceptar}>
<Text style={styles.textoAceptar}>Aceptar</Text>
</TouchableOpacity>
</View>
</View>
);
}
Thanks in advance!
You could try using a KeyboardAvoidingView with its behavior prop set to 'height' on Android:
const screenHeight = Dimensions.get("window").height;
export default function App() {
return (
<KeyboardAvoidingView behavior="height" style={{ flex: 1 }}>
<View style={{ height: screenHeight - 75 }}>
<Text style={styles.titulo}>Nueva Tarjeta</Text>
<CreditCardInput
requiresName={true}
allowScroll={true}
labels={{
name: "Nombre del titular",
number: "Número de tarjeta",
expiry: "Venc",
cvc: "CVC",
}}
cardScale={1}
labelStyle={{ fontFamily: "OpenSansRegular" }}
placeholders={{
name: "Juan Perez",
number: "1234 1234 1234 1234",
expiry: "MM/AA",
cvc: "123",
}}
/>
</View>
<View
style={{
flexDirection: "row",
alignSelf: "center",
justifyContent: "flex-end",
marginBottom: 10,
}}
>
<TouchableOpacity style={styles.botonVolver}>
<Text style={styles.textoVolver}>Volver</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.botonAceptar}>
<Text style={styles.textoAceptar}>Aceptar</Text>
</TouchableOpacity>
</View>
</KeyboardAvoidingView>
);
}
I also changed the height of the View that contains the CreditCardInput to be based on the screen height using Dimensions, because the transition was glitchy when flex was set on that View.
Be sure to import Dimensions and KeyboardAvoidingView from 'react-native'.
Please can you help me? Im trying to do layout like this, from begining there will be camera but if I click button driving info it will be replaced with that, here is the layout I want and here is my code. Right now all the touchablehighlits(buttons) are overlaying, + camera window should be livestream from raspberry pi camera but right now Im focusing just on layout.
const MainScreen = () => {
return(
<View>
<View style={{flex: 33, flexDirection: 'row', justifyContent: 'flex-start', position: 'relative'}}>
<TouchableHighlight style={styles.button} >
<Text style={styles.txt}> CAMERA </Text>
</TouchableHighlight>
</View>
<View style={{flex: 33, flexDirection: 'row', justifyContent: 'center', position: 'relative'}}>
<TouchableHighlight style={styles.button} >
<Text style={styles.txt}> Lane assistant </Text>
</TouchableHighlight>
<TouchableHighlight style={styles.button} >
<Text style={styles.txt}> disconnect </Text>
</TouchableHighlight>
<TouchableHighlight style={styles.button} >
<Text style={styles.txt}> driving info </Text>
</TouchableHighlight>
</View>
<View style={{flex: 33, flexDirection: 'row', justifyContent: 'flex-end', position: 'relative'}}>
<TouchableHighlight style={styles.button} >
<Text style={styles.txt}>- </Text>
</TouchableHighlight>
<TouchableHighlight style={styles.button} >
<Text style={styles.txt}> cruise control </Text>
</TouchableHighlight>
<TouchableHighlight style={styles.button} >
<Text style={styles.txt}>+ </Text>
</TouchableHighlight>
</View>
</View>
);
}
const styles = StyleSheet.create({
button:{
justifyContent: 'space-between',
},
txt:{
fontSize: 30,
}
});
This should be fine:
export default function App() {
return (
<View style={{flex: 1}}>
<View style={styles.topContainer}>
<TouchableHighlight >
<Text> CAMERA </Text>
</TouchableHighlight>
</View>
<View style={{flex: 1}}>
<View style={styles.buttonRowContainer}>
<TouchableHighlight style={styles.touchableContainer} >
<Text > Lane assistant </Text>
</TouchableHighlight>
<TouchableHighlight style={styles.touchableContainer} >
<Text>disconnect </Text>
</TouchableHighlight>
<TouchableHighlight style={styles.touchableContainer} >
<Text > driving info </Text>
</TouchableHighlight>
</View>
<View style={styles.buttonRowContainer}>
<TouchableHighlight style={styles.touchableContainer} >
<Text >- </Text>
</TouchableHighlight>
<TouchableHighlight style={styles.touchableContainer} >
<Text > cruise control </Text>
</TouchableHighlight>
<TouchableHighlight style={styles.touchableContainer} >
<Text >+ </Text>
</TouchableHighlight>
</View>
</View>
</View>
);
}
const styles = StyleSheet.create({
buttonRowContainer: {
flex: 1, flexDirection: 'row'
},
touchableContainer: {
flex: 1, justifyContent: 'center', alignItems: 'center'
},
topContainer: {
flex: 1, justifyContent: 'center', alignItems: 'center'
}
})
I'm going to explain how flex works. If you only have one element with flex: 1 it will take all the screen space. This is usually done when you have a View which will contain all the other elements. If we want to divide the screen by two, we have to define 2 components with flex: 1
- Main -> flex: 1
- Children 1 -> flex: 1
- Children 2 -> flex: 1
Children 1 will take 50% of the screen size as well as Children 2. If we want children 1 to take 66% of the screen we simply add flex: 2. Is like telling React "hey, I want you to divide the screen in 3 equal parts, Children 1 takes 2 portions of the screen when Children 2 only takes 1". Remember this will only work if your parent has set flex.
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 am trying to make this highlighted line to stretch full width. I have tried many possible ways to come around it but could not get it as desired.
Here is my code from render() method.
return (
<ScrollView style={{backgroundColor: 'rgba(255,255,255,1)'}}>
<View style={styles.container}>
<Image style={styles.image} source={{uri: imageURI}} />
<View style={styles.content}>
<Text style={styles.title}>{news.title}</Text>
<View style={styles.itemIcons}>
<View style={styles.companyView}>
<Image
source={{uri: news.category[0].sourceImage}}
style={ styles.iconsImage} />
<Text style={styles.iconsText}>{news.category_name}</Text>
</View>
<Text style={styles.iconsTextRight}>{this.formatDate(news.pubDate)}</Text>
</View>
<Text style={styles.description}>{description}</Text>
</View>
</View>
</ScrollView>
);
And here are my styles for this.
container: {
flex: 1,
alignItems: 'center',
},
content: {
flex: 1,
flexDirection: 'column',
padding: 10
},
image: {
width: width,
height: custom_height,
// padding: 10
},
title: {
marginBottom: 15
},
itemIcons: {
flex: 1,
flexDirection: 'row',
alignSelf: 'stretch',
marginBottom: 15
},
iconsImage: {
height: 25,
width: 30,
marginRight: 10,
},
iconsText: {
fontSize: 12,
color: "#686666",
alignSelf: 'flex-end'
},
companyView: {flex:1,flexDirection:'row'},
dateView: {flex:1,alignSelf: 'flex-end'},
iconsTextRight: {
fontSize: 12,
color: "#686666",
alignSelf: 'flex-end'
},
description: {
padding: 2,
fontSize: 12,
color: '#323'
}
Change container style to
container: {
flex: 1,
}
Then the view will be aligned as per your requirement.
try this in itemIcons class
justify-content:'space-between'
I couldn't work with whole of your code, but as per the screenshot you posted, I was able to achieve this.
<View style={{flex:1}}>
<View style={{flexDirection:'row',paddingTop:100,justifyContent:'space-between',alignItems:'center'}}>
<View style={{flexDirection:'row',alignItems:'center'}}>
<Image source={require('./images/tiger.jpg')} style={{width:40,height:40}} />
<Text>Roche</Text>
</View>
<Text>25 Mar 2016, 18:16</Text>
</View>
</View>
Try to replicate this in your code and see if it works.