Skip to content

Commit

Permalink
Minor documentation correction for exposing native iOS components
Browse files Browse the repository at this point in the history
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
  • Loading branch information
Ian Hill authored and facebook-github-bot committed Sep 12, 2017
1 parent 915a020 commit 3ceb20d
Showing 1 changed file with 18 additions and 18 deletions.
36 changes: 18 additions & 18 deletions docs/NativeComponentsIOS.md
Original file line number Diff line number Diff line change
Expand Up @@ -67,10 +67,10 @@ import MapView from './MapView.js';
render() {
return <MapView style={{ flex: 1 }} />;
}
}
```

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

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

Expand All @@ -97,8 +97,8 @@ Now to actually disable zooming, we set the property in JS:
```javascript
// MyApp.js
<MapView
zoomEnabled={false}
<MapView
zoomEnabled={false}
style={{ flex: 1 }}
/>;
```
Expand All @@ -119,7 +119,7 @@ class MapView extends React.Component {

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

MapView.propTypes = {
/**
* A Boolean value that determines whether the user may use pinch
* A Boolean value that determines whether the user may use pinch
* gestures to zoom in and out of the map.
*/
zoomEnabled: PropTypes.bool,
Expand Down Expand Up @@ -233,8 +233,8 @@ render() {
longitudeDelta: 0.1,
};
return (
<MapView
region={region}
<MapView
region={region}
zoomEnabled={false}
style={{ flex: 1 }}
/>
Expand All @@ -244,7 +244,7 @@ render() {

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.

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

```javascript
var RCTSwitch = requireNativeComponent('RCTSwitch', Switch, {
Expand All @@ -256,7 +256,7 @@ var RCTSwitch = requireNativeComponent('RCTSwitch', Switch, {

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?

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

```objectivec
// RNTMapView.h
Expand Down Expand Up @@ -344,15 +344,15 @@ class MapView extends React.Component {
if (!this.props.onRegionChange) {
return;
}
// process raw event...

// process raw event...
this.props.onRegionChange(event.nativeEvent);
}
render() {
return (
<RNTMap
{...this.props}
onRegionChange={this._onRegionChange}
<RNTMap
{...this.props}
onRegionChange={this._onRegionChange}
/>
);
}
Expand Down Expand Up @@ -381,8 +381,8 @@ class MyApp extends React.Component {
};
return (
<MapView
region={region}
zoomEnabled={false}
region={region}
zoomEnabled={false}
onRegionChange={this.onRegionChange}
/>
);
Expand Down Expand Up @@ -443,4 +443,4 @@ The `RCTDatePickerIOSConsts` constants are exported from native by grabbing the
}
```

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

1 comment on commit 3ceb20d

@pvinis
Copy link
Contributor

@pvinis pvinis commented on 3ceb20d Nov 4, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can we name these kind of prs as "formatting" next time? deleting two words is not a "correction" and it has nothing to do with "exposing ios components" besides helping to guess which file you changed the formatting on.

Please sign in to comment.