Align Text to bottom of the screen React Native

Align Text to bottom of the screen React Native

Two ways adding text to bottom of the screen in React Native 

• position: 'absolute'
• flex : 1

Case 1:  flex: 1

Flexbox as in ratio of the screen or the weight of the screen given 1 assigns the entire space to a view and the property of  Flexbox - justifyContent determines the position of a element inside the container/space, hence provided with flex:1 and justifyContent: 'flext-end'  the element gets placed to the bottom of screen in react native.

Example of text adding to bottom of screen using flex: 1

Try this example on Snack

Case 2:  position: 'absolute' , bottom: 0

position in react native by default is set to relative and inorder to position the child relative to its parent, use absolute position. In this case to place the element at bottom use position: 'absolute' and bottom:0.

Example of text adding to bottom of screen using position: 'absolute'

Try this example on Snack

Outcome of both the cases 

Find the complete code to add view to bottom using flex here and using absolute position here here

Stay tuned to my posts  and do share your valuable thoughts if any queries or you would like to share anything on this topic in the comment section and please do like and share my post if this was helpful.

Hope you liked it :)