diff --git a/css/react-native.css b/css/react-native.css index 111ced51d76..af9dc958bbc 100644 --- a/css/react-native.css +++ b/css/react-native.css @@ -185,15 +185,13 @@ html * { .container { padding-top: 50px; - min-width: 960px; + min-width: 1160px; } .wrap { - width: 960px; - margin-left: auto; - margin-right: auto; - padding-left: 20px; - padding-right: 20px; + max-width: 1260px; + margin: 0 auto; + padding: 0 20px; } .skinnyWrap { @@ -363,7 +361,7 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li font-size: 14px; float: left; width: 210px; - margin-top: 5px; + margin: 5px 48px 0 0; } .nav-docs ul { @@ -550,7 +548,7 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li float: right; } -footer { +footer.wrap { font-size: 13px; font-weight: 600; padding-top: 36px; @@ -699,7 +697,7 @@ figure { } .inner-content { - float: right; + float: left; width: 650px; } @@ -845,6 +843,91 @@ small code, li code, p code { text-decoration: none !important; } +.column-left, .column-left * { + box-sizing: border-box; +} + +.column-left p { + text-align: center; + color: #999; +} + +.column-left { + float: left; + padding: 20px; + width: 210px; +} + +/* Modal */ +.modal-backdrop { + background: rgba(0,0,0,.4); + display: none; + height: 100%; + left: 0; + overflow: auto; + position: fixed; + top: 0; + width: 100%; + z-index: 9900; +} + +.modal { + background: #F6F6F6; + bottom: 0; + box-shadow: 2px 2px 4px 0 rgba(0,0,0,.11); + display: none; + border-radius: 10px; + height: 95%; + left: 0; + margin: auto; + max-height: 620px; + max-width: 460px; + overflow: auto; + position: fixed; + right: 0; + top: 0; + width: 80%; + z-index: 9999; +} + +.modal-open { + display: block; +} + +.modal-content { + padding: 40px 24px 24px 24px; + position: relative; +} + +.modal-content iframe { + margin: 0 auto; +} + +.modal-button-open { + text-align: center; +} + +.modal-button-close { + background: transparent; + border-radius: 0 0 0 4px; + border: 0; + color: #555; + font-size: 1.2em; + font-weight: bolder; + line-height: 32px; + margin: 0; + padding: 0 12px; + position: absolute; + right: 0; + top: 0; +} + .modal-button-close:active, + .modal-button-close:focus, + .modal-button-close:hover { + background: #EAF8FD; + outline: none; + } + @media screen and (max-width: 960px) { .nav-main { position: static; diff --git a/docs/accessibility.html b/docs/accessibility.html index 817449e8248..fc1f91a9e4a 100644 --- a/docs/accessibility.html +++ b/docs/accessibility.html @@ -38,7 +38,7 @@ <CustomRadioButton accessibleComponentType={this.state.radioButton} - onPress={this._onPress}/>

In the above example we've created a custom radio button that now behaves like a native one. More specifically, TalkBack now correctly announces changes to the radio button selection.

Testing VoiceOver Support (iOS) #

To enable VoiceOver, go to the Settings app on your iOS device. Tap General, then Accessibility. There you will find many tools that people use to use to make their devices more usable, such as bolder text, increased contrast, and VoiceOver.

To enable VoiceOver, tap on VoiceOver under "Vision" and toggle the switch that appears at the top.

At the very bottom of the Accessibility settings, there is an "Accessibility Shortcut". You can use this to toggle VoiceOver by triple clicking the Home button.

Next →
\ No newline at end of file + \ No newline at end of file diff --git a/docs/actionsheetios.html b/docs/actionsheetios.html index 297f8c38b40..882d5ba4780 100644 --- a/docs/actionsheetios.html +++ b/docs/actionsheetios.html @@ -107,7 +107,7 @@ exports.examples : 'Show Share Action Sheet', render(): ReactElement { return <ShareActionSheetExample />; } } -];
Next →
\ No newline at end of file + \ No newline at end of file diff --git a/docs/activityindicatorios.html b/docs/activityindicatorios.html index 3ee0933ad97..966f5ddeeb2 100644 --- a/docs/activityindicatorios.html +++ b/docs/activityindicatorios.html @@ -144,7 +144,7 @@ exports.examples : 'row', justifyContent: 'space-around', }, -});
Next →
\ No newline at end of file + \ No newline at end of file diff --git a/docs/alertios.html b/docs/alertios.html index afe51450eae..b09320298aa 100644 --- a/docs/alertios.html +++ b/docs/alertios.html @@ -197,7 +197,7 @@ class PromptExample extends : '#eeeeee', padding: 10, }, -});
Next →
\ No newline at end of file + \ No newline at end of file diff --git a/docs/android-setup.html b/docs/android-setup.html index 09774f6305a..ea2e822f794 100644 --- a/docs/android-setup.html +++ b/docs/android-setup.html @@ -1,6 +1,6 @@ Android Setup – React Native | A framework for building native apps using React
React Native

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Android Setup

This guide describes basic steps of the android development environment setup that are required to run React Native android apps on an android emulator. We don't discuss developer tool configuration such as IDEs here.

These instructions only cover installation "from scratch". If you happen to have some old, outdated version of Android SDK make sure to update required packages to the version mentioned below and install all the missing ones and make sure ANDROID_HOME points to your existing SDK.

Install and configure SDK #

  1. Install the latest JDK.
  2. Install the Android SDK with brew install android-sdk.
  3. Add this to your ~/.bashrc, ~/.zshrc or whatever your shell uses:
    export ANDROID_HOME=/usr/local/opt/android-sdk
  4. Start a new shell and run android; in the window that appears make sure you check:
    • Android SDK Build-tools version 23.0.1
    • Android 6.0 (API 23)
    • Android Support Repository
  5. Click "Install Packages".

Install and run Android stock emulator #

  1. Start a new shell and run android; in the window that appears make sure you check:
    • Intel x86 Atom System Image (for Android 5.1.1 - API 22)
    • Intel x86 Emulator Accelerator (HAXM installer) SDK Manager window SDK Manager window
  2. Click "Install Packages".
  3. Configure HAXM.
  4. Create an Android Virtual Device (AVD) to use with the Android emulator:
    1. Run android avd and click on Create... -Create AVD dialog
    2. With the new AVD selected, click Start...
Next →
\ No newline at end of file + \ No newline at end of file diff --git a/docs/animated.html b/docs/animated.html index 621766c48f6..3a088eedf61 100644 --- a/docs/animated.html +++ b/docs/animated.html @@ -336,7 +336,7 @@ exports.examples : 10, alignItems: 'center', }, -});
Next →
\ No newline at end of file + \ No newline at end of file diff --git a/docs/animations.html b/docs/animations.html index 5b154e3a131..b09a6b1de3b 100644 --- a/docs/animations.html +++ b/docs/animations.html @@ -362,7 +362,7 @@ make them customizable, React Native exposes a pop: CustomLeftToRightGesture, } });

Run this example

For further information about customizing scene transitions, read the -source.

Next →
\ No newline at end of file + \ No newline at end of file diff --git a/docs/appregistry.html b/docs/appregistry.html index ae62103e5d2..ab1766cb917 100644 --- a/docs/appregistry.html +++ b/docs/appregistry.html @@ -4,7 +4,7 @@ root components should register themselves with for the app and then actually run the app when it's ready by invoking AppRegistry.runApplication.

AppRegistry should be required early in the require sequence to make sure the JS execution environment is setup before other modules are -required.

Methods #

static registerConfig(config: Array<AppConfig>) #

static registerComponent(appKey: string, getComponentFunc: ComponentProvider) #

static registerRunnable(appKey: string, func: Function) #

static getAppKeys() #

static runApplication(appKey: string, appParameters: any) #

Next →
\ No newline at end of file + \ No newline at end of file diff --git a/docs/appstateios.html b/docs/appstateios.html index b43b3bd114e..6d7c4c46a7f 100644 --- a/docs/appstateios.html +++ b/docs/appstateios.html @@ -110,7 +110,7 @@ exports.examples : "In the simulator, hit Shift+Command+M to simulate a memory warning.", render(): ReactElement { return <AppStateSubscription showMemoryWarnings={true} />; } }, -];
Next →
\ No newline at end of file + \ No newline at end of file diff --git a/docs/asyncstorage.html b/docs/asyncstorage.html index f7f970ef0e9..4bd890f9bf7 100644 --- a/docs/asyncstorage.html +++ b/docs/asyncstorage.html @@ -113,7 +113,7 @@ exports.examples : 'Basics - getItem, setItem, removeItem', render(): ReactElement { return <BasicStorageExample />; } }, -];
Next →
\ No newline at end of file + \ No newline at end of file diff --git a/docs/backandroid.html b/docs/backandroid.html index 4e775b14f59..3f02dc8ac54 100644 --- a/docs/backandroid.html +++ b/docs/backandroid.html @@ -5,7 +5,7 @@ functionality to exit the app if there are no listeners or if none of the listen return true; } return false; -});

Methods #

static exitApp() #

static addEventListener(eventName: BackPressEventName, handler: Function) #

static removeEventListener(eventName: BackPressEventName, handler: Function) #

Next →
\ No newline at end of file + \ No newline at end of file diff --git a/docs/cameraroll.html b/docs/cameraroll.html index 041d932c38c..5ec152d8a8a 100644 --- a/docs/cameraroll.html +++ b/docs/cameraroll.html @@ -5,7 +5,7 @@ be stored in memory (and consume memory as long as the process is alive)getPhotosReturnChecker.

@param {object} params See getPhotosParamChecker. @param {function} callback Invoked with arg of shape defined by getPhotosReturnChecker on success. - @param {function} errorCallback Invoked with error message on error.

Next →
\ No newline at end of file + \ No newline at end of file diff --git a/docs/datepickerios.html b/docs/datepickerios.html index 88bbbe655f9..a2a82127946 100644 --- a/docs/datepickerios.html +++ b/docs/datepickerios.html @@ -158,7 +158,7 @@ exports.examples : '500', fontSize: 14, }, -});
Next →
\ No newline at end of file + \ No newline at end of file diff --git a/docs/debugging.html b/docs/debugging.html index 8abf29325f4..0e645a7df55 100644 --- a/docs/debugging.html +++ b/docs/debugging.html @@ -1,4 +1,4 @@ -Debugging – React Native | A framework for building native apps using React
React Native

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Debugging

