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: '.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?

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./forum/styles/boot/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?

• javascript
• reactjs
• react-native

Share Improve this question Follow edited Aug 19, 2017 at 23:15 1201ProgramAlarm 32.7k77 gold badges4545 silver badges5959 bronze badges asked Aug 19, 2017 at 21:23 festiveoxfestiveox 3111 silver badge77 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

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

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>