Why is RPBroadcastPickerView rendering a blank white screen?

Question

Ive created a native iOS module for a react-native (v0.61.5) application. all it does is return the native RPBroadcastPickerView. what i expect is the picker view to be displayed, but only a blank white screen displays in my test.

heres what the native module looks like:

#import <ReplayKit/ReplayKit.h>
#import <React/RCTViewManager.h>

@interface BroadcastPickerManager : RCTViewManager
@end

@implementation BroadcastPickerManager

RCT_EXPORT_MODULE(BroadcastPicker)

- (UIView *)view
{
  return [[RPSystemBroadcastPickerView alloc] init];
}

@end

heres what it looks like in RN

BroadcastPickerView.js:

import { requireNativeComponent, View } from 'react-native'

module.exports = requireNativeComponent('BroadcastPicker')

TestScreen.js:

class TestScreen extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    return (
      <View style={{flex: 1, backgroundColor: 'red'}}>
       <BroadcastPickerView style={{ height: 200, width: 200, backgroundColor: 'blue'}} />
      </View>
    )
  }
}

EDIT: Ive tried setting the frame in native code, as well as setting width/height in javascript. setting native code had no affect. setting height/width in javascript show a view in the background color i choose. not entirely sure what i expect to happen but im guessing the RPBroadcastPickerView isnt a black empty view.

React native docs on native module development found here say this:

Note: Do not attempt to set the frame or backgroundColor properties on the UIView instance that you expose through the -view method. React Native will overwrite the values set by your custom class in order to match your JavaScript component's layout props. If you need this granularity of control it might be better to wrap the UIView instance you want to style in another UIView and return the wrapper UIView instead. See Issue 2948 for more context.

Not sure if im just missing something, but nothing renders when this screen is navigated to. any suggestions?

Answer 1

You need to provide a frame size to the RPSystemBroadcastPickerView:

- (UIView *)view
{
  return [[RPSystemBroadcastPickerView alloc] initWithFrame: CGRectMake(0, 0, 50, 50)];
}

Note that changing the frame property doesn't resize RPSystemBroadcastPickerView (at least on iOS 13). Autolayout doesn't resize the view as well.

You can find a Swift example in the docs:

let broadcastPicker = RPSystemBroadcastPickerView(frame: CGRect(x: 0, y: 0, width: 50, height: 50))