CSS breaking when using padding – Twitter API

I have a JS class

    import React from 'react';
    import { StyleSheet, View } from 'react-native';
    import { Avatar, Accessory } from 'react-native-elements';
    import PropTypes from 'prop-types';
    import MenuButton from './MenuButton';
    import AppStyles from '../AppStyles';
    import Api from '../Api';
    
    export default class DrawerContainer extends React.Component {
      render() {
        const { navigation, onLogout } = this.props;
        return (
          <View style={styles.content}>
            <Avatar size={100}
      rounded
      source={{
        uri:
          'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
      }}
    />
            <View style={styles.container}>
    
              <MenuButton
                title="Home"
                source={AppStyles.iconSet.home}
                onPress={() => {
                  navigation.navigate('Home');
                }}
              />
              <MenuButton
                title="Logout"
                source={AppStyles.iconSet.logout}
                onPress={() => {
                  onLogout();
                  Api.logout();
                }}
              />
            </View>
          </View>
        );
      }
    }
    
    const styles = StyleSheet.create({
      content: {
        flex: 1,
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        paddingTop: 75
      },
      container: {
        flex: 1,
        alignItems: 'center',
        paddingHorizontal: 20,
        alignItems: 'flex-end'
      },
    });
    
    DrawerContainer.propTypes = {
      navigation: PropTypes.object,
      onLogout: PropTypes.func,
    };

Here is the output generated from the same.

What I want to achieve is to have a gap between the image and the icons displayed. I tried using padding but the text overflows with the same. Can anyone suggest as to what wrong am I doing here?