Should I nest screens within the navigator function?

I’m currently developing an App in which multiple screens use the same data. Rather than declaring multiple loose functions and passing the same props everytime, I’ve nested them all in the same function that returns the navigator, which contains all data I need to use between the screens.

CODE BEGIN:

`imports…

const Drawer = createDrawerNavigator();

const HomeNav = ({route, navigation }) => {

... states, variables, and functions



const Scr1 = ({ navigation }) => {
        ... stuff with states and data above
    );
}

const Scr2 = ({ navigation }) => {
        ... other stuff 
    );
}


return (
    <Drawer.Navigator screenOptions={{drawerStyle:{backgroundColor:'#000000'}, drawerActiveTintColor:'#ffffff', drawerInactiveTintColor:'#DADADA'}} 
    initialRouteName="Casa" 
    drawerContent={(props) => <CustomDrawerContent {...props} />}>
        ... drawers
    </Drawer.Navigator>
)`

that’s a cut down version of my code, to explain better. My screens, Scr1 and Scr2, are in the same function as the navigator.

Things work most of the time. I can easily share data between screens, but I’m having a LOT of problems with undefined objects and useless rerenders. I created a hook with the data that’s getting loaded as the state, so whenever it efectively loads, the screen gets rerendered. But I have multiple data variables, so the hook gets called as each one finishes loading. And if I remove those hooks, I lose my defined objects.
Anyway, bottom line, my question is if what I’m doing could give me problems in the future, if it’s the ‘right’ way to do things as to not complicate further down the road. If so, I find a way to deal with the rerenders, otherwise I change my code while I’m still beggining.

Full Homenav.js on github

That’s the complete file, if it helps
pretty messy, but I’m learning react so I’m just going at it
Thanks in advance!