Make an item stick to the bottom using flex in react-native
In React Native, the default value of flexDirection
is column
(unlike in CSS, where it is row
).
Hence, in flexDirection: 'column'
the cross-axis is horizontal and alignSelf
works left/right.
To pin your footer to the bottom, apply justifyContent: 'space-between'
to the container
How to make component stick to bottom in ScrollView but still alow other content to push it down
Use flexGrow instead of flex. Example code is given bellow.
<ScrollView
contentContainerStyle={{
flexGrow: 1,
flexDirection: 'column',
justifyContent: 'space-between'
}}>
<View style={{ width: 50, height: 1000, backgroundColor:'orange' }} />
<View style={{ width: 50, height: 50, backgroundColor:'black'}} />
<View style={{ width: 50, height: 50, backgroundColor:'blue'}} />
</ScrollView>
Here is the screenshot
Flex-end does not push a view all the way to the bottom
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:
- React Native documentation:
flex-direction
- Methods for Aligning Flex Items along the Main Axis
- Methods for Aligning Flex Items along the Cross Axis
How can you float: right in React Native?
why does the Text take up the full space of the View, instead of just the space for "Hello"?
Because the View
is a flex container and by default has flexDirection: 'column'
and alignItems: 'stretch'
, which means that its children should be stretched out to fill its width.
(Note, per the docs, that all components in React Native are display: 'flex'
by default and that display: 'inline'
does not exist at all. In this way, the default behaviour of a Text
within a View
in React Native differs from the default behaviour of span
within a div
on the web; in the latter case, the span would not fill the width of the div
because a span
is an inline element by default. There is no such concept in React Native.)
How can the Text be floated / aligned to the right?
The float
property doesn't exist in React Native, but there are loads of options available to you (with slightly different behaviours) that will let you right-align your text. Here are the ones I can think of:
1. Use textAlign: 'right'
on the Text
element
<View>
<Text style={{textAlign: 'right'}}>Hello, World!</Text>
</View>
(This approach doesn't change the fact that the Text
fills the entire width of the View
; it just right-aligns the text within the Text
.)
2. Use alignSelf: 'flex-end'
on the Text
<View>
<Text style={{alignSelf: 'flex-end'}}>Hello, World!</Text>
</View>
This shrinks the Text
element to the size required to hold its content and puts it at the end of the cross direction (the horizontal direction, by default) of the View
.
3. Use alignItems: 'flex-end'
on the View
<View style={{alignItems: 'flex-end'}}>
<Text>Hello, World!</Text>
</View>
This is equivalent to setting alignSelf: 'flex-end'
on all the View
's children.
4. Use flexDirection: 'row'
and justifyContent: 'flex-end'
on the View
<View style={{flexDirection: 'row', justifyContent: 'flex-end'}}>
<Text>Hello, World!</Text>
</View>
flexDirection: 'row'
sets the main direction of layout to be horizontal instead of vertical; justifyContent
is just like alignItems
, but controls alignment in the main direction instead of the cross direction.
5. Use flexDirection: 'row'
on the View
and marginLeft: 'auto'
on the Text
<View style={{flexDirection: 'row'}}>
<Text style={{marginLeft: 'auto'}}>Hello, World!</Text>
</View>
This approach is demonstrated, in the context of the web and real CSS, at https://stackoverflow.com/a/34063808/1709587.
6. Use position: 'absolute'
and right: 0
on the Text
:
<View>
<Text style={{position: 'absolute', right: 0}}>Hello, World!</Text>
</View>
Like in real CSS, this takes the Text
"out of flow", meaning that its siblings will be able to overlap it and its vertical position will be at the top of the View
by default (although you can explicitly set a distance from the top of the View
using the top
style property).
Naturally, which of these various approaches you want to use - and whether the choice between them even matters at all - will depend upon your precise circumstances.
How to make div container with flex use only one column
Have you selected (?):
width: 100%;
display: flex;
flex-direction: column;
align-content: flex-start;
justify-content
will not work in the direction "left" or "right" at column, this will just change "top" and "bottom" (or center). You need align-content
for example.
Bottom content covers the main content when keyboard is visible
AvoidSoftInputView
solves the problem and it is very easy to use.
Project: https://github.com/mateusz1913/react-native-avoid-softinput
Documentation: https://mateusz1913.github.io/react-native-avoid-softinput/
Related Topics
CSS Hover Menu Appearing Behind PDF Iframe
CSS Variables Don't Work in Microsoft Edge
Responsive Google Maps V3 - Cannot Get 100% Height
Change the CSS of the Qna Bot Embedded as Webchat
Unicode Character for "X" Cancel/Close
Internet Explorer and Safari Mobile CSS Filter Invert
How to Escape String CSS in SASS/Scss
Is There a CSS Selector for the First Child, Taking Text Nodes into Account
Create CSS for Internet Explorer Only
Flex-Grow Not Working as Expected (Flex Items Don't Have the Widths I Expect)
Set Textfield Height Material-Ui
Bootstrap Collapsed Menu Not Pushing Content Down When Expanded
How to Remove Whitespace That Appears After Relative Positioning an Element with CSS
Leaving Certain Values Unchanged When Using CSS Shorthand Properties