AsyncStorage use boolean from Promise

Question

hi i'm new on react native and i have a issue with asyncStorage. I want to store the cache state in my pdf screen. The cache is a parameter of the source and handle only boolean. I made an onPress which change a state and store it in my localstorage, it works and when i console.log my getItem it shows true or false too it works too. But here is my problem. Now i want to just use the true or the false from this getItem because the parameter cache can handle boolean only. The best i could get on my search was Promise Boolean for my function. So if you could help me it'll be incredible because i really don't know. Thank you a lot and sorry for my English.

Here's my code //

  export class Liste extends React.PureComponent {
   constructor(props) {
   super(props);
   this.state = {
      navigation : props.navigation,
      route: props.route,
      selectedIndex : this.selectedIndex,
      page : this.page,
      numberOfPages : this.numberOfPages,
      filePath : [],
      cache : false,
  };
  }

  saveCache()  {
    AsyncStorage.setItem('cache', JSON.stringify(this.state.cache));
    console.log(`store ${this.state.cache}`);
  }

  async getCache () {
  const ta = await AsyncStorage.getItem('cache', (value) => {
    JSON.parse(value)
   })
    console.log(ta)
  }

  navigateBack = () => {
   this.state.navigation.goBack();
  };

  BackAction = () => (
    <TopNavigationAction icon={BackIcon} onPress={this.navigateBack}/>
  );

  render() {
  const {files} = this.state.route.params;
  const cache = this.state.cache;
  const bool = this.getCache();
  return (
    <>
      <TopNavigation style={{ borderWidth: 1 }} title='Mes Articles' alignment='center' accessoryLeft={this.BackAction} />
      <ViewPager
        selectedIndex={this.state.selectedIndex}
        onSelect={ index =>  this.setState({ selectedIndex: index })}>
        {files.map((file, i) =>
          <Layout style={styles.tab} level='2'>
            <Text>{file.filename}</Text>
            <Text>Article: {i + 1} / {files.length}                page: {this.state.page} / {this.state.numberOfPages}</Text>
            <View>
              <TopNavigationAction icon = {emailIcon} onPress={() =>  Share.open({ title: 'Pdf file', message: `bonjour voici l'article pdf ${file.filename}`, url: `file:///${this.state.filePath[i]}`, subject: `Article Pdf ${file.filename}` })} status='Partager'>
                Partager
              </TopNavigationAction>
              <TopNavigationAction icon = {pin} onPress ={() => this.saveCache(cache === true ? this.setState({cache : false})  : this.setState({cache : true}))}  status='Partager'>
                Partager
              </TopNavigationAction>
              <TopNavigationAction icon = {pin} onPress ={() => console.log(this.getCache())}  status='Partager'>
                Partager
              </TopNavigationAction>
            </View>
            <Pdf
              source={{ uri: `http://10.1.0.248/${file.path}/${file.filename}`, cache : bool}}
              style={styles.pdf}
              enablePaging={true}
              onLoadComplete={(numberOfPages, filePath) => {
                this.state.filePath.push(filePath);
                this.setState({ numberOfPages: numberOfPages });
              }}
              onPageChanged={(page, numberOfPages) => {
                this.setState({ page: page });
              }}
              />
          </Layout>
        )}
      </ViewPager>
    </>
  );
  }
 }

Answer 1

You can use it like this.

await AsyncStorage.getItem('cache'); returns a JSON stringified value which you could parse and use.

 async getCache () {
  const ta = await AsyncStorage.getItem('cache');
   console.log(JSON.parse(ta))
}