Ytukyg

I'm new to react native. I am trying to get a 'Key' from a different component. I mean I am trying to call a function from a different component, as a parent component. But, I'm totally jumbled with all these reference calls and all. Please suggest to me how to call a function from a different component.

// AddScreen.js



import React, { Component } from 'react';

import { AppRegistry, AsyncStorage, View, Text, Button, TextInput, StyleSheet, Image, TouchableHighlight, Linking } from 'react-native';

import styles from '../components/styles';

import { createStackNavigator } from 'react-navigation';

import History from '../components/History';



export default class AddScreen extends Component {

    constructor(props) {

        super(props);

        this.state = {

            myKey: '',

        }

    }

    getKey = async () => {

        try {

            const value = await AsyncStorage.getItem('@MySuperStore:key');

            this.setState({ myKey: value });

        } catch (error) {

            console.log("Error retrieving data" + error);

        }

    }

    async saveKey(value) {

        try {

            await AsyncStorage.setItem('@MySuperStore:key', value);

        } catch (error) {

            console.log("Error saving data" + error);

        }

    }

    componentDidMount() {

        this.getKey();

    }

    render() {

        const { navigate } = this.props.navigation;

        return (

            <View style={styles.MainContainer}>

                <View style={styles.Date_input}>

                    <TextInput

                        placeholder="Add input"

                    value={this.state.myKey}

                    onChangeText={(value) => this.saveKey(value)}

                    />

                </View>

                <View style={styles.getKeytext}>

                    <Text >

                        Stored key is = {this.state.myKey}

                    </Text>

                </View>

                <View style={styles.Historybutton}>

                    <Button

                        onPress={() => navigate('History')}

                        title="Press Me"

                    />

                </View>

            </View>

        )

    }

}



//History.js



import React, { Component } from 'react';

import AddScreen from '../components/AddScreen';

import {

    AppRegistry,

    StyleSheet,

    Text,

    TextInput,

    Button,

    View,

    AsyncStorage

} from 'react-native';



export default class History extends Component {

    constructor(props) {

        super(props);

        this.state = {

            myKey: ''

        }



    }

    render() {call async function synchronously

        return (

            <View style={styles.container}>

               <Button

                    style={styles.formButton}

                    onPress={this.onClick}

                    title="Get Key"

                    color="#2196f3"

                    accessibilityLabel="Get Key"

                />

                <Text >

                    Stored key is = {this.state.mykey}

                </Text>

            </View>

        )

    }

}

const styles = StyleSheet.create({

    container: {

        padding: 30,

        flex: 1,

        backgroundColor: '#F5FCFF',

    },

});

I just want to call the getKey function from the History component to get the myKey value on the History component's screen.

Please suggest to me, by taking my components as an example.

You just simply need to pass the key via navigation parameters.

<Button

   onPress={() => navigate('History', { key: this.state.myKey })}

   title="Press Me"

/>

and in your history component you can do

render() {

   const key = this.props.navigation.getParam('key');



   return (

      // other code

   )

}

You can read more about passing parameters here. https://reactnavigation.org/docs/en/params.html