iOS 17 Widgets in React Native

Documentation is lacking on this niche setup

It’s only been a couple weeks since Apple has released iOS 17. I’ve been building a React Native application in the six-figure MRR range for about 6 months now.

We’re at the point where native iOS widgets would be very useful to our users. One thing has been holding me back until iOS 17 though.

Interactive widgets!

After so many years of widgets, Apple has never allowed interactivity. You must open the app, and widgets refresh so slowly… about a max of 1 time per 15 minutes in my experience.

This all changes in iOS 17, we can now trigger interactive updates with refresh intents and more.

Our application lets users view things that update pretty frequently, as much as every few seconds, so having this interactive ability is very useful.

To make this even better, we do plan to add Live Activity support soon.

Key Problems

When you start attempting to add a widget extension to a React Native app, there are really two things you must learn.

The first one is learning Swift + SwiftUI so that you can code widgets to look and feel how you want.

The second issue is syncing data from your application into your Swift code. If you haven’t done this before, you might be wondering why this is necessary. For us, our widgets are dependent upon the logged in user, so we need to sync a cookie across to the native app extension or else it’s impossible to make any widgets.

Let’s get started by setting up the required native extensions, and a special container to sync our auth data from React Native.

For the first few weeks, my tutorials are for my paid subscribers only. You can subscribe for free and view it after that time. I put a lot of effort into these posts, so I hope you understand :)