iOS Native Components

Properties

The important thing one can do to make this native component more usable is to bridge over some native properties.

// RNTMapManager.m
RCT_EXPORT_VIEW_PROPERTY(zoomEnabled, BOOL)

You can also try this code with Online Javascript Compiler

Run Code

To disable zooming, set the property as follows.

// MyApp.js
<MapView zoomEnabled={false} style={{ flex: 1 }} />

You can also try this code with Online Javascript Compiler

Run Code

Documentation of the Properties

// MapView.js
import PropTypes from 'prop-types';
import React from 'react';
import { requireNativeComponent } from 'react-native';

class MapView extends React.Component {
 render() {
   return <RNTMap {...this.props} />;
 }
}
MapView.propTypes = {
 /**
  * A Boolean value that determines whether the user may use pinch
  * gestures to zoom in and out of the map.
  */
 zoomEnabled: PropTypes.bool
};
var RNTMap = requireNativeComponent('RNTMap');
module.exports = MapView;

You can also try this code with Online Javascript Compiler

Run Code

Events

Users can't add new properties to MKMapView, so they have to add a new subclass from MKMapView, which they use for one's view. They  can then add an onRegionChange callback on a new subclass:

// RNTMapView.h
#import <MapKit/MapKit.h>
#import <React/RCTComponent.h>
@interface RNTMapView: MKMapView
@property (nonatomic, copy) RCTBubblingEventBlock onRegionChange;
@end
// RNTMapView.m
#import "RNTMapView.h"
@implementation RNTMapView
@end

You can also try this code with Online Javascript Compiler

Run Code

Declaration of an Event Handler

The next step is to declare an event handler property on RNTMapManager, make it a delegate for all the views it creates, and forward events to JS by calling the event handler block from the native perspective.

// RNTMapManager.m

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

#import "RNTMapView.h"
#import "RCTConvert+Mapkit.h"

@interface RNTMapManager : RCTViewManager <MKMapViewDelegate>
@end

@implementation RNTMapManager

RCT_EXPORT_MODULE()

RCT_EXPORT_VIEW_PROPERTY(zoomEnabled, BOOL)
RCT_EXPORT_VIEW_PROPERTY(onRegionChange, RCTBubblingEventBlock)

RCT_CUSTOM_VIEW_PROPERTY(region, MKCoordinateRegion, MKMapView)
{
    [view setRegion:json ? [RCTConvert MKCoordinateRegion:json] : defaultView.region animated:YES];
}

- (UIView *)view
{
  RNTMapView *map = [RNTMapView new];
  map.delegate = self;
  return map;
}

#pragma mark MKMapViewDelegate

- (void)mapView:(RNTMapView *)mapView regionDidChangeAnimated:(BOOL)animated
{
  if (!mapView.onRegionChange) {
    return;
  }

  MKCoordinateRegion region = mapView.region;
  mapView.onRegionChange(@{
    @"region": @{
      @"latitude": @(region.center.latitude),
      @"longitude": @(region.center.longitude),
      @"latitudeDelta": @(region.span.latitudeDelta),
      @"longitudeDelta": @(region.span.longitudeDelta),
    }
  });
}
@end

You can also try this code with Online Javascript Compiler

Run Code

Styles

The native react views are subclasses of UIView; most style attributes will work like the user would expect something extraordinary. Some components will want a default style; however, UIDatePicker is a fixed size. This default style is essential for the layout strategy to work as demanded, but users also want to be able to override the default style while using the component. DatePickerIOS does this by wrapping the native part in an extra view, providing flexible styling, and using a fixed technique on the inner native part:

// DatePickerIOS.ios.js
import { UIManager } from 'react-native';
var RCTDatePickerIOSConsts = UIManager.RCTDatePicker.Constants;
...
  render: function() {
    return (
      <View style={this.props.style}>
        <RCTDatePickerIOS
          ref={DATEPICKER}
          style={styles.rkDatePickerIOS}
          ...
        />
      </View>
    );
  }
});
var styles = StyleSheet.create({
  rkDatePickerIOS: {
    height: RCTDatePickerIOSConsts.ComponentHeight,
    width: RCTDatePickerIOSConsts.ComponentWidth,
  },
});

You can also try this code with Online Javascript Compiler

Run Code

Frequently asked questions

Define iOS MapView.

Native views are extracted and manipulated by subclasses of RCTViewManager.

Explain styles as a native component.

The native react views are subclasses of UIView; most style attributes will work like the user would expect something extraordinary.

How to declare an event handler?

To declare an event handler property on RNTMapManager, make it a delegate for all the views it creates, and forward events to JS by calling the event handler block from the native perspective.

Define Events.

Users can't add new properties to MKMapView, so they have to add a new subclass from MKMapView, which they use for one's view.

How to make a native component more usable?

The important thing one can do to make this native component more usable is to bridge over some native properties.

Key Takeaways

Congratulations on finishing the blog!! After reading this blog, you will grasp the concept of the iOS native components.

If you are preparing yourself for the top tech companies, don't worry. Coding Ninjas has your back. Visit this link for a well-defined and structured material that will help you provide access to knowledge in every domain.

Happy Learning!!