React Native Put Align View at Bottom of Screen

Hello friends, In today’s tutorial we would learn about some align layout props in react native. There are 6 layout props bottom, end, left, right, start and top which is used to stick View component to any position on mobile screen. Now the main part, How does these props works? So I’m going to be simple For example, If you define left :50 and top: 50 on a View then it will put the View at the Top left side of mobile screen with 50-50 margin. Now here comes the main catch we have to define position: ‘absolute’ along with it to make it work correctly. So in this tutorial we would learn about React Native Put Align View at Bottom of Screen in Android iOS Example.

Contents in this project React Native Put Align View at Bottom of Screen :-

1. Open your project’s main App.js file and import View, StyleSheet, Platform and Text component.

2. Creating our main export default App component.

3. Creating a View component with 2 main style props position: ‘absolute’ and bottom: 0 to stick the View at bottom of screen.

4. Creating Style.

5. Complete Source Code for App.js File :-

Screenshot :-

React Native Put Align View at Bottom of Screen

Leave a Reply

Your email address will not be published. Required fields are marked *