Solved: react native component at bottom center

The main problem is that the react native component at the bottom center is not easily accessible.


I'm trying to create a component at the bottom center of the screen in React Native. I've tried using <code>absolute</code> and <code>relative</code> positioning, but nothing seems to work. Here's my code:
<code>&lt;View style={{position: 'absolute', bottom: 0, alignItems: 'center'}}&gt;
  &lt;Text&gt;This is my component!&lt;/Text&gt;
&lt;/View&gt;
</code>


A:

You can use <code>flexDirection:'row'</code>,<code>justifyContent:'center'</code>,<code>alignItems:'flex-end'</code>. 

<View style={{flexDirection:'row',justifyContent:'center',alignItems:'flex-end'}}>
<Text>This is my component!</Text>
</View>

What is Yoga in React Native

React Native is a platform for building mobile apps with React. Yoga is a programming language that helps developers create user interfaces and applications.

What is Flexbox

?

Flexbox is a layout module for React Native that makes it easy to create flexible and responsive layouts. It allows you to specify which components should be stretched and which should be compressed, and it provides a variety of options for controlling how the layout is rendered.

Related posts:

Leave a Comment