How I created my first Android game on ReactNative

Hello. I'm Progosling. I'll talk about how I wrote my first mobile game in React Native. It all started when I found free image assets for my game. They inspired me to create the game. Here are assets of water, boat, fisherman and clouds.

React-native has a number of community-recognized libraries that are commonly used to animate the movement of elements. Usually it's: react-native-reanimated and react-native-redash. But not long ago react-native-skia came out. Which offers integration with react-native-reanimated, react-native-redash. It also contains Canvas, which will be the basis of our drawing.

The entire game is built using the <Image> component. In which I change the position of the picture depending on the current frame. How it works? I wrapped <Image /> with <Group /> to make it possible to trim extra frames and display only the current one using the clip props.

This is what the final animation looks like.

Water is an image combined into a group and this group’s position changes depending on the useTiming function. For each water image, the current frame changes depending on useTiming. This makes the water movement animation more interesting.

Animation of the movement of a spoon. Depends on useTouchHandler and simply adds +10 or -10 to the position of the boat depending on which side of the screen the user clicked. The boat rowing animation is also launched from the useTouchHandler and the runTiming function changes the current frame.

The fish pulling animation is triggered from the useTouchHandler, similar to the boat rowing animation. But in the pulling animation there is a feature in the runTiming function, a callback is added in which the check occurs. If the position of the fishing rod and the position of the fish match, then the user receives +1 point. Points are calculated using the usual setState.

Well, the final one is the initial modal window. This is <Modal /> component.

You can rate this game on Google Play and check game site. The name of the game is Fishing Pixel Art. Have you tried making games using react native? What would you recommend changing and optimizing?