2

I am trying to develop a puzzle box game for my daughter using React Native. The goal is to divide an image to 2x2, 3x3 or 4x4 boxes and jumble them. The user then arranges them accordingly and if they are the right order, the game is done. Instead of dividing the image, the idea is to position the image in each box accordingly. But I am struggling to show a piece of image using React native Image or BackgroundImage component. Any suggestions ?

For example, in the below image, I wanted to display 4 image boxes and position the image accordingly. I have the logic for the game and the place where I am stuck is how to display the correct image in the appropriate box. There are two options:

  • Divide the image into 4 parts using some library and render the image in the box. This will be costly operation as it involves image processing.
  • Render the image in the Image component and adjust the position of the image. For example, for box 4, position the image in such a way that the bottom right part is only visible. But I need some help here.

enter image description here

This is what I have been trying.

<View
style={{
    width: 100,
    height: 100,
    overflow: "hidden",
    borderColor: "red",
  }}
>
  <Image
    source={source}
    style={{
      height: 100,
      width: 100,
      top: 0,
      left: 50,
    }}
  />
</View>
Kiran Joshy
  • 105
  • 10

1 Answers1

0

I think you can set images in an array when it sorted by right order game is done.

don't do one image in piece take piece of one image

Umer Arain
  • 17
  • 2