How to hang a painting on the wall with React Native

Pavlo compares Viro, Expo’s iOS AR support, VeryActive ARKit, UserARKit, and early ARCore projects. For the demo, he chooses React Native ARKit, describing it as open source and feature-rich while noting that other options have limitations or are not production-ready.

The app needs a React Native project with native iOS files, ARKit dependencies, and camera permission. Pavlo starts with a painting displayed one meter in front of the camera, then uses plane detection and hit testing to place it in the scene with the correct position and orientation.

Pavlo says ARKit can struggle to detect vertical planes on plain, low-contrast walls because it has too few feature points. His workaround asks users to touch the phone to the wall, using the phone’s position to place the painting without waiting for plane detection.

The app adds controls to remove a painting and drag it across the wall using gesture tracking and object hit tests. Users can choose among paintings, but image files must first be available locally; grouping the painting and its caption lets them move together.

A snapshot feature saves the AR scene as a real-world photo with the virtual painting, without the app’s controls. Pavlo closes by encouraging contributions to open-source AR libraries, including work toward React Native ARCore support.