alignItems: 'flex-end' doesn't work properly (it doesb't cover the whole page) - react native

Question

So in my homepage I have 4 buttons which I've laid out with flex. I've set the parent's flex: 1, which means it's covering the whole page (I've made sure of that with backgroundColor). My problem is that when I set alignItems: 'flex-end', the buttons only move down a little, as if the flex is covering only half the page.

Here's my code Mark-up:

<Card style={styles.cardStyle}>
      <CardSection style={styles.containerStyle}>
        <Button onPress={() => navigate("NewScreen")}>
          New
        </Button>
      </CardSection>

      <CardSection style={styles.containerStyle}>
        <Button onPress={() => navigate("SavedScreen")}>
          Saved
        </Button>
      </CardSection>

      <CardSection style={styles.containerStyle}>
        <Button onPress={() => navigate("ParametersScreen")}>
          Settings
        </Button>
      </CardSection>

      <CardSection style={styles.containerStyle}>
        <Button onPress={() => navigate("FMRScreen")}>
          FMR
        </Button>
      </CardSection>

    </Card>

Card Style:

cardStyle: {
    flex: 1,
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-around',
    alignItems: 'center',
    backgroundColor: '#0000ff',
}

CardSection style:

containerStyle: {
    borderBottomWidth: 1,
    padding: 5,
    backgroundColor: '#fff',
    borderColor: '#ddd',
    height: 150,
    width: 150,
    borderRadius: 20,
    marginTop: 10,
},

And the style for the items:

textStyle: { 
    color: '#007aff',
    fontSize: 20,
    fontWeight: '600',
},
buttonStyle: {
    backgroundColor: 'rgba(255, 255, 255, 0)',
    borderWidth: 0,
    borderColor: '#007aff',
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
},

And this is what I get:

Note that this problem goes away if I remove flexWrap: 'wrap', but I can't do this!

Any ideas?

@Michael_B yes it was the same problem. thanks for mentioning it. — The Monster, Oct 23 '17 at 12:48
@Michael_B Tried to close as dupe though I haven't enough reps. for the initial tags :) ... and when change myself, still won't allow to close singlehanded, and now, as we know it was the same issue, you can close it — Asons, Oct 23 '17 at 12:52

Asons · Accepted Answer · 2017-10-23T12:54:24.547

2

You need to do something like this to make that work properly, where it is the <Card> element being the outer most flex parent of the flex items.

Note the added alignContent: 'flex-end', which is needed when flex items wrap

<Card style={styles.containerStyle}>

  <CardSection style={styles.sectionStyle}>
    <Button onPress={() => navigate("NewScreen")}>
      New
    </Button>
  </CardSection>

  <CardSection style={styles.sectionStyle}>
    <Button onPress={() => navigate("SavedScreen")}>
      Saved
    </Button>
  </CardSection>

  <CardSection style={styles.sectionStyle}>
    <Button onPress={() => navigate("ParametersScreen")}>
      Settings
    </Button>
  </CardSection>

  <CardSection style={styles.sectionStyle}>
    <Button onPress={() => navigate("FMRScreen")}>
      FMR
    </Button>
  </CardSection>

</Card>

containerStyle: {
    flex: 1,
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-around',
    alignItems: 'flex-end',
    alignContent: 'flex-end',
    backgroundColor: '#0000ff',
}

sectionStyle: {
    borderBottomWidth: 1,
    padding: 5,
    backgroundColor: '#fff',
    borderColor: '#ddd',
    height: 150,
    width: 150,
    borderRadius: 20,
    marginTop: 10,    
}

edited Oct 23 '17 at 12:54

answered Oct 23 '17 at 12:32

Asons

84,923
12
110
165

I don't understand. Isn't this exactly my code? – The Monster Oct 23 '17 at 12:35
@TheMonster No, you add the `containerStyle` to the `CardSection` and it should be on the `Card` ... made an update just now, check style variable names and where to apply in markup – Asons Oct 23 '17 at 12:36
I'd written them in different .js files, so they both had the same names. I've edited the question for better clarification. I'm doing exactly what you said in your answer, and it doesn't work. – The Monster Oct 23 '17 at 12:39
@TheMonster After your update, do note you use `alignItems: 'center',` ...not `flex-end` – Asons Oct 23 '17 at 12:43
1

@TheMonster And add `alignContent: 'flex-end'` – Asons Oct 23 '17 at 12:46
yes I was just trying alignContent and it worked. thanks – The Monster Oct 23 '17 at 12:47

alignItems: 'flex-end' doesn't work properly (it doesb't cover the whole page) - react native

1 Answers1