Center text below image in react native

All we need is an easy explanation of the problem, so here it is.

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:

enter image description here

Does anyone have an idea how can I fix this?

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 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,
},

Method 2

it’s either you specify the with of the <View style={[styles.column, {width:100, justifyContent:'center'}]} or you wrap your <TouchableHighlight> and <Button> inside another <View>

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply