How to make an item stick to the bottom using flex in React Native?

Sometimes, we want to make an item stick to the bottom using flex in React Native.

In this article, we’ll look at how to make an item stick to the bottom using flex in React Native.

How to make an item stick to the bottom using flex in React Native?

To make an item stick to the bottom using flex in React Native, we can set the flex style property.

For instance, we write:

import * as React from 'react';
import { Text, View, TextInput } from 'react-native';
import Constants from 'expo-constants';
import AssetExample from './components/AssetExample';
import { Card } from 'react-native-paper';
import { Icon } from 'react-native-elements';

export default function App() {
  return (
    <View style={{ flex: 1 }}>
      <View style={{ flex: 1 }}>
        <Text>hello</Text>
      </View>
      <View style={{ flex: 0 }}>
        <Text>world</Text>
      </View>
    </View>
  );
}

to set the style prop of the outer and the first inner div to an object with the flex property set to 1 to stretch the views.

The outer view is stretched to fit the screen.

And the first inner view is stretch to fit the space between the top of the screen and the footer view.

Therefore, we see ‘world’ displayed at the bottom of the screen.

Conclusion

To make an item stick to the bottom using flex in React Native, we can set the flex style property.