'Android app crashes when I open build app

Android app crashes when I open build app. It's happens only when I build app react native async storage. On iOS & Android emulators it's working stability. Help me please!

At first I thought that the problem was that I did not use JSON, but it turned out that I did not. JOHN tried, but nothing came of it. Maybe I am not saving correctly in Async Storage?

import React, { useState, useEffect } from 'react'
import { View, TextInput, StyleSheet, TouchableOpacity, ScrollView } from 'react-native'
import Icon from 'react-native-vector-icons/Octicons'
import BackNavbar from '../components/BackNavbar'
import { colors } from '../theme/theme'
import AsyncStorage from '@react-native-community/async-storage'

import GoalCard from '../components/GoalCard'

export default GoalScreen = ({ navigation }) => {

    const STORAGE_KEY = '@data'

    function goBack() {
        navigation.goBack()
    }

    const [ goal, setGoal ] = useState([])

    const [ goalScore, setGoalScore ] = useState()
    const [ goalName, setGoalName ] = useState('')
    const addGoal = () => {
        setGoal([
            ... goal,
            {
                id: Date.now(),
                text: goalName,
                score: goalScore,
            }
        ])
        setGoalName('')
        setGoalScore('')
    }

    const saveData = async (dataSave) => {
        try {
            await AsyncStorage.setItem(STORAGE_KEY, dataSave)
        } catch (e) {
            alert('Failed to save the data to the storage')
        }
    }

    const loadData = async () => {
        try {
            const json = await AsyncStorage.getItem(STORAGE_KEY) || JSON.stringify([])
            const loadData = JSON.parse(json)
            if (loadData != null) {
                setGoal(loadData)
                alert(loadData.map())
            }
        } catch (e) {
            alert('Failed to load the data to the storage')
        }
    }

    useEffect(() => {
        loadData()
    }, [])

    useEffect(() => {
        saveData(JSON.stringify(goal))
    }, [goal])

    return (
        <View style={styles.container}>
            <BackNavbar title='Goals' back={goBack} />
            <ScrollView>
                { goal.map( item => <GoalCard key={item.id} {... item} /> ) }
            </ScrollView>
            <View style={styles.inputView}>
                <TextInput 
                    keyboardType = "number-pad" 
                    style={styles.inputTextScore} 
                    value={goalScore}
                    onChangeText={score => setGoalScore(score)}
                />
                <TextInput 
                    style={styles.inputText} 
                    value={goalName}
                    onChangeText={name => setGoalName(name)}
                />
                <TouchableOpacity 
                    style={styles.inputButton}
                    onPress={addGoal}
                >
                    <Icon name="plus" size={26} color={colors.LIGHT_COLOR} />
                </TouchableOpacity>
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'flex-start',
    },
    inputView: {
        marginTop: 15,
        flexDirection: 'row',
        width: '80%',
        marginBottom: 15,
    },
    inputText: {
        width: '62%',
        height: 50,
        paddingHorizontal: '5%',
        right: 5,
        borderRadius: 15,
        backgroundColor: '#f2f2f2',
        borderColor: colors.BORDER_COLOR,
        color: colors.SECOND_COLOR,
        borderWidth: 1,
        fontSize: 20,
        elevation: 3,
        fontSize: 16,
    },
    inputTextScore: {
        width: '20%',
        height: 50,
        marginRight: 10,
        paddingHorizontal: '5%',
        right: 5,
        borderRadius: 15,
        backgroundColor: '#f2f2f2',
        borderColor: colors.BORDER_COLOR,
        borderWidth: 1,
        fontSize: 20,
        elevation: 3,
        color: colors.SECOND_COLOR,
        fontWeight: '500',
    },
    inputButton: {
        alignItems: 'center',
        justifyContent: 'center',
        paddingHorizontal: 15,
        paddingVertical: 10,
        borderRadius: 50,
        backgroundColor: colors.MAIN_COLOR,
        left: 5,
    }
})


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source