Debugging React Native Apps #

To access the in-app developer menu:

  1. On iOS shake the device or press control + ⌘ + z in the simulator.
  2. On Android shake the device or press hardware menu button (available on older devices and in most of the emulators, e.g. in genymotion you can press ⌘ + m to simulate hardware menu button click)

Hint

To disable the developer menu for production builds:

  1. For iOS open your project in Xcode and select Product → Scheme → Edit Scheme... (or press ⌘ + <). Next, select Run from the menu on the left and change the Build Configuration to Release.
  2. For Android, by default, developer menu will be disabled in release builds done by gradle (e.g with gradle assembleRelease task). Although this behavior can be customized by passing proper value to ReactInstanceManager#setUseDeveloperSupport.

Reload #

Selecting Reload (or pressing ⌘ + r in the iOS simulator) will reload the JavaScript that powers your application. If you have added new resources (such as an image to Images.xcassets on iOS or to res/drawable folder on Android) or modified any native code (Objective-C/Swift code on iOS or Java/C++ code on Android), you will need to re-build the app for the changes to take effect.

Chrome Developer Tools #

To debug the JavaScript code in Chrome, select Debug in Chrome from the developer menu. This will open a new tab at http://localhost:8081/debugger-ui.

In Chrome, press ⌘ + option + i or select View → Developer → Developer Tools to toggle the developer tools console. Enable Pause On Caught Exceptions for a better debugging experience.

To debug on a real device:

  1. On iOS - open the file RCTWebSocketExecutor.m and change localhost to the IP address of your computer. Shake the device to open the development menu with the option to start debugging.
  2. On Android, if you're running Android 5.0+ device connected via USB you can use adb command line tool to setup port forwarding from the device to your computer. For that run: adb reverse 8081 8081 (see this link for help on adb command). Alternatively, you can open dev menu on the device and select Dev Settings, then update Debug server host for device setting to the IP address of your computer.

React Developer Tools (optional) #

Install the React Developer Tools extension for Google Chrome. This will allow you to navigate the component hierarchy via the React in the developer tools (see facebook/react-devtools for more information).

Live Reload #

This option allows for your JS changes to trigger automatic reload on the connected device/emulator. To enable this option:

  1. On iOS, select Enable Live Reload via the developer menu to have the application automatically reload when changes are made to the JavaScript.
  2. On Android, launch dev menu, go to Dev Settings and select Auto reload on JS change option

FPS (Frames per Second) Monitor #

On 0.5.0-rc and higher versions, you can enable a FPS graph overlay in the developers menu in order to help you debug performance problems.

Next →
React Native

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Debugging

Debugging React Native Apps #

To access the in-app developer menu:

  1. On iOS shake the device or press control + ⌘ + z in the simulator.
  2. On Android shake the device or press hardware menu button (available on older devices and in most of the emulators, e.g. in genymotion you can press ⌘ + m to simulate hardware menu button click)

Hint

To disable the developer menu for production builds:

  1. For iOS open your project in Xcode and select Product → Scheme → Edit Scheme... (or press ⌘ + <). Next, select Run from the menu on the left and change the Build Configuration to Release.
  2. For Android, by default, developer menu will be disabled in release builds done by gradle (e.g with gradle assembleRelease task). Although this behavior can be customized by passing proper value to ReactInstanceManager#setUseDeveloperSupport.

Reload #

Selecting Reload (or pressing ⌘ + r in the iOS simulator) will reload the JavaScript that powers your application. If you have added new resources (such as an image to Images.xcassets on iOS or to res/drawable folder on Android) or modified any native code (Objective-C/Swift code on iOS or Java/C++ code on Android), you will need to re-build the app for the changes to take effect.

Chrome Developer Tools #

To debug the JavaScript code in Chrome, select Debug in Chrome from the developer menu. This will open a new tab at http://localhost:8081/debugger-ui.

In Chrome, press ⌘ + option + i or select View → Developer → Developer Tools to toggle the developer tools console. Enable Pause On Caught Exceptions for a better debugging experience.

To debug on a real device:

  1. On iOS - open the file RCTWebSocketExecutor.m and change localhost to the IP address of your computer. Shake the device to open the development menu with the option to start debugging.
  2. On Android, if you're running Android 5.0+ device connected via USB you can use adb command line tool to setup port forwarding from the device to your computer. For that run: adb reverse 8081 8081 (see this link for help on adb command). Alternatively, you can open dev menu on the device and select Dev Settings, then update Debug server host for device setting to the IP address of your computer.

React Developer Tools (optional) #

Install the React Developer Tools extension for Google Chrome. This will allow you to navigate the component hierarchy via the React in the developer tools (see facebook/react-devtools for more information).

Live Reload #

This option allows for your JS changes to trigger automatic reload on the connected device/emulator. To enable this option:

  1. On iOS, select Enable Live Reload via the developer menu to have the application automatically reload when changes are made to the JavaScript.
  2. On Android, launch dev menu, go to Dev Settings and select Auto reload on JS change option

FPS (Frames per Second) Monitor #

On 0.5.0-rc and higher versions, you can enable a FPS graph overlay in the developers menu in order to help you debug performance problems.

Next →
\ No newline at end of file + \ No newline at end of file diff --git a/docs/dimensions.html b/docs/dimensions.html index 0fe40653dec..f7f91be4690 100644 --- a/docs/dimensions.html +++ b/docs/dimensions.html @@ -4,7 +4,7 @@ due to device rotation) so any rendering logic or styles that depend on these constants should try to call this function on every render, rather than caching the value (for example, using inline styles rather than setting a value in a StyleSheet).

@param {string} dim Name of dimension as defined when calling set. -@returns {Object?} Value for the dimension.

Next →
\ No newline at end of file + \ No newline at end of file diff --git a/docs/direct-manipulation.html b/docs/direct-manipulation.html index daed215cf19..f632c208b4b 100644 --- a/docs/direct-manipulation.html +++ b/docs/direct-manipulation.html @@ -152,7 +152,7 @@ the jerky animation each 250ms when setState triggers a re-render.< shouldComponentUpdate you can avoid the unnecessary overhead involved in reconciling unchanged component subtrees, to the point where it may be performant enough to -use setState instead of setNativeProps.

Next →
\ No newline at end of file + \ No newline at end of file diff --git a/docs/drawerlayoutandroid.html b/docs/drawerlayoutandroid.html index a593c331add..47e9f43b7d9 100644 --- a/docs/drawerlayoutandroid.html +++ b/docs/drawerlayoutandroid.html @@ -27,7 +27,7 @@ from the edge of the window.

renderNavigationView function #

The navigation view that will be rendered to the side of the screen and can be pulled in.

Next →
\ No newline at end of file + \ No newline at end of file diff --git a/docs/embedded-app-android.html b/docs/embedded-app-android.html index c0cf14b5c55..9d241b09027 100644 --- a/docs/embedded-app-android.html +++ b/docs/embedded-app-android.html @@ -86,7 +86,7 @@ class MyAwesomeApp extends }, }); -React.AppRegistry.registerComponent('MyAwesomeApp', () => MyAwesomeApp);

Run your app #

To run your app, you need to first start the development server. To do this, simply run the following command in your root folder:

$ npm start

Now build and run your Android app as normal (e.g. ./gradlew installDebug). Once you reach your React-powered activity inside the app, it should load the JavaScript code from the development server and display:

Screenshot

Next →
\ No newline at end of file + \ No newline at end of file diff --git a/docs/embedded-app-ios.html b/docs/embedded-app-ios.html index df8e245e47e..3af2fba499d 100644 --- a/docs/embedded-app-ios.html +++ b/docs/embedded-app-ios.html @@ -45,7 +45,7 @@ React.AppRegistry*rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName: @"SimpleApp" launchOptions:nil];

Then add it as a subview of the ReactView.

[self addSubview:rootView]; -rootView.frame = self.bounds;

Start Development Server #

In root directory, we need to start React Native development server.

(JS_DIR=`pwd`/ReactComponent; cd Pods/React; npm run start -- --root $JS_DIR)

This command will start up a React Native development server within our CocoaPods dependency to build our bundled script. The --root option indicates the root of your React Native apps – this will be our ReactComponents directory containing the single index.ios.js file. This running server will package up the index.ios.bundle file accessible via http://localhost:8081/index.ios.bundle.

Compile And Run #

Now compile and run your app. You shall now see your React Native app running inside of the ReactView.

Example

Live reload works from the simulator, too! You’ve got a simple React component totally encapsulated behind an Objective-C UIView subclass.

Conclusion #

So under the hood, when RCTRootView is initialized, it will try to download, parse and run the bundle file from React Native development server. This means all you need to do is to implement your own container view or view controller for the RCTRootView – the RCTRootView ingests your bundled JS and renders your React components. Bravo!

You can checkout full source code of a sample application here.

Next →
\ No newline at end of file + \ No newline at end of file diff --git a/docs/flexbox.html b/docs/flexbox.html index 9690ce14ce0..235ed24c9a8 100644 --- a/docs/flexbox.html +++ b/docs/flexbox.html @@ -1,4 +1,4 @@ -Flexbox – React Native | A framework for building native apps using React
React Native

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Flexbox

Edit on GitHubProps #

alignItems enum('flex-start', 'flex-end', 'center', 'stretch') #

alignSelf enum('auto', 'flex-start', 'flex-end', 'center', 'stretch') #

borderBottomWidth number #

borderLeftWidth number #

borderRightWidth number #

borderTopWidth number #

borderWidth number #

bottom number #

flex number #

flexDirection enum('row', 'column') #

flexWrap enum('wrap', 'nowrap') #

height number #

justifyContent enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around') #

left number #

margin number #

marginBottom number #

marginHorizontal number #

marginLeft number #

marginRight number #

marginTop number #

marginVertical number #

padding number #

paddingBottom number #

paddingHorizontal number #

paddingLeft number #

paddingRight number #

paddingTop number #

paddingVertical number #

position enum('absolute', 'relative') #

right number #

top number #

width number #

Next →
React Native

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Flexbox

Edit on GitHubProps #

alignItems enum('flex-start', 'flex-end', 'center', 'stretch') #

alignSelf enum('auto', 'flex-start', 'flex-end', 'center', 'stretch') #

borderBottomWidth number #

borderLeftWidth number #

borderRightWidth number #

borderTopWidth number #

borderWidth number #

bottom number #

flex number #

flexDirection enum('row', 'column') #

