How to Align Button to Bottom of the Screen in React Native

Last Updated on December 13, 2020.

While designing the UI of your app sometimes you may want to place your button at the bottom of the screen. In such cases, you can use the power of flexbox so that the button would be aligned to the bottom of the screen irrespective of screen size.

I have written a sample code below which shows how a button should be aligned to the bottom. I think, the things are self explanatory in the code.

Class based component

import React, { Component } from 'react';
import { View, Text,TouchableOpacity } from 'react-native';

export default class componentName extends Component {
  

  render() {
    return (
      <View style={{flex: 1}}>
        <View style={{flex: 1,justifyContent: 'flex-end'}}>
        <TouchableOpacity
        style={{width:'100%',height:40,backgroundColor:'red', 
        alignItems:'center',justifyContent:'center'}}
        >
        <Text style={{color:'white', fontSize: 16}}>Bottom Button</Text>
        </TouchableOpacity>
        </View>
        
      </View>
    );
  }
}

Function based component.

import React from 'react';
import {View, Text, TouchableOpacity} from 'react-native';

const App = () => {
  return (
    <View style={{flex: 1}}>
      <View style={{flex: 1, justifyContent: 'flex-end'}}>
        <TouchableOpacity
          style={{
            width: '100%',
            height: 40,
            backgroundColor: 'red',
            alignItems: 'center',
            justifyContent: 'center',
          }}>
          <Text style={{color: 'white', fontSize: 16}}>Bottom Button</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

export default App;