Check if React Native screen has completed rendering

Question

I have made a React Native app. In this app, I have made a footer. This footer has been added to each screen using the App.js file:

function ScreenWithFooter({ "component": Component, ...rest }) {
    return (
        <View style = {{ "flex": 1 }}>
            <ScrollView>
                <View>
                    <Component {...rest} />
                </View>
                <Footer />
            </ScrollView>
        </View>
    );
}
<Drawer.Screen name = "Screen1" options = {{ "title": "Screen 1", "drawerItemStyle": { "display": "flex" } }}>{(props) => { return <ScreenWithFooter component = {Screen1} {...props} />; }}</Drawer.Screen>
<Drawer.Screen name = "Screen2" options = {{ "title": "Screen 2", "drawerItemStyle": { "display": "flex" } }}>{(props) => { return <ScreenWithFooter component = {Screen2} {...props} />; }}</Drawer.Screen>

The Footer renders before the rest of the screen content has rendered. This means the footer may temporarily display on screens in which the content is larger than the screen length. How can I cause this footer to only render after the rest of the screen content has rendered?

I have tried multiple things, including using hooks such as useEffect and useRef to fix this issue. However, nothing has worked.

JAY BHATT · Accepted Answer · 2025-04-18 05:52:12Z

0

Look into this

import React, { useState } from 'react';
import { View, ScrollView } from 'react-native';

function ScreenWithFooter({ component: Component, ...rest }) {
  const [contentRendered, setContentRendered] = useState(false);

  return (
    <View style={{ flex: 1 }}>
      <ScrollView>
        <View
          onLayout={() => {
            setContentRendered(true);
          }}
        >
          <Component {...rest} />
        </View>
        {contentRendered && <Footer />}
      </ScrollView>
    </View>
  );
}

onLayout helps detect when the main content has been rendered on to the screen

answered Apr 18 at 5:52

JAY BHATT

13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Check if React Native screen has completed rendering

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related