How to set an `imagesLoaded` state within useAppIsReady in App.tsx - reactjs

Question

I have a react native app. I have a hook useAppIsReady that contains a check for whether images have been loaded yet located in my App.tsx.
The way it works is I have state in my context numberOfImagesLoaded. I have multiple images loaded within Home. When an image loads, numberOfImagesLoaded gets incremented by 1, and once it reaches a specified number, appIsReady gets set to true.
The problem is that I can't use useAppIsReady within my App.tsx since numberOfImagesLoaded is located within my context, and The return statement that contains my whole app wrapped in context is defined after useAppIsReady gets called, so I'm forced to place useAppIsReady inside my Home component instead, which is suboptimal. How can I make useAppIsReady work in App.tsx?
I don't want to define the numberOfImagesLoaded state in my App.tsx because it will be a pain to pass down through props.
useAppIsReady
const useAppIsReady = () => {
const [appIsReady, setAppIsReady] = useState(false);
const context = useContext(AppContext);
// If all images are loaded
const imagesAreLoaded = context.numberOfImagesLoaded > 5;
if (imagesAreLoaded && !appIsReady) {
setAppIsReady(true);
}
return appIsReady;
};
App.tsx
SplashScreen.preventAutoHideAsync();
export default function App() {
// useAppIsReady() won't work since context has not yet been defined
const appIsReady = useAppIsReady();
const Tab = createBottomTabNavigator<AppParamList>();
useEffect(() => {
const prepare = async () => {
if (appIsReady) {
await SplashScreen.hideAsync();
}
};
prepare();
}, [appIsReady]);
if (!appIsReady) {
return null;
}
return (
<AppProvider>
<NavigationContainer>
<Tab.Navigator
>
<Tab.Screen name="Home" component={Home} />
<Tab.Screen
name="MyQueues"
component={MyQueuesScreen}
/>
<Tab.Screen name="Profile" component={Profile} />
</Tab.Navigator>
</NavigationContainer>
</AppProvider>
);
}

Answer 1

You can either lift the appIsReady state up (e.g. into <AppProvider>) where you have access to the numberOfImagesLoaded state and use it there.
Finally, you pass appIsReady to a child component or provide it via context, where you use and handle the ready state.
Here's an example:
const AppProvider = () => {
...
const [numberOfImagesLoaded, setNumberOfImagesLoaded] = useState(0);
const appIsReady = useAppIsReady(numberOfImagesLoaded);
return (
<YourContext.Provider value={{numberOfImagesLoaded, appIsReady}}>
{children}
</YourContext.Provider>
);
}
const useAppIsReady = ({numberOfImagesLoaded}) => {
...
useEffect(() => {
// your ready logic
},[numberOfImagesLoaded]);
return appIsReady;
}
App or whichever needed component can use the context and access appIsReady.