Could someone explain how to determine my parent file in order to lift a state?

Question

I am trying to lift a state up so I can use it across some pages, I am struggling to figure out where I should reference the states, as I am unclear where my parent would be here. This is my first time designing an app so my file directory is probably not organized like it should be! I have attached a picture of my file directory as the code for my app.js so you can see why I dont just reference them there. Or maybe I can?

What is the best way to go about this? Any insight is appreciated a lot more than you know! Thank you.

I am trying to take an input from the SignUpEmail page, update its state, and send it to my CreatePassword page.

I feel I did not do the best explaining myself! For more context, visit my last post -> How can I create a "global state" in react native so I can send a user input to another page?

app.js

export default class App extends Component {
 
  createHomeStack = () =>
  <NavigationContainer>
  <Stack.Navigator>
  <Stack.Screen name="SplashScreen" component= {SplashScreenPage} options={{headerShown: false}}/>
    <Stack.Screen name="Welcome" component= {WelcomePage} options={{headerShown: false}}/>
    <Stack.Screen name="Login" component= {LoginPage} options={{headerShown: false}}/>
    <Stack.Screen name="SignUpEmail" component= {SignUpEmailPage} options={{headerShown: false}}/>
    <Stack.Screen name="CreatePassword" component= {CreatePasswordPage} options={{headerShown: false}}/>
    <Stack.Screen name="PhoneVerification" component= {PhoneVerificationPage} options={{headerShown: false}}/>
    <Stack.Screen name="Home" component= {HomePage} options={{headerShown: false}}/>
    <Stack.Screen name="YourName" component= {YourNamePage} options={{headerShown: false}}/>
    <Stack.Screen name="ProfilePicUpload" component= {ProfilePicUploadPage} options={{headerShown: false}}/>
    <Stack.Screen name="LikedPage" component= {LikedPage} options={{headerShown: false}}/>
  </Stack.Navigator>
  </NavigationContainer>
 
  render() {
    return (
      <View style={styles.welcomeScreen}>
       {this.createHomeStack()}
      </View>
  
    )
  }
}

Answer 1

Typically when lifting state you select the closest common ancestor in the React virtual DOM tree to all the components that needs access to the "shared state". Your actual file structure is irrelevant.

From your snippet App looks to be that common ancestor for SignUpEmailPage and CreatePasswordPage components since it is rendering both, though how you decide to pass the "common" state and callbacks to update it is another exercise.

You can use local component state in App, create a context provider and wrap the common ancestor (each component can subscribe to the context), or you can go full-blown app-state management with something like redux. It depends on your shared common state needs.