React NativeDebugging #
Accessing the In-App Developer Menu #
You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the Command⌘ + D keyboard shortcut when your app is running in the iPhone Simulator, or Command⌘ + M when running in an Android emulator.
The Developer Menu is disabled in release (production) builds.
Reloading JavaScript #
Instead of recompiling your app every time you make a change, you can reload your app's JavaScript code instantly. To do so, select "Reload" from the Developer Menu. You can also press Command⌘ + R in the iOS Simulator, or press R twice on Android emulators.
If the
Command⌘+Rkeyboard shortcut does not seem to reload the iOS Simulator, go to the Hardware menu, select Keyboard, and make sure that "Connect Hardware Keyboard" is checked.
Automatic reloading #
You can speed up your development times by having your app reload automatically any time your code changes. Automatic reloading can be enabled by selecting "Enable Live Reload" from the Developer Menu.
You may even go a step further and keep your app running as new versions of your files are injected into the JavaScript bundle automatically by enabling Hot Reloading from the Developer Menu. This will allow you to persist the app's state through reloads.
There are some instances where hot reloading cannot be implemented perfectly. If you run into any issues, use a full reload to reset your app.
You will need to rebuild your app for changes to take effect in certain situations:
- You have added new resources to your native app's bundle, such as an image in
Images.xcassetson iOS or theres/drawablefolder on Android. - You have modified native code (Objective-C/Swift on iOS or Java/C++ on Android).
In-app Errors and Warnings #
Errors and warnings are displayed inside your app in development builds.
Errors #
In-app errors are displayed in a full screen alert with a red background inside your app. This screen is known as a RedBox. You can use console.error() to manually trigger one.
Warnings #
Warnings will be displayed on screen with a yellow background. These alerts are known as YellowBoxes. Click on the alerts to show more information or to dismiss them.
As with a RedBox, you can use console.warn() to trigger a YellowBox.
YellowBoxes can be disabled during development by using console.disableYellowBox = true;. Specific warnings can be ignored programmatically by setting an array of prefixes that should be ignored: console.ignoredYellowBox = ['Warning: ...'];
RedBoxes and YellowBoxes are automatically disabled in release (production) builds.
Accessing console logs #
You can display the console logs for an iOS or Android app by using the following commands in a terminal while the app is running:
Debugging #
Accessing the In-App Developer Menu #
You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the Command⌘ + D keyboard shortcut when your app is running in the iPhone Simulator, or Command⌘ + M when running in an Android emulator.
The Developer Menu is disabled in release (production) builds.
Reloading JavaScript #
Instead of recompiling your app every time you make a change, you can reload your app's JavaScript code instantly. To do so, select "Reload" from the Developer Menu. You can also press Command⌘ + R in the iOS Simulator, or press R twice on Android emulators.
If the
Command⌘+Rkeyboard shortcut does not seem to reload the iOS Simulator, go to the Hardware menu, select Keyboard, and make sure that "Connect Hardware Keyboard" is checked.
Automatic reloading #
You can speed up your development times by having your app reload automatically any time your code changes. Automatic reloading can be enabled by selecting "Enable Live Reload" from the Developer Menu.
You may even go a step further and keep your app running as new versions of your files are injected into the JavaScript bundle automatically by enabling Hot Reloading from the Developer Menu. This will allow you to persist the app's state through reloads.
There are some instances where hot reloading cannot be implemented perfectly. If you run into any issues, use a full reload to reset your app.
You will need to rebuild your app for changes to take effect in certain situations:
- You have added new resources to your native app's bundle, such as an image in
Images.xcassetson iOS or theres/drawablefolder on Android. - You have modified native code (Objective-C/Swift on iOS or Java/C++ on Android).
In-app Errors and Warnings #
Errors and warnings are displayed inside your app in development builds.
Errors #
In-app errors are displayed in a full screen alert with a red background inside your app. This screen is known as a RedBox. You can use console.error() to manually trigger one.
Warnings #
Warnings will be displayed on screen with a yellow background. These alerts are known as YellowBoxes. Click on the alerts to show more information or to dismiss them.
As with a RedBox, you can use console.warn() to trigger a YellowBox.
YellowBoxes can be disabled during development by using console.disableYellowBox = true;. Specific warnings can be ignored programmatically by setting an array of prefixes that should be ignored: console.ignoredYellowBox = ['Warning: ...'];.
In CI/Xcode, YellowBoxes can also be disabled by setting the DISABLE_YELLOW_BOX environment variable.
RedBoxes and YellowBoxes are automatically disabled in release (production) builds.
Accessing console logs #
You can display the console logs for an iOS or Android app by using the following commands in a terminal while the app is running:
You may also access these through Debug → Open System Log... in the iOS Simulator or by running adb logcat *:S ReactNative:V ReactNativeJS:V in a terminal while an Android app is running on a device or emulator.
Chrome Developer Tools #
To debug the JavaScript code in Chrome, select "Debug JS Remotely" from the Developer Menu. This will open a new tab at http://localhost:8081/debugger-ui.
Select Tools → Developer Tools from the Chrome Menu to open the Developer Tools. You may also access the DevTools using keyboard shortcuts (Command⌘ + Option⌥ + I on Mac, Ctrl + Shift + I on Windows). You may also want to enable Pause On Caught Exceptions for a better debugging experience.
It is currently not possible to use the "React" tab in the Chrome Developer Tools to inspect app widgets. You can use Nuclide's "React Native Inspector" as a workaround.
Debugging on a device with Chrome Developer Tools #
On iOS devices, open the file RCTWebSocketExecutor.m and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu.
On Android 5.0+ devices connected via USB, you can use the adb command line tool to setup port forwarding from the device to your computer:
adb reverse tcp:8081 tcp:8081
Alternatively, select "Dev Settings" from the Developer Menu, then update the "Debug server host for device" setting to match the IP address of your computer.
If you run into any issues, it may be possible that one of your Chrome extensions is interacting in unexpected ways with the debugger. Try disabling all of your extensions and re-enabling them one-by-one until you find the problematic extension.
Debugging using a custom JavaScript debugger #
To use a custom JavaScript debugger in place of Chrome Developer Tools, set the REACT_DEBUGGER environment variable to a command that will start your custom debugger. You can then select "Debug JS Remotely" from the Developer Menu to start debugging.
The debugger will receive a list of all project roots, separated by a space. For example, if you set REACT_DEBUGGER="node /path/to/launchDebugger.js --port 2345 --type ReactNative", then the command node /path/to/launchDebugger.js --port 2345 --type ReactNative /path/to/reactNative/app will be used to start your debugger.
Custom debugger commands executed this way should be short-lived processes, and they shouldn't produce more than 200 kilobytes of output.
Debugging with Stetho on Android #
In
android/app/build.gradle, add these lines in thedependenciessection:compile 'com.facebook.stetho:stetho:1.3.1' compile 'com.facebook.stetho:stetho-okhttp3:1.3.1'In
android/app/src/main/java/com/{yourAppName}/MainApplication.java, add the following imports:import android.os.Bundle; import com.facebook.react.modules.network.ReactCookieJarContainer; diff --git a/releases/next/docs/layout-props.html b/releases/next/docs/layout-props.html index 199cd2e03de..1f7d9cf35e9 100644 --- a/releases/next/docs/layout-props.html +++ b/releases/next/docs/layout-props.html @@ -21,9 +21,9 @@ for more details.
https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width for more details.
borderWidth number #
borderWidth works like border-width in CSS.
See https://developer.mozilla.org/en-US/docs/Web/CSS/border-width
-for more details.
bottom number #
bottom is the number of logical pixels to offset the bottom edge of
- this component.
It works similarly to bottom in CSS, but in React Native you must
- use logical pixel units, rather than percents, ems, or any of that.
See https://developer.mozilla.org/en-US/docs/Web/CSS/bottom +for more details.
bottom number, string #
bottom is the number of logical pixels to offset the bottom edge of
+ this component.
It works similarly to bottom in CSS, but in React Native you
+ must use points or percentages. Ems and other units are not supported.
See https://developer.mozilla.org/en-US/docs/Web/CSS/bottom
for more details of how bottom affects layout.
flex number #
In React Native flex does not work the same way that it does in CSS.
flex is a number rather than a string, and it works
according to the css-layout library
@@ -33,7 +33,7 @@ for more details.
flexBasis number #
flexDirection enum('row', 'row-reverse', 'column', 'column-reverse') #
flexDirection controls which directions children of a container go.
+ the component will shrink to its minWidth and minHeight.
flexGrow, flexShrink, and flexBasis work the same as in CSS.
flexBasis number, string #
flexDirection enum('row', 'row-reverse', 'column', 'column-reverse') #
flexDirection controls which directions children of a container go.
row goes left to right, column goes top to bottom, and you may
be able to guess what the other two do. It works like flex-direction
in CSS, except the default is column.
@@ -42,54 +42,54 @@ for more details.
height number #
height sets the height of this component.
It works similarly to height in CSS, but in React Native you
- must use logical pixel units, rather than percents, ems, or any of that.
+ for more details.
height number, string #
height sets the height of this component.
It works similarly to height in CSS, but in React Native you
+ must use points or percentages. Ems and other units are not supported.
See https://developer.mozilla.org/en-US/docs/Web/CSS/height for more details.
justifyContent enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around') #
justifyContent aligns children in the main direction.
For example, if children are flowing vertically, justifyContent
controls how they align vertically.
It works like justify-content in CSS (default: flex-start).
See https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
- for more details.
left number #
left is the number of logical pixels to offset the left edge of
- this component.
It works similarly to left in CSS, but in React Native you must
- use logical pixel units, rather than percents, ems, or any of that.
See https://developer.mozilla.org/en-US/docs/Web/CSS/left
- for more details of how left affects layout.
margin number #
Setting margin has the same effect as setting each of
+ for more details.
left number, string #
left is the number of logical pixels to offset the left edge of
+ this component.
It works similarly to left in CSS, but in React Native you
+ must use points or percentages. Ems and other units are not supported.
See https://developer.mozilla.org/en-US/docs/Web/CSS/left
+ for more details of how left affects layout.
margin number, string #
Setting margin has the same effect as setting each of
marginTop, marginLeft, marginBottom, and marginRight.
See https://developer.mozilla.org/en-US/docs/Web/CSS/margin
- for more details.
marginBottom number #
marginBottom works like margin-bottom in CSS.
+ for more details.
marginBottom number, string #
marginBottom works like margin-bottom in CSS.
See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom
- for more details.
marginHorizontal number #
Setting marginHorizontal has the same effect as setting
- both marginLeft and marginRight.
marginLeft number #
marginLeft works like margin-left in CSS.
+ for more details.
marginHorizontal number, string #
Setting marginHorizontal has the same effect as setting
+ both marginLeft and marginRight.
marginLeft number, string #
marginLeft works like margin-left in CSS.
See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left
- for more details.
marginRight number #
marginRight works like margin-right in CSS.
+ for more details.
marginRight number, string #
marginRight works like margin-right in CSS.
See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right
- for more details.
marginTop number #
marginTop works like margin-top in CSS.
+ for more details.
marginTop number, string #
marginTop works like margin-top in CSS.
See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top
- for more details.
marginVertical number #
Setting marginVertical has the same effect as setting both
- marginTop and marginBottom.
maxHeight number #
maxHeight is the maximum height for this component, in logical pixels.
It works similarly to max-height in CSS, but in React Native you
- must use logical pixel units, rather than percents, ems, or any of that.
See https://developer.mozilla.org/en-US/docs/Web/CSS/max-height - for more details.
maxWidth number #
maxWidth is the maximum width for this component, in logical pixels.
It works similarly to max-width in CSS, but in React Native you
- must use logical pixel units, rather than percents, ems, or any of that.
See https://developer.mozilla.org/en-US/docs/Web/CSS/max-width - for more details.
minHeight number #
minHeight is the minimum height for this component, in logical pixels.
It works similarly to min-height in CSS, but in React Native you
- must use logical pixel units, rather than percents, ems, or any of that.
See https://developer.mozilla.org/en-US/docs/Web/CSS/min-height - for more details.
minWidth number #
minWidth is the minimum width for this component, in logical pixels.
It works similarly to min-width in CSS, but in React Native you
- must use logical pixel units, rather than percents, ems, or any of that.
See https://developer.mozilla.org/en-US/docs/Web/CSS/min-width + for more details.
marginVertical number, string #
Setting marginVertical has the same effect as setting both
+ marginTop and marginBottom.
maxHeight number, string #
maxHeight is the maximum height for this component, in logical pixels.
It works similarly to max-height in CSS, but in React Native you
+ must use points or percentages. Ems and other units are not supported.
See https://developer.mozilla.org/en-US/docs/Web/CSS/max-height + for more details.
maxWidth number, string #
maxWidth is the maximum width for this component, in logical pixels.
It works similarly to max-width in CSS, but in React Native you
+ must use points or percentages. Ems and other units are not supported.
See https://developer.mozilla.org/en-US/docs/Web/CSS/max-width + for more details.
minHeight number, string #
minHeight is the minimum height for this component, in logical pixels.
It works similarly to min-height in CSS, but in React Native you
+ must use points or percentages. Ems and other units are not supported.
See https://developer.mozilla.org/en-US/docs/Web/CSS/min-height + for more details.
minWidth number, string #
minWidth is the minimum width for this component, in logical pixels.
It works similarly to min-width in CSS, but in React Native you
+ must use points or percentages. Ems and other units are not supported.
See https://developer.mozilla.org/en-US/docs/Web/CSS/min-width for more details.
overflow enum('visible', 'hidden', 'scroll') #
overflow controls how a children are measured and displayed.
overflow: hidden causes views to be clipped while overflow: scroll
causes views to be measured independently of their parents main axis.It works likeoverflow` in CSS (default: visible).
See https://developer.mozilla.org/en/docs/Web/CSS/overflow
- for more details.
padding number #
Setting padding has the same effect as setting each of
+ for more details.
padding number, string #
Setting padding has the same effect as setting each of
paddingTop, paddingBottom, paddingLeft, and paddingRight.
See https://developer.mozilla.org/en-US/docs/Web/CSS/padding
- for more details.
paddingBottom number #
paddingBottom works like padding-bottom in CSS.
+ for more details.
paddingBottom number, string #
paddingBottom works like padding-bottom in CSS.
See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom
-for more details.
paddingHorizontal number #
Setting paddingHorizontal is like setting both of
- paddingLeft and paddingRight.
paddingLeft number #
paddingLeft works like padding-left in CSS.
+for more details.
paddingHorizontal number, string #
Setting paddingHorizontal is like setting both of
+ paddingLeft and paddingRight.
paddingLeft number, string #
paddingLeft works like padding-left in CSS.
See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left
-for more details.
paddingRight number #
paddingRight works like padding-right in CSS.
+for more details.
paddingRight number, string #
paddingRight works like padding-right in CSS.
See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right
-for more details.
paddingTop number #
paddingTop works like padding-top in CSS.
+for more details.
paddingTop number, string #
paddingTop works like padding-top in CSS.
See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top
-for more details.
paddingVertical number #
Setting paddingVertical is like setting both of
+for more details.
paddingVertical number, string #
Setting paddingVertical is like setting both of
paddingTop and paddingBottom.
position enum('absolute', 'relative') #
position in React Native is similar to regular CSS, but
everything is set to relative by default, so absolute
positioning is always just relative to the parent.
If you want to position a child using specific numbers of logical @@ -98,14 +98,14 @@ for more details.
right number #
right is the number of logical pixels to offset the right edge of
- this component.
It works similarly to right in CSS, but in React Native you must
- use logical pixel units, rather than percents, ems, or any of that.
See https://developer.mozilla.org/en-US/docs/Web/CSS/right
- for more details of how right affects layout.
top number #
top is the number of logical pixels to offset the top edge of
- this component.
It works similarly to top in CSS, but in React Native you must
- use logical pixel units, rather than percents, ems, or any of that.
See https://developer.mozilla.org/en-US/docs/Web/CSS/top
- for more details of how top affects layout.
width number #
width sets the width of this component.
It works similarly to width in CSS, but in React Native you
- must use logical pixel units, rather than percents, ems, or any of that.
+ and CSS.
right number, string #
right is the number of logical pixels to offset the right edge of
+ this component.
It works similarly to right in CSS, but in React Native you
+ must use points or percentages. Ems and other units are not supported.
See https://developer.mozilla.org/en-US/docs/Web/CSS/right
+ for more details of how right affects layout.
top number, string #
top is the number of logical pixels to offset the top edge of
+ this component.
It works similarly to top in CSS, but in React Native you
+ must use points or percentages. Ems and other units are not supported.
See https://developer.mozilla.org/en-US/docs/Web/CSS/top
+ for more details of how top affects layout.
width number, string #
width sets the width of this component.
It works similarly to width in CSS, but in React Native you
+ must use points or percentages. Ems and other units are not supported.
See https://developer.mozilla.org/en-US/docs/Web/CSS/width for more details.
zIndex number #
zIndex controls which components display on top of others.
Normally, you don't use zIndex. Components render according to
their order in the document tree, so later components draw over
diff --git a/releases/next/docs/native-modules-android.html b/releases/next/docs/native-modules-android.html
index b0c7b4f9d0e..fde868d129e 100644
--- a/releases/next/docs/native-modules-android.html
+++ b/releases/next/docs/native-modules-android.html
@@ -202,7 +202,7 @@ public void onActivityResult= new BaseActivityEventListener() {
@Override
- public void onActivityResult(Activity activity, int requestCode, int resultCode, Intent data) {
+ public void onActivityResult(Activity activity, int requestCode, int resultCode, Intent intent) {
if (requestCode == IMAGE_PICKER_REQUEST) {
if (mPickerPromise != null) {
if (resultCode == Activity.RESULT_CANCELED) {
diff --git a/versions.html b/versions.html
index f92eb851580..34d65b3fbc2 100644
--- a/versions.html
+++ b/versions.html
@@ -1,4 +1,4 @@
-