Center text below image in react native

Question

I'm trying to center the Edit text below the image. This the start of the profile page for an app I'm working at so I want the Edit button text to be centered below the image.

Here's the code:

import React from 'react';
import { AppRegistry, StyleSheet, Text, View, Image, TextInput, TouchableHighlight, Alert, Button } from 'react-native';
import { Constants, ImagePicker } from 'expo';

const util = require('util');

export default class TopProfile extends React.Component{
    state = {
    image: 'https://www.sparklabs.com/forum/styles/comboot/theme/images/default_avatar.jpg',
  };

  render() {
    let { image } = this.state;

    return (
        <View style={styles.container}>
            <View style={styles.column}>
              <TouchableHighlight onPress={this._pickImage}>
              {image &&
                <Image source={{ uri: image }} style={{ width: 100, height: 100, borderRadius: 50}} />}
                </TouchableHighlight>
                <Button
                    style={styles.button}
                title="Edit"
                onPress={this._pickImage}
              />
            </View>
          </View>
    );
  }

  _pickImage = async () => {
    let result = await ImagePicker.launchImageLibraryAsync({
      allowsEditing: true,
      aspect: [4, 3],
    });

    console.log(result);

    if (!result.cancelled) {
      this.setState({ image: result.uri });
    }
  };
}

const styles = StyleSheet.create({
  container: {
    flex: 1, 
    flexDirection: 'row'
  },
  column:{
    flex: 1,
    flexDirection: 'column',
    alignItems: 'flex-start',
    paddingLeft: 10,

  },
  button: {
  }

});

module.exports = TopProfile;

And this is what I'm currently getting:

Does anyone have an idea how can I fix this?

Answer 1

There's an error in your column style props.

You've defined alignItems: 'flex-start'. When the flexDirection: 'column', the alignItems prop effects the X-axis of the view, EG how items in the view are horizontally positioned. Setting their alignment to flex-start is not what you want here.

Change your styles to:

column:{
    flex: 1,
    flexDirection: 'column',
    alignItems: 'center',       //THIS LINE HAS CHANGED
    paddingLeft: 10,
},