React Native AsyncStorage

Question

I want to save houses in an array using AsyncStorage. Each array element represents a house Object. And each house object has a latitude, longitude and a house number. I am not sure how to go about representing this. It seems to me that AsyncStorage is not well-suited for saving dynamic objects that can be updated programmatically. I want to be able to add more houses and delete some houses. Basically what I am trying to do is bookmark some houses and delete them from the bookmarks when the user clicks. Can anyone help ?

Answer 1

AsyncStorage is absolutely perfect for this.

Starting with the structure of your houses, I would create an Array which stores objects representing an individual house.

const houses = [
  {
    number: 1,
    latitude: 51.5033,
    longitude: -0.119519
  }
]

Saving to AsyncStorage

When you want to write your collection to AsyncStorage, you would do so like this:

AsyncStorage
  .setItem('@houses', JSON.stringify(houses))
  .then(houses => console.log(houses)

static setItem(key: string, value: string, callback?: ?(error: ?Error) => void)

You can also use async/await if your project is set up to support it.

Reading from AsyncStorage

Reading your collection back from AsyncStorage is simply done via:

AsyncStorage
  .getItem('@houses')
  .then(houses => console.log(JSON.parse(houses)))

You could set the response in your state, do as you please.

Deleting a specific house

This depends entirely on how you set your app up. Are you going to map through each house and create a list component for example?

(Sorry about losing the border on the right)

If so, you could:

houses.map(house => (
  <View>
   <Text>Number: {house.number}</Text>
   <Text>Latitude: {house.latitude}</Text>
   <Text>Longitude: {house.longitude</Text>
   <Button onPress={() => this.deleteHouse(house.number)}/>
  </View>
));

Then create a deleteHouse function which will handle it.

const deleteHouse = (number) => {
  const { houses } = this.state; // Assuming you set state as previously mentioned
  const newHouses = houses.filter((house) => house.number != number);
  this.setState({houses: newHouses}, () => saveHouses);
}

And finally a saveHouses to sync it back to AsyncStorage. The function will clear AsyncStorage and then save the new houses.

const saveHouses = () => {
  const { houses } = state;
  AsyncStorage
    .removeItem('@houses')
    .then(() => {
      AsyncStorage
        .setItem('@houses', JSON.stringify(houses))
        .then(houses => console.log(houses)
    });
}