How to Add Fixed Footer Feature to React Native App

Sticky footers are a common feature of web applications. Often React developers need to implement sticky footers but don’t know how to.

If you want to recreate the same feature in React Native, read this guide until the end.

Core components of React Native are based on native components, so they have different functionalities and accept different attributes. This article will explore how to set up a sticky footer in React.

Use Position CSS Property to Create Sticky Footer in React Native

To have this feature in React Native, you will need <View> and <ScrollView> core components. We could use the <View> component as a container in this case.

It accepts the style attribute, which you’d have to set to display: flex. Inside this container, you must have one <ScrollView> component, which will contain all your other UI in the application, and another <View> component, which will be the sticky footer.

Here’s a simple example.

<View style={{flex: 1}}>
  <ScrollView><Text>This should contain main contents of the page</Text></ScrollView>
  <View><Text>Content for sticky footer</Text></View>
</View>

This solution uses the <ScrollView> core component and its behavior.

The default behavior of the <ScrollView> component is to take up all the available space vertically available in its container. In this example, the second child element of the <View> component is another <View>.

If you re-create the component structure exactly in the example, you’ll have two child components. The second <View> child will be a sticky footer because it will remain visible even if the users scroll down.

Its height will be determined by its content, as it will take up as much space as it needs. Alternatively, you can also set the specific height for this footer.

The first <ScrollView> component will take up the rest of the space. This is where you should put all the main contents of your application.