iOS Native UI Component NOT rendering

Hi all,

I followed the guide in Native UI Component to create a custom native UI that I want to render in JS. I generated a brand new project with react-native init CustomUI and then followed the instructions in the doc.

The example in the doc uses MKMapView and I’ve wrapped this view as a sub view to MyCustomUI class as explained in this issue. Then I return MyCustomUI view in the MyCustomUIManager class.

Then I try to grab my view in index.ios.js file with the requireNativeComponent("MyCustomUI", MyCustomUIView) method.

However, when I run the app. Nothing is being rendered, I just get a blank background. I also tried not wrapping the MKMapView and return it directly from MyCustomUIManager and that didn’t work either.

I’ve a repo setup here if you guys want to try and run it

Environment

1. react-native -v: 0.46.4
2. node -v: 6.10.2
3. npm -v: 3.10.10

• Target Platform: iOS 10+
• Development Operating System: Mac OSX 10.12.4

Code

// MyCustomUI.h

#import <UIKit/UIKit.h>

@interface MyCustomUI : UIView
@end

// MyCustomUI.m

#import "MyCustomUI.h"
#import <MapKit/MapKit.h>

@implementation MyCustomUI

-(instancetype)init {
  self = [super init];
  if (self) {
    [self setUp];
  }  
  return self;
}

-(void) setUp {
  NSLog(@"Map Setup");
  MKMapView * map = [[MKMapView alloc] init];
  [self addSubview:map];
}

@end

// MyCustomUIManager.h

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

@interface MyCustomUIManager : RCTViewManager

@end

// MyCustomUIManager.m

#import "MyCustomUIManager.h"
#import "MyCustomUI.h"

@implementation MyCustomUIManager
@synthesize bridge = _bridge;

RCT_EXPORT_MODULE()

- (UIView *)view
{
  MyCustomUI * myUi = [[MyCustomUI alloc] init];
  return myUi;
}

@end

// index.ios.js

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


// Get MyCustomUI 

var MyCustomUI = requireNativeComponent('MyCustomUI', MyCustomUIView);

class MyCustomUIView extends Component {
  render() {
    return <MyCustomUI {...this.props} />;
  }
}

MyCustomUIView.propTypes = {
  
};



export default class CustomUI extends Component {
  render() {
    return (
      <View style={styles.container}>
        <MyCustomUIView style={styles.custom} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
  custom: {
    flex: 1,
  }
});

AppRegistry.registerComponent('CustomUI', () => CustomUI);

[jackwzp]

@reilem thanks for the help. I was able to get it working. I had to set the frame of the subviews in layoutSubviews. Another way I found also works was to initialize the MKMapView with initWithFrame method, then I don’t need to override the layoutSubviews class.

Method 1

// MyCustomUI.m
// No longer need to override layoutSubviews method
- (void) setMap {
  MKMapView * map = [[MKMapView alloc] initWithFrame:CGRectMake(0, 0, 200, 300)];
  [self addSubview:map];
}

Method 2

// MyCustomUI.m
// Create MKMapView with just init method works with this
- (void) layoutSubviews {
  [super layoutSubviews];  
  for(UIView* view in self.subviews) {
    [view setFrame:self.bounds];
  }
}

[jgfidelis]

@bangnguyensea did you ever figure it out? I am having this problem with a view as well