How can I store state?

[kriptcs]

Greetings!
I have an app where the user can upload their own images from their device. The problem I am running into is that when the user goes to a different view and comes back the uploaded images are gone.
I use expo-image-picker which does most of the stuff for me, just not sure how to transfer the state that I have into the async storage. On the site it says I need a key (the images variable within the state) and a value. But what would the value be?
How would I go about using this feature?

Thanks in advance.

[tamish-max]

The main thing to store is serializable image metadata, not the React state object itself.

With expo-image-picker, a common pattern is:

1. pick the image
2. save the image URI (and maybe file name / width / height) to AsyncStorage as JSON
3. restore that JSON on app start

Example:

const saveImages = async (images: string[]) => {
  await AsyncStorage.setItem('@images', JSON.stringify(images))
}

const loadImages = async () => {
  const raw = await AsyncStorage.getItem('@images')
  return raw ? JSON.parse(raw) : []
}

One important Expo-specific detail: picker URIs can point to a temporary cache location. If you want the image to survive app restarts reliably, copy it into a persistent app directory first (for example with expo-file-system), then store that URI.

So the shape is usually:

[{ uri: 'file:///...', fileName: 'photo.jpg' }]

not the actual binary image bytes in AsyncStorage.

AsyncStorage is great for small metadata. The image file itself should stay on the filesystem.