Layout arrangement in React Native - react-native

Question

I'm trying to work on this Instagram layout using React Native:
However, I'm unable to arrange the layout properly. Here is my code:
import React from 'react';
import { StyleSheet, Text, View, Image, Button } from 'react-native';
import StatusBarBackground from './StatusBarBackground';
export default class App extends React.Component {
render() {
return (
<View>
<StatusBarBackground />
<View style={styles.user_profile}>
<View style={styles.container}>
<Image style={styles.image} source={require('./images/user_profile.jpg')}/>
</View>
<View style={{flex: 1, flexDirection: 'row'}}>
<View style={styles.container}>
<Text style={styles.numbers}>128</Text>
<Text style={styles.grey_text}>posts</Text>
</View>
<View style={styles.container}>
<Text style={styles.numbers}>256</Text>
<Text style={styles.grey_text}>followers</Text>
</View>
<View style={styles.container}>
<Text style={styles.numbers}>184</Text>
<Text style={styles.grey_text}>following</Text>
</View>
</View>
<View style={styles.btnContainer}>
<Button title="Edit Profile" color="#000" backgroundColor="#CCC" raised={true} onPress={this.onPressEditProfile} />
</View>
</View>
</View>
);
}
onPressEditProfile(event) {
console.log('Clicked Edit Profile');
}
}
const styles = StyleSheet.create({
user_profile: {
width: '100%',
height: 120,
alignItems: 'flex-start',
flexDirection: 'row',
},
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
image: {
height: 100,
borderRadius: 50,
width: 100,
margin: 10,
alignItems: 'center',
justifyContent: 'center',
},
grey_text: {
color: '#999',
},
numbers: {
fontWeight: 'bold',
},
btnContainer: {
backgroundColor: '#CCC',
borderRadius: 10,
padding: 10,
},
});
It looks like this now:
What did I miss in the layout?

Answer 1

You just applied flexDirection: 'row' to common container so it was cause of your result layout.
I've provided some pseudocode just for your understanding.
const style = StyleSheet.create({
container: {},
infoTopRow: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
},
infoBottomRow: {
justifyContent: 'center',
alignItems: 'center',
},
});
<View style={...}>
<Avatar/>
<View style={...}> {/* <---- here should be flexDirection: 'column' or just don't set any value for it */}
<View style={style.infoTopRow}>
<InfoBlock title="posts" value="128" />
<InfoBlock title="followers" value="256" />
<InfoBlock title="following" value="184" />
</View>
<View>
<Button title="Edit Profile" />
</View>
</View>
</View>

Answer 2

You are missing one more wrapper column view
<View>
<StatusBarBackground />
<View style={styles.user_profile}>
//Make this container something like flex:0.2
<View style={styles.container}>
<Image style={styles.image} source={require('./images/user_profile.jpg')}/>
</View>
// You need another column view wrapper
<View style={{flex:0.8}}>
<View style={{flex: 1, flexDirection: 'row'}}>
<View style={styles.container}>
<Text style={styles.numbers}>128</Text>
<Text style={styles.grey_text}>posts</Text>
</View>
<View style={styles.container}>
<Text style={styles.numbers}>256</Text>
<Text style={styles.grey_text}>followers</Text>
</View>
<View style={styles.container}>
<Text style={styles.numbers}>184</Text>
<Text style={styles.grey_text}>following</Text>
</View>
</View>
<View style={styles.btnContainer}>
<Button title="Edit Profile" color="#000" backgroundColor="#CCC" raised={true} onPress={this.onPressEditProfile} />
</View>
</View>
</View>
</View>