Async Storage not working (React native expo), no error given in console, but everytime I reload nothing is stored

Viewed 44

I'm trying to use Async Storage for a note app, I created a component called task.js as a template for todos, an navigation.js component for nav, and home.js for the main screen all display with <navigation /> inapp.js, I added a funcction to store object value using async storage, but is not working, everytime I hard reload the app everything will be gone but it is not giving me any errors, I don't know where to start

here is my Home.js

import React, {useState} from 'react';
import { Keyboard, KeyboardAvoidingView, Platform, StyleSheet, Text, 
  TextInput, TouchableOpacity, View, SafeAreaView, ScrollView, Image } from 'react-native';
import Task from '../components/Task';
import AsyncStorage from '@react-native-async-storage/async-storage';

export default function Home({ navigation }) {
  const [task, setTask] = useState();
  const [taskItems, setTaskItems] = useState([]);
  React.useEffect ( () => {
    save(taskItems);
  }, [taskItems])
  React.useEffect (() => {
    getsave();
  }, [])

  const handleAddTask = () => {
    Keyboard.dismiss();
    setTaskItems([...taskItems, task])
    setTask(null);
  }

  const completeTask = (index) => {
    let itemsCopy = [...taskItems];
    itemsCopy.splice (index, 1);
    setTaskItems(itemsCopy)
  }

  const save = async taskItems =>{
    try {
      const savetask = JSON.stringify(taskItems)
      await AsyncStorage.setItem('tasksave', savetask)
    } catch (e) {
      console.log(e);
    }
  };

  const getsave = async () => {
    try {
      const taskItems = await AsyncStorage.getItem('tasksave');
      if (taskItems != null){
        setTaskItems(JSON.parse(taskItems));
      }
    } catch (error) {
      console.log(e);
    }
  };


  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.tasksWrapper}>
        <Text style={styles.sectionTitle}>Your stuff:</Text>
        <TouchableOpacity onPress={() => navigation.navigate('About')}>
        <Text style={styles.about}>About</Text>
        </TouchableOpacity>

        <ScrollView style={styles.items}>{
            taskItems.map((item, index) => {
              return (
                <View key={index}>
                <TouchableOpacity onPress={ () => navigation.navigate("Gas", {item})}>
                <Task  text={item} navigation={navigation} />
                </TouchableOpacity>
                <TouchableOpacity onPress={() => completeTask(index)} style={styles.deleteW}>
                <Image style={styles.delete} source={require('../components/remove.png')}></Image>
                </TouchableOpacity>
                </View>
              )
            })
          }

        </ScrollView>
      </View>

      <KeyboardAvoidingView 
      behavior={Platform.OS === "ios" ? "padding" : "height"}
      style={styles.textwrapper}>
        <TextInput style={styles.input} placeholder={'message'} value={task} onChangeText={text => setTask(text)}></TextInput>
        <TouchableOpacity onPress={() => handleAddTask()}>
          <View style={styles.addWrap}>
            <Text style={styles.add}>+</Text>
          </View>
        </TouchableOpacity>
      </KeyboardAvoidingView>
    </SafeAreaView>
  );
}

Here's my Task.js:

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

const Task = (props, {navigation}) => {
    return (
        <View style={styles.item}>
            <View style={styles.itemleft}>
                <Image style={styles.lightball} source={require('./arabic.png')}></Image>
                <Text style={styles.itemtext}>{props.text}</Text>
            </View>
                <Image style={styles.arrow} source={require('./rightarrow.png')}></Image>
        </View>
    )
}

const styles = StyleSheet.create({

export default Task;

I hope is a quick read, I took out all the style stuff but this is still kinda long sorry, if you think it has something to do with my app.js or nav.js I can give you those too, I usually slove these bugs on my own but I just have no idea where to begin cause I'm not getting any error messages, thank you

0 Answers
Related