diff --git a/releases/next/docs/native-components-ios.html b/releases/next/docs/native-components-ios.html index 062a1ee7f08..473bea98725 100644 --- a/releases/next/docs/native-components-ios.html +++ b/releases/next/docs/native-components-ios.html @@ -190,13 +190,14 @@ MapView.propTypes MapView extends React.Component { constructor() { + super(props) this._onChange = this._onChange.bind(this); } _onChange(event: Event) { if (!this.props.onRegionChange) { return; } - this.props.onRegionChange(event.nativeEvent.region); + this.props.onRegionChange(event.nativeEvent); } render() { return <RNTMap {...this.props} onChange={this._onChange} />; @@ -206,9 +207,31 @@ MapView.propTypes /** * Callback that is called continuously when the user is dragging the map. */ - onRegionChange: React.PropTypes.func, + onChange: React.PropTypes.func, ... -};

Styles #

Since all our native react views are subclasses of UIView, most style attributes will work like you would expect out of the box. Some components will want a default style, however, for example UIDatePicker which is a fixed size. This default style is important for the layout algorithm to work as expected, but we also want to be able to override the default style when using the component. DatePickerIOS does this by wrapping the native component in an extra view, which has flexible styling, and using a fixed style (which is generated with constants passed in from native) on the inner native component:

// DatePickerIOS.ios.js +}; + +class MapViewExample extends React.Component { + onRegionChange(event: Event) { + // Do stuff with event.region.latitude, etc. + } + + render() { + var region = { + latitude: 37.48, + longitude: -122.16, + latitudeDelta: 0.1, + longitudeDelta: 0.1, + }; + + return ( + <MapView region={region} pitchEnabled={false} style={{flex: 1}} onChange={this.onRegionChange}/> + ); + } +} + +// Module name +AppRegistry.registerComponent('MapViewExample', () => MapViewExample);

Styles #

Since all our native react views are subclasses of UIView, most style attributes will work like you would expect out of the box. Some components will want a default style, however, for example UIDatePicker which is a fixed size. This default style is important for the layout algorithm to work as expected, but we also want to be able to override the default style when using the component. DatePickerIOS does this by wrapping the native component in an extra view, which has flexible styling, and using a fixed style (which is generated with constants passed in from native) on the inner native component:

// DatePickerIOS.ios.js import { UIManager } from 'react-native'; var RCTDatePickerIOSConsts = UIManager.RCTDatePicker.Constants; diff --git a/releases/next/docs/network.html b/releases/next/docs/network.html index cf3e3d19af0..04af83d83b3 100644 --- a/releases/next/docs/network.html +++ b/releases/next/docs/network.html @@ -25,7 +25,53 @@ } catch(error) { console.error(error); } - }

Don't forget to catch any errors that may be thrown by fetch, otherwise they will be dropped silently.

By default, iOS will block any request that's not encrypted using SSL. If you need to fetch from a cleartext URL (one that begins with http) you will first need to add an App Transport Security exception. If you know ahead of time what domains you will need access to, it is more secure to add exceptions just for those domains; if the domains are not known until runtime you can disable ATS completely. Note however that from January 2017, Apple's App Store review will require reasonable justification for disabling ATS. See Apple's documentation for more information.

Using Other Networking Libraries #

The XMLHttpRequest API is built in to React Native. This means that you can use third party libraries such as frisbee or axios that depend on it, or you can use the XMLHttpRequest API directly if you prefer.

var request = new XMLHttpRequest(); + }

Don't forget to catch any errors that may be thrown by fetch, otherwise they will be dropped silently.

By default, iOS will block any request that's not encrypted using SSL. If you need to fetch from a cleartext URL (one that begins with http) you will first need to add an App Transport Security exception. If you know ahead of time what domains you will need access to, it is more secure to add exceptions just for those domains; if the domains are not known until runtime you can disable ATS completely. Note however that from January 2017, Apple's App Store review will require reasonable justification for disabling ATS. See Apple's documentation for more information.

Using Other Networking Libraries #

The XMLHttpRequest API is built in to React Native. This means that you can use third party libraries such as frisbee or axios that depend on it, or you can use the XMLHttpRequest API directly if you prefer.

var request = new XMLHttpRequest(); request.onreadystatechange = (e) => { if (request.readyState !== 4) { return; diff --git a/releases/next/docs/pushnotificationios.html b/releases/next/docs/pushnotificationios.html index e7c1f4253bb..bca4eaef614 100644 --- a/releases/next/docs/pushnotificationios.html +++ b/releases/next/docs/pushnotificationios.html @@ -11,8 +11,7 @@

Handle push notifications for your app, including permission handling and icon badge number.

To get up and running, configure your notifications with Apple -and your server-side system.

Manually link the PushNotificationIOS library

Finally, to enable support for notification and register events you need to augment your AppDelegate.

At the top of your AppDelegate.m:

#import "RCTPushNotificationManager.h"

And then in your AppDelegate implementation add the following:

// Required to register for notifications +and your server-side system.

Manually link the PushNotificationIOS library

  • Add the following to your Project: node_modules/react-native/Libraries/PushNotificationIOS/RCTPushNotification.xcodeproj
  • Add the following to Link Binary With Libraries: libRCTPushNotification.a

Finally, to enable support for notification and register events you need to augment your AppDelegate.

At the top of your AppDelegate.m:

#import <React/RCTPushNotificationManager.h>

And then in your AppDelegate implementation add the following:

// Required to register for notifications - (void)application:(UIApplication *)application didRegisterUserNotificationSettings:(UIUserNotificationSettings *)notificationSettings { [RCTPushNotificationManager didRegisterUserNotificationSettings:notificationSettings];