Sending input data to another page

Question

I am trying to take an input and send it to another page for display, this is the code I have so far, but I dont get anything on my password page. If you need any more code like my style sheet or something let me know! Any help is appreciated more than you know!

 constructor() {
    super();

    this.state = {
      color1: '#A2A2A2',
      inputValue: '', //add state here
    };
  }

  updateInputValue = (event) => {
    this.setState({
        inputValue: event.target.value
    });
}

navigateToCreatePasswordScreen = () => {
  this.props.navigation.navigate("CreatePassword", {
    inputValue: this.state.inputValue,
  });
};

  render() {
    return (
        <View style={styles.containerMain}>
        
        {/* Email Input */}
      <Container style = {styles.emailInput}>
        
        <Form>
          <Item floatingLabel >
            <Label style={{color:this.state.color1}}>Email Address</Label>
                <Input
                value = {this.state.inputValue}
                onChange={this.updateInputValue}                
                style={styles.textInput}
                autoCorrect={false}
                autoCapitalize="none"
                onFocus={() => this.setState({color1: '#F7018D'})}               
                onBlur={() => this.setState({color1: '#A2A2A2'})}
                />
          </Item>
        </Form>
      </Container>

<View style={styles.containerBottom}>   
      <ContinueButton
       onPress={() => this.navigateToCreatePasswordScreen()}
      /> 
      </View>

page where I want the email input to show up.

constructor() {
    super();

    this.state = {
      color1: '#A2A2A2'};}
  
  render() {

    const {inputValue} = this.props.route.params;

    return (
        <View style={styles.containerMain}>
       
         {/* Password Input */}
      <Container style = {styles.passwordInput}>
        
        <Form>
          <Item floatingLabel>
           <Label style={{color:this.state.color1}}>Password</Label>
              <Input
                style={styles.textInput}
                autoCorrect={false}
                autoCapitalize="none"
                secureTextEntry={true}
                onFocus={() => this.setState({color1: '#F7018D'})}
                
                onBlur={() => this.setState({color1: '#A2A2A2'})}
         
              />
         </Item>
       </Form>
      </Container>

        <View style={styles.containerHeader}>
        <Text style={styles.title}>Create a Password</Text>
        </View>
        
      <View style={styles.containerCaption}>   
        <Text style={styles.caption}> Lets create your Password for 
 
        </Text> 
      </View>
      <View>   
    <Text style={styles.caption}>{inputValue}</Text> 
      </View>

      

      <View style= {styles.backArrowPlacement}>
      <BackArrow 
      onPress={() => this.props.navigation.navigate('SignUpEmail')} 
      />
      </View>
      
      <View style={styles.containerBottom}>   
      <ContinueButton
      onPress={() => this.props.navigation.navigate('PhoneVerification')} 
      /> 
      </View>
    </View>

    );
    }
}

Answer 1

if you are trying to create a global state you need to use a middle ware like redux to save the input as a global state so that it can be used in other pages, the problem is that the input is only local so it will only work in that file, let me know if this has helped :).
Edit to give an added example:
sorry for the late reply if you need an example I will show you a few snippets of code for you to understand the process (but if I were you I would watch a quick tutorial on using Redux to create global states).
so the example I will be showing is a simple process that takes a user input and uses it on a different page to log that user in (but I will just show the code that I believe you need to understand to do it yourself).
Login Page
so the variable that I get from the user will be called user

const {user} = result;

the first thing I need to do is to use redux to Dispatch the variable to the global state but before that I need to initialize the Store (this is where the variables are stored to be used in your application)
I did this is the index.js file:

import rootReducer from "./reducers";
import { Provider } from "react-redux";
import { createStore } from "redux";
const store = createStore(rootReducer);
ReactDOM.render(
<Provider store = {store}>
      <App/>
</Provider>,
document.getElementById('root')
);

(By the way please dont just copy the code try to understand it then apply it, read the documentation if you don't understand or just send me a message).
So I have created a redux store with my rootReducer (this is the function that allows you to interact with the global state when needed).
Once you create the Reducer you will be able to Create, Read, Update and Delete (CRUD) those states.
my reducer folder structure looks like this:
reducers(folder) -> index.js userReducer.
the index.js contains this code:

import {combineReducers} from 'redux';
import {userReducer} from "./userReducer";

const rootReducer = combineReducers( {
    user*: userReducer
})

export default rootReducer

what I do in the index.js file (inside the reducer folder) is I combine the other reducers that I create into a parent variable called rootReducer
(note you can call the variable that I called user* whatever you want I called it user but it doesnt need to match the variable you are assigning).
My userReducer.js file looks like this:

import React from 'react';

export const userReducer = (state = null, action) => {
    // return action
    switch (action.type) {
        case "loggedIn":
            return action.payload

        case "logOff":
            return action.payload

        default:
            return state

    }
};

this requires a bit more explaining before we can move onto how to finally start using it. so the parameters I am using in the function are state (which is by default null as it is not automatically assigned a variable) and action which will be the data being sent to the Reducer.

Now I think we can move onto actually creating and retrieving variables from the Redux store.

I will just give you the functions and code needed to do this as I have already written what can be considered an essay on this.
so to assign variables to the global state variable(that I have called user) I need to use Dispatch

import {useDispatch} from "react-redux";

I then assign this too a variable for ease of use let dispatch = useDispatch(); now I can use this to assign my data:

dispatch({
         type: "LoggedIn",
         payload: {
               name: user
         },
    });

if the user had the string "Jeremy" assigned to it then the redux store state user will look like: user: {name:"Jeremy"}
too then use this in a different file you simply use the function useSelector:

import {useDispatch, useSelector} from "react-redux";
const {user} = useSelector((state) => ({...state}));

this imports the user variable from the redux store state for you to use (whatever value is in the redux store will be the value of the variable user). thanks for reading if you got stuck anyone just pm me or comment here and I will be sure to try to help you out

Answer 2

I will take a shot at answering your question here instead of the comments. I do want to warn you however that I am not completely familiar with the full contenxt of your application. Nor, indeed, am I terribely well versed in React Naviagtion. However, based on a cursory look at the docs, you appear to be retrieving your parameters incorrectly. In your code you have

const {inputValue} = this.props.route.params;

But the docs are at variance with that approach. Specifically, they point out a few ways to get parameters:

const { name } = this.props.navigation.state.params;

So your code would look like so:

const {inputValue} = this.props.navigation.state.params;

Or

const inputValue = this.props.navigation.getParam('inputValue', 'Some value');

Where Some value will be a value to fall back on if the sought parameter is undefined.

This is about as good a suggestion as I can muster.