flexWrap enum('wrap', 'nowrap') #

height number #

justifyContent enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around') #

left number #

margin number #

marginBottom number #

marginHorizontal number #

marginLeft number #

marginRight number #

marginTop number #

marginVertical number #

padding number #

paddingBottom number #

paddingHorizontal number #

paddingLeft number #

paddingRight number #

paddingTop number #

paddingVertical number #

position enum('absolute', 'relative') #

right number #

top number #

width number #

Next →
\ No newline at end of file + \ No newline at end of file diff --git a/docs/geolocation.html b/docs/geolocation.html index 5c3fa65a2fd..721b4e7cb6d 100644 --- a/docs/geolocation.html +++ b/docs/geolocation.html @@ -72,7 +72,7 @@ exports.examples : { fontWeight: '500', }, -});
Next →
\ No newline at end of file + \ No newline at end of file diff --git a/docs/gesture-responder-system.html b/docs/gesture-responder-system.html index 59fea76a856..4afdf6b1ad7 100644 --- a/docs/gesture-responder-system.html +++ b/docs/gesture-responder-system.html @@ -1,4 +1,4 @@ -Gesture Responder System – React Native | A framework for building native apps using React
React Native

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Gesture Responder System

Gesture recognition on mobile devices is much more complicated than web. A touch can go through several phases as the app determines what the user's intention is. For example, the app needs to determine if the touch is scrolling, sliding on a widget, or tapping. This can even change during the duration of a touch. There can also be multiple simultaneous touches.

The touch responder system is needed to allow components to negotiate these touch interactions without any additional knowledge about their parent or child components. This system is implemented in ResponderEventPlugin.js, which contains further details and documentation.

Best Practices #

Users can feel huge differences in the usability of web apps vs. native, and this is one of the big causes. Every action should have the following attributes:

  • Feedback/highlighting- show the user what is handling their touch, and what will happen when they release the gesture
  • Cancel-ability- when making an action, the user should be able to abort it mid-touch by dragging their finger away

These features make users more comfortable while using an app, because it allows people to experiment and interact without fear of making mistakes.

TouchableHighlight and Touchable* #

The responder system can be complicated to use. So we have provided an abstract Touchable implementation for things that should be "tappable". This uses the responder system and allows you to easily configure tap interactions declaratively. Use TouchableHighlight anywhere where you would use a button or link on web.

Responder Lifecycle #

A view can become the touch responder by implementing the correct negotiation methods. There are two methods to ask the view if it wants to become responder:

  • View.props.onStartShouldSetResponder: (evt) => true, - Does this view want to become responder on the start of a touch?
  • View.props.onMoveShouldSetResponder: (evt) => true, - Called for every touch move on the View when it is not the responder: does this view want to "claim" touch responsiveness?

If the View returns true and attempts to become the responder, one of the following will happen:

  • View.props.onResponderGrant: (evt) => {} - The View is now responding for touch events. This is the time to highlight and show the user what is happening
  • View.props.onResponderReject: (evt) => {} - Something else is the responder right now and will not release it

If the view is responding, the following handlers can be called:

  • View.props.onResponderMove: (evt) => {} - The user is moving their finger
  • View.props.onResponderRelease: (evt) => {} - Fired at the end of the touch, ie "touchUp"
  • View.props.onResponderTerminationRequest: (evt) => true - Something else wants to become responder. Should this view release the responder? Returning true allows release
  • View.props.onResponderTerminate: (evt) => {} - The responder has been taken from the View. Might be taken by other views after a call to onResponderTerminationRequest, or might be taken by the OS without asking (happens with control center/ notification center on iOS)

evt is a synthetic touch event with the following form:

  • nativeEvent
    • changedTouches - Array of all touch events that have changed since the last event
    • identifier - The ID of the touch
    • locationX - The X position of the touch, relative to the element
    • locationY - The Y position of the touch, relative to the element
    • pageX - The X position of the touch, relative to the screen
    • pageY - The Y position of the touch, relative to the screen
    • target - The node id of the element receiving the touch event
    • timestamp - A time identifier for the touch, useful for velocity calculation
    • touches - Array of all current touches on the screen

Capture ShouldSet Handlers #

onStartShouldSetResponder and onMoveShouldSetResponder are called with a bubbling pattern, where the deepest node is called first. That means that the deepest component will become responder when multiple Views return true for *ShouldSetResponder handlers. This is desirable in most cases, because it makes sure all controls and buttons are usable.

However, sometimes a parent will want to make sure that it becomes responder. This can be handled by using the capture phase. Before the responder system bubbles up from the deepest component, it will do a capture phase, firing on*ShouldSetResponderCapture. So if a parent View wants to prevent the child from becoming responder on a touch start, it should have a onStartShouldSetResponderCapture handler which returns true.

  • View.props.onStartShouldSetResponderCapture: (evt) => true,
  • View.props.onMoveShouldSetResponderCapture: (evt) => true,

PanResponder #

For higher-level gesture interpretation, check out PanResponder.

Next →
React Native

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Gesture Responder System

Gesture recognition on mobile devices is much more complicated than web. A touch can go through several phases as the app determines what the user's intention is. For example, the app needs to determine if the touch is scrolling, sliding on a widget, or tapping. This can even change during the duration of a touch. There can also be multiple simultaneous touches.

The touch responder system is needed to allow components to negotiate these touch interactions without any additional knowledge about their parent or child components. This system is implemented in ResponderEventPlugin.js, which contains further details and documentation.

Best Practices #

Users can feel huge differences in the usability of web apps vs. native, and this is one of the big causes. Every action should have the following attributes:

  • Feedback/highlighting- show the user what is handling their touch, and what will happen when they release the gesture
  • Cancel-ability- when making an action, the user should be able to abort it mid-touch by dragging their finger away

These features make users more comfortable while using an app, because it allows people to experiment and interact without fear of making mistakes.

TouchableHighlight and Touchable* #

The responder system can be complicated to use. So we have provided an abstract Touchable implementation for things that should be "tappable". This uses the responder system and allows you to easily configure tap interactions declaratively. Use TouchableHighlight anywhere where you would use a button or link on web.

Responder Lifecycle #

A view can become the touch responder by implementing the correct negotiation methods. There are two methods to ask the view if it wants to become responder:

  • View.props.onStartShouldSetResponder: (evt) => true, - Does this view want to become responder on the start of a touch?
  • View.props.onMoveShouldSetResponder: (evt) => true, - Called for every touch move on the View when it is not the responder: does this view want to "claim" touch responsiveness?

If the View returns true and attempts to become the responder, one of the following will happen:

  • View.props.onResponderGrant: (evt) => {} - The View is now responding for touch events. This is the time to highlight and show the user what is happening
  • View.props.onResponderReject: (evt) => {} - Something else is the responder right now and will not release it

If the view is responding, the following handlers can be called:

  • View.props.onResponderMove: (evt) => {} - The user is moving their finger
  • View.props.onResponderRelease: (evt) => {} - Fired at the end of the touch, ie "touchUp"
  • View.props.onResponderTerminationRequest: (evt) => true - Something else wants to become responder. Should this view release the responder? Returning true allows release
  • View.props.onResponderTerminate: (evt) => {} - The responder has been taken from the View. Might be taken by other views after a call to onResponderTerminationRequest, or might be taken by the OS without asking (happens with control center/ notification center on iOS)

evt is a synthetic touch event with the following form:

  • nativeEvent
    • changedTouches - Array of all touch events that have changed since the last event
    • identifier - The ID of the touch
    • locationX - The X position of the touch, relative to the element
    • locationY - The Y position of the touch, relative to the element
    • pageX - The X position of the touch, relative to the screen
    • pageY - The Y position of the touch, relative to the screen
    • target - The node id of the element receiving the touch event
    • timestamp - A time identifier for the touch, useful for velocity calculation
    • touches - Array of all current touches on the screen

Capture ShouldSet Handlers #

onStartShouldSetResponder and onMoveShouldSetResponder are called with a bubbling pattern, where the deepest node is called first. That means that the deepest component will become responder when multiple Views return true for *ShouldSetResponder handlers. This is desirable in most cases, because it makes sure all controls and buttons are usable.

However, sometimes a parent will want to make sure that it becomes responder. This can be handled by using the capture phase. Before the responder system bubbles up from the deepest component, it will do a capture phase, firing on*ShouldSetResponderCapture. So if a parent View wants to prevent the child from becoming responder on a touch start, it should have a onStartShouldSetResponderCapture handler which returns true.

  • View.props.onStartShouldSetResponderCapture: (evt) => true,
  • View.props.onMoveShouldSetResponderCapture: (evt) => true,

PanResponder #

For higher-level gesture interpretation, check out PanResponder.

Next →
\ No newline at end of file + \ No newline at end of file diff --git a/docs/getting-started.html b/docs/getting-started.html index adcd234e4e9..101548dc945 100644 --- a/docs/getting-started.html +++ b/docs/getting-started.html @@ -1,5 +1,5 @@ Getting Started – React Native | A framework for building native apps using React
React Native

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Getting Started

Requirements #

  1. OS X - Only OS X is currently supported
  2. Homebrew is the recommended way to install Watchman and Flow.
  3. Install Node.js 4.0 or newer.
    • Install nvm with its setup instructions here. Then run nvm install node && nvm alias default node, which installs the latest version of Node.js and sets up your terminal so you can run it by typing node. With nvm you can install multiple versions of Node.js and easily switch between them.
    • New to npm?
  4. brew install watchman. We recommend installing watchman, otherwise you might hit a node file watching bug.
  5. brew install flow, if you want to use flow.

We recommend periodically running brew update && brew upgrade to keep your programs up-to-date.

iOS Setup #

Xcode 6.3 or higher is required. It can be installed from the App Store.

Android Setup #

To write React Native apps for Android, you will need to install the Android SDK (and an Android emulator if you want to work on your app without having to use a physical device). See Android setup guide for instructions on how to set up your Android environment.

Quick start #

$ npm install -g react-native-cli -$ react-native init AwesomeProject

To run the iOS app:

  • $ cd AwesomeProject
  • Open ios/AwesomeProject.xcodeproj and hit run in Xcode.
  • Open index.ios.js in your text editor of choice and edit some lines.
  • Hit ⌘-R in your iOS simulator to reload the app and see your change!

