1

I'm trying to use flex box to put a view on the bottom of the screen.

I have a HomeScreen (which contains the button), The HomeScreen component is being set on App.js NavigationContainer.

I set the HomeScreen to display:"flex" and gave the HomeScreen itself flex: 1, However, when I set my FloatingButton to be alignSelf: "flex-end", it does not go to the bottom of the screen.

This is a snack link with the relevant code: https://snack.expo.io/VVQZAPoej

This is how it is right now:

enter image description here

I set the background to be dark, so I can see that the HomeScreen does indeed takes the whole screen height.

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
John Doah
  • 1,839
  • 7
  • 25
  • 46
  • Can't reproduce the problem in the snack link you provided. Getting error messages. – Michael Benjamin Aug 30 '20 at 13:36
  • @MichaelBenjamin I'm sorry, this is only the relevant code, the errors occur because there are missing components that I didn't upload. I'm sorry, I forgot to remove the `body` but I don't use it. – John Doah Aug 30 '20 at 15:20
  • @MichaelBenjamin I added the border to homeContainer, and it does wraps the whole screen. – John Doah Aug 30 '20 at 15:27

1 Answers1

1

In standard CSS the default flex-direction is row. But in React the default is column.

Therefore, align-self, which operates along the cross axis, is attempting to shift your button horizontally. You need it to shift vertically.

Either switch to row-direction, use an auto margin, or use justify-content: space-between.

References:

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701