From 4c241ae424a02ad460beb5d09facd261adbd6eaa Mon Sep 17 00:00:00 2001 From: Christopher Chedeau Date: Sat, 21 Mar 2015 14:42:15 -0700 Subject: [PATCH] update website --- docs/activityindicatorios.html | 2 +- docs/alertios.html | 2 +- docs/animation.html | 2 +- docs/appregistry.html | 2 +- docs/appstate.html | 2 +- docs/appstateios.html | 2 +- docs/asyncstorage.html | 2 +- docs/cameraroll.html | 2 +- docs/datepickerios.html | 2 +- docs/getting-started.html | 2 +- docs/image.html | 2 +- docs/interactionmanager.html | 2 +- docs/layoutanimation.html | 2 +- docs/listview.html | 2 +- docs/mapview.html | 2 +- docs/nativemodulesios.html | 75 ++++++++++++++++++++++++++++++ docs/navigatorios.html | 2 +- docs/netinfo.html | 2 +- docs/network.html | 2 +- docs/pickerios.html | 2 +- docs/pixelratio.html | 2 +- docs/pixels.html | 2 +- docs/scrollview.html | 2 +- docs/sliderios.html | 2 +- docs/statusbarios.html | 2 +- docs/style.html | 4 +- docs/stylesheet.html | 2 +- docs/switchios.html | 2 +- docs/tabbarios.html | 2 +- docs/text.html | 2 +- docs/textinput.html | 2 +- docs/timers.html | 2 +- docs/touchablehighlight.html | 2 +- docs/touchableopacity.html | 2 +- docs/touchablewithoutfeedback.html | 2 +- docs/vibrationios.html | 2 +- docs/view.html | 2 +- docs/webview.html | 2 +- 38 files changed, 113 insertions(+), 38 deletions(-) create mode 100644 docs/nativemodulesios.html diff --git a/docs/activityindicatorios.html b/docs/activityindicatorios.html index 7aa704e974b..e1e3d1f2713 100644 --- a/docs/activityindicatorios.html +++ b/docs/activityindicatorios.html @@ -1,4 +1,4 @@ -React Native | Build Native Apps Using React
React Native

Quick Start

Guides

components

apis

Polyfills

ActivityIndicatorIOS

Props #

animating bool #

Whether to show the indicator (true, the default) or hide it (false).

color string #

The foreground color of the spinner (default is gray).

size enum('small', 'large') #

Size of the indicator. Small has a height of 20, large has a height of 36.

Next →
© 2015 Facebook Inc.
React Native

Quick Start

Guides

components

apis

Polyfills

ActivityIndicatorIOS

Props #

animating bool #

Whether to show the indicator (true, the default) or hide it (false).

color string #

The foreground color of the spinner (default is gray).

size enum('small', 'large') #

Size of the indicator. Small has a height of 20, large has a height of 36.

Next →
© 2015 Facebook Inc.
React Native

Quick Start

Guides

components

apis

Polyfills

AlertIOS

AlertIOS manages native iOS alerts, option sheets, and share dialogs

Methods #

