Fruity

• 

  Banner

• 

  Icon

• 

  Welcome screen

• 

  Gameplay

• 

  Game Over screen

Inspiration

The game is based on my WhiteHat Junior project, which was inspired by my childhood favorite, "Fruit Ninja." It’s now been recreated in React Native, while the original version was built entirely with JavaScript and p5.js.

What it does

Players slice fruits to earn points and dodge bombs. If a fruit is missed, one life is lost, and when all three lives are gone, the game ends. Players can slice life fruits to restore lives, with each life fruit granting one extra life.

How we built it

The original game used p5.js and matter.js, while this version uses @shopify/react-native-skia for canvas rendering and sprite drawing (similar to p5.js functionality) and matter.js for handling physics shapes and coordinates, with react-native-reanimated serving as the bridge between the two.

Challenges we ran into

I’m new to the React Native ecosystem, but fun fact—all the libraries I used in my original game are supported here. Getting p5.js to work was a bit challenging, but @shopify/react-native-skia is well-documented and very performant, so it filled that gap nicely. Still, it was a bit tricky to get everything working. In Expo and React Native, there are two threads—one for JS and one for the native UI—so that made things a bit harder for me.

Accomplishments that we're proud of

I successfully recreated my favorite project with stateful gameplay.

What we learned

Skia graphics and Reanimated and how to develop performant games in expo using @shopify/react-native-skia, react-native-reanimated and matter.js

What's next for Fruity

Add settings for FX and background music, add light & dark modes and local storage for settings and high score.

Built With

• expo.io
• matter.js
• react-native
• skia
• typescript