To run the Android app:

  • $ cd AwesomeProject
  • $ react-native run-android
  • Open index.android.js in your text editor of choice and edit some lines.
  • Press the menu button (F2 by default, or ⌘-M in Genymotion) and select Reload JS to see your change!
  • Run adb logcat *:S ReactNative:V ReactNativeJS:V in a terminal to see your app's logs

Note: If you are using a device, see the Running on Device page.

Congratulations! You've successfully run and modified your first React Native app.

If you run into any issues getting started, see the troubleshooting page.

Adding Android to an existing React Native project #

If you already have a (iOS-only) React Native project and want to add Android support, you need to execute the following commands in your existing project directory:

  1. Update the react-native dependency in your package.json file to the latest version
  2. $ npm install
  3. $ react-native android
Next →
\ No newline at end of file + \ No newline at end of file diff --git a/docs/image.html b/docs/image.html index 58505098f1e..d30afde09a9 100644 --- a/docs/image.html +++ b/docs/image.html @@ -429,7 +429,7 @@ exports.examples : 1, height: 200, }, -});
Next →
\ No newline at end of file + \ No newline at end of file diff --git a/docs/interactionmanager.html b/docs/interactionmanager.html index 2e4d2690dc4..d456b7bf90b 100644 --- a/docs/interactionmanager.html +++ b/docs/interactionmanager.html @@ -10,7 +10,7 @@ completion:

// later, on animation completion: InteractionManager.clearInteractionHandle(handle); -// queued tasks run if all handles were cleared

Methods #

static runAfterInteractions(callback: Function) #

Schedule a function to run after all interactions have completed.

static createInteractionHandle() #

Notify manager that an interaction has started.

static clearInteractionHandle(handle: Handle) #

Notify manager that an interaction has completed.

Properties #

Events: CallExpression #

addListener: CallExpression #

Next →
\ No newline at end of file + \ No newline at end of file diff --git a/docs/javascript-environment.html b/docs/javascript-environment.html index ce4e75e6a23..556ad0ce746 100644 --- a/docs/javascript-environment.html +++ b/docs/javascript-environment.html @@ -1,4 +1,4 @@ -JavaScript Environment – React Native | A framework for building native apps using React
React Native

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

JavaScript Environment

JavaScript Runtime #

When using React Native, you're going to be running your JavaScript code in two environments:

  • On iOS simulators and devices, Android emulators and devices React Native uses JavaScriptCore which is the JavaScript engine that powers Safari. On iOS JSC doesn't use JIT due to the absence of writable executable memory in iOS apps.
  • When using Chrome debugging, it runs all the JavaScript code within Chrome itself and communicates with native code via WebSocket. So you are using V8.

While both environments are very similar, you may end up hitting some inconsistencies. We're likely going to experiment with other JS engines in the future, so it's best to avoid relying on specifics of any runtime.

JavaScript Syntax Transformers #

Syntax transformers make writing code more enjoyable by allowing you to use new JavaScript syntax without having to wait for support on all interpreters.

As of version 0.5.0, React Native ships with the Babel JavaScript compiler. Check Babel documentation on its supported transformations for more details.

Here's a full list of React Native's enabled transformations.

ES5

  • Reserved Words: promise.catch(function() { });

ES6

ES7

Next →
React Native

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

JavaScript Environment

JavaScript Runtime #

When using React Native, you're going to be running your JavaScript code in two environments:

  • On iOS simulators and devices, Android emulators and devices React Native uses JavaScriptCore which is the JavaScript engine that powers Safari. On iOS JSC doesn't use JIT due to the absence of writable executable memory in iOS apps.
  • When using Chrome debugging, it runs all the JavaScript code within Chrome itself and communicates with native code via WebSocket. So you are using V8.

While both environments are very similar, you may end up hitting some inconsistencies. We're likely going to experiment with other JS engines in the future, so it's best to avoid relying on specifics of any runtime.

JavaScript Syntax Transformers #

Syntax transformers make writing code more enjoyable by allowing you to use new JavaScript syntax without having to wait for support on all interpreters.

As of version 0.5.0, React Native ships with the Babel JavaScript compiler. Check Babel documentation on its supported transformations for more details.

Here's a full list of React Native's enabled transformations.

ES5

  • Reserved Words: promise.catch(function() { });

ES6

ES7

Next →
\ No newline at end of file + \ No newline at end of file diff --git a/docs/known-issues.html b/docs/known-issues.html index faada527e7a..3e597d8d819 100644 --- a/docs/known-issues.html +++ b/docs/known-issues.html @@ -25,7 +25,7 @@ Alert

: 0}} /> </View>

The behavior on Android is what you would expect from the web as well. If you want to be able to click through an overlaying transparent view, you can set pointerEvents='none' on it.

The overflow style property defaults to hidden and cannot be changed on Android #

This is a result of how Android rendering works. This feature is not being worked on as it would be a significant undertaking and there are many more important tasks.

No support for shadows on Android #

We don't support shadows on Android currently. These are notoriously hard to implement as they require drawing outside of a view's bounds and Android's invalidation logic has a hard time with that. A possible solution is to use elevation, but more experimentation will be required.

Layout-only nodes on Android #

An optimization feature of the Android version of React Native is for views which only contribute to the layout to not have a native view, only their layout properties are propagated to their children views. This optimization is to provide stability in deep view hierarchies for React Native and is therefore enabled by default. Should you depend on a view being present or internal tests incorrectly detect a view is layout only it will be necessary to turn off this behavior. To do this, set collapsable to false as in this example:

<View collapsable={false}> ... -</View>

Memory issues with PNG images #

React Native Android depends on Fresco for loading and displaying images. Currently we have disabled downsampling because it is experimental, so you may run into memory issues when loading large PNG images.

react-native init hangs #

Try running react-native init with --verbose and see #2797 for common causes.

Next →
\ No newline at end of file + \ No newline at end of file diff --git a/docs/layoutanimation.html b/docs/layoutanimation.html index a4687d5c4fe..1723593366f 100644 --- a/docs/layoutanimation.html +++ b/docs/layoutanimation.html @@ -3,7 +3,7 @@ next layout happens.

A common way to use this API is to call LayoutA before calling setState.

Methods #

static configureNext(config: Config, onAnimationDidEnd?: Function) #

Schedules an animation to happen on the next layout.

@param config Specifies animation properties:

  • duration in milliseconds
  • create, config for animating in new views (see Anim type)
  • update, config for animating views that have been updated (see Anim type)

@param onAnimationDidEnd Called when the animation finished. Only supported on iOS. -@param onError Called on error. Only supported on iOS.

static create(duration: number, type, creationProp) #

Helper for creating a config for configureNext.

Properties #

Types: CallExpression #

Properties: CallExpression #

configChecker: CallExpression #

Presets: ObjectExpression #

easeInEaseOut: CallExpression #

linear: CallExpression #

spring: CallExpression #

Next →
\ No newline at end of file + \ No newline at end of file diff --git a/docs/linking-libraries-ios.html b/docs/linking-libraries-ios.html index be9f8898f60..8c9c034e2a9 100644 --- a/docs/linking-libraries-ios.html +++ b/docs/linking-libraries-ios.html @@ -18,7 +18,7 @@ received.

For that we need to know the library's headers. To achieve to your project's file, select Build Settings and search for Header Search Paths. There you should include the path to your library (if it has relevant files on subdirectories remember to make it recursive, like React on the -example).

Next →
\ No newline at end of file + \ No newline at end of file diff --git a/docs/linkingios.html b/docs/linkingios.html index ee7b0f3d064..dad9f1d444c 100644 --- a/docs/linkingios.html +++ b/docs/linkingios.html @@ -24,7 +24,7 @@ execution you'll need to add the following lines to you *AppDelegate. and providing the handler

static removeEventListener(type: string, handler: Function) #

Remove a handler by passing the url event type and the handler

static openURL(url: string) #

Try to open the given url with any of the installed apps.

static canOpenURL(url: string, callback: Function) #

Determine whether or not an installed app can handle a given url The callback function will be called with bool supported as the only argument

NOTE: As of iOS 9, your app needs to provide a LSApplicationQueriesSchemes key inside Info.plist.

static popInitialURL() #

If the app launch was triggered by an app link, it will pop the link url, -otherwise it will return null

Next →
© 2015 Facebook Inc.
\ No newline at end of file + \ No newline at end of file diff --git a/docs/listview.html b/docs/listview.html index 654c5cc0124..b6d4f891ec3 100644 --- a/docs/listview.html +++ b/docs/listview.html @@ -174,7 +174,7 @@ pixels.

}, }); -module.exports = ListViewSimpleExample;

Next →
© 2015 Facebook Inc.
\ No newline at end of file + \ No newline at end of file diff --git a/docs/mapview.html b/docs/mapview.html index a4bd59f3cd9..b430a7e09a0 100644 --- a/docs/mapview.html +++ b/docs/mapview.html @@ -251,7 +251,7 @@ exports.examples return <MapView style={styles.map} showsUserLocation={true} />; } } -];
Next →
© 2015 Facebook Inc.
\ No newline at end of file + \ No newline at end of file diff --git a/docs/modal.html b/docs/modal.html index 8f0bebfa988..55680602232 100644 --- a/docs/modal.html +++ b/docs/modal.html @@ -159,7 +159,7 @@ exports.examples : { marginTop: 10, }, -});
Next →
© 2015 Facebook Inc.
\ No newline at end of file + \ No newline at end of file diff --git a/docs/native-components-android.html b/docs/native-components-android.html index 93c9f8254f0..2564263ef5e 100644 --- a/docs/native-components-android.html +++ b/docs/native-components-android.html @@ -88,7 +88,7 @@ MyCustomView.propTypes var RCTMyCustomView = requireNativeComponent(`RCTMyCustomView`, MyCustomView, { nativeOnly: {onChange: true} -});

Note the use of nativeOnly above. Sometimes you'll have some special properties that you need to expose for the native component, but don't actually want them as 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 (similar to onChangeMessage in the example above). 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 call them out via the nativeOnly option.

Next →
© 2015 Facebook Inc.
\ No newline at end of file + \ No newline at end of file diff --git a/docs/native-components-ios.html b/docs/native-components-ios.html index ef4d78c5e5a..be772a13942 100644 --- a/docs/native-components-ios.html +++ b/docs/native-components-ios.html @@ -227,7 +227,7 @@ MapView.propTypes "datetime": @(UIDatePickerModeDateAndTime), } }; -}

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 actual RCTMapManager and other components in the source code.

