How to send and display the value of a text input on another screen with native react?

Question

I want to send the data of a text input that is stored in a variable to another screen and show the data that was saved in said variable

Try to pass the state of the variable by react-navigation but the problem is that I have 3 screens and I want to pass the data stored in the variable text from screen 1 to screen 3

class Screen1 extends Component {

constructor(props) {
    super(props);
    this.state = {
        text: '',
        percentage: ''
    };
}

static navigationOptions = ({ navigation }) => {
    const { params = {} } = navigation.state
    var data = {
        textData: params.text
    }
    return {
        headerLeft: (
            <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
                <AntDesign
                    name="left"
                    color="rgba(0,0,0,0.5)"
                    size={30}
                    style={{ marginLeft: 5 }}
                />
                <Text style={{ marginLeft: 20, color: '#000', fontSize: 17, fontWeight: 'bold' }}>Crear regalo</Text>
            </View>
        ),
        headerRight: (

            <View>
                <TouchableOpacity
                    disabled={navigation.getParam('isDisable')} // get value from params and pass it to disabled props
                    onPress={() => navigation.navigate('2', { data })}
                    style={styles.Btn}>
                    <Text style={styles.TxtBtn}>Siguiente</Text>
                </TouchableOpacity>
            </View>
        ),
    }
};
// set by a default value in componentDidMount to make the next button disable initially
componentDidMount() {
    Alert.alert('Advertencia', 'Ingrese el porcentaje de su descuento');
    this.props.navigation.setParams({ isDisable: true });
}

render() {

    return (
        <View style={styles.container}>
            <View style={styles.Box}>
                <ImageBackground source={require('../Icons/Regalo.png')} style={styles.Image}>
                    <View style={styles.ContainerInput}>
                        <TextInput
                            style={{ textAlign: 'center', color: '#fff', fontSize: 40, }}
                            type="numeric"
                            placeholder="%"
                            value={this.state.text} //set value from state
                            onChangeText={(text) => {
                                //when text length is greater than 0 than next button active otherwise it will be disable
                                let isDisable = text.length > 0 ? false : true
                                //set value in the state
                                this.setState({ text: text })
                                // set value to params
                                this.props.navigation.setParams({ isDisable: isDisable });
                            }} />
                        <Text style={{ fontSize: 40, color: '#fff', textAlign: 'center' }}>
                            {this.state.text.split(' ').map((word) => word && '%').join(' ')}
                        </Text>
                    </View>
                </ImageBackground>
            </View>
        </View>
    );
}

} export default Screen1; My Screen Two:

class Screen2 extends Component {
constructor(props) {
    super(props);
    this.state = {
        textData: this.props.navigation.state.params.data.textData,
        text: ''
    };
}

static navigationOptions = ({ navigation }) => {
    const { params = {} } = navigation.state
    var data = {
        textData: params.textData
    }
    return {
        headerLeft: (
            <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
                <AntDesign
                    name="left"
                    color="rgba(0,0,0,0.5)"
                    size={30}
                    style={{ marginLeft: 5 }}
                    onPress={() => navigation.navigate('1')}
                />
                <Text style={{ marginLeft: 20, color: '#000', fontSize: 17, fontWeight: 'bold' }}>Crear regalo</Text>
            </View>
        ),
        headerRight: (
            <View>
                <TouchableOpacity
                    disabled={navigation.getParam('isDisable')} // get value from params and pass it to disabled props
                    onPress={() => navigation.navigate('3', { data })}
                    style={styles.Btn}>
                    <Text style={styles.TxtBtn}>Crear</Text>
                </TouchableOpacity>
            </View>
        ),
    }
};

componentDidMount() {
    this.props.navigation.setParams({ isDisable: true });

}
render() {

    return (
        <View style={styles.container}>
            <View style={styles.InputContainer}>
                <TextInput
                    multiline
                    style={styles.Input}
                    type="numeric"
                    placeholder="Describa los términos y condificones de tu regalos"
                    placeholderTextColor="rgb(196,196,196)"
                    value={this.state.text} //set value from state
                    onChangeText={(text) => {
                        //when text length is greater than 0 than next button active otherwise it will be disable
                        let isDisable = text.length > 1 ? false : true
                        //set value in the state
                        this.setState({ text: text })
                        // set value to params
                        this.props.navigation.setParams({ isDisable: isDisable });
                    }} />
            </View>
        </View>
    );
}

} export default Screen2; My Screen Three:

