Skip to content

Commit 3ceb20d

Browse files
Ian Hillfacebook-github-bot
authored andcommitted
Minor documentation correction for exposing native iOS components
Summary: Minor documentation correction for the native components iOS API section. Before: "Sometimes your native component will have some special properties that you don't want to them to be part of the API" After: "Sometimes your native component will have some special properties that you don't want to be part of the API" Confirm section renders correctly via markdown. Closes #15914 Reviewed By: TheSavior Differential Revision: D5817146 Pulled By: buymeasoda fbshipit-source-id: 075441cf7f5f23a4ca512bae48ca8fc319762b1e
1 parent 915a020 commit 3ceb20d

File tree

1 file changed

+18
-18
lines changed

1 file changed

+18
-18
lines changed

docs/NativeComponentsIOS.md

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -67,10 +67,10 @@ import MapView from './MapView.js';
6767
6868
render() {
6969
return <MapView style={{ flex: 1 }} />;
70-
}
70+
}
7171
```
7272

73-
Make sure to use `RNTMap` here. We want to require the manager here, which will expose the view of our manager for use in Javascript.
73+
Make sure to use `RNTMap` here. We want to require the manager here, which will expose the view of our manager for use in Javascript.
7474

7575
**Note:** When rendering, don't forget to stretch the view, otherwise you'll be staring at a blank screen.
7676

@@ -97,8 +97,8 @@ Now to actually disable zooming, we set the property in JS:
9797
9898
```javascript
9999
// MyApp.js
100-
<MapView
101-
zoomEnabled={false}
100+
<MapView
101+
zoomEnabled={false}
102102
style={{ flex: 1 }}
103103
/>;
104104
```
@@ -119,7 +119,7 @@ class MapView extends React.Component {
119119

120120
MapView.propTypes = {
121121
/**
122-
* A Boolean value that determines whether the user may use pinch
122+
* A Boolean value that determines whether the user may use pinch
123123
* gestures to zoom in and out of the map.
124124
*/
125125
zoomEnabled: PropTypes.bool,
@@ -196,7 +196,7 @@ To finish up support for the `region` prop, we need to document it in `propTypes
196196

197197
MapView.propTypes = {
198198
/**
199-
* A Boolean value that determines whether the user may use pinch
199+
* A Boolean value that determines whether the user may use pinch
200200
* gestures to zoom in and out of the map.
201201
*/
202202
zoomEnabled: PropTypes.bool,
@@ -233,8 +233,8 @@ render() {
233233
longitudeDelta: 0.1,
234234
};
235235
return (
236-
<MapView
237-
region={region}
236+
<MapView
237+
region={region}
238238
zoomEnabled={false}
239239
style={{ flex: 1 }}
240240
/>
@@ -244,7 +244,7 @@ render() {
244244

245245
Here you can see that the shape of the region is explicit in the JS documentation - ideally we could codegen some of this stuff, but that's not happening yet.
246246

247-
Sometimes your native component will have some special properties that you don't want to them to be part of the API for the associated React component. For example, `Switch` has a custom `onChange` handler for the raw native event, and exposes an `onValueChange` handler property that is invoked with just the boolean value rather than the raw event. Since you don't want these native only properties to be part of the API, you don't want to put them in `propTypes`, but if you don't you'll get an error. The solution is simply to add them to the `nativeOnly` option, e.g.
247+
Sometimes your native component will have some special properties that you don't want to be part of the API for the associated React component. For example, `Switch` has a custom `onChange` handler for the raw native event, and exposes an `onValueChange` handler property that is invoked with just the boolean value rather than the raw event. Since you don't want these native only properties to be part of the API, you don't want to put them in `propTypes`, but if you don't you'll get an error. The solution is simply to add them to the `nativeOnly` option, e.g.
248248

249249
```javascript
250250
var RCTSwitch = requireNativeComponent('RCTSwitch', Switch, {
@@ -256,7 +256,7 @@ var RCTSwitch = requireNativeComponent('RCTSwitch', Switch, {
256256

257257
So now we have a native map component that we can control easily from JS, but how do we deal with events from the user, like pinch-zooms or panning to change the visible region?
258258

259-
Until now we've just returned a `MKMapView` instance from our manager's `-(UIView *)view` method. We can't add new properties to `MKMapView` so we have to create a new subclass from `MKMapView` which we use for our View. We can then add a `onRegionChange` callback on this subclass:
259+
Until now we've just returned a `MKMapView` instance from our manager's `-(UIView *)view` method. We can't add new properties to `MKMapView` so we have to create a new subclass from `MKMapView` which we use for our View. We can then add a `onRegionChange` callback on this subclass:
260260

261261
```objectivec
262262
// RNTMapView.h
@@ -344,15 +344,15 @@ class MapView extends React.Component {
344344
if (!this.props.onRegionChange) {
345345
return;
346346
}
347-
348-
// process raw event...
347+
348+
// process raw event...
349349
this.props.onRegionChange(event.nativeEvent);
350350
}
351351
render() {
352352
return (
353-
<RNTMap
354-
{...this.props}
355-
onRegionChange={this._onRegionChange}
353+
<RNTMap
354+
{...this.props}
355+
onRegionChange={this._onRegionChange}
356356
/>
357357
);
358358
}
@@ -381,8 +381,8 @@ class MyApp extends React.Component {
381381
};
382382
return (
383383
<MapView
384-
region={region}
385-
zoomEnabled={false}
384+
region={region}
385+
zoomEnabled={false}
386386
onRegionChange={this.onRegionChange}
387387
/>
388388
);
@@ -443,4 +443,4 @@ The `RCTDatePickerIOSConsts` constants are exported from native by grabbing the
443443
}
444444
```
445445

446-
This guide covered many of the aspects of bridging over custom native components, but there is even more you might need to consider, such as custom hooks for inserting and laying out subviews. If you want to go even deeper, check out the [source code](https://github.com/facebook/react-native/blob/master/React/Views) of some of the implemented components.
446+
This guide covered many of the aspects of bridging over custom native components, but there is even more you might need to consider, such as custom hooks for inserting and laying out subviews. If you want to go even deeper, check out the [source code](https://github.com/facebook/react-native/blob/master/React/Views) of some of the implemented components.

0 commit comments

Comments
 (0)