status-im
/
react-native
mirror of https://github.com/status-im/react-native.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Docs: ios-native-ui-guide RCTConvert categories edit 

Summary:
I was struggling a bit with the [iOS Native UI Components tutorial](https://facebook.github.io/react-native/docs/native-components-ios.html#content).

As noted here it's outdated. https://github.com/facebook/react-native/issues/14436

In my opinion, these steps are more clear when the header files are also included in the example. Besides that, the tutorial can use the already existing `RCTConvert+CoreLocation` category for simplicity.
Closes https://github.com/facebook/react-native/pull/14983

Differential Revision: D5409803

Pulled By: javache

fbshipit-source-id: f7fe1d2b542e8df602dc0f0636efb4d764090811
This commit is contained in:
Tieme van Veen 2017-07-12 14:04:35 -07:00 committed by Facebook Github Bot
parent d9f98191eb
commit c41b5a02f2
1 changed files with 13 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
docs/NativeComponentsIOS.md
View File

@ -124,25 +124,24 @@ RCT_CUSTOM_VIEW_PROPERTY(region, MKCoordinateRegion, RNTMap)
Ok, this is more complicated than the simple `BOOL` case we had before. Now we have a `MKCoordinateRegion` type that needs a conversion function, and we have custom code so that the view will animate when we set the region from JS. Within the function body that we provide, `json` refers to the raw value that has been passed from JS. There is also a `view` variable which gives us access to the manager's view instance, and a `defaultView` that we use to reset the property back to the default value if JS sends us a null sentinel.
You could write any conversion function you want for your view - here is the implementation for `MKCoordinateRegion` via two categories on `RCTConvert`:
You could write any conversion function you want for your view - here is the implementation for `MKCoordinateRegion` via a category on `RCTConvert`. It uses an already existing category of ReactNative `RCTConvert+CoreLocation`:
```objectivec
@implementation RCTConvert(CoreLocation)
// RCTConvert+Mapkit.h
#import <MapKit/MapKit.h>
#import <React/RCTConvert.h>
RCT_CONVERTER(CLLocationDegrees, CLLocationDegrees, doubleValue);
RCT_CONVERTER(CLLocationDistance, CLLocationDistance, doubleValue);
@interface RCTConvert (Mapkit)
+ (CLLocationCoordinate2D)CLLocationCoordinate2D:(id)json
{
json = [self NSDictionary:json];
return (CLLocationCoordinate2D){
[self CLLocationDegrees:json[@"latitude"]],
[self CLLocationDegrees:json[@"longitude"]]
};
}
+ (MKCoordinateSpan)MKCoordinateSpan:(id)json;
+ (MKCoordinateRegion)MKCoordinateRegion:(id)json;
@end
// RCTConvert+Mapkit.m
#import <CoreLocation/CoreLocation.h>
#import <React/RCTConvert+CoreLocation.h>
@implementation RCTConvert(MapKit)
+ (MKCoordinateSpan)MKCoordinateSpan:(id)json
@ -161,6 +160,8 @@ RCT_CONVERTER(CLLocationDistance, CLLocationDistance, doubleValue);
[self MKCoordinateSpan:json]
};
}
@end
```
These conversion functions are designed to safely process any JSON that the JS might throw at them by displaying "RedBox" errors and returning standard initialization values when missing keys or other developer errors are encountered.