How do I group some parts of flex elements? - reactjs

Question

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,
}
})

Answer 1

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'

Answer 2

#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,
}
})