Aligning with flexbox in react native

Question

I have this screen on my app which corresponds to this code

  render() {
    return (

      <View style={styles.containerStyle}>
          <Chrono style={styles.svgStyle} fill="blue"/>
          <Button style={styles.buttonStyle}>Add</Button>
      </View>
    )

  }
}

const styles = {
  containerStyle: {
    flex: 1,
    flexDirection: 'column',
    marginBottom: 200,
    justifyContent: 'space-around'
  },
  svgStyle: {
    height: 180,
    width: 180
  },
  buttonStyle: {
   height: 20,
   width: 100,
   backgroundColor: '#00aeef',
   borderWidth: 5,
   borderRadius: 15
  }
};

I would like the chrono to be positioned in the center and the button at the end of the column (screen). I am struggling to do that with flexbox as I understand there is no align-self property for aligning accross the main axis.

What is the good way to go to achieve this ?

----EDIT---- the component(called Starter) above is wrapped in a view with the following style :

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Starter />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center'
  },
});

score 0 · Answer 1 · answered Jun 14 '18 at 15:12

Try somthing like this:

<View style={styles.containerStyle}>
  <View style={{ flex: 1, jusifyContent: 'center', alignItems: 'center }}>
    <Chrono style={styles.svgStyle} fill="blue"/>
  <View>
  <Button style={styles.buttonStyle}>Add</Button>
</View>

score 0 · Answer 2 · answered Jun 14 '18 at 19:38

Try putting the Chrono component within an absolute position View that pins to the edges of the container. You can then position the Button component as if the Chrono component isn't there using justifyContent: 'flex-end' and marginBottom (as long as it's rendered after Chrono and its wrapper.

  render() {
    return (

      <View style={styles.containerStyle}>
          <View style={styles.chronoWrapperStyle}>
              <Chrono style={styles.svgStyle} fill="blue"/>
          </View>
          <Button style={styles.buttonStyle}>Add</Button>
      </View>
    )

  }
}

const styles = {
  containerStyle: {
    flex: 1,
    flexDirection: 'column',
    marginBottom: 200,
    justifyContent: 'space-around'
  },
  chronoWrapperStyle: {
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    justifyContent: 'center',
    alignItems: 'center'
  },
  svgStyle: {
    height: 180,
    width: 180
  },
  buttonStyle: {
   justifyContent: 'flex-end',
   marginBottom: 20,
   height: 20,
   width: 100,
   backgroundColor: '#00aeef',
   borderWidth: 5,
   borderRadius: 15
  }
};

Aligning with flexbox in react native

2 Answers2