React-native: [iOS] Today widget extension using React Native

[rclai]

I'm trying to get an iOS Today widget working using React Native components by following the stuff happening on this issue.

I got it to work on the iOS simulator, but it doesn't work on an actual phone.

If anyone from the React Native team can look at this, it would be awesome. It is the minimal amount of stuff to getting a Today widget up and running showing a "Hello World" React component.

https://github.com/rclai/React-Native-Today-Widget

Also a Product Pains post.

Stack Overflow post.

[DanielMSchmidt]

@facebook-github-bot stack-overflow

[ghost]

Hey @rclai and thanks for posting this! @DanielMSchmidt tells me this issue looks like a question that would be best asked on StackOverflow. StackOverflow is amazing for Q&A: it has a reputation system, voting, the ability to mark a question as answered. Because of the reputation system it is likely the community will see and answer your question there. This also helps us use the GitHub bug tracker for bugs only. Will close this as this is really a question that should be asked on SO.

[umhan35]

@DanielMSchmidt Why would this issue be a question that would be best asked on StackOverflow? I think it is actually a feature request or bug of React Native.

[DanielMSchmidt]

@umhan35 I thought fixing or explaining a bug in an application would be more of a StackOverflow kind of question, in contrast to a very specific code snippet, that causes an error or misbehaviour. As a product pains post is attached, StackOverflow seemed like the right place.

[umhan35]

@DanielMSchmidt oh, thanks for explaining. @rclai actually has the steps to reproduce in the README file (https://github.com/rclai/React-Native-Today-Widget#readme). The simple Today extension works in simulator but not on a physical iphone. XCode doesn't print out any debug information neither and there seems no way to attach the widget process.

[DanielMSchmidt]

@facebook-github-bot reopen

[rclai]

It did not re-open.

[rclai]

Is this reopening?

[umhan35]

@DanielMSchmidt is probably busy. I would be great to use RN to write widget UI. I'm now just using objective-c code but really miss writing in JavaScript. Also, I'm still trying to see how to get data from AsyncStorage...

[umhan35]

@DanielMSchmidt Can you reopen this issue?

[eladmoshe]

+1 for reopening the issue @DanielMSchmidt

[sirnacnud]

I'm interested in accessing AsyncStorage from a Today Widget or how to properly share data between a React Native App and a Today Widget.

[DanielMSchmidt]

@facebook-github-bot reopen

[lacker]

Hey, I don't think we should leave this open indefinitely, because React Native doesn't intend to support Today widgets. So this is not a bug, but rather a feature request. Product pains is a reasonable place to put feature requests but this has not gotten so many upvotes that I would specifically go find some folks to work on it. So, I think this would be a useful feature for someone to add or a useful external library to build, but we should not consider it a responsibility of the core RN library to fix this. I'm going to close this issue for these reasons. But, if this not working tracked down to a bug in React Native, or if someone had a pull request to improve it with this functionality, I think either of those would be great.

[dewski]

For those still looking to get this working, I found these steps to be of help:

1. Make sure Linked Frameworks and Libraries in the General tab includes all of the same libraries the main application includes.

1. Other Linker Flags in Build Settings has both -ObjC and -lc++ (may not be needed? I needed it, could have been for a library I was using)
2. You register a new component:

'use strict'

import React, { Component } from 'react'
import {
  AppRegistry,
  Text,
  View
} from 'react-native'

import App from './js/App'

class TodayExtension extends Component {
  render() {
    return (
      <View>
        <Text>
          Hello World!
        </Text>
      </View>
    )
  }
}

AppRegistry.registerComponent('App', () => App)
AppRegistry.registerComponent('TodayExtension', () => TodayExtension)

1. Your main view controller looks something close to this:

#import "TodayViewController.h"
#import <NotificationCenter/NotificationCenter.h>
#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>

@interface TodayViewController () <NCWidgetProviding>

@end

@implementation TodayViewController

- (void)loadView {  
  NSURL *jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];

  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"TodayExtension"
                                               initialProperties:nil
                                                   launchOptions:nil];
  self.view = rootView;
}

- (void)viewDidLoad {
  [super viewDidLoad];
  // This is required in order for there to be space for
  // the React Native stuff to show up
  [self setPreferredContentSize:CGSizeMake(0, 400)];
}

- (void)widgetPerformUpdateWithCompletionHandler:(void (^)(NCUpdateResult))completionHandler {
    // Perform any setup necessary in order to update the view.

    // If an error is encountered, use NCUpdateResultFailed
    // If there's no update required, use NCUpdateResultNoData
    // If there's an update, use NCUpdateResultNewData

    completionHandler(NCUpdateResultNewData);
}

@end

[rclai]

Thanks @dewski I'll have to give that a try.

Also, linking to this issue as the continuation of your post.

[matejkriz]

The memory limit for Today Widget on device is 16 MB. (Great explanation is in this talk by Conrad Kramer: https://cocoaheads.tv/memory-use-in-extensions-by-conrad-kramer/)

Verified experimentally using XCode debugger - while loading big image, Today Widget crashes as soon as it reaches 16 MB memory usage.

Memory usage of Basic example with just one Text element is about 11 MB. Up to 13 MB during content rendering.

For running Today Widget on device you have to use Release build configuration. Development mode adds too much overhead. Only possibility to run the widget on device in development mode is using Instruments tool to temporarily disable the limit.

Check this library: https://github.com/matejkriz/react-native-today-widget#memory-limitation

It works on device, you just have to think about the memory limits.