How align a Content vertically aligned middle in the screen?

Question

In the image given below where you can see the name and the email is not aligned middle of the view. So, I want to align them exactly middle of this vertical view-

I have also provided the code of this class in the below-

import React, {Component} from "react";
import {View, Text, StyleSheet, ScrollView, Image} from 'react-native';
import {Container, Content, Icon, Header, Body} from 'native-base';
import {DrawerNavigator, StackNavigator, DrawerItems, SafeAreaView} from 'react-navigation';

import NoteMeHome from '../components/NoteMeHome';
import SettingsScreen from '../components/SettingsScreen';

import {Root} from 'native-base';
import {Font, AppLoading} from 'expo';

class HomeDrawer extends Component {

  constructor(props) {
    super(props);
    this.state= {loading:true};
  }

  async componentWillMount() {
    await Font.loadAsync ({
      Roboto: require('native-base/Fonts/Roboto.ttf'),
      Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf')
    });
    this.setState({loading:false});
  }

  render() {
    if(this.state.loading) {
      return(
        <Root>
          <AppLoading/>
        </Root>
      )
    }
    return(
      <MyApp/>
    )

  }
}

const CustomDrawerContentComponent = (props) => (
  <Container style={styles.Container}>
    <Header style={styles.drawerHeader}>
      <Body style={styles.drawerBody}>
        <Image
          style={styles.drawerImage}
          source={{uri: 'https://img.icons8.com/ios/50/000000/administrator-male-filled.png'}}
        />
        <View style={styles.drawerHeaderText}>
          <Text>S. M. Asif Ul Haque</Text>
          <Text>asif@abc.com</Text>
        </View>

      </Body>
    </Header>
    <Content>
      <DrawerItems {...props}/>
    </Content>
  </Container>
);

const MyApp = DrawerNavigator({
  NoteMeHome:{
    screen: NoteMeHome
  },
  Settings:{
    screen: SettingsScreen
  }
},

{
  initialRouteName: 'NoteMeHome',
  drawerPosition: 'left',
  contentComponent: CustomDrawerContentComponent,
  drawerOpenRoute: 'DrawerOpen',
  drawerCloseRoute: 'DrawerClose',
  drawerToggleRoute: 'DrawerToggle'
}


);

const styles = StyleSheet.create({
  Container:{
   textAlign:'center'
  },

  drawerHeader:{
    height:200,
    textAlign:'center',
    backgroundColor: 'white'
  },

  drawerHeaderText:{
    flex:1,
    alignItems:'center',
    justifyContent:'center',

    backgroundColor:'#5555'
  },

  drawerImage:{
    height: 100,
    width: 100,
    borderRadius: 75
  },

  drawerBody: {
    flexDirection:'row',
    justifyContent:'space-between',
    textAlign:'center',
    backgroundColor:'#aaaa'
  }

});

export default HomeDrawer;

So, What should I do to align them vertically middle of the header of the drawer?

Possible duplicate: https://stackoverflow.com/questions/79461/how-to-vertical-align-elements-in-a-div. Not marking as this is a pure HTML post and this is a react based post. However, this should help — Rajesh, Mar 26 '19 at 06:14
No sir, my question was not duplicate of this. In react-native things are quite different. In React-native there is no **vertical-align: middle** option to do such thing what I want to do. — S. M. Asif, Mar 26 '19 at 06:19
In react native, `flex` is used as main layout framework. You should have basic understanding of flex before you ask more layout related problems. — Ertan Kara, Mar 26 '19 at 06:30

score 2 · Accepted Answer · answered Mar 26 '19 at 06:22

2

Set alignItems:'center' in your drawerBody styling

answered Mar 26 '19 at 06:22

Ankush Rishi

2,861
8
27
59

How align a Content vertically aligned middle in the screen?

1 Answers1