CODEWITHSUNDEEP
javascriptreactjsreact-native
festiveox
festiveox

Reputation: 31

Center text below image in react native

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?

Upvotes: 3

Views: 6995

Answers (2)

Ryan Turnbull
Ryan Turnbull

Reputation: 3944

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

Upvotes: 2

Ahmad Santarissy
Ahmad Santarissy

Reputation: 615

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>

Upvotes: 1

Related Questions