Building a React-Native Today Widget in iOS

Maxim Toyberman
May 30, 2018 · 4 min read

I am writing this tutorial after struggling days with “Unable to load” errors that were caused by memory limit of a Today widget that is 16 MB.

A lot of credit goes to David Skaarup His story really helped me getting started with this project. I also want to credit matejkriz for his examples.

1. Add Today Extension Target to your React Native App

Go to File > New > Target… and select Today Extension. and give it a name, I have called it AITodayWidget.

You can see the new widget in your project navigator and in your targets.(you will see only TodayViewController.h TodayViewController.m and and MainInterface.storyboard .

2. Modify the Today Widget Info.plist

First create App Transport Security Settingsand add Allow Arbitrary Loads.
Then set TodayViewController as the NSExtensionPrincipalClass under NSExtension and remove NSExtensionMainStoryboard.

delete theMainInterface.storyboard frin “Copy Bundle Resources” phase.

3. Add Linker Flags

In the Build Settings of the Today Widget add -ObjC and -lc++ linker flags.

4. Create index.widget.js in the same location where index.js.

5. Add New Run Script Phase

Under Build Phases in the Today Widget add a new Run Script Phase.

Name it Bundle React Native code and images (this is the same as in your main app target). Then add the following, which is also defined in the main app target:

6. Add React Native Libraries

Now add all the React Native libraries to the widget target’s Build Phases in Link Binary with Libraries.

7. Modify the TodayViewController.m like this

8. Add DisplayMode.h DisplayMode.m Linking.h Linking.m from (right button to the target and then “Add files to…”)

9.And now for the most important part:

create index.widget.js and register your app.

I have seen many examples where it is written to register the widget in index.js.

This is wrong, because of the memory limitation, if your app is big the widget won’t work.

so creating a different file index.widget.js and supplying it in the Bundle React Native code and image will bundle only the relevant files.

I hope this tutorial was helpful, Thank you for reading.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade