Trouble getting function from different component

Question

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.

Answer 1

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