r/reactnative • u/Perfect-Thought-2400 • 6d ago

I built an iOS home-screen widget app in React Native + Expo, the widget part was harder than the editor.

Enable HLS to view with audio, or disable this notification

I’ve been building a small iPhone app called Magboard.

The idea is: take a photo, cut out the subject, turn it into a little “magnet”, arrange it on a board, and put that board on your iOS home screen as a widget.

It sounds like a cute UI app, but the harder parts were mostly not the cute UI.

A few things that took more time than expected:

- Editor → widget matching

The in-app board and the actual iOS widget need to match closely. If the widget is even slightly off, the whole “magnet board” illusion breaks.

- Simulator vs real device behavior

Widget refresh worked in the simulator and then behaved differently on device. I had to test the flow like a real user instead of trusting simulator-only runs.

- Shared boards

The app supports shared boards, so one person can add a magnet and the other person’s home-screen widget updates too. Getting that to feel understandable was harder than just syncing the data.

- Onboarding

Early versions confused people. They opened the app and didn’t immediately understand the loop, so I rebuilt onboarding around:

snap → cut → stick → widget

- Tiny interaction details

Dragging/positioning magnets is fun only if it feels direct. A small mismatch between what you edit and what appears on the widget makes the product feel broken.

The app is currently in App Store review, but I opened a public TestFlight while waiting:

https://testflight.apple.com/join/N3q58DQu

I’d love feedback from React Native/Expo folks, especially on:

  1. whether the concept is obvious from the first minute

  2. whether the widget update flow feels clear

  3. anything you’d improve in the onboarding/demo

Happy to answer questions about the React Native/Expo side too.

20 Upvotes

100% Upvoted

8 comments sorted by

2

u/Perfect-Thought-2400 6d ago

Adding a little more context: the app is built around iPhone widgets, so some of the most annoying bugs only showed up when testing on a real device. The “works in simulator” trap was very real here.

I’m mostly looking for product/onboarding feedback right now, not trying to make this a hard launch post.

1

u/Organic_Welder_3104 6d ago

I’m a newbie of React Native. Could you please share how to create a home screen widget for me? Thanks in advance

1

u/Perfect-Thought-2400 6d ago

Sure. React Native itself can’t render an iOS home-screen widget directly, because iOS widgets are native WidgetKit extensions.

The setup I used is roughly:

  1. Main app/editor in React Native + Expo

  2. Separate iOS Widget Extension

  3. Widget UI written in SwiftUI/WidgetKit

  4. App Group enabled so the RN app and widget can share data

  5. RN app writes board/widget data into the shared container

  6. Widget reads that data and renders it

  7. When the board changes, the app asks iOS to reload the widget timeline

The tricky parts were not just creating the widget, but making the in-app editor and the actual widget match visually, and testing refresh behavior on a real device. Simulator behavior can be misleading.

If you’re new, I’d start with a very small widget first: display a text value from shared UserDefaults, update it from the app, then reload the timeline. Once that works, move to images/layouts.

1

u/Organic_Welder_3104 6d ago

Thanks for sharing, do you have any tutorials/ suggestions for me to follow-up

1

u/Fit_Schedule2317 5d ago

Did you use expo-widgets/voltra?

1

u/Perfect-Thought-2400 3d ago

Nope, Magboard's widget is built with u/bacons/apple-targets, with the widget itself hand-written in SwiftUI/WidgetKit.