React Native going Native

Shift is a workout app that uses a timer to alternate music during work periods with podcasts during rest periods. Users can listen to Spotify or curated mixtapes, and the app also supports podcast queues and imports. Its workout screen includes timed beeps, spoken alerts, playback controls, and a notification showing the time left and current audio.

Skeie explains that React Native sends information between JavaScript and native code over a bridge. In Shift, changing audio sources involved several back-and-forth calls to pause one player, start another, and update the interface. Headphone controls, beeps, and notifications also relied on bridge communication.

Shift’s background workout timer checked its state every second, sent updates to JavaScript for the interface, and switched audio when the countdown reached zero. It also processed data every 15 seconds, including saving podcast position. The team moved the countdown and timer loop to native code, where a main counter and a Shift Master handled display events, notifications, alerts, automatic switching, and audio players.

Skeie says the native rewrite made the freeze and unfreeze logic simpler to read and easier to debug. The team made the change after three years of maintaining the app, when it understood where the code was hard to reason about. He cautions that native code means maintaining platform-specific features, and says Shift had performed well before the rewrite.

Skeie suggests moving a small problem to native code first, then learning from the experience before expanding the approach. He also recommends reading how React Native packages structure their bridge code and using available resources to learn native interfaces and platform development. He says that understanding native platforms improved his React Native skills.