With react native and flexbox, I do not understand why the text is outside the container (orange bakcground) ?
<View style={styles.main_container}>
<View style={styles.infos_container}>
<View style={styles.info_item}>
<Text style={styles.info_name}>
Âge
</Text>
<Text style={styles.info_value}>
18
</Text>
</View>
<View style={styles.info_item}>
<Text style={styles.info_name}>
Médias publics
</Text>
<Text style={styles.info_value}>
2
</Text>
</View>
</View>
</View>
const styles = StyleSheet.create({
infos_container: {
backgroundColor: 'orange',
flex: 1,
flexDirection: 'row',
flexWrap: 'wrap',
padding: 5,
},
info_item: {
margin: 5,
alignItems: 'center',
},
info_name: {
color: '#6c757d',
fontSize: 11,
},
info_value: {
color: '#343a40',
},
})
I just want my blocks styles.info_item to be horizontal and orange background
remove flex: 1 from infos_container settings flex: 0 in the main_container shouldn't have an effect on the styling of infos_container
infos_container: {
backgroundColor: 'orange',
flexDirection: 'row',
flexWrap: 'wrap',
padding: 5,
},
You didn't import main_container in your style. Maybe you have flex: 0 inside it
Change your style to this:
main_container: {
flex: 1,
},
infos_container: {
backgroundColor: 'orange',
alignSelf: 'stretch',
flexDirection: 'row',
flexWrap: 'wrap',
padding: 5,
},
info_item: {
margin: 5,
alignItems: 'center',
},
info_name: {
color: '#6c757d',
fontSize: 11,
},
info_value: {
color: '#343a40',
},
Related
Hi I'm building an app for IOS and Android with react Native, and I'm a newbie this is my first app, and I think I'm not too bad, but I have a UI that is only a supermarket list, but I have the head ready but I need place the below the image , I made a new View but it comes out in the middle of the screen. Can you explain to me why it is not shown where to go, thanks.
Can you explain to me why? Thanks I share codes
enter image description here
import { Button, Image, StyleSheet, Text, View } from 'react-native';
import { StatusBar } from 'expo-status-bar';
export default function App() {
return (
<View style={styles.container}expoex>
<View style={styles.header}>
<View style={styles.imageContainer}>
<Image style= {styles.logo} source={require('./assets/logo.png')} />
</View>
<View style={styles.menu}>
<Image source={require('./assets/menu3.png')} />
<Image source={require('./assets/menu2.png')} />
<Image source={require('./assets/menu5.png')} />
<Image source={require('./assets/menu1.png')} />
<Image source={require('./assets/menu4.png')} />
</View>
</View>
<View style={styles.textNomList}>
<Text style={styles.textNom}>Lista de Supermercado</Text>
</View>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#6E04BF',
color: '#fff',
alignItems: 'center',
},
header: {
marginTop:62,
flex:1,
flexDirection:'row',
justifyContent:'center',
alignItems:'flex-start',
height: 145,
marginVertical: 10,
},
imageContainer: {
alignItems: 'center',
justifyContent: 'center',
marginLeft:5,
height: 145,
},
logo: {
width: 100,
height: 140,
},
menu: {
flex:1,
flexDirection:'row',
justifyContent:'space-between',
marginHorizontal: 20,
marginTop:15,
height:145,
},
textNomList: {
flex:1,
alignItems:'flex-start',
justifyContent:'flex-start',
},
textNom: {
color: '#fff',
fontSize: 16,
fontWeight: 'bold',
marginLeft: 20,
},
});
the result of this code is
enter image description here
I only can see some styling issues, check out below, edit it as required
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#6E04BF',
color: '#fff',
alignItems: 'center',
},
header: {
marginTop: 62,
// flex: 1,
flexDirection: 'row',
// justifyContent: 'center',
// alignItems: 'flex-start',
// height: 145,
// marginVertical: 10,
},
imageContainer: {
// alignItems: 'center',
// justifyContent: 'center',
marginLeft: 5,
height: 145,
},
logo: {
width: 100,
height: 140,
backgroundColor:'fff'
},
menu: {
// flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
marginHorizontal: 20,
marginTop: 15,
height: 145,
},
textNomList: {
flex: 1,
alignItems: 'flex-start',
justifyContent: 'flex-start',
},
textNom: {
color: '#fff',
fontSize: 16,
fontWeight: 'bold',
marginLeft: 20,
},
});
You should put your text in the same View that is wrapping your image and then style it appropriately.
<View style={styles.imageContainer}>
<Image style= {styles.logo} source={require('./assets/logo.png')} />
<Text style={styles.textNom}>Lista de Supermercado</Text>
</View>
I am not good at styling but it looks like your app should look decent with how the styles are at the current moment.
<ScrollView contentContainerStyle={styles.list}>
{pastGuesses.map((guess, index) => renderListItem(guess, pastGuesses.length - index))}
</ScrollView>
listContainer: {
flex: 1,
width: '80%'
},
list: {
flexGrow: 1,
alignItems: 'center',
justifyContent: 'flex-end'
},
listItem: {
borderColor: "#ccc",
borderWidth: 1,
padding: 15,
marginVertical: 10,
backgroundColor: "#fff",
flexDirection: 'row',
justifyContent: 'space-around',
width: "60%"
}
Here i am using ScrollView in react native.
Here is my code shered. But, unfortunately the scroll is not working.
I am not getting any error but scorll is not happening.
Please take a look
Working in React Native here and just trying to align some child text in the bottom left of a View. Ive tried various topMargin and padding options, but none work reliably/responsively.
What I have/want:
Code currently:
<TouchableWithoutFeedback onPress={() => onPress(props.id)}>
<View style={styles.card}>
<Text style={styles.card_Head}>What is <Text style={{fontFamily: 'SequelSans-BlackDisp'}}>Something?</Text></Text>
<Text style={styles.card_Body}>Count: {count} Id: {props.id}</Text>
</View>
</TouchableWithoutFeedback>);
card: {
backgroundColor: 'white',
height: wp('79%'),
width: wp('79%'),
justifyContent: 'flex-start',
alignItems: 'center',
color: 'black',
padding: 40,
textAlign: 'left',
borderRadius: 20,
marginBottom: hp('9%'),
},
card_Head: {
fontFamily: 'SequelSans-RomanDisp',
fontSize: hp('4.4%'),
lineHeight: hp('4.4%'),
alignSelf: 'flex-start',
},
card_Body: {
textAlign: 'left',
fontFamily: 'SequelSans-BlackDisp',
fontSize: hp('1.5%'),
alignSelf: 'flex-start',
},
How can I do this responsively?
You can use flex box space-between prop like this
card: {
flex: 1,
flexDirection: 'column',
justifyContent: 'space-between'
}
Ciao, try align-self: 'flex-end' like this:
card_Body: {
textAlign: 'left',
fontFamily: 'SequelSans-BlackDisp',
fontSize: hp('1.5%'),
alignSelf: 'flex-end',
},
Or marginTop in percentage.
I'm almost done with my React Native view, but I'm not sure how to group individual items in a page that contains many.
How do I moved Details directly under Header?
view
return (
<View style={s.container}>
<View style={[s.header, s.flexRow]}>
<Text style={s.carRegNr}> CV 515632 </Text>
<Text style={s.insuranceName}> Plus </Text>
</View>
<View style={s.flexColumn}>
<Text style={s.claimNrText}> Claim nr </Text>
<Text style={s.claimNr}> 020202 </Text>
</View>
<View style={s.flexColumn}>
<Text style={s.nextSteps}> Next steps </Text>
<Text style={s.nextStepsDetails}> Goto the repair shop </Text>
</View>
<View style={[s.flexRow, {justifyContent: "flex-end"}]}>
<CarRepairShop
name="Best Auto"
address1="Shiny road 1"
address2="0101 City"
/>
<CarRepairShop name="Rental" address1="Rental included"/>
</View>
<GjeButton
title="Close"
/>
{ /*
<GjeButton
title={"Set DamageClaimReceiptNr"}
onPress={ () => this.props.setDamageClaimReceiptNr("100") }
/>
<GjeButton
title={"Add car registration nr"}
onPress={ () => this.props.setCarRegNr("lkj2") }
/>
*/
}
</View>
)
}
}
styling
export default StyleSheet.create({
container: {
height: 10,
flex: 1,
padding: 30,
flexDirection: "column",
justifyContent: "flex-start"
},
header: {
justifyContent: "space-between",
borderColor: colors.grape,
borderRadius: 2,
},
carRegNr: {
fontWeight: "bold",
color: colors.black,
fontSize: 25,
},
groupTight: {
flexDirection: "column",
flex: 1,
justifyContent: "flex-start"
},
insuranceName: {
color: colors.black,
fontSize: 23
},
flexRow: {
flex: 1,
flexDirection: "row",
justifyContent: "space-between",
},
flexColumn: {
width: "100%",
flex: 1,
flexDirection: "column",
},
nextSteps: {
color: colors.black,
fontSize: 15,
},
nextStepsDetails: {
color: colors.black,
fontSize: 7,
},
bold: {
color: colors.black,
fontWeight: "bold",
},
cont: {
margin: 5,
padding: 3,
},
claimNrText: {
color: colors.black,
margin: 0,
padding: 0,
fontSize: 30,
},
claimNr: {
fontSize: 26,
}
})
You can just add a parent View Element that encloses the Header and the Details Element.
<View>
<View style={...headerStyles}>
</View>
<View style={...detailStyles}>
</View>
</View>
The parent view then can have justifyContent: 'flex-start'
#crispychicken, Thanks for the suggestion to wrap the items in a new View tag.
It didn't work with your CSS suggestion, though.
I got it working after updating my .container styling as seen here.
style
import { colors } from "./colors"
import { fonts } from "./fonts"
import { StyleSheet } from "react-native"
export default StyleSheet.create({
container: {
height: 10,
flex: 1,
padding: 30,
flexDirection: "column",
justifyContent: "space-around"
},
header: {
justifyContent: "space-between",
borderColor: colors.grape,
borderRadius: 2,
},
carRegNr: {
fontWeight: "bold",
color: colors.black,
fontSize: 25,
},
groupTight: {
flexDirection: "column",
justifyContent: "flex-start"
},
insuranceName: {
color: colors.black,
fontSize: 23
},
flexRow: {
flexDirection: "row",
justifyContent: "space-between",
},
flexColumn: {
width: "100%",
flexDirection: "column",
},
nextStepsText: {
color: colors.black,
fontSize: 25,
fontWeight: "bold",
},
nextStepsDetails: {
color: colors.black,
fontSize: 20,
},
bold: {
color: colors.black,
fontWeight: "bold",
},
cont: {
margin: 5,
padding: 3,
},
claimNrText: {
color: colors.black,
margin: 0,
padding: 0,
fontSize: 30,
},
claimNr: {
fontSize: 26,
}
})
Hi I'm new in react native. I would like to ask how to fixed the position of these three colors, because every time i tried to click the search text input and the keyboard goes up those three colors will also goes up. I tried position: 'fixed' but it didnt work.
Screenshot
Here is also the code:
render(){
return(
<View style={{flex: 1}}>
<View style={{flex: 3, backgroundColor: '#E1F1FE'}}>
<View style={styles.form}>
<TextInput
style={styles.input}
placeholder = "Search"
returnKeyType="go"
underlineColorAndroid={'rgba(0,0,0,0)'}
/>
<Icon name="search" size={20} color="#900" style={styles.label} />
</View>
</View>
<View style={{flex: 1, backgroundColor: '#77D3F8'}}>
</View>
<View style={{flex: 1, backgroundColor: '#AEEAF2'}}>
</View>
<View style={{flex: 1, backgroundColor: '#39CFDE'}}>
</View>
</View>
);
}
and the styles
import {StyleSheet} from 'react-native';
module.exports = StyleSheet.create({
navBar: {
backgroundColor: '#EAEAEC',
},
title: {
color: '#rgba(0, 0, 0, 0.65)',
},
buttonText: {
color: '#rgba(0, 0, 0, 0.45)',
},
style3:{
fontSize: 35,
color: '#fff',
padding: 10,
alignContent:'center',
justifyContent: 'center',
},
style2: {
flexDirection: 'row',
alignContent: 'center',
alignItems: 'center',
flex:1
},
buttonstyle: {
flex: 1
},
form:{
flexDirection: 'row',
borderBottomWidth:1,
borderColor: '#00BBD1',
marginTop:80,
marginRight: 40,
marginLeft: 40,
alignContent: 'center',
alignItems: 'center',
},
input: {
height: 40,
borderWidth: 0,
flex: 1
},
label:{
alignContent:'center',
justifyContent: 'center',
marginRight: 10,
color: '#00BBD1'
},
});
Thank you in advance :)
It will not going to be stick to position when keyboard activated. You may need to use keyboardavoidingview or another package like react-native-keyboard-aware-scroll-view So design may not disturb when keyboard activated.