Как показать состояние моей переменной с помощью приставки?

Question

Я новичок, используя redux, и я сохранял состояния переменных с помощьюact-native, но я понял, что это неустойчиво, поэтому я хочу начать его использовать, но я не знаю, как отправить состояние моей переменной вдругой экран и покажите последнее состояние, в котором я нахожусь. Значение переменной, которое я получаю с textInput

class Screen1 extends Component {

    constructor(props) {
        super(props);
        this.state = {
            text: '',
            percentage: ''
        };
    }
    static navigationOptions = ({ navigation }) => {
        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') }
                        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 });
    }
    Change = (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 });
    }
    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={ this.Change } />
                            <Text style={ { fontSize: 40, color: '#fff', textAlign: 'center' } }>
                                { this.state.text.split(' ').map((word) => word && '%').join(' ') }
                            </Text>
                        </View>
                    </ImageBackground>
                </View>
            </View>
        );
    }
}

export default Screen1;

Мой экран 3:

Я хочу статус моей переменной "текст ", который находится на моем экране 1, показать его на моем экране 3

import React, { Component } from "react";
import {
    View,
    Text,
    StyleSheet
} from "react-native";

class Screen3 extends Component {
    render() {
        return (
            <View style={ styles.container }>
                <Text>{ #showthevariable}</Text>
            </View>
        );
    }
}
export default Screen3;

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center'
    }
});