Search⌘ K
AI Features
Home
Courses
Simplifying State Management in React Native

Managing the Image in the Image Modal

Explore how to handle image state management within an ImageDetailsModal using XState in React Native. Learn to track the currently viewed image, manage modal open and close actions, and check image liked status with selectors to update the UI accordingly.

We'll cover the following...

We have ourselves a nice setup—we’re fetching images and feeding them to the app. Our app is rather static, though. We need a way to add new images to the liked images array. We would also like to check whether an image is liked so that we can display the proper icon in ImageDetailsModal.

Checking for liked images

If we want to know whether an image should be liked or unliked, we first need to know whether it’s liked. But even before we can know whether an image has been liked, we need to know all the data pertinent to that image. We will add a new item to the context of the likeImagesMachine machine: currentImage:

Javascript (babel-node)
// Define a state machine for managing liked images
export const likeImagesMachine = createMachine({
  id: "likeImagesMachine",
  context: {
    likedImages: [],    // Array to store liked images
    currentImage: null, // Variable to track the current image
  },
  //... (other machine configuration)
});

This is where we will store information on the currently viewed image. The ...