static alert(title: string, message: string, buttons: ?Array<{ +React Native | Build Native Apps Using React
React Native

Quick Start

Guides

components

apis

Polyfills

AlertIOS

AlertIOS manages native iOS alerts, option sheets, and share dialogs

Methods #

static alert(title: string, message: string, buttons: ?Array<{ text: ?string; onPress: ?Function; }>) #

Next →
© 2015 Facebook Inc.
React Native

Quick Start

Guides

components

apis

Polyfills

Animation

@flow

Methods #

static startAnimation(node: any, duration: number, delay: number, easing: (string | EasingFunction), properties: {[key: string]: any}) #

static stopAnimation(tag: number) #

Next →
© 2015 Facebook Inc.
React Native

Quick Start

Guides

components

apis

Polyfills

Animation

@flow

Methods #

static startAnimation(node: any, duration: number, delay: number, easing: (string | EasingFunction), properties: {[key: string]: any}) #

static stopAnimation(tag: number) #

Next →
© 2015 Facebook Inc.
React Native

Quick Start

Guides

components

apis

Polyfills

AppRegistry

AppRegistry is the JS entry point to running all React Native apps. App +React Native | Build Native Apps Using React

React Native

Quick Start

Guides

components

apis

Polyfills

AppRegistry

AppRegistry is the JS entry point to running all React Native apps. App root components should register themselves with AppRegistry.registerComponent, then the native system can load the bundle for the app and then actually run the app when it's ready by invoking diff --git a/docs/appstate.html b/docs/appstate.html index 6109465f5a3..9d615f24ffe 100644 --- a/docs/appstate.html +++ b/docs/appstate.html @@ -1,4 +1,4 @@ -React Native | Build Native Apps Using React

React Native

Quick Start

Guides

components

apis

Polyfills

AppState

Methods #

static setApplicationIconBadgeNumber(number) #

static getApplicationIconBadgeNumber(callback) #

Next →
© 2015 Facebook Inc.
React Native

Quick Start

Guides

components

apis

Polyfills

AppState

Methods #

static setApplicationIconBadgeNumber(number) #

static getApplicationIconBadgeNumber(callback) #

Next →
© 2015 Facebook Inc.
React Native

Quick Start

Guides

components

apis

Polyfills

AppStateIOS

Methods #

static addEventListener(type, handler) #

static removeEventListener(type, handler) #

Next →
© 2015 Facebook Inc.
React Native

Quick Start

Guides

components

apis

Polyfills

AppStateIOS

Methods #

static addEventListener(type, handler) #

static removeEventListener(type, handler) #

Next →
© 2015 Facebook Inc.
React Native

Quick Start

Guides

components

apis

Polyfills

AsyncStorage

AsyncStorage is a simple, asynchronous, persistent, global, key-value storage +React Native | Build Native Apps Using React

React Native

Quick Start

Guides

components

apis

Polyfills

AsyncStorage

AsyncStorage is a simple, asynchronous, persistent, global, key-value storage system. It should be used instead of LocalStorage.

It is recommended that you use an abstraction on top of AsyncStorage instead of AsyncStorage directly for anything more than light usage since it operates globally.

This JS code is a simple facad over the native iOS implementation to provide diff --git a/docs/cameraroll.html b/docs/cameraroll.html index be8cf03c102..db60ce10bca 100644 --- a/docs/cameraroll.html +++ b/docs/cameraroll.html @@ -1,4 +1,4 @@ -React Native | Build Native Apps Using React

React Native

Quick Start

Guides

components

apis

Polyfills

CameraRoll

Methods #

static saveImageWithTag(tag: string, successCallback, errorCallback) #

Saves the image with tag tag to the camera roll.

@param {string} tag - Can be any of the three kinds of tags we accept: +React Native | Build Native Apps Using React

React Native

Quick Start

Guides

components

apis

Polyfills

CameraRoll

Methods #

static saveImageWithTag(tag: string, successCallback, errorCallback) #

Saves the image with tag tag to the camera roll.

@param {string} tag - Can be any of the three kinds of tags we accept: 1. URL 2. assets-library tag 3. tag returned from storing an image in memory

static getPhotos(params: object, callback: function, errorCallback: function) #

Invokes callback with photo identifier objects from the local camera diff --git a/docs/datepickerios.html b/docs/datepickerios.html index 2764371a96b..c38a11df306 100644 --- a/docs/datepickerios.html +++ b/docs/datepickerios.html @@ -1,4 +1,4 @@ -React Native | Build Native Apps Using React

React Native

Quick Start

Guides

components

apis

Polyfills

DatePickerIOS

Use DatePickerIOS to render a date/time picker (selector) on iOS. This is +React Native | Build Native Apps Using React

React Native

Quick Start

Guides

components

apis

Polyfills

DatePickerIOS

Use DatePickerIOS to render a date/time picker (selector) on iOS. This is a controlled component, so you must hook in to the onDateChange callback and update the date prop in order for the component to update, otherwise the user's change will be reverted immediately to reflect props.date as the diff --git a/docs/getting-started.html b/docs/getting-started.html index 0f990af4ef3..45f1f933893 100644 --- a/docs/getting-started.html +++ b/docs/getting-started.html @@ -1,4 +1,4 @@ -React Native | Build Native Apps Using React

React Native

Quick Start

Guides

components

apis

Polyfills

Getting Started

Our first React Native implementation is ReactKit, targeting iOS. We are also +React Native | Build Native Apps Using React

React Native

Quick Start

Guides

components

apis

Polyfills

Getting Started

Our first React Native implementation is ReactKit, targeting iOS. We are also working on an Android implementation which we will release later. ReactKit apps are built using the React JS framework, and render directly to native UIKit elements using a fully asynchronous architecture. There is no diff --git a/docs/image.html b/docs/image.html index d8893821a2b..5844de8bffe 100644 --- a/docs/image.html +++ b/docs/image.html @@ -1,4 +1,4 @@ -React Native | Build Native Apps Using React

React Native

Quick Start

Guides

components

apis

Polyfills

Image

A react component for displaying different types of images, +React Native | Build Native Apps Using React

React Native

Quick Start

Guides

components

apis

Polyfills

Image

A react component for displaying different types of images, including network images, static resources, temporary local images, and images from local disk, such as the camera roll.

Example usage:

renderImages: function() { return ( diff --git a/docs/interactionmanager.html b/docs/interactionmanager.html index 6284b0dd97e..acd5f6eadb4 100644 --- a/docs/interactionmanager.html +++ b/docs/interactionmanager.html @@ -1,4 +1,4 @@ -React Native | Build Native Apps Using React
React Native

Quick Start

Guides

components

apis

Polyfills

InteractionManager

InteractionManager allows long-running work to be scheduled after any +React Native | Build Native Apps Using React

React Native

Quick Start

Guides

components

apis

Polyfills

InteractionManager

InteractionManager allows long-running work to be scheduled after any interactions/animations have completed. In particular, this allows JavaScript animations to run smoothly.

Applications can schedule tasks to run after interactions with the following:

InteractionManager.runAfterInteractions(() => { // ...long-running synchronous task... diff --git a/docs/layoutanimation.html b/docs/layoutanimation.html index 33a83ab404f..8b4d92f6414 100644 --- a/docs/layoutanimation.html +++ b/docs/layoutanimation.html @@ -1,4 +1,4 @@ -React Native | Build Native Apps Using React
React Native

Quick Start

Guides

components

apis

Polyfills

LayoutAnimation

Methods #

static configureNext(config, onAnimationDidEnd, onError) #

static create(duration, type, creationProp) #

Next →
© 2015 Facebook Inc.
React Native

Quick Start

Guides

components

apis

Polyfills

LayoutAnimation

Methods #

static configureNext(config, onAnimationDidEnd, onError) #

static create(duration, type, creationProp) #

Next →
© 2015 Facebook Inc.
React Native

Quick Start

Guides

components

apis

Polyfills

ListView

ListView - A core component designed for efficient display of vertically +React Native | Build Native Apps Using React

React Native

Quick Start

Guides

components

apis

Polyfills

ListView

ListView - A core component designed for efficient display of vertically scrolling lists of changing data. The minimal API is to create a ListView.DataSource, populate it with a simple array of data blobs, and instantiate a ListView component with that data source and a renderRow diff --git a/docs/mapview.html b/docs/mapview.html index 7590952c1eb..8af3866d77d 100644 --- a/docs/mapview.html +++ b/docs/mapview.html @@ -1,4 +1,4 @@ -React Native | Build Native Apps Using React

React Native

Quick Start

Guides

components

apis

Polyfills

MapView

Props #

legalLabelInsets {top: number, left: number, bottom: number, right: number} #

Insets for the map's legal label, originally at bottom left of the map. +React Native | Build Native Apps Using React

React Native

Quick Start

Guides

components

apis

Polyfills

MapView

Props #

legalLabelInsets {top: number, left: number, bottom: number, right: number} #

Insets for the map's legal label, originally at bottom left of the map. See EdgeInsetsPropType.js for more information.

maxDelta number #

Maximum size of area that can be displayed.

minDelta number #

Minimum size of area that can be displayed.

onRegionChange function #

Callback that is called continuously when the user is dragging the map.

onRegionChangeComplete function #

Callback that is called once, when the user is done moving the map.

pitchEnabled bool #

When this property is set to true and a valid camera is associated with the map, the camera’s pitch angle is used to tilt the plane of the map. When this property is set to false, the camera’s pitch diff --git a/docs/nativemodulesios.html b/docs/nativemodulesios.html new file mode 100644 index 00000000000..35b5cbd7df3 --- /dev/null +++ b/docs/nativemodulesios.html @@ -0,0 +1,75 @@ +React Native | Build Native Apps Using React

React Native

Quick Start

Guides

components

apis

Polyfills

Native Modules (iOS)

Sometimes an app needs access to platform API, and React Native doesn't have a corresponding wrapper yet. This is a more advanced guide that shows how to build a native module. It assumes the reader knows Objective-C (Swift is not supported yet) and core libraries (Foundation, UIKit).

iOS Calendar module example #

This guide will use iOS Calendar API example. Let's say we would like to be able to access iOS calendar from JavaScript.

Native module is just an Objectve-C class that implements RCTBridgeModule protocol.

// RCTCalendarManager.h +#import "RCTBridgeModule.h" + +@interface RCTCalendarManager : NSObject <RCTBridgeModule> +@end

React Native will not expose any methods of RCTCalendarManager to JavaScript unless explicitly asked. Fortunately this is pretty easy with RCT_EXPORT:

// RCTCalendarManager.m +@implementation RCTCalendarManager + +- (void)addEventWithName:(NSString *)name location:(NSString *)location +{ + RCT_EXPORT(); + RCTLogInfo(@"Pretending to create an event %@ at @%@", name, location); +} + +@end

Now from your JavaScript file you can call the method like this:

var CalendarManager = require('NativeModules').CalendarManager; +CalendarManager.addEventWithName('Birthday Party', '4 Privet Drive, Surrey');

Notice that the module name doesn't have RCT prefix. Exported method name was generated from first part of Objective-C selector. Sometimes it results in a non-idiomatic JavaScript name (like the one in our example). You can change the name by supplying an optional argument to RCT_EXPORT, e.g. RCT_EXPORT("addEvent").

The return type of the method should always be void. React Native bridge is asynchronous, so the only way to pass result to JavaScript is by using callbacks or emitting events (see below).

Argument types #

React Native supports several types of arguments that can be passed from JavaScript code to native module:

  • string (NSString)
  • number (NSInteger, float, NSNumber)
  • boolean (BOOL, NSNumber)
  • array (NSArray) of any types from this list
  • map (NSDictionary) with string keys and values of any type from this list
  • function (RCTResponseSenderBlock)

In our CalendarManager example, if we want to pass event date to native, we have to convert it to a string or a number:

- (void)addEventWithName:(NSString *)name location:(NSString *)location date:(NSInteger)secondsSinceUnixEpoch +{ + RCT_EXPORT("addEvent"); + NSDate *date = [NSDate dateWithTimeIntervalSince1970:secondsSinceUnixEpoch]; +}

As CalendarManager.addEvent method gets more and more complex, the number of arguments will grow. Some of them might be optional. In this case it's worth considering changing the API a little bit to accept a dictionary of event attributes, like this:

- (void)addEventWithName:(NSString *)name details:(NSDictionary *)details +{ + RCT_EXPORT("addEvent"); + NSString *location = details[@"location"]; + if ([location isKindOfClass:[NSString class]]) { + ... + } +}

and call it from JavaScript:

CalendarManager.addEvent('Birthday Party', { + location: '4 Privet Drive, Surrey', + time: date.toTime(), + description: '...' +})

NOTE about array and map - React Native doesn't provide any guarantees about the types of values in these structures. Your native module might expect array of strings, but if JavaScript calls your method with an array that contains number and string you'll get NSArray with NSNumber and NSString. It's developer's responsibility to check array/map values types.

Callbacks #

WARNING: This section is even more experimental than others, we don't have a set of best practices around callbacks yet.

Native module also supports a special kind of argument - callback. In most cases it is used to provide function call result to JavaScript.

- (void)findEvents:(RCTResponseSenderBlock)callback +{ + RCT_EXPORT(); + NSArray *events = ... + callback(@[[NSNull null], events]); +}

RCTResponseSenderBlock accepts only one argument - array of arguments to pass to JavaScript callback. In this case we use node's convention to set first argument to error and the rest - to the result of the function.

CalendarManager.findEvents((error, events) => { + if (error) { + console.error(error); + } else { + this.setState({events: events}); + } +})

Native module is supposed to invoke callback only once. It can, however, store the callback as an ivar and invoke it later. This pattern is often used to wrap iOS APIs that require delegate. See RCTAlertManager.

If you want to pass error-like object to JavaScript, use RCTMakeError from RCTUtils.h.

Implementing native module #

The native module should not have any assumptions about what thread it is being called on. React Native invokes native modules methods on a separate serial GCD queue, but this is an implementation detail and might change. If the native module needs to call main-thread-only iOS API, it should schedule the operation on the main queue:

- (void)addEventWithName:(NSString *)name callback:(RCTResponseSenderBlock)callback +{ + RCT_EXPORT("addEvent"); + dispatch_async(dispatch_get_main_queue(), ^{ + // Call iOS API on main thread + ... + // You can invoke callback from any thread/queue + callback(@[...]); + }); +}

The same way if the operation can take a long time to complete, the native module should not block. It is a good idea to use dispatch_async to schedule expensive work on background queue.

Exporting constants #

Native module can export constants that are instantly available to JavaScript at runtime. This is useful to export some initial data that would otherwise require a bridge round-trip.

- (NSDictionary *)constantsToExport +{ + return @{ @"firstDayOfTheWeek": @"Monday" }; +}

JavaScript can use this value right away:

console.log(CalendarManager.firstDayOfTheWeek);

Note that the constants are exported only at initialization time, so if you change constantsToExport value at runtime it won't affect JavaScript environment.

Sending events to JavaScript #

The native module can signal events to JavaScript without being invoked directly. The easiest way to do this is to use eventDispatcher:

- (void)calendarEventReminderReceived:(NSNotification *)notification +{ + NSString *eventName = notification.userInfo[@"name"]; + [self.bridge.eventDispatcher sendAppEventWithName:@"EventReminder" + body:@{@"name": eventName}]; +}

JavaScript code can subscribe to these events:

var subscription = RCTDeviceEventEmitter.addListener( + 'EventReminder', + (reminder) => console.log(reminder.name) +); +... +// Don't forget to unsubscribe +subscription.remove();

For more examples of sending events to JavaScript, see RCTLocationObserver.

Next →
© 2015 Facebook Inc.
\ No newline at end of file diff --git a/docs/navigatorios.html b/docs/navigatorios.html index 2216703f31a..f910d2f7ba4 100644 --- a/docs/navigatorios.html +++ b/docs/navigatorios.html @@ -1,4 +1,4 @@ -React Native | Build Native Apps Using React
React Native

Quick Start

Guides

components

apis

Polyfills

NavigatorIOS

NavigatorIOS wraps UIKit navigation and allows you to add back-swipe +React Native | Build Native Apps Using React

React Native

Quick Start

Guides

components

apis

Polyfills

NavigatorIOS

NavigatorIOS wraps UIKit navigation and allows you to add back-swipe functionality across your app.

Routes #

A route is an object used to describe each page in the navigator. The first route is provided to NavigatorIOS as initialRoute:

render: function() { return ( diff --git a/docs/netinfo.html b/docs/netinfo.html index d27f81b7eb1..66cbf6fb548 100644 --- a/docs/netinfo.html +++ b/docs/netinfo.html @@ -1,4 +1,4 @@ -React Native | Build Native Apps Using React
React Native

Quick Start

Guides

components

apis

Polyfills

NetInfo

NetInfo exposes info about online/offline status

== iOS Reachability

Asyncronously determine if the device is online and on a cellular network.

  • "none" - device is offline
  • "wifi" - device is online and connected via wifi, or is the iOS simulator
  • "cell" - device is connected via Edge, 3G, WiMax, or LTE
  • "unknown" - error case and the network status is unknown
NetInfo.reachabilityIOS.fetch().done((reach) => { +React Native | Build Native Apps Using React
React Native

Quick Start

Guides

components

apis

Polyfills

NetInfo

NetInfo exposes info about online/offline status

== iOS Reachability

Asyncronously determine if the device is online and on a cellular network.

  • "none" - device is offline
  • "wifi" - device is online and connected via wifi, or is the iOS simulator
  • "cell" - device is connected via Edge, 3G, WiMax, or LTE
  • "unknown" - error case and the network status is unknown
NetInfo.reachabilityIOS.fetch().done((reach) => { console.log('Initial: ' + reach); }); function handleFirstReachabilityChange(reach) { diff --git a/docs/network.html b/docs/network.html index 6b625b699a8..3eda32d0d09 100644 --- a/docs/network.html +++ b/docs/network.html @@ -1,4 +1,4 @@ -React Native | Build Native Apps Using React
React Native

Quick Start

Guides

components

apis

Polyfills

Network

One of React Native goal is to be a playground where we can experiment with different architectures and crazy ideas. Since browsers are not flexible enough, we had no choice but to reimplement the entire stack. In the places that we did not intend to change, we tried to be as faithful as possible to the browser APIs. The networking stack is a great example.

XMLHttpRequest #

XMLHttpRequest API is implemented on-top of iOS networking apis. The notable difference from web is the security model: you can read from arbitrary websites on the internet since there is no concept of CORS.

var request = new XMLHttpRequest(); +React Native | Build Native Apps Using React
React Native

Quick Start

Guides

components

apis

Polyfills

Network

One of React Native goal is to be a playground where we can experiment with different architectures and crazy ideas. Since browsers are not flexible enough, we had no choice but to reimplement the entire stack. In the places that we did not intend to change, we tried to be as faithful as possible to the browser APIs. The networking stack is a great example.

XMLHttpRequest #

XMLHttpRequest API is implemented on-top of iOS networking apis. The notable difference from web is the security model: you can read from arbitrary websites on the internet since there is no concept of CORS.

var request = new XMLHttpRequest(); request.onreadystatechange = (e) => { if (request.readyState !== 4) { return; diff --git a/docs/pickerios.html b/docs/pickerios.html index ce94f668584..cd65ea64dd8 100644 --- a/docs/pickerios.html +++ b/docs/pickerios.html @@ -1,4 +1,4 @@ -React Native | Build Native Apps Using React
React Native

Quick Start

Guides

components

apis

Polyfills

PickerIOS

Props #

onValueChange function #

selectedValue any #

Next →
© 2015 Facebook Inc.
React Native

Quick Start

Guides

components

apis

Polyfills

PickerIOS

Props #

onValueChange function #

selectedValue any #

Next →
© 2015 Facebook Inc.
React Native

Quick Start

Guides

components

apis

Polyfills

PixelRatio

PixelRatio class gives access to the device pixel density.

There are a few use cases for using PixelRatio:

Displaying a line that's as thin as the device permits #

A width of 1 is actually pretty thick on an iPhone 4+, we can do one that's +React Native | Build Native Apps Using React

React Native

Quick Start

Guides

components

apis

Polyfills

PixelRatio

PixelRatio class gives access to the device pixel density.

There are a few use cases for using PixelRatio:

Displaying a line that's as thin as the device permits #

A width of 1 is actually pretty thick on an iPhone 4+, we can do one that's thinner using a width of 1 / PixelRatio.get(). It's a technique that works on all the devices independent of their pixel density.

style={{ borderWidth: 1 / PixelRatio.get() }}

Fetching a correctly sized image #

You should get a higher resolution image if you are on a high pixel density device. A good rule of thumb is to multiply the size of the image you display diff --git a/docs/pixels.html b/docs/pixels.html index 4ef4f38dc48..fc88617a4cd 100644 --- a/docs/pixels.html +++ b/docs/pixels.html @@ -1,4 +1,4 @@ -React Native | Build Native Apps Using React

React Native

Quick Start

Guides

components

apis

Polyfills

Physical vs Logical Pixels

Pixel Grid Snapping #

In iOS, you can specify positions and dimensions for elements with arbitrary precision, for example 29.674825. But, ultimately the physical display only have a fixed number of pixels, for example 640×960 for iphone 4 or 750×1334 for iphone 6. iOS tries to be as faithful as possible to the user value by spreading one original pixel into multiple ones to trick the eye. The downside of this technique is that it makes the resulting element look blurry.

In practice, we found out that developers do not want this feature and they have to work around it by doing manual rounding in order to avoid having blurry elements. In React Native, we are rounding all the pixels automatically.

We have to be careful when to do this rounding. You never want to work with rounded and unrounded values at the same time as you're going to accumulate rounding errors. Having even one rounding error is deadly because a one pixel border may vanish or be twice as big.

In React Native, everything in JS and within the layout engine work with arbitrary precision numbers. It's only when we set the position and dimensions of the native element on the main thread that we round. Also, rounding is done relative to the root rather than the parent, again to avoid accumulating rounding errors.

Displaying a line that's as thin as the device permits #

A width of 1 is actually 2 physical pixels thick on an iPhone 4 and 3 physical pixels thick on an iphone 6+. If you want to display a line that's as thin as possible, you can use a width of 1 / PixelRatio.get(). It's a technique that works on all the devices independent of their pixel density.

style={{ borderWidth: 1 / PixelRatio.get() }}

Fetching a correctly sized image #

You should get a higher resolution image if you are on a high pixel density device. A good rule of thumb is to multiply the size of the image you display by the pixel ratio.

var image = getImage({ +React Native | Build Native Apps Using React
React Native

Quick Start

Guides

components

apis

Polyfills

Physical vs Logical Pixels

Pixel Grid Snapping #

In iOS, you can specify positions and dimensions for elements with arbitrary precision, for example 29.674825. But, ultimately the physical display only have a fixed number of pixels, for example 640×960 for iphone 4 or 750×1334 for iphone 6. iOS tries to be as faithful as possible to the user value by spreading one original pixel into multiple ones to trick the eye. The downside of this technique is that it makes the resulting element look blurry.

In practice, we found out that developers do not want this feature and they have to work around it by doing manual rounding in order to avoid having blurry elements. In React Native, we are rounding all the pixels automatically.

We have to be careful when to do this rounding. You never want to work with rounded and unrounded values at the same time as you're going to accumulate rounding errors. Having even one rounding error is deadly because a one pixel border may vanish or be twice as big.

In React Native, everything in JS and within the layout engine work with arbitrary precision numbers. It's only when we set the position and dimensions of the native element on the main thread that we round. Also, rounding is done relative to the root rather than the parent, again to avoid accumulating rounding errors.

Displaying a line that's as thin as the device permits #

A width of 1 is actually 2 physical pixels thick on an iPhone 4 and 3 physical pixels thick on an iphone 6+. If you want to display a line that's as thin as possible, you can use a width of 1 / PixelRatio.get(). It's a technique that works on all the devices independent of their pixel density.

style={{ borderWidth: 1 / PixelRatio.get() }}

Fetching a correctly sized image #

You should get a higher resolution image if you are on a high pixel density device. A good rule of thumb is to multiply the size of the image you display by the pixel ratio.

var image = getImage({ width: 200 * PixelRatio.get(), height: 100 * PixelRatio.get(), }); diff --git a/docs/scrollview.html b/docs/scrollview.html index 62880f22f40..55c621c5a27 100644 --- a/docs/scrollview.html +++ b/docs/scrollview.html @@ -1,4 +1,4 @@ -React Native | Build Native Apps Using React
React Native

Quick Start

Guides

components

apis

Polyfills

ScrollView

Component that wraps platform ScrollView while providing +React Native | Build Native Apps Using React

React Native

Quick Start

Guides

components

apis

Polyfills

ScrollView

Component that wraps platform ScrollView while providing integration with touch locking "responder" system.

Doesn't yet support other contained responders from blocking this scroll view from becoming the responder.

Props #

alwaysBounceHorizontal bool #

When true, the scroll view bounces horizontally when it reaches the end even if the content is smaller than the scroll view itself. The default diff --git a/docs/sliderios.html b/docs/sliderios.html index 01b1836d33f..f447c50ef95 100644 --- a/docs/sliderios.html +++ b/docs/sliderios.html @@ -1,4 +1,4 @@ -React Native | Build Native Apps Using React

React Native

Quick Start

Guides

components

apis

Polyfills

SliderIOS

Props #

onSlidingComplete function #

Callback called when the user finishes changing the value (e.g. when +React Native | Build Native Apps Using React

React Native

Quick Start

Guides

components

apis

Polyfills

SliderIOS

Props #

onSlidingComplete function #

Callback called when the user finishes changing the value (e.g. when the slider is released).

onValueChange function #

Callback continuously called while the user is dragging the slider.

style View.propTypes.style #

Used to style and layout the Slider. See StyleSheet.js and ViewStylePropTypes.js for more info.

value number #

Initial value of the slider. The value should be between 0 and 1. Default value is 0.

This is not a controlled component, e.g. if you don't update diff --git a/docs/statusbarios.html b/docs/statusbarios.html index fa9382d7f21..e1cfe3fc2f4 100644 --- a/docs/statusbarios.html +++ b/docs/statusbarios.html @@ -1,4 +1,4 @@ -React Native | Build Native Apps Using React

React Native

Quick Start

Guides

components

apis

Polyfills

StatusBarIOS

@flow

Methods #

static setStyle(style: number, animated: boolean) #

static setHidden(hidden: boolean, animation: number) #

Next →
© 2015 Facebook Inc.
React Native

Quick Start

Guides

components

apis

Polyfills

StatusBarIOS

@flow

Methods #

static setStyle(style: number, animated: boolean) #

static setHidden(hidden: boolean, animation: number) #

Next →
© 2015 Facebook Inc.
React Native

Quick Start

Guides

components

apis

Polyfills

Style

Declaring Styles #

The way to declare styles in React Native is the following:

var styles = StyleSheet.create({ +React Native | Build Native Apps Using React
React Native

Quick Start

Guides

components

apis

Polyfills

Style

Declaring Styles #

The way to declare styles in React Native is the following:

var styles = StyleSheet.create({ base: { width: 38, height: 38, @@ -33,7 +33,7 @@ }); // ... in another file ... -<List style={styles.list} elementStyle={styles.listElement} />
Next →
© 2015 Facebook Inc.
React Native

Quick Start

Guides

components

apis

Polyfills

StyleSheet

A StyleSheet is an abstraction similar to CSS StyleSheets

Create a new StyleSheet:

var styles = StyleSheet.create({ +React Native | Build Native Apps Using React
React Native

Quick Start

Guides

components

apis

Polyfills

StyleSheet

A StyleSheet is an abstraction similar to CSS StyleSheets

Create a new StyleSheet:

var styles = StyleSheet.create({ container: { borderRadius: 4, borderWidth: 0.5, diff --git a/docs/switchios.html b/docs/switchios.html index 2e9be57dabd..c2d81198754 100644 --- a/docs/switchios.html +++ b/docs/switchios.html @@ -1,4 +1,4 @@ -React Native | Build Native Apps Using React
React Native

Quick Start

Guides

components

apis

Polyfills

SwitchIOS

Use SwitchIOS to render a boolean input on iOS. This is +React Native | Build Native Apps Using React

React Native

Quick Start

Guides

components

apis

Polyfills

SwitchIOS

Use SwitchIOS to render a boolean input on iOS. This is a controlled component, so you must hook in to the onValueChange callback and update the value prop in order for the component to update, otherwise the user's change will be reverted immediately to reflect props.value as the diff --git a/docs/tabbarios.html b/docs/tabbarios.html index dc7ac3dc154..6758dd10d70 100644 --- a/docs/tabbarios.html +++ b/docs/tabbarios.html @@ -1,4 +1,4 @@ -React Native | Build Native Apps Using React

React Native

Quick Start

Guides

components

apis

Polyfills

TabBarIOS

Props #

Next →
© 2015 Facebook Inc.
React Native

Quick Start

Guides

components

apis

Polyfills

TabBarIOS

Props #

Next →
© 2015 Facebook Inc.
React Native

Quick Start

Guides

components

apis

Polyfills

Text

A react component for displaying text which supports nesting, +React Native | Build Native Apps Using React

React Native

Quick Start

Guides

components

apis

Polyfills

Text

A react component for displaying text which supports nesting, styling, and touch handling. In the following example, the nested title and body text will inherit the fontFamily from styles.baseText, but the title provides its own additional styles. The title and body will stack on top of diff --git a/docs/textinput.html b/docs/textinput.html index 74849002e87..901636f6783 100644 --- a/docs/textinput.html +++ b/docs/textinput.html @@ -1,4 +1,4 @@ -React Native | Build Native Apps Using React

React Native

Quick Start

Guides

components

apis

Polyfills

TextInput

A foundational component for inputting text into the app via a +React Native | Build Native Apps Using React

React Native

Quick Start

Guides

components

apis

Polyfills

TextInput

A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, such as auto- correction, auto-capitalization, placeholder text, and different keyboard types, such as a numeric keypad.

The simplest use case is to plop down a TextInput and subscribe to the diff --git a/docs/timers.html b/docs/timers.html index 27e3b330f8c..ad5c485d9a9 100644 --- a/docs/timers.html +++ b/docs/timers.html @@ -1,4 +1,4 @@ -React Native | Build Native Apps Using React

React Native

Quick Start

Guides

components

apis

Polyfills

Timers

Timers are an important part of an application and React Native implements the browser timers.

Timers #

  • setTimeout, clearTimeout
  • setInterval, clearInterval
  • setImmediate, clearImmediate
  • requestAnimationFrame, cancelAnimationFrame

requestAnimationFrame(fn) is the exact equivalent of setTimeout(fn, 0), they are triggered right after the screen has been flushed.

setImmediate is executed at the end of the current JavaScript execution block, right before sending the batched response back to native. Note that if you call setImmediate within a setImmediate callback, it will be executed right away, it won't yield back to native in between.

The Promise implementation uses setImmediate as its asynchronicity primitive.

InteractionManager #

One reason why well-built native apps feel so smooth is by avoiding expensive operations during interactions and animations. In React Native, we currently have a limitation that there is only a single JS execution thread, but you can use InteractionManager to make sure long-running work is scheduled to start after any interactions/animations have completed.

Applications can schedule tasks to run after interactions with the following:

InteractionManager.runAfterInteractions(() => { +React Native | Build Native Apps Using React
React Native

Quick Start

Guides

components

apis

Polyfills

Timers

Timers are an important part of an application and React Native implements the browser timers.

Timers #

  • setTimeout, clearTimeout
  • setInterval, clearInterval
  • setImmediate, clearImmediate
  • requestAnimationFrame, cancelAnimationFrame

requestAnimationFrame(fn) is the exact equivalent of setTimeout(fn, 0), they are triggered right after the screen has been flushed.

setImmediate is executed at the end of the current JavaScript execution block, right before sending the batched response back to native. Note that if you call setImmediate within a setImmediate callback, it will be executed right away, it won't yield back to native in between.

The Promise implementation uses setImmediate as its asynchronicity primitive.

InteractionManager #

One reason why well-built native apps feel so smooth is by avoiding expensive operations during interactions and animations. In React Native, we currently have a limitation that there is only a single JS execution thread, but you can use InteractionManager to make sure long-running work is scheduled to start after any interactions/animations have completed.

Applications can schedule tasks to run after interactions with the following:

InteractionManager.runAfterInteractions(() => { // ...long-running synchronous task... });

Compare this to other scheduling alternatives:

  • requestAnimationFrame(): for code that animates a view over time.
  • setImmediate/setTimeout/setInterval(): run code later, note this may delay animations.
  • runAfterInteractions(): run code later, without delaying active animations.

The touch handling system considers one or more active touches to be an 'interaction' and will delay runAfterInteractions() callbacks until all touches have ended or been cancelled.

InteractionManager also allows applications to register animations by creating an interaction 'handle' on animation start, and clearing it upon completion:

var handle = InteractionManager.createInteractionHandle(); // run animation... (`runAfterInteractions` tasks are queued) diff --git a/docs/touchablehighlight.html b/docs/touchablehighlight.html index d65911fff7c..8743984dc8b 100644 --- a/docs/touchablehighlight.html +++ b/docs/touchablehighlight.html @@ -1,4 +1,4 @@ -React Native | Build Native Apps Using React
React Native

Quick Start

Guides

components

apis

Polyfills

TouchableHighlight

A wrapper for making views respond properly to touches. +React Native | Build Native Apps Using React

React Native

Quick Start

Guides

components

apis

Polyfills

TouchableHighlight

A wrapper for making views respond properly to touches. On press down, the opacity of the wrapped view is decreased, which allows the underlay color to show through, darkening or tinting the view. The underlay comes from adding a view to the view hierarchy, which can sometimes diff --git a/docs/touchableopacity.html b/docs/touchableopacity.html index f76caf49db6..ac8681a887d 100644 --- a/docs/touchableopacity.html +++ b/docs/touchableopacity.html @@ -1,4 +1,4 @@ -React Native | Build Native Apps Using React

React Native

Quick Start

Guides

components

apis

Polyfills

TouchableOpacity

A wrapper for making views respond properly to touches. +React Native | Build Native Apps Using React

React Native

Quick Start

Guides

components

apis

Polyfills

TouchableOpacity

A wrapper for making views respond properly to touches. On press down, the opacity of the wrapped view is decreased, dimming it. This is done without actually changing the view hierarchy, and in general is easy to add to an app without weird side-effects.

Example:

renderButton: function() { diff --git a/docs/touchablewithoutfeedback.html b/docs/touchablewithoutfeedback.html index 69dd7b65998..73252e6366e 100644 --- a/docs/touchablewithoutfeedback.html +++ b/docs/touchablewithoutfeedback.html @@ -1,4 +1,4 @@ -React Native | Build Native Apps Using React
React Native

Quick Start

Guides

components

apis

Polyfills

TouchableWithoutFeedback

Do not use unless you have a very good reason. All the elements that +React Native | Build Native Apps Using React

React Native

Quick Start

Guides

components

apis

Polyfills

TouchableWithoutFeedback

Do not use unless you have a very good reason. All the elements that respond to press should have a visual feedback when touched. This is one of the primary reason a "web" app doesn't feel "native".

Props #

onLongPress function #

onPress function #

Called when the touch is released, but not if cancelled (e.g. by a scroll that steals the responder lock).

onPressIn function #

onPressOut function #

Next →
© 2015 Facebook Inc.
React Native

Quick Start

Guides

components

apis

Polyfills

VibrationIOS

The Vibration API is exposed at VibrationIOS.vibrate(). On iOS, calling this +React Native | Build Native Apps Using React

React Native

Quick Start

Guides

components

apis

Polyfills

VibrationIOS

The Vibration API is exposed at VibrationIOS.vibrate(). On iOS, calling this function will trigger a one second vibration. The vibration is asynchronous so this method will return immediately.

There will be no effect on devices that do not support Vibration, eg. the iOS simulator.

Vibration patterns are currently unsupported.

Methods #

static vibrate() #

Next →
© 2015 Facebook Inc.
React Native

Quick Start

Guides

components

apis

Polyfills

View

The most fundamental component for building UI, View is a +React Native | Build Native Apps Using React

React Native

Quick Start

Guides

components

apis

Polyfills

View

The most fundamental component for building UI, View is a container that supports layout with flexbox, style, some touch handling, and accessibility controls, and is designed to be nested inside other views and to have 0 to many children of any type. View maps directly to the native diff --git a/docs/webview.html b/docs/webview.html index 786cc9cf62c..c0b750f118f 100644 --- a/docs/webview.html +++ b/docs/webview.html @@ -1,4 +1,4 @@ -React Native | Build Native Apps Using React

React Native

Quick Start

Guides

components

apis

Polyfills

WebView

Props #

automaticallyAdjustContentInsets bool #

contentInset {top: number, left: number, bottom: number, right: number} #

onNavigationStateChange function #

renderError function #

renderLoading function #

shouldInjectAJAXHandler bool #

startInLoadingState bool #

style View.propTypes.style #

url string #

Next →
© 2015 Facebook Inc.
React Native

Quick Start

Guides

components

apis

Polyfills

WebView

Props #

automaticallyAdjustContentInsets bool #

contentInset {top: number, left: number, bottom: number, right: number} #

onNavigationStateChange function #

renderError function #

renderLoading function #

shouldInjectAJAXHandler bool #

startInLoadingState bool #

style View.propTypes.style #

url string #

Next →
© 2015 Facebook Inc.