class Screen3 extends Component {

constructor(props) {
    super(props);
    this.state = {
        textData: this.props.navigation.state.params.data.textData,
        text: '',
        percentage: '',
    };
}

static navigationOptions = ({ navigation }) => ({
    headerLeft: (
        <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
            <AntDesign
                name="left"
                color="rgba(0,0,0,0.5)"
                size={30}
                style={{ marginLeft: 5 }}
                onPress={() => navigation.navigate('2')}
            />
            <Text style={{ marginLeft: 20, color: '#000', fontSize: 17, fontWeight: 'bold' }}>Crear regalo</Text>
        </View>
    ),
    headerRight: (
        <View>
            <TouchableOpacity
                disabled={navigation.getParam('isDisable')} // get value from params and pass it to disabled props
                onPress={() => navigation.navigate('4')}
                style={styles.Btn}>
                <Text style={styles.TxtBtn}>Crear</Text>
            </TouchableOpacity>
        </View>
    ),
});

// set by a default value in componentDidMount to make the next button disable initially
componentDidMount() {
    this.props.navigation.setParams({ isDisable: true });
}

render() {
    let datos = [{
        value: 'Banana',
    }, {
        value: 'Mango',
    }, {
        value: 'Pear',
    }];
    var data = {
        textData: this.state.textData
      }
    return (
        <View style={styles.container}>
            <View style={styles.BoxandInput}>
                <View style={styles.ContainerInput}>
                    <TextInput
                        style={styles.Input}
                        multiline
                        placeholder='Escriba una Descripcion'
                        placeholderTextColor="rgb(196,196,196)"
                        maxLength={203}
                    />
                </View>
                <View style={styles.Box}>
                    <ImageBackground
                        source={require('../Icons/Regalo.png')}
                        style={styles.Image}>
                        <View style={styles.ContainerText}>
                            <Text style={styles.TextBox}>{data}</Text>
                        </View>
                    </ImageBackground>
                </View>
            </View>
            <View style={styles.Regalos}>
                <View style={{ justifyContent: 'center', alignItems: 'center', flexDirection: 'row' }}>
                    <Text style={styles.line}>--------------------------</Text>
                    <Text style={styles.RegalosText}>Cantidad de Regalos</Text>
                    <Text style={styles.line}>--------------------------</Text>
                </View>
                <View style={{ justifyContent: 'center', alignItems: 'center', marginTop: 30 }}>
                    <TextInput
                        style={styles.RegalosInput}
                        placeholder='0'
                        placeholderTextColor='#000'
                        maxLength={6}
                        type='numeric'
                    />
                    <View style={styles.LineInput} />
                    <Text style={{ fontSize: 10, color: '#ccc', textAlign: 'center', marginTop: 5 }}>60 regalos Disponibles</Text>
                    <TouchableOpacity style={{ marginTop: 15 }}>
                        <Text style={{ fontSize: 10, color: 'cyan', textAlign: 'center' }}>Comprar Regalos</Text>
                    </TouchableOpacity>
                </View>
            </View>
            <View style={styles.ContainerServices}>
                <View style={{ justifyContent: 'center', alignItems: 'center', flexDirection: 'row' }}>
                    <Text style={styles.line}>-----------------------------------</Text>
                    <Text style={styles.RegalosText}>Servicios</Text>
                    <Text style={styles.line}>-----------------------------------</Text>
                </View>
                <Dropdown
                    dropdownMargins={{ min: 5, max: 10 }}
                    label='Favorite Fruit'
                    data={datos}
                />
            </View>
        </View>
    );
}

} export default

This Problem

Answer 1

You can create a data object and you can send it with navigation to next UI. You can pass the data object from UI 1 to UI 2 and then you can send it UI 3 from UI 2.

In the first UI you can create data variable like,

var data = {
   textData: text
}

Include the above code inside navigationOptions of your code.

Then in the navigation call include the data object as well.

onPress={() => navigation.navigate('2', {data})}

In the second UI assign the passed value to a variable inside the constructor.

constructor(props) {
   super(props);
   this.state = {
     textData: this.props.navigation.state.params.data. textData,
   }
}

Then when you are going to navigate to the third UI create a data variable and send it as previously done.

var data = {
  textData: this.state.textData
}

Pass this variable with navigate.navigation and access it from third UI similar as in the second UI.