From 7bedb7bb280838c27ffd1e2ca04e08b80fbc0171 Mon Sep 17 00:00:00 2001 From: Website Deployment Script Date: Mon, 9 Jan 2017 09:42:52 +0000 Subject: [PATCH] Updated docs for next --- releases/next/docs/native-components-ios.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/releases/next/docs/native-components-ios.html b/releases/next/docs/native-components-ios.html index 3d07a9aae7c..b392c6b485a 100644 --- a/releases/next/docs/native-components-ios.html +++ b/releases/next/docs/native-components-ios.html @@ -1,7 +1,7 @@ Native UI Components
React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Android)

components

apis

Native UI Components #

There are tons of native UI widgets out there ready to be used in the latest apps - some of them are part of the platform, others are available as third-party libraries, and still more might be in use in your very own portfolio. React Native has several of the most critical platform components already wrapped, like ScrollView and TextInput, but not all of them, and certainly not ones you might have written yourself for a previous app. Fortunately, it's quite easy to wrap up these existing components for seamless integration with your React Native application.

Like the native module guide, this too is a more advanced guide that assumes you are somewhat familiar with iOS programming. This guide will show you how to build a native UI component, walking you through the implementation of a subset of the existing MapView component available in the core React Native library.

iOS MapView example #

Let's say we want to add an interactive Map to our app - might as well use MKMapView, we just need to make it usable from JavaScript.

Native views are created and manipulated by subclasses of RCTViewManager. These subclasses are similar in function to view controllers, but are essentially singletons - only one instance of each is created by the bridge. They vend native views to the RCTUIManager, which delegates back to them to set and update the properties of the views as necessary. The RCTViewManagers are also typically the delegates for the views, sending events back to JavaScript via the bridge.

Vending a view is simple:

  • Create the basic subclass.
  • Add the RCT_EXPORT_MODULE() marker macro.
  • Implement the -(UIView *)view method.
// RCTMapManager.m #import <MapKit/MapKit.h> -#import "RCTViewManager.h" +#import <React/RCTViewManager.h> @interface RCTMapManager : RCTViewManager @end