Back to Blog

Building Perfect Shape Fit: Tangram silhouette puzzles in React Native

•Emmanouil Athanasopoulos•1 min read•186 words
React NativeExpoGeometryTangramMobile

The Motivation Behind the Project

Perfect Shape Fit challenges players to piece together geometric polygon shapes to fill intricate silhouette frames of animals and art. It was designed to promote spatial reasoning in an aesthetically calm environment. Available on the Google Play Store.

Core Features and Design Goals

  • Geometric Art Silhouettes: Over a hundred handcrafted silhouette levels ranging from simple animals to complex art.
  • Rotation & Placement Gestures: Intuitive touch controls for positioning and orienting polygon pieces.
  • Cognitive Skill Building: Enhances visual-spatial recognition and geometric intuition for kids and adults alike.
  • Family Safe: Fully certified child-safe ad configuration with non-personalized G-rated ads.

Technical Implementation

  • Calculated geometric intersection tests and target tolerance thresholds to ensure pieces smoothly snap into valid silhouette cavities.
  • Separated SVG silhouette path rendering from interactive touch canvases to achieve 60fps animations during shape transforms.
  • Configured AdMob request non-personalization and COPPA consent flags globally at app initialization.

The Technology Stack

Built with Expo, React Native, SVG, TypeScript, and RevenueCat integration.

Final Reflections

Tangram puzzles are a masterclass in geometry algorithms and visual polish. The game is live on the Google Play Store.