Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
iOS MapView
3.
Properties
3.1.
Documentation of the Properties
4.
Events
4.1.
Declaration of an Event Handler
5.
Styles
6.
Frequently asked questions
6.1.
Define iOS MapView.
6.2.
Explain styles as a native component.
6.3.
How to declare an event handler?
6.4.
Define Events.
6.5.
How to make a native component more usable?
7.
Key Takeaways
Last Updated: Mar 27, 2024

iOS Native Components

Author Prachi Singh
1 upvote
Leveraging ChatGPT - GenAI as a Microsoft Data Expert
Speaker
Prerita Agarwal
Data Specialist @
23 Jul, 2024 @ 01:30 PM

Introduction

There are millions of native UI components out there ready to be used in the recent apps - some of them belong to the platform, others are available as third-party libraries, and still, more might be used in users' portfolios. React Native has wrapped most critical platform components, like ScrollView and TextInput. Luckily, one can wrap up these existing components for continuous integration with their React Native application.

 

iOS MapView

Native views are extracted and manipulated by subclasses of RCTViewManager. These subclasses are familiar in function to view controllers but are originally singletons - only one instance of each is created at a time. They outstand native views to the RCTUIManager, which delegates back to set and make the properties of the views mandatory. The RCTViewManagers are also primarily the delegates for the pictures.

// RNTMapManager.m
#import <MapKit/MapKit.h>
#import <React/RCTViewManager.h>
@interface RNTMapManager : RCTViewManager
@end
@implementation RNTMapManager
RCT_EXPORT_MODULE(RNTMap)
- (UIView *)view
{
 return [[MKMapView alloc] init];
}
@end

Then users need Javascript to make it a reusable component.

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

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)

To disable zooming, set the property as follows.

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

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;

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

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

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,
  },
});

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!!

Live masterclass