How to save an array of Items in AsyncStorage React Native?

Question

What i want to make is a bookmark list, but i don't know how i can save an array of items in AsyncStorage, my skills are basic on react.

I just need the function to save posts (post image, title and id) when i press the button "Save to bookmark".

export default class PostDetails extends Component {

constructor(props) {
   super(props);
   const {params} = props.navigation.state;
   this.state = {
     item: params.item
   };
}

render() {

   const {item} = this.state;  

   return (

   <Image source={{uri: item.post_image}}/>

   <Text> {item.post_id} </Text>
   <Text> {item.post_title} </Text>

   <Button>
      <Text> Save to Bookmark </Text>
   </Button>

    );
  }
}

Anthony · Accepted Answer · 2018-05-08 23:21:59Z

4

I think you want to use JSON.stringify(arrayToSave); see the docs for JSON.stringify(). It will convert the array to a JSON string that can be saved to AsyncStorage and then can be retrieved at a later stage.

const saveBookmarks = async (bookmarksArray) => {
  try {
    const bookmarksString = JSON.stringify(bookmarksArray);
    await AsyncStorage.setItem('@MyStore:bookmarks',bookmarksString);
  } catch (error) {
    // Error saving data
  }
};

<Button onClick={() => saveBookmarks(yourArray)} />

To retrieve it you can use const theSavedArray = JSON.parse(stringFromAsyncStorage); the docs for JSON.parse()

try {
  const bookmarksString = await AsyncStorage.getItem('@MyStore:bookmarks');
  if (bookmarksString !== null){
    // We have data!!
    const bookmarksArray = JSON.parse(bookmarksString);
  }
} catch (error) {
  // Error retrieving data
}

edited May 8, 2018 at 23:21

answered May 8, 2018 at 23:00

Anthony

6,5122 gold badges20 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

bdroid Over a year ago

you don't have an example please?

bdroid Over a year ago

but how i can include the posts details in the first function? sorry never i use the asyncstorage

Anthony Over a year ago

It is not clear from the question where your array comes from so I have just placeholders in there

bdroid Over a year ago

ok i resolve it, how i can get the bookmark list in FlatList component?

Matt Aft Over a year ago

What's not complete? your question only asks how to save items to asyncStorage, @Tony 's answers shows how to save & retrieve them.

|

Collectives™ on Stack Overflow

How to save an array of Items in AsyncStorage React Native?

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related