Next →
© 2015 Facebook Inc.
\ No newline at end of file + \ No newline at end of file diff --git a/docs/native-modules-android.html b/docs/native-modules-android.html index 68f7cd01776..eb907784e78 100644 --- a/docs/native-modules-android.html +++ b/docs/native-modules-android.html @@ -133,7 +133,7 @@ WritableMap params = Arguments:function(e: Event) { this.keyboardWillOpenTo = e; this.props.onKeyboardWillShow && this.props.onKeyboardWillShow(e); - },
Next →
© 2015 Facebook Inc.
\ No newline at end of file + \ No newline at end of file diff --git a/docs/native-modules-ios.html b/docs/native-modules-ios.html index ae940796b80..7bdc1ce41d6 100644 --- a/docs/native-modules-ios.html +++ b/docs/native-modules-ios.html @@ -114,7 +114,7 @@ class CalendarManagerRCT_EXTERN_METHOD(addEvent:(NSString *)name location:(NSString *)location date:(NSNumber *)date) @end

For those of you new to Swift and Objective-C, whenever you mix the two languages in an iOS project, you will also need an additional bridging file, known as a bridging header, to expose the Objective-C files to Swift. Xcode will offer to create this header file for you if you add your Swift file to your app through the Xcode File>New File menu option. You will need to import RCTBridgeModule.h in this header file.

// CalendarManager-Bridging-Header.h -#import "RCTBridgeModule.h"

You can also use RCT_EXTERN_REMAP_MODULE and RCT_EXTERN_REMAP_METHOD to alter the JavaScript name of the module or methods you are exporting. For more information see RCTBridgeModule.

Next →
© 2015 Facebook Inc.
\ No newline at end of file + \ No newline at end of file diff --git a/docs/nativemethodsmixin.html b/docs/nativemethodsmixin.html index 94145f7d3ac..c448226d4ab 100644 --- a/docs/nativemethodsmixin.html +++ b/docs/nativemethodsmixin.html @@ -17,7 +17,7 @@ are relative to the origin x, y of the ancestor view.

As always, to obtain future diff process - this means that if you do not include them in the next render, they will remain active (see Direct Manipulation).

static focus() #

Requests focus for the given input or view. The exact behavior triggered -will depend on the platform and type of view.

static blur() #

Removes focus from an input or view. This is the opposite of focus().

Next →
© 2015 Facebook Inc.
\ No newline at end of file + \ No newline at end of file diff --git a/docs/navigator-comparison.html b/docs/navigator-comparison.html index a9177d09261..ca3628e9792 100644 --- a/docs/navigator-comparison.html +++ b/docs/navigator-comparison.html @@ -12,7 +12,7 @@ class, and Navigator re-implements that functionality entirely in JavaScript as a React component. A corollary of this is that Navigator will be compatible with Android and iOS, whereas NavigatorIOS will only work on the one platform. Below is an itemized list of differences -between the two.

Navigator #

NavigatorIOS #

For most non-trivial apps, you will want to use Navigator - it won't be long before you run into issues when trying to do anything complex with NavigatorIOS.

Next →
© 2015 Facebook Inc.
\ No newline at end of file + \ No newline at end of file diff --git a/docs/navigator.html b/docs/navigator.html index 0010448e0ce..f4ea74d40d7 100644 --- a/docs/navigator.html +++ b/docs/navigator.html @@ -41,7 +41,7 @@ Use navigationContext.addListener('didfocus', callback) i complete or after the initial mounting

onWillFocus function #

@deprecated Use navigationContext.addListener('willfocus', callback) instead.

Will emit the target route upon mounting and before each nav transition

renderScene function #

Required function which renders the scene for a given route. Will be invoked with the route and the navigator object

(route, navigator) => - <MySceneComponent title={route.title} />

sceneStyle View#style #

Styles to apply to the container of each scene

Next →
© 2015 Facebook Inc.
\ No newline at end of file + \ No newline at end of file diff --git a/docs/navigatorios.html b/docs/navigatorios.html index 2748ec8c581..0b6cf9f94e3 100644 --- a/docs/navigatorios.html +++ b/docs/navigatorios.html @@ -272,7 +272,7 @@ A common use case is to set the backgroundColor for every page

}, }); -module.exports = NavigatorIOSExample;
Next →
© 2015 Facebook Inc.
\ No newline at end of file + \ No newline at end of file diff --git a/docs/netinfo.html b/docs/netinfo.html index ec7760dcee1..84720c8eab8 100644 --- a/docs/netinfo.html +++ b/docs/netinfo.html @@ -129,7 +129,7 @@ exports.examples : 'Observed updates to iOS reachability', render(): ReactElement { return <ReachabilitySubscription />; } }, -];
Next →
© 2015 Facebook Inc.
\ No newline at end of file + \ No newline at end of file diff --git a/docs/network.html b/docs/network.html index c54311ba802..78982d3b0df 100644 --- a/docs/network.html +++ b/docs/network.html @@ -39,7 +39,7 @@ ws.on.on('close', function(e) { // connection closed console.log(e.code, e.reason); -});
Next →
© 2015 Facebook Inc.
\ No newline at end of file + \ No newline at end of file diff --git a/docs/panresponder.html b/docs/panresponder.html index 51d9acc75c0..f4027f242f7 100644 --- a/docs/panresponder.html +++ b/docs/panresponder.html @@ -183,7 +183,7 @@ are the responder.

}, }); -module.exports = PanResponderExample;

Next →
© 2015 Facebook Inc.
\ No newline at end of file + \ No newline at end of file diff --git a/docs/performance.html b/docs/performance.html index cfaf60e47df..c86bf200a7a 100644 --- a/docs/performance.html +++ b/docs/performance.html @@ -185,7 +185,7 @@ inside of your onPress handler in requestAnimationFrame}); }

Profiling #

Use the built-in Profiler to get detailed information about work done in the JavaScript thread and main thread side-by-side.

For iOS, Instruments are an invaluable tool, and on Android you should -learn to use systrace.

Next →
© 2015 Facebook Inc.
\ No newline at end of file + \ No newline at end of file diff --git a/docs/pickerios.html b/docs/pickerios.html index fe2abf6ba39..b240367cfbb 100644 --- a/docs/pickerios.html +++ b/docs/pickerios.html @@ -106,7 +106,7 @@ exports.examples : function(): ReactElement { return <PickerExample />; }, -}];
Next →
© 2015 Facebook Inc.
\ No newline at end of file + \ No newline at end of file diff --git a/docs/pixelratio.html b/docs/pixelratio.html index c7cc9904bae..9563e38489c 100644 --- a/docs/pixelratio.html +++ b/docs/pixelratio.html @@ -12,7 +12,7 @@ by the pixel ratio.

static getPixelSizeForLayoutSize(layoutSize: number) #

Converts a layout size (dp) to pixel size (px).

Guaranteed to return an integer number.

static startDetecting() #

// No-op for iOS, but used on the web. Should not be documented.

Edit on GitHubDescription #

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.

Next →
© 2015 Facebook Inc.
\ No newline at end of file + \ No newline at end of file diff --git a/docs/progressbarandroid.html b/docs/progressbarandroid.html index f243ccd0e1e..44bfd2d166b 100644 --- a/docs/progressbarandroid.html +++ b/docs/progressbarandroid.html @@ -58,7 +58,7 @@ that the app is loading or there is some activity in the app.

Example:

}, }); -module.exports = ProgressBarAndroidExample;
Next →
© 2015 Facebook Inc.
\ No newline at end of file + \ No newline at end of file diff --git a/docs/progressviewios.html b/docs/progressviewios.html index 7ef2c6f61ba..1d28bd960c1 100644 --- a/docs/progressviewios.html +++ b/docs/progressviewios.html @@ -66,7 +66,7 @@ exports.examples : { marginTop: 20, } -});
Next →
© 2015 Facebook Inc.
\ No newline at end of file + \ No newline at end of file diff --git a/docs/pushnotificationios.html b/docs/pushnotificationios.html index ad1f5120c12..44321c1da64 100644 --- a/docs/pushnotificationios.html +++ b/docs/pushnotificationios.html @@ -171,7 +171,7 @@ exports.examples render(): React.Component { return <NotificationPermissionExample />; } -}];
Next →
© 2015 Facebook Inc.
\ No newline at end of file + \ No newline at end of file diff --git a/docs/running-on-device-android.html b/docs/running-on-device-android.html index ce8df133072..b24c949da09 100644 --- a/docs/running-on-device-android.html +++ b/docs/running-on-device-android.html @@ -1,4 +1,4 @@ -Running On Device – React Native | A framework for building native apps using React
React Native

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Running On Device

USB Debugging #

The easiest way to develop on a device is by USB debugging. First, make sure you have USB debugging enabled on your device. Once debugging is enabled on the device you can use react-native run-android in the same way as with emulator to install and launch your React Native app on the connected device.

Accessing development server from device #

You can also iterate quickly on device using the development server. Follow one of the steps described below to make your development server running on your laptop accessible for your device.

Hint

Most modern android devices don't have a hardware menu button, which we use to trigger the developer menu. In that case you can shake the device to open the dev menu (reload, debug, etc.)

Using adb reverse #

Note that this option is available on devices running android 5.0+ (API 21).

Have your device connected via USB with debugging enabled (see paragraph above on how to enable USB debugging on your device).

  1. Run adb reverse tcp:8081 tcp:8081
  2. You can use Reload JS and other development options with no extra configuration

Configure device to connect to the dev server via Wi-Fi #

To do that, your laptop and your phone have to be on the same wifi network.

  1. Open rage shake menu (shake the device) or run adb shell input keyevent 82
  2. Go to Dev Settings
  3. Go to Debug server host for device
  4. Type in your machine's IP address and the port of the packager and Reload JS
Next →
© 2015 Facebook Inc.
React Native

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Running On Device

USB Debugging #

The easiest way to develop on a device is by USB debugging. First, make sure you have USB debugging enabled on your device. Once debugging is enabled on the device you can use react-native run-android in the same way as with emulator to install and launch your React Native app on the connected device.

Accessing development server from device #

You can also iterate quickly on device using the development server. Follow one of the steps described below to make your development server running on your laptop accessible for your device.

Hint

Most modern android devices don't have a hardware menu button, which we use to trigger the developer menu. In that case you can shake the device to open the dev menu (reload, debug, etc.)

Using adb reverse #

Note that this option is available on devices running android 5.0+ (API 21).

