How to add a fixed footer with React Native?

Sometimes, we want to add a fixed footer with React Native.

In this article, we’ll look at how to add a fixed footer with React Native.

How to add a fixed footer with React Native?

To add a fixed footer with React Native, we can add a ScrollView on top of the footer View.

For instance, we write:

import * as React from 'react';
import { Text, View, ScrollView } from 'react-native';
import Constants from 'expo-constants';

import { Card } from 'react-native-paper';

const App = () => {
  return (
    <View style={{ flex: 1 }}>
      <ScrollView>main</ScrollView>
      <View>
        <Text>footer</Text>
      </View>
    </View>
  );
};
export default App;

to set the outer View to have the flex style set to 1 to make it fill the screen.

Then we add a ScrollView that fills the height of the outer View except for the height of the footer View.

Now we should see ‘footer’ stays at the bottom.

Conclusion

To add a fixed footer with React Native, we can add a ScrollView on top of the footer View.