React Native(Expo)でundefined is not an objectというエラーが出る

Question

前提

初心者です。ウエブサイトを参考にしてReact NativeのExpoを利用しメモ帳アプリを作っています。(参考サイト:https://codezine.jp/article/detail/12328?p=1)
データを保存するためにAsyncStorageを使おうとしましたが、以下のエラーメッセージが発生しました。構成画面の保存ボタンを押すとエラー表示が出ます。
おそらく該当のソースコードの、データを格納&取り出す部分でエラーが起きていると思っているのですが、どこが間違っているのか分かりません。わかる方教えていただきたいです。

発生している問題・エラーメッセージ

TypeError: undefined is not an object
(evaluating '_asyncStorage.AsyncStorage.getAllKeys')

TypeError: undefined is not an object
(evaluating '_asyncStorage.AsyncStorage.setItem')

該当のソースコード

import { AsyncStorage } from '@react-native-async-storage/async-storage';

export const save = async (text, createdAt) => {
  try {
  const key = `${createdAt}`; 
  const value = JSON.stringify({
    text,
    createdAt,  
  });
  await AsyncStorage.setItem(key, value); 
  } catch (e) {
    alert (e)
  }
};

export const loadAll = async () => {   
  try {
  const keys = await AsyncStorage.getAllKeys();
  keys.sort();   
  const entryList = await AsyncStorage.multiGet(keys);
  return entryList.map(entry => JSON.parse(entry[1]));   
  } catch (e) {
    alert(e)
  }
};

メイン画面

import React from 'react';
import { StyleSheet, View, FlatList } from 'react-native';
import { List, FAB } from 'react-native-paper';
import format from 'date-fns/format';
import { useNavigation } from '@react-navigation/native';
import { useState,useEffect } from 'react';
import { loadAll } from './store.js';


export const MainScreen = () => {
  const navigation = useNavigation();
  const [memos, setMemos] = useState([]);

  useEffect(() => {

  const initialize = async () => {
    const newMemos = await loadAll(); 
    setMemos(newMemos);
  };

  const unsubscribe = navigation.addListener('focus', initialize); 

  return unsubscribe;
  }, [navigation]);

  const onPressAdd = () => {
    navigation.navigate('Compose'); 
  };

  return (
    <View style={styles.container}>
      <FlatList
        style={styles.list}
        data={memos} 
        keyExtractor={item => `${item.createdAt}`}
        renderItem={({ item }) => (
          <List.Item
            title={item.text}
            titleNumberOfLines={5}
            description={
              `作成日時: ${format(item.createdAt, 'yyyy.MM.dd HH:mm')}` // (2)
            }
            descriptionStyle={{ textAlign: 'right' }}
          />
        )}
      />
      <FAB
        style={{
          
          position: 'absolute',
          right: 16,
          bottom: 16,
        }}
        icon="plus"
        onPress={onPressAdd}
      />
    </View>
  );

  
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  list: {
    flex: 1,
  },
});

構成画面

import React, { useState } from 'react';
import {  StyleSheet,
    KeyboardAvoidingView,
    Platform
 } from 'react-native';
import { TextInput, Button } from 'react-native-paper';
import { useNavigation } from '@react-navigation/native';
import { save } from './store.js';

export const ComposeScreen = () => {
    const [ text, setText ] = useState('');
    const navigation = useNavigation();

    const onPressSave = async () => {
            await save(text, Date.now()); 
            navigation.goBack(); 
             };    
     
  return (
    <KeyboardAvoidingView 
      style={styles.container}
      behavior={Platform.OS == "ios" ? "padding" : "height"}
    >
      <TextInput
        style={{ marginBottom: 16 }}
        mode="outlined"
        placeholder="メモを入力してください"
        multiline
        onChangeText={(text) => setText(text)}
      />
      <Button
        mode="contained"
        onPress={onPressSave}
      >
        保存
      </Button>
    </KeyboardAvoidingView>
  )
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
  },
});

Answer 1

中括弧なしでimportしたらうまくいきませんでしょうか？？

import AsyncStorage from '@react-native-async-storage/async-storage';

Comments

[shawn.]

やってみたらうまくいきました...！ずっとつまってたのでめちゃくちゃ助かりました、ありがとうございます！