til / dynamic island and live activities in react native

Dynamic Island and Live Activities, are two new iOS features that allow us to display up-to-date information from an app at a glance. The Dynamic Island is an interactable UI element that’s placed on top of the black cut out area where the front facing camera and sensors are placed. Currently, Dynamic Island is only available on:

• iPhone 14 (only iPhone Pro and iPhone Pro max)
• iPhone 15 (all models)
• iOS >= 16.1

The iPad will get Live Activities in iPadOS 17.

Findings #

These are some things I found while researching and doing a proof of concept in React Native.

• The integration with React Native is fairly simple. We create a native module that we can call from React Native and then use Swift on the native side to style the Dynamic Island. ^{1 2}

• It’s not great from a UX perspective since it’s placed in a hard-to-reach location and people prefer to use their phone with one hand.³

• According to Apple’s best practices for using Live Activities, we should use the feature for tasks or live events that have a defined beginning and end. The Live Activity should not exceed eight hours and should always end as soon as the event ends.

• The best practices also suggest that it should exclusively be used for essential content (no sensitive information). The content should be a summary of the current task.

• Interactable elements inside the Live Activity, like buttons or toggles, will be available in iOS and iPadOS >= 17