title: Lifting a state; my closest ancestor is filled with a stack, how should I go about implementing?
body: <p>I am following along with <a href="https://reactjs.org/docs/lifting-state-up.html" rel="nofollow noreferrer">https://reactjs.org/docs/lifting-state-up.html</a>, and basically when it gets to the end, and they implement and complete the calculator class, I get confused. Most of the confusion comes because my app.js is mostly just a page that renders a stack, and the stack holds practically my whole app(I am not sure if this is good practice).</p>
  <p>I am trying to take a users input and display it on the password page.</p>
  <p><strong>My main questions are;</strong></p>
  <ol>
  <li>Since app.js is my closest ancestor, I need to implement my states there to use them across my two components. How should I go about implementing this with the stack involved?</li>
  <li>Once implemented, how would I call this state to display it?</li>
  </ol>
  <p>Thank you guys for any help at all! It is greatly appreciated, way more than you know.</p>
  <p>my Email page</p>
  <pre><code>constructor(props) {
      super(props);
  
      this.updateInputValue = this.updateInputValue.bind(this);
  
      this.state = {
        color1: '#A2A2A2',
        emailValue: '', //add state here
      };
    }
  
    updateInputValue = (event) =&gt; {
      this.props.onEmailInputChange(event.target.value);
  }
  
  navigateToCreatePasswordScreen = () =&gt; {
    this.props.navigation.navigate(&quot;CreatePassword&quot;, {
      inputValue: this.state.emailValue,
    });
  };
  
    render() {
  
      const emailValue = this.props.emailValue;
  
      return (
          &lt;View style={styles.containerMain}&gt;
          
          {/* Email Input */}
        &lt;Container style = {styles.emailInput}&gt;
          
          &lt;Form&gt;
            &lt;Item floatingLabel &gt;
              &lt;Label style={{color:this.state.color1}}&gt;Email Address&lt;/Label&gt;
                  &lt;Input
                  value = {emailValue}
                  onChange={(this.updateInputValue)}                
                  style={styles.textInput}
                  autoCorrect={false}
                  autoCapitalize=&quot;none&quot;
                  onFocus={() =&gt; this.setState({color1: '#F7018D'})}               
                  onBlur={() =&gt; this.setState({color1: '#A2A2A2'})}
                  /&gt;
            &lt;/Item&gt;
          &lt;/Form&gt;
        &lt;/Container&gt;
  
        &lt;View style={styles.containerBottom}&gt;   
        &lt;ContinueButton
         onPress={() =&gt; this.navigateToCreatePasswordScreen()}
        /&gt; 
        &lt;/View&gt;
  </code></pre>
  <p>I have not implemented anything in my password page yet because I am unsure how to call the state once declared, but here is my app.js class that I have not made much progress in because I am confused.</p>
  <p>app.js</p>
  <pre><code>constructor(props) {
    super(props);
    this.state = {emailValue: ''};
  }
  
  export default class App extends Component {
   
    createHomeStack = () =&gt;
    &lt;NavigationContainer&gt;
    &lt;Stack.Navigator&gt;
    &lt;Stack.Screen name=&quot;SplashScreen&quot; component= {SplashScreenPage} options={{headerShown: false}}/&gt;
      &lt;Stack.Screen name=&quot;Welcome&quot; component= {WelcomePage} options={{headerShown: false}}/&gt;
      &lt;Stack.Screen name=&quot;Login&quot; component= {LoginPage} options={{headerShown: false}}/&gt;
      &lt;Stack.Screen name=&quot;SignUpEmail&quot; component= {SignUpEmailPage} options={{headerShown: false}}/&gt;
      &lt;Stack.Screen name=&quot;CreatePassword&quot; component= {CreatePasswordPage} options={{headerShown: false}}/&gt;
      &lt;Stack.Screen name=&quot;PhoneVerification&quot; component= {PhoneVerificationPage} options={{headerShown: false}}/&gt;
      &lt;Stack.Screen name=&quot;Home&quot; component= {HomePage} options={{headerShown: false}}/&gt;
      &lt;Stack.Screen name=&quot;YourName&quot; component= {YourNamePage} options={{headerShown: false}}/&gt;
      &lt;Stack.Screen name=&quot;ProfilePicUpload&quot; component= {ProfilePicUploadPage} options={{headerShown: false}}/&gt;
      &lt;Stack.Screen name=&quot;LikedPage&quot; component= {LikedPage} options={{headerShown: false}}/&gt;
    &lt;/Stack.Navigator&gt;
    &lt;/NavigationContainer&gt;
   
    render() {
  
      const emailValue = this.state.emailValue;
  
      return (
        &lt;View style={styles.welcomeScreen}&gt;
         {this.createHomeStack()}
        &lt;/View&gt;
    
      )
    }
  }
  
  </code></pre>