Exporting saved state

Question

I'm storing the state of myKey in the script below.

import React, { Component } from 'react';
import {
    Text,
    Button,
    AsyncStorage,
    View,
    StyleSheet,
    TextInput
} from 'react-native';

export var tamanhoFonte = 18;
export var corTexto = `#646567`;
export var nightMode = false


export default class Main extends Component {

    constructor(props) {
      super(props);
      this.state = {
        myKey: null
      }

      this.getKey();
    }

    async getKey() {
      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);
      }
    }

    async resetKey() {
      try {
        await AsyncStorage.removeItem('@MySuperStore:key');
        const value = await AsyncStorage.getItem('@MySuperStore:key');
        this.setState({myKey: value});
      } catch (error) {
        console.log("Error resetting data" + error);
      }
    }

    render() {
      return (
        <View style={styles.container}>
          <Text style={styles.welcome}>
            {word}
          </Text>

          <TextInput
            style={styles.formInput}
            placeholder="Enter key you want to save!"
            value={this.state.myKey}
            onChangeText={(value) => this.saveKey(value)}
            />

          <Button
            style={styles.formButton}
            onPress={this.getKey.bind(this)}
            title="Get Key"
            color="#2196f3"
            accessibilityLabel="Get Key"
          />

          <Button
            style={styles.formButton}
            onPress={this.resetKey.bind(this)}
            title="Reset"
            color="#f44336"
            accessibilityLabel="Reset"
          />

          <Text style={styles.instructions}>
            Stored key is = {this.state.myKey}
          </Text>


        </View>
      );
    }
  }

  const styles = StyleSheet.create({
    container: {
      padding: 30,
      flex: 1,
      alignItems: 'stretch',

    },
    welcome: {
      fontSize: 20,
      textAlign: 'center',
      margin: 10,
    },
    formInput: {
      paddingLeft: 5,
      height: 50,
      borderWidth: 1,
      borderColor: "#555555",
    },
    formButton: {
      borderWidth: 1,
      borderColor: "#555555",
    },
    instructions: {
      textAlign: 'center',
      color: '#333333',
      marginBottom: 5,
      marginTop: 5,
    },
  });

But i don't know how to acess the state of myKey from another file. What i have in mind is acess the saved state of myKey to change the layout of the component if myKey content equals to "true", like this:

import myKey from './example'
...
backgroundColor: myKey === "true" ? '#FAFAFA' : 'black'

Is that possible? (like export var myKey)

May be this can help you, check the answer by 'Sagar Gavhane' [Link](https://stackoverflow.com/questions/36837958/how-to-access-one-components-state-from-another-component/36838348) — gokul p, Sep 15 '18 at 06:27

score 0 · Accepted Answer · answered Sep 15 '18 at 05:19

If you want to export a variable, inside the file that contains the variable you should do something like this:

// example.js
export const myKey = 10;

To import the exported variable you can do this:

import { myKey } from './example';

As you didn't use the default keyword to export the variable, you have to use curly braces ({ }) around the variable name when importing it.

Exporting saved state

1 Answers1