diff --git a/releases/next/docs/native-components-android.html b/releases/next/docs/native-components-android.html index 3bffc3b2684..2a60c8f48f5 100644 --- a/releases/next/docs/native-components-android.html +++ b/releases/next/docs/native-components-android.html @@ -31,7 +31,7 @@ ); }

5. Implement the JavaScript module #

The very final step is to create the JavaScript module that defines the interface layer between Java and JavaScript for the users of your new view. Much of the effort is handled by internal React code in Java and JavaScript and all that is left for you is to describe the propTypes.

// ImageView.js -import { PropTypes } from 'react'; +import PropTypes from 'prop-types'; import { requireNativeComponent, View } from 'react-native'; var iface = { @@ -76,7 +76,7 @@ MyCustomView.propTypes /** * Callback that is called continuously when the user is dragging the map. */ - onChangeMessage: React.PropTypes.func, + onChangeMessage: PropTypes.func, ... }; diff --git a/releases/next/docs/native-components-ios.html b/releases/next/docs/native-components-ios.html index b767ece66a3..edceb58994b 100644 --- a/releases/next/docs/native-components-ios.html +++ b/releases/next/docs/native-components-ios.html @@ -23,7 +23,8 @@ module.exports = requireNativeComponent('RNTMap', null);

This is now a fully-functioning native map view component in JavaScript, complete with pinch-zoom and other native gesture support. We can't really control it from JavaScript yet, though :(

Properties #

The first thing we can do to make this component more usable is to bridge over some native properties. Let's say we want to be able to disable pitch control and specify the visible region. Disabling pitch is a simple boolean, so we add this one line:

// RNTMapManager.m RCT_EXPORT_VIEW_PROPERTY(pitchEnabled, BOOL)

Note that we explicitly specify the type as BOOL - React Native uses RCTConvert under the hood to convert all sorts of different data types when talking over the bridge, and bad values will show convenient "RedBox" errors to let you know there is an issue ASAP. When things are straightforward like this, the whole implementation is taken care of for you by this macro.

Now to actually disable pitch, we set the property in JS:

// MyApp.js <MapView pitchEnabled={false} />

This isn't very well documented though - in order to know what properties are available and what values they accept, the client of your new component needs to dig through the Objective-C code. To make this better, let's make a wrapper component and document the interface with React PropTypes:

// MapView.js -import React from 'react'; +import PropTypes from 'prop-types'; +import React from 'react'; import { requireNativeComponent } from 'react-native'; class MapView extends React.Component { @@ -40,7 +41,7 @@ MapView.propTypes : React.PropTypes.bool, + pitchEnabled: PropTypes.bool, }; var RNTMap = requireNativeComponent('RNTMap', MapView); @@ -92,7 +93,7 @@ MapView.propTypes : React.PropTypes.bool, + pitchEnabled: PropTypes.bool, /** * The region to be displayed by the map. @@ -100,19 +101,19 @@ MapView.propTypes : React.PropTypes.shape({ + region: PropTypes.shape({ /** * Coordinates for the center of the map. */ - latitude: React.PropTypes.number.isRequired, - longitude: React.PropTypes.number.isRequired, + latitude: PropTypes.number.isRequired, + longitude: PropTypes.number.isRequired, /** * Distance between the minimum and the maximum latitude/longitude * to be displayed. */ - latitudeDelta: React.PropTypes.number.isRequired, - longitudeDelta: React.PropTypes.number.isRequired, + latitudeDelta: PropTypes.number.isRequired, + longitudeDelta: PropTypes.number.isRequired, }), }; @@ -207,7 +208,7 @@ MapView.propTypes /** * Callback that is called continuously when the user is dragging the map. */ - onChange: React.PropTypes.func, + onChange: PropTypes.func, ... };