Creating Simple Grid Layout in React Native - react-native

Question

I'm trying to create the following layout in my React Native app but haven't been able to get it right. The phone number, address and schedules are currently sitting in the middle of the screen and the "Interactive section" is at the bottom of the screen.
What am I doing wrong here? I'd appreciate some help with this layout. Thank you!
BTW, in the following image, I put the borders to show you what I want to achieve. I actually don't want to see any borders around contact info, schedule or interactive sections. The whole thing should just float on white background.
Here's the code in my component:
<View style={styles.container}>
<View style={styles.title}>
<Text style={styles.titleText}>Global Enterprises</Text>
</View>
<View style={styles.contactInfoSection}>
<View style={styles.phoneNumberSection}>
<View>
<Text>212.555.1234</Text>
</View>
<View>
<Text>1 Global Way</Text>
<Text>New York, NY 12345</Text>
</View>
</View>
<View style={styles.scheduleSection}>
<Text>Mon - Fri 8:30 - 5:30</Text>
<Text>Sat - Sun Closed</Text>
</View>
</View>
<View>
<Text style={styles.interactSection}>Other stuff</Text>
</View>
</View>
Here's my stylesheet for this particular screen:
const styles = StyleSheet.create(
{
contactInfoSection: {
alignContent: 'flex-start',
alignItems: 'flex-start',
alignSelf: 'flex-start',
flex: 2,
flexDirection: 'row',
marginTop: 20
},
container: {
alignContent: 'flex-start',
flex: 1,
flexGrow: 1,
padding: 20
},
interactSection: {
flex: 3
},
locationSection: {
alignItems: 'center',
flex: 1
},
phoneNumberSection: {
alignContent: 'center',
alignItems: 'center',
alignSelf: 'center',
flex: 1
},
scheduleSection: {
alignContent: 'center',
alignItems: 'center',
alignSelf: 'center',
flex: 1
},
title: {
alignItems: 'center',
flex: 1,
marginTop: 5
},
titleText: {
fontSize: 17,
fontWeight: 'bold'
}
}
);
export { styles };

Answer 1

You need to update contactInfoSection and title style. Please amend
This
contactInfoSection: {
alignContent: 'flex-start',
alignItems: 'flex-start',
alignSelf: 'flex-start',
flex: 2,
flexDirection: 'row',
marginTop: 20,
},
title: {
alignItems: 'center',
flex: 1,
marginTop: 5,
},
to this
contactInfoSection: {
flexDirection: 'row',
marginTop: 20,
},
title: {
alignItems: 'center',
marginTop: 5,
},
Good Luck