You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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
Copy file name to clipboardExpand all lines: docs/NativeComponentsIOS.md
+18-18Lines changed: 18 additions & 18 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -67,10 +67,10 @@ import MapView from './MapView.js';
67
67
68
68
render() {
69
69
return <MapView style={{ flex: 1 }} />;
70
-
}
70
+
}
71
71
```
72
72
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.
74
74
75
75
**Note:** When rendering, don't forget to stretch the view, otherwise you'll be staring at a blank screen.
76
76
@@ -97,8 +97,8 @@ Now to actually disable zooming, we set the property in JS:
97
97
98
98
```javascript
99
99
// MyApp.js
100
-
<MapView
101
-
zoomEnabled={false}
100
+
<MapView
101
+
zoomEnabled={false}
102
102
style={{ flex: 1 }}
103
103
/>;
104
104
```
@@ -119,7 +119,7 @@ class MapView extends React.Component {
119
119
120
120
MapView.propTypes= {
121
121
/**
122
-
* A Boolean value that determines whether the user may use pinch
122
+
* A Boolean value that determines whether the user may use pinch
123
123
* gestures to zoom in and out of the map.
124
124
*/
125
125
zoomEnabled:PropTypes.bool,
@@ -196,7 +196,7 @@ To finish up support for the `region` prop, we need to document it in `propTypes
196
196
197
197
MapView.propTypes= {
198
198
/**
199
-
* A Boolean value that determines whether the user may use pinch
199
+
* A Boolean value that determines whether the user may use pinch
200
200
* gestures to zoom in and out of the map.
201
201
*/
202
202
zoomEnabled:PropTypes.bool,
@@ -233,8 +233,8 @@ render() {
233
233
longitudeDelta:0.1,
234
234
};
235
235
return (
236
-
<MapView
237
-
region={region}
236
+
<MapView
237
+
region={region}
238
238
zoomEnabled={false}
239
239
style={{ flex:1 }}
240
240
/>
@@ -244,7 +244,7 @@ render() {
244
244
245
245
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.
246
246
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.
248
248
249
249
```javascript
250
250
var RCTSwitch =requireNativeComponent('RCTSwitch', Switch, {
@@ -256,7 +256,7 @@ var RCTSwitch = requireNativeComponent('RCTSwitch', Switch, {
256
256
257
257
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?
258
258
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:
260
260
261
261
```objectivec
262
262
// RNTMapView.h
@@ -344,15 +344,15 @@ class MapView extends React.Component {
344
344
if (!this.props.onRegionChange) {
345
345
return;
346
346
}
347
-
348
-
// process raw event...
347
+
348
+
// process raw event...
349
349
this.props.onRegionChange(event.nativeEvent);
350
350
}
351
351
render() {
352
352
return (
353
-
<RNTMap
354
-
{...this.props}
355
-
onRegionChange={this._onRegionChange}
353
+
<RNTMap
354
+
{...this.props}
355
+
onRegionChange={this._onRegionChange}
356
356
/>
357
357
);
358
358
}
@@ -381,8 +381,8 @@ class MyApp extends React.Component {
381
381
};
382
382
return (
383
383
<MapView
384
-
region={region}
385
-
zoomEnabled={false}
384
+
region={region}
385
+
zoomEnabled={false}
386
386
onRegionChange={this.onRegionChange}
387
387
/>
388
388
);
@@ -443,4 +443,4 @@ The `RCTDatePickerIOSConsts` constants are exported from native by grabbing the
443
443
}
444
444
```
445
445
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