Widget iOS 14 create the ui with react native using swift ui

Viewed 2545

Widget example in iOS:

enter image description here

Example of the react-native(js) code written below:

enter image description here

import React from 'react';
import { Text, View, NativeModules } from 'react-native';
var Widget = NativeModules.Widget;

const App = () => {
  return (
    <Widget>
      <View
        style={{
          justifyContent: 'center',
          alignItems: 'center',
          backgroundColor: '#dee1e3',
          borderRadius: 4,
        }}>
        <Text>San Francisco</Text>
        <Text style={{ fontSize: 30 }}>62°F</Text>
      </View>
    </Widget>
  );
};

export default App;

There is still not much documentation on creating widgets with Swift ui for iOS 14.

It wouldn't seem that difficult to create a widget using Swift ui, but there isn't much information.

So I thought it would be interesting to develop the ui using react-native and use swift ui just to create the widget for iOS.

Idea is this, everything inside the tag (let's call it that) <Widget> (hence its child) should be the content of the Widget.

I did not find anything in the documentation, I was wondering exists in Swift ui or something for iOS, to use child content as UI for app.

Surely such a thing will be impossible, but dreaming costs nothing.

2 Answers

Currently the only possibility is to create the Widget native in SwiftUI. Probably in the future https://github.com/react-native-community will create an extension to support iOS Widgets with React-Native.

I've created a small library to support the functionality of WidgetKit. https://github.com/fasky-software/react-native-widgetkit

In combination with https://medium.com/groww-engineering/adding-widget-for-react-native-app-in-ios-14-with-swiftui-fd04ff181d33 you should be able to create a widget with a RN App :)

What you can do is

  1. clean the project.
  2. make sure it's running correctly without adding widget
  3. Follow the picture

what to edit

  1. in the library search paths, change 5.0 to 5.2

"$(TOOLCHAIN_DIR)/usr/lib/swift-5.0/$(PLATFORM_NAME)"

To

"$(TOOLCHAIN_DIR)/usr/lib/swift-5.2/$(PLATFORM_NAME)"

That should fix it, if it didn't create new app in react native and make sure to follow these steps, worked for me after hours of searches.

Related