I have a react native app, in my App.js file I have placed StatusBar, this way I avoid placing one in each screen/component, now I want to change StatusBar color according to current route name, how can I do this?

App.js

return (
    <SafeAreaView style={{ flex: 1, backgroundColor: 'white', paddingTop: Platform.OS === 'android' ? 0 : 0 }}>
        <StatusBar barStyle="light-content" backgroundColor={ mapStore.isHot ? 'rgb(241, 60, 127)':'white'} />
        <NavigationContainer>
            <ROOTSTACK1></ROOTSTACK1>
        </NavigationContainer>
    </SafeAreaView>
    );

I ttied with mobx store but didn't work, I want to try to avoid redux or mobx, is there a way to access route name from App.js?

Inside my ROOTSTACK component I have a tab container, and the tab contains four stack navigators nested.