Have your device connected via USB with debugging enabled (see paragraph above on how to enable USB debugging on your device).

  1. Run adb reverse tcp:8081 tcp:8081
  2. You can use Reload JS and other development options with no extra configuration

Configure device to connect to the dev server via Wi-Fi #

To do that, your laptop and your phone have to be on the same wifi network.

  1. Open rage shake menu (shake the device) or run adb shell input keyevent 82
  2. Go to Dev Settings
  3. Go to Debug server host for device
  4. Type in your machine's IP address and the port of the packager and Reload JS
Next →
© 2015 Facebook Inc.
\ No newline at end of file + \ No newline at end of file diff --git a/docs/running-on-device-ios.html b/docs/running-on-device-ios.html index 50420fd5431..f7ac6752aaf 100644 --- a/docs/running-on-device-ios.html +++ b/docs/running-on-device-ios.html @@ -1,4 +1,4 @@ -Running On Device – React Native | A framework for building native apps using React
React Native

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Running On Device

Note that running on device requires Apple Developer account and provisioning your iPhone. This guide covers only React Native specific topic.

Accessing development server from device #

You can iterate quickly on device using development server. To do that, your laptop and your phone have to be on the same wifi network.

  1. Open AwesomeApp/ios/AwesomeApp/AppDelegate.m
  2. Change the IP in the URL from localhost to your laptop's IP
  3. In Xcode select your phone as build target and press "Build and run"

Hint

Shake the device to open development menu (reload, debug, etc.)

Using offline bundle #

You can also pack all the JavaScript code within the app itself. This way you can test it without development server running and submit the app to the AppStore.

  1. Open AwesomeApp/ios/AwesomeApp/AppDelegate.m
  2. Follow the instructions for "OPTION 2":
    • Uncomment jsCodeLocation = [[NSBundle mainBundle] ...
    • Run the react-native bundle command in terminal from the root directory of your app

The bundle script supports a couple of flags:

  • --dev - sets the value of __DEV__ variable to true. When true it turns on a bunch of useful development warnings. For production it is recommended to set __DEV__=false.
  • --minify - pipe the JS code through UglifyJS.

Note that on 0.14 we'll change the API of react-native bundle. The major changes are:

  • API is now entry-file <path> based instead of url based.
  • Need to specify which platform you're bundling for --platform <ios|android>.
  • Option --out has been renamed for --bundle-output.
  • Source maps are no longer automatically generated. Need to specify --sourcemap-output <path>

Disabling in-app developer menu #

When building your app for production, your app's scheme should be set to Release as detailed in the debugging documentation in order to disable the in-app developer menu.

Troubleshooting #

If curl command fails make sure the packager is running. Also try adding --ipv4 flag to the end of it.

If you started your project a while ago, main.jsbundle might not be included into Xcode project. To add it, right click on your project directory and click "Add Files to ..." - choose the main.jsbundle file that you generated.

Next →
© 2015 Facebook Inc.
React Native

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Running On Device

Note that running on device requires Apple Developer account and provisioning your iPhone. This guide covers only React Native specific topic.

Accessing development server from device #

You can iterate quickly on device using development server. To do that, your laptop and your phone have to be on the same wifi network.

  1. Open AwesomeApp/ios/AwesomeApp/AppDelegate.m
  2. Change the IP in the URL from localhost to your laptop's IP
  3. In Xcode select your phone as build target and press "Build and run"

Hint

Shake the device to open development menu (reload, debug, etc.)

Using offline bundle #

You can also pack all the JavaScript code within the app itself. This way you can test it without development server running and submit the app to the AppStore.

  1. Open AwesomeApp/ios/AwesomeApp/AppDelegate.m
  2. Follow the instructions for "OPTION 2":
    • Uncomment jsCodeLocation = [[NSBundle mainBundle] ...
    • Run the react-native bundle command in terminal from the root directory of your app

The bundle script supports a couple of flags:

  • --dev - sets the value of __DEV__ variable to true. When true it turns on a bunch of useful development warnings. For production it is recommended to set __DEV__=false.
  • --minify - pipe the JS code through UglifyJS.

Note that on 0.14 we'll change the API of react-native bundle. The major changes are:

  • API is now entry-file <path> based instead of url based.
  • Need to specify which platform you're bundling for --platform <ios|android>.
  • Option --out has been renamed for --bundle-output.
  • Source maps are no longer automatically generated. Need to specify --sourcemap-output <path>

Disabling in-app developer menu #

When building your app for production, your app's scheme should be set to Release as detailed in the debugging documentation in order to disable the in-app developer menu.

Troubleshooting #

If curl command fails make sure the packager is running. Also try adding --ipv4 flag to the end of it.

If you started your project a while ago, main.jsbundle might not be included into Xcode project. To add it, right click on your project directory and click "Add Files to ..." - choose the main.jsbundle file that you generated.

Next →
© 2015 Facebook Inc.
\ No newline at end of file + \ No newline at end of file diff --git a/docs/scrollview.html b/docs/scrollview.html index 002ea9bcfc1..8a59b2eb3d9 100644 --- a/docs/scrollview.html +++ b/docs/scrollview.html @@ -169,7 +169,7 @@ THUMBS = THUMBS: 64, height: 64, } -});
Next →
© 2015 Facebook Inc.
\ No newline at end of file + \ No newline at end of file diff --git a/docs/segmentedcontrolios.html b/docs/segmentedcontrolios.html index 722295cd565..bbe0211ed7e 100644 --- a/docs/segmentedcontrolios.html +++ b/docs/segmentedcontrolios.html @@ -155,7 +155,7 @@ exports.examples : 'Change events can be detected', render(): ReactElement { return <EventSegmentedControlExample />; } } -];
Next →
© 2015 Facebook Inc.
\ No newline at end of file + \ No newline at end of file diff --git a/docs/signed-apk-android.html b/docs/signed-apk-android.html index 8d1066728b3..df495b73cfd 100644 --- a/docs/signed-apk-android.html +++ b/docs/signed-apk-android.html @@ -32,7 +32,7 @@ android { } } } -...
Next →
© 2015 Facebook Inc.
\ No newline at end of file + \ No newline at end of file diff --git a/docs/sliderios.html b/docs/sliderios.html index 53063f2f022..3ba36e3063a 100644 --- a/docs/sliderios.html +++ b/docs/sliderios.html @@ -57,7 +57,7 @@ exports.examples : 'SliderIOS', render(): ReactElement { return <SliderExample />; } } -];
Next →
© 2015 Facebook Inc.
\ No newline at end of file + \ No newline at end of file diff --git a/docs/statusbarios.html b/docs/statusbarios.html index 00f5fba2879..480ff31bbb4 100644 --- a/docs/statusbarios.html +++ b/docs/statusbarios.html @@ -99,7 +99,7 @@ exports.examples : '#eeeeee', padding: 10, }, -});
Next →
© 2015 Facebook Inc.
\ No newline at end of file + \ No newline at end of file diff --git a/docs/style.html b/docs/style.html index c48cc3de0f0..3ed7ba09ed3 100644 --- a/docs/style.html +++ b/docs/style.html @@ -35,7 +35,7 @@ }); // ... in another file ... -<List style={styles.list} elementStyle={styles.listElement} />

Supported Properties #

You can checkout latest support of CSS Properties in following Links.

Next →
© 2015 Facebook Inc.
\ No newline at end of file + \ No newline at end of file diff --git a/docs/stylesheet.html b/docs/stylesheet.html index eabd98190c4..63a4eabe93b 100644 --- a/docs/stylesheet.html +++ b/docs/stylesheet.html @@ -17,7 +17,7 @@ easier to understand.
  • Naming the styles is a good way to add meaning to the low level components in the render function.

    • Performance:

    • Making a stylesheet from a style object makes it possible to refer to it by ID instead of creating a new style object every time.
    • It also allows to send the style only once through the bridge. All -subsequent uses are going to refer an id (not implemented yet).

    Methods #

    static create(obj: {[key: string]: any}) #

    Next →
    © 2015 Facebook Inc.
    \ No newline at end of file + \ No newline at end of file diff --git a/docs/switchandroid.html b/docs/switchandroid.html index 0f5d45ee392..af7eb7e412b 100644 --- a/docs/switchandroid.html +++ b/docs/switchandroid.html @@ -64,7 +64,7 @@ } }); -module.exports = SwitchAndroidExample;
    Next →
    © 2015 Facebook Inc.
    \ No newline at end of file + \ No newline at end of file diff --git a/docs/switchios.html b/docs/switchios.html index 4f53b7ab2f0..2dfc94681d8 100644 --- a/docs/switchios.html +++ b/docs/switchios.html @@ -140,7 +140,7 @@ exports.examples : 'Switches are controlled components', render(): ReactElement { return <SwitchIOS />; } } -];
    Next →
    © 2015 Facebook Inc.
    \ No newline at end of file + \ No newline at end of file diff --git a/docs/tabbarios-item.html b/docs/tabbarios-item.html index ba01509bae9..2c0cd88f96d 100644 --- a/docs/tabbarios-item.html +++ b/docs/tabbarios-item.html @@ -4,7 +4,7 @@ blank content, you probably forgot to add a selected one.

    style View#style #

    React style object.

    systemIcon enum('bookmarks', 'contacts', 'downloads', 'favorites', 'featured', 'history', 'more', 'most-recent', 'most-viewed', 'recents', 'search', 'top-rated') #

    Items comes with a few predefined system icons. Note that if you are using them, the title and selectedIcon will be overriden with the system ones.

    title string #

    Text that appears under the icon. It is ignored when a system icon -is defined.

    Next →
    © 2015 Facebook Inc.
    \ No newline at end of file + \ No newline at end of file diff --git a/docs/tabbarios.html b/docs/tabbarios.html index 22a3b586c36..a1c88dccabf 100644 --- a/docs/tabbarios.html +++ b/docs/tabbarios.html @@ -92,7 +92,7 @@ }, }); -module.exports = TabBarExample;
    Next →
    © 2015 Facebook Inc.
    \ No newline at end of file + \ No newline at end of file diff --git a/docs/testing.html b/docs/testing.html index 4ac02cd87e4..4cbac40ea00 100644 --- a/docs/testing.html +++ b/docs/testing.html @@ -19,7 +19,7 @@ "source-map" ] }, -...

    Note: you may have to install/upgrade/link Node.js and other parts of your environment in order for the tests to run correctly. Check out the latest setup in .travis.yml

    Integration Tests (iOS only) #

    React Native provides facilities to make it easier to test integrated components that require both native and JS components to communicate across the bridge. The two main components are RCTTestRunner and RCTTestModule. RCTTestRunner sets up the ReactNative environment and provides facilities to run the tests as XCTestCases in Xcode (runTest:module is the simplest method). RCTTestModule is exported to JS as NativeModules.TestModule. The tests themselves are written in JS, and must call TestModule.markTestCompleted() when they are done, otherwise the test will timeout and fail. Test failures are primarily indicated by throwing a JS exception. It is also possible to test error conditions with runTest:module:initialProps:expectErrorRegex: or runTest:module:initialProps:expectErrorBlock: which will expect an error to be thrown and verify the error matches the provided criteria. See IntegrationTestHarnessTest.js, IntegrationTests.m, and IntegrationTestsApp.js for example usage and integration points.

    You can run integration tests locally with cmd+U in the IntegrationTest and UIExplorer apps in Xcode.

    Snapshot Tests (iOS only) #

    A common type of integration test is the snapshot test. These tests render a component, and verify snapshots of the screen against reference images using TestModule.verifySnapshot(), using the FBSnapshotTestCase library behind the scenes. Reference images are recorded by setting recordMode = YES on the RCTTestRunner, then running the tests. Snapshots will differ slightly between 32 and 64 bit, and various OS versions, so it's recommended that you enforce tests are run with the correct configuration. It's also highly recommended that all network data be mocked out, along with other potentially troublesome dependencies. See SimpleSnapshotTest for a basic example.

    If you make a change that affects a snapshot test in a PR, such as adding a new example case to one of the examples that is snapshotted, you'll need to re-record the snapshotshot reference image. To do this, simply change to _runner.recordMode = YES; in UIExplorer/IntegrationTests.m, re-run the failing tests, then flip record back to NO and submit/update your PR and wait to see if the Travis build passes.

    Next →
    © 2015 Facebook Inc.
    \ No newline at end of file + \ No newline at end of file diff --git a/docs/text.html b/docs/text.html index 77473b210f3..dafeafa8a5f 100644 --- a/docs/text.html +++ b/docs/text.html @@ -72,7 +72,7 @@ html { <Text style={{color: 'red'}}> and red </Text> -</Text>

    We believe that this more constrained way to style text will yield better apps:

    • (Developer) React components are designed with strong isolation in mind: You should be able to drop a component anywhere in your application, trusting that as long as the props are the same, it will look and behave the same way. Text properties that could inherit from outside of the props would break this isolation.

    • (Implementor) The implementation of React Native is also simplified. We do not need to have a fontFamily field on every single element, and we do not need to potentially traverse the tree up to the root every time we display a text node. The style inheritance is only encoded inside of the native Text component and doesn't leak to other components or the system itself.

    Next →
    © 2015 Facebook Inc.
    \ No newline at end of file + \ No newline at end of file diff --git a/docs/textinput.html b/docs/textinput.html index c7787f996cb..175d95b08eb 100644 --- a/docs/textinput.html +++ b/docs/textinput.html @@ -36,7 +36,7 @@ unwanted edits without flicker.

    iosmaxLength number #

    Limits the maximum number of characters that can be entered. Use this instead of implementing the logic in JS to avoid flicker.

    androidnumberOfLines number #

    Sets the number of lines for a TextInput. Use it with multiline set to true to be able to fill the lines.

    iosreturnKeyType enum('default', 'go', 'google', 'join', 'next', 'route', 'search', 'send', 'yahoo', 'done', 'emergency-call') #

    Determines how the return key should look.

    iosselectTextOnFocus bool #

    If true, all text will automatically be selected on focus

    iosselectionState DocumentSelectionState #

    See DocumentSelectionState.js, some state that is responsible for -maintaining selection information for a document

    androidtextAlignVertical enum('top', 'center', 'bottom') #

    Aligns text vertically within the TextInput.

    androidunderlineColorAndroid string #

    The color of the textInput underline.

    Next →
    © 2015 Facebook Inc.
    \ No newline at end of file + \ No newline at end of file diff --git a/docs/timers.html b/docs/timers.html index ee0fda34244..3232bd75f28 100644 --- a/docs/timers.html +++ b/docs/timers.html @@ -14,7 +14,7 @@ 500 ); } -});

    We strongly discourage using the global setTimeout(...) and recommend instead that you use this.setTimeout(...) provided by react-timer-mixin. This will eliminate a lot of hard work tracking down bugs, such as crashes caused by timeouts firing after a component has been unmounted.

    © 2015 Facebook Inc.
    \ No newline at end of file + \ No newline at end of file diff --git a/docs/toastandroid.html b/docs/toastandroid.html index f6a80efb37f..2f7491a7b70 100644 --- a/docs/toastandroid.html +++ b/docs/toastandroid.html @@ -51,7 +51,7 @@ which takes the following parameters:

    1. String message: A string with t }, }); -module.exports = ToastExample;
      Next →
      © 2015 Facebook Inc.
      \ No newline at end of file + \ No newline at end of file diff --git a/docs/toolbarandroid.html b/docs/toolbarandroid.html index e067ff4a297..80b1d716777 100644 --- a/docs/toolbarandroid.html +++ b/docs/toolbarandroid.html @@ -133,7 +133,7 @@ callback is the position of the action in the actions array.

      }, }); -module.exports = ToolbarAndroidExample;
      Next →
      © 2015 Facebook Inc.
      \ No newline at end of file + \ No newline at end of file diff --git a/docs/touchablehighlight.html b/docs/touchablehighlight.html index 4f7bf27f3a9..bb1ccc8fdc1 100644 --- a/docs/touchablehighlight.html +++ b/docs/touchablehighlight.html @@ -14,7 +14,7 @@ backgroundColor of the wrapped view isn't explicitly set to an opaque color ); },

      NOTE: TouchableHighlight supports only one child

      If you wish to have several child components, wrap them in a View.

      Edit on GitHubProps #

      activeOpacity number #

      Determines what the opacity of the wrapped view should be when touch is active.

      onHideUnderlay function #

      Called immediately after the underlay is hidden

      onShowUnderlay function #

      Called immediately after the underlay is shown

      style View#style #

      underlayColor string #

      The color of the underlay that will show through when the touch is -active.

      Next →
      © 2015 Facebook Inc.
      \ No newline at end of file + \ No newline at end of file diff --git a/docs/touchablenativefeedback.html b/docs/touchablenativefeedback.html index 18557c4bd90..7798a25ae07 100644 --- a/docs/touchablenativefeedback.html +++ b/docs/touchablenativefeedback.html @@ -26,7 +26,7 @@ object that represents ripple drawable with specified color (as a string). If property borderless evaluates to true the ripple will render outside of the view bounds (see native actionbar buttons as an example of that behavior). This background type is available on Android -API level 21+

      Next →
      © 2015 Facebook Inc.
      \ No newline at end of file + \ No newline at end of file diff --git a/docs/touchableopacity.html b/docs/touchableopacity.html index aa79bc40e1b..63d8e38b9d7 100644 --- a/docs/touchableopacity.html +++ b/docs/touchableopacity.html @@ -11,7 +11,7 @@ easy to add to an app without weird side-effects.

      Example:

      /TouchableOpacity> ); },

      Edit on GitHubProps #

      activeOpacity number #

      Determines what the opacity of the wrapped view should be when touch is -active.

      Next →
      © 2015 Facebook Inc.
      \ No newline at end of file + \ No newline at end of file diff --git a/docs/touchablewithoutfeedback.html b/docs/touchablewithoutfeedback.html index bfd11cca58f..412d772a863 100644 --- a/docs/touchablewithoutfeedback.html +++ b/docs/touchablewithoutfeedback.html @@ -1,7 +1,7 @@ TouchableWithoutFeedback – React Native | A framework for building native apps using React
      React Native

      Quick Start

      Guides

      Guides (iOS)

      Guides (Android)

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

      Edit on GitHubProps #

      accessibilityComponentType View.AccessibilityComponentType #

      accessibilityTraits View.AccessibilityTraits, [View.AccessibilityTraits] #

      accessible bool #

      delayLongPress number #

      Delay in ms, from onPressIn, before onLongPress is called.

      delayPressIn number #

      Delay in ms, from the start of the touch, before onPressIn is called.

      delayPressOut number #

      Delay in ms, from the release of the touch, before onPressOut is called.

      onLayout function #

      Invoked on mount and layout changes with

      {nativeEvent: {layout: {x, y, width, height}}}

      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.
      \ No newline at end of file + \ No newline at end of file diff --git a/docs/transforms.html b/docs/transforms.html index 06e6aa61e9c..5a2b136d56f 100644 --- a/docs/transforms.html +++ b/docs/transforms.html @@ -1,4 +1,4 @@ -Transforms – React Native | A framework for building native apps using React
      React Native

      Quick Start

      Guides

      Guides (iOS)

      Guides (Android)

      components

      apis

      Polyfills

      Transforms

      Edit on GitHubProps #

      transform [{perspective: number}, {rotate: string}, {rotateX: string}, {rotateY: string}, {rotateZ: string}, {scale: number}, {scaleX: number}, {scaleY: number}, {translateX: number}, {translateY: number}, {skewX: string}, {skewY: string}] #

      transformMatrix TransformMatrixPropType #

      Next →
      © 2015 Facebook Inc.
      React Native

      Quick Start

      Guides

      Guides (iOS)

      Guides (Android)

      components

      apis

      Polyfills

      Transforms

      Edit on GitHubProps #

      transform [{perspective: number}, {rotate: string}, {rotateX: string}, {rotateY: string}, {rotateZ: string}, {scale: number}, {scaleX: number}, {scaleY: number}, {translateX: number}, {translateY: number}, {skewX: string}, {skewY: string}] #

      transformMatrix TransformMatrixPropType #

      Next →
      © 2015 Facebook Inc.
      \ No newline at end of file + \ No newline at end of file diff --git a/docs/troubleshooting.html b/docs/troubleshooting.html index 0d2c5e299e3..8a19b87f1ad 100644 --- a/docs/troubleshooting.html +++ b/docs/troubleshooting.html @@ -12,7 +12,7 @@ sudo chown -R $USER 'RCTImage', 'RCTNetwork', 'RCTWebSocket', -]

      Next, make sure you have run pod install and that a Pods/ directory has been created in your project with React installed. CocoaPods will instruct you to use the generated .xcworkspace file henceforth to be able to use these installed dependencies.

      If you are adding React manually, make sure you have included all the relevant dependencies, like RCTText.xcodeproj, RCTImage.xcodeproj depending on the ones you are using. Next, the binaries built by these dependencies have to be linked to your app binary. Use the Linked Frameworks and Binaries section in the Xcode project settings. More detailed steps are here: Linking Libraries.

      Argument list too long: recursive header expansion failed #

      In the project's build settings, User Search Header Paths and Header Search Paths are two configs that specify where Xcode should look for #import header files specified in the code. For Pods, CocoaPods uses a default array of specific folders to look in. Verify that this particular config is not overwritten, and that none of the folders configured are too large. If one of the folders is a large folder, Xcode will attempt to recursively search the entire directory and throw above error at some point.

      To revert the User Search Header Paths and Header Search Paths build settings to their defaults set by CocoaPods - select the entry in the Build Settings panel, and hit delete. It will remove the custom override and return to the CocoaPod defaults.

      © 2015 Facebook Inc.
      \ No newline at end of file + \ No newline at end of file diff --git a/docs/tutorial.html b/docs/tutorial.html index 6d07f02acfc..a11ec115fe9 100644 --- a/docs/tutorial.html +++ b/docs/tutorial.html @@ -289,7 +289,7 @@ }, }); -AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
      Next →
      © 2015 Facebook Inc.
      \ No newline at end of file + \ No newline at end of file diff --git a/docs/vibrationios.html b/docs/vibrationios.html index 534641582d9..2a43f2ce712 100644 --- a/docs/vibrationios.html +++ b/docs/vibrationios.html @@ -39,7 +39,7 @@ exports.examples : '#eeeeee', padding: 10, }, -});
      Next →
      © 2015 Facebook Inc.
      \ No newline at end of file + \ No newline at end of file diff --git a/docs/videos.html b/docs/videos.html index a7bf265b22d..27f17b205ab 100644 --- a/docs/videos.html +++ b/docs/videos.html @@ -15,7 +15,7 @@ This player is only available in HTML5 enabled browsers. Please update your brow download the episode

      -
      Next →
      © 2015 Facebook Inc.
      \ No newline at end of file + \ No newline at end of file diff --git a/docs/view.html b/docs/view.html index 6d5006e6a12..a5ff6c3946b 100644 --- a/docs/view.html +++ b/docs/view.html @@ -270,7 +270,7 @@ exports.examples ); }, }, -];
      Next →
      © 2015 Facebook Inc.
      \ No newline at end of file + \ No newline at end of file diff --git a/docs/webview.html b/docs/webview.html index f20a22be03f..c91b2ade412 100644 --- a/docs/webview.html +++ b/docs/webview.html @@ -213,7 +213,7 @@ exports.examples : 'WebView', render(): ReactElement { return <WebViewExample />; } } -];
      Next →
      © 2015 Facebook Inc.
      \ No newline at end of file + \ No newline at end of file diff --git a/img/alertIOS.png b/img/alertIOS.png new file mode 100644 index 00000000000..b35a2a457f9 Binary files /dev/null and b/img/alertIOS.png differ diff --git a/index.html b/index.html index ff35972bf48..14dede1d692 100644 --- a/index.html +++ b/index.html @@ -235,7 +235,7 @@ MyCustomView.propTypes var NativeMyCustomView = requireNativeComponent('MyCustomView', MyCustomView); module.exports = MyCustomView; -
      Get started with React Native
      © 2015 Facebook Inc.
      \ No newline at end of file + \ No newline at end of file diff --git a/showcase.html b/showcase.html index c3f1841c43a..661e74abec7 100644 --- a/showcase.html +++ b/showcase.html @@ -1,4 +1,4 @@ -Showcase – React Native | A framework for building native apps using React
      React Native

      Apps using React Native

      Here is a list of apps using React Native. Submit a pull request on GitHub to list your app.

      AIGA Design Conference 2015: New Orleans

      AIGA Design Conference 2015: New Orleans

      By W&Co

      Beetroot

      Beetroot

      By Alex Duckmanton

      Company name search

      Company name search

      By The Formations Factory Ltd

      Discord

      Discord

      By Hammer & Chisel

      Discovery VR

      Discovery VR

      By Discovery Communications

      DropBot

      DropBot

      By Peach Labs

      Exponent

      Exponent

      By Exponent

      F8

      F8

      By Facebook

      Facebook Groups

      Facebook Groups

      By Facebook

      Facebook Adverts Manager - Android

      Facebook Adverts Manager - Android

      By Facebook

      Facebook Ads Manager - iOS

      Facebook Ads Manager - iOS

      By Facebook

      FastPaper

      FastPaper

      By Liubomyr Mykhalchenko (@liubko)

      Hashley

      Hashley

      By Elephant, LLC

      HSK Level 1 Chinese Flashcards

      HSK Level 1 Chinese Flashcards

      By HS Schaaf

      Leanpub

      Leanpub

      By Leanpub

      Lrn

      Lrn

      By Lrn Labs, Inc

      Lumpen Radio

      Lumpen Radio

      By Joshua Habdas

      MinTrain

      MinTrain

      By Peter Cottle

      Mr. Dapper

      Mr. Dapper

      By wei ping woon

      Myntra

      Myntra

      By Myntra Designs

      Ncredible

      Ncredible

      By NBC News Digital, LLC

      Night Light

      Night Light

      By Tian Yuan

      Posyt - Tinder for ideas

      Posyt - Tinder for ideas

      By Posyt.com

      ReactTo36

      ReactTo36

      By Jonathan Solichin

      RepairShopr

      RepairShopr

      By Jed Tiotuico

      RN Playground

      RN Playground

      By Joshua Sierles

      SG Toto 4d

      SG Toto 4d

      By Steve Ng

      Spero for Cancer

      Spero for Cancer

      By Spero.io

      Start - medication manager for depression

      Start - medication manager for depression

      By Iodine Inc.

      Tabtor Parent

      Tabtor Parent

      By PrazAs Learning Inc.

      Tong Xing Wang

      Tong Xing Wang

      By Ho Yin Tsun Eugene

      WPV

      WPV

      By Yamill Vallecillo (@yamill3)

      Yoloci

      Yoloci

      By Yonduva GmbH (@PhilippKrone)

      youmeyou

      youmeyou

      By youmeyou, LLC

      Ziliun

      Ziliun

      By Sonny Lazuardi

      © 2015 Facebook Inc.
      React Native

      Apps using React Native

      Here is a list of apps using React Native. Submit a pull request on GitHub to list your app.

      AIGA Design Conference 2015: New Orleans

      AIGA Design Conference 2015: New Orleans

      By W&Co

      Beetroot

      Beetroot

      By Alex Duckmanton

      Company name search

      Company name search

      By The Formations Factory Ltd

      Discord

      Discord

      By Hammer & Chisel

      Discovery VR

      Discovery VR

      By Discovery Communications

      DropBot

      DropBot

      By Peach Labs

      Exponent

      Exponent

      By Exponent

      F8

      F8

      By Facebook

      Facebook Groups

      Facebook Groups

      By Facebook

      Facebook Adverts Manager - Android

      Facebook Adverts Manager - Android

      By Facebook

      Facebook Ads Manager - iOS

      Facebook Ads Manager - iOS

      By Facebook

      FastPaper

      FastPaper

      By Liubomyr Mykhalchenko (@liubko)

      Hashley

      Hashley

      By Elephant, LLC

      HSK Level 1 Chinese Flashcards

      HSK Level 1 Chinese Flashcards

      By HS Schaaf

      Leanpub

      Leanpub

      By Leanpub

      Lrn

      Lrn

      By Lrn Labs, Inc

      Lumpen Radio

      Lumpen Radio

      By Joshua Habdas

      MinTrain

      MinTrain

      By Peter Cottle

      Mr. Dapper

      Mr. Dapper

      By wei ping woon

      Myntra

      Myntra

      By Myntra Designs

      Ncredible

      Ncredible

      By NBC News Digital, LLC

      Night Light

      Night Light

      By Tian Yuan

      Posyt - Tinder for ideas

      Posyt - Tinder for ideas

      By Posyt.com

      ReactTo36

      ReactTo36

      By Jonathan Solichin

      RepairShopr

      RepairShopr

      By Jed Tiotuico

      RN Playground

      RN Playground

      By Joshua Sierles

      SG Toto 4d

      SG Toto 4d

      By Steve Ng

      Spero for Cancer

      Spero for Cancer

      By Spero.io

      Start - medication manager for depression

      Start - medication manager for depression

      By Iodine Inc.

      Tabtor Parent

      Tabtor Parent

      By PrazAs Learning Inc.

      Tong Xing Wang

      Tong Xing Wang

      By Ho Yin Tsun Eugene

      WPV

      WPV

      By Yamill Vallecillo (@yamill3)

      Yoloci

      Yoloci

      By Yonduva GmbH (@PhilippKrone)

      youmeyou

      youmeyou

      By youmeyou, LLC

      Ziliun

      Ziliun

      By Sonny Lazuardi

      © 2015 Facebook Inc.
      \ No newline at end of file + \ No newline at end of file diff --git a/support.html b/support.html index 75bd75c3762..633ea8086a3 100644 --- a/support.html +++ b/support.html @@ -1,4 +1,4 @@ -Support – React Native | A framework for building native apps using React
      React Native

      Need help?

      React Native is worked on full-time by Facebook's product infrastructure user interface engineering teams. They're often around and available for questions.

      Stack Overflow #

      Many members of the community use Stack Overflow to ask questions. Read through the existing questions tagged with react-native or ask your own!

      IRC #

      Many developers and users idle on Freenode.net's IRC network in #reactnative on freenode.

      Twitter #

      #reactnative hash tag on Twitter is used to keep up with the latest React Native news.

      © 2015 Facebook Inc.
      React Native

      Need help?

      React Native is worked on full-time by Facebook's product infrastructure user interface engineering teams. They're often around and available for questions.

      Stack Overflow #

      Many members of the community use Stack Overflow to ask questions. Read through the existing questions tagged with react-native or ask your own!

      IRC #

      Many developers and users idle on Freenode.net's IRC network in #reactnative on freenode.

      Twitter #

      #reactnative hash tag on Twitter is used to keep up with the latest React Native news.

      © 2015 Facebook Inc.
      \ No newline at end of file + \ No newline at end of file