React Native Align Position Button View at Bottom of Screen Example

React Native gives us style attribute left, right, top, bottom and using them we can stick any view at a particular position on mobile phone screen. Bottom button is mostly used in application where developer needs to show a loading button or loading View at the base of application scree. So in this tutorial we would going to Align Position Button View at Bottom of Screen in both android iOS react native application, This type of View also called as Fixed Footer View in react native application.

Contents in this project Align Position Button View at Bottom of Screen in iOS Android react native app:

1. Import Platform, StyleSheet, View and Text component in your project.

2. Create a Root View in render’s return block, This view would be our main container view.

3. Now we would create a BOTTOM view inside main container view. We would call a style class named as bottomView on this View.

4. Creating Style.

MainContainer : Style class for main root view.

bottomView : Style class for Bottom Fixed Footer View. In this class the main work of fixing footer at the bottom of screen is doing the bottom: 0 attribute of style. This would set its default position at the bottom and margin from bottom is 0(zero), so it will fixed at the bottom of screen.

5. Complete source code for App.js File :

Screenshot in Android device:

Align Position Button View at Bottom of Screen

Screenshot in iOS device:

6 Comments

  1. using stack navigation is possible to navigate to another page using onPress command( while clicking a button).
    i require to navigate to another page when a condition (if) fails (with out pressing a button) .in my componentWillMount() function of my application . kindly provide a solution

  2. I used similar solution to fix the position of form buttons on footer but had issue when the keyboard layout is open as the main view height would change in Android

Leave a Reply

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