diff --git a/blog/2016/08/19/right-to-left-support-for-react-native-apps.html b/blog/2016/08/19/right-to-left-support-for-react-native-apps.html index b997829568a..478c22f28fc 100644 --- a/blog/2016/08/19/right-to-left-support-for-react-native-apps.html +++ b/blog/2016/08/19/right-to-left-support-for-react-native-apps.html @@ -54,11 +54,11 @@ duration, this._animateToClosedPositionDuringBounce, ); -},

Maintaining Your RTL-ready App #

Even after the initial RTL-compatible app release, you will likely need to iterate on new features. To improve development efficiency, I18nManager provides the forceRTL() function for faster RTL testing without changing the test device language. You might want to provide a simple switch for this in your app. Here's an example from the RTL example in the UIExplorer:

+},

Maintaining Your RTL-ready App #

Even after the initial RTL-compatible app release, you will likely need to iterate on new features. To improve development efficiency, I18nManager provides the forceRTL() function for faster RTL testing without changing the test device language. You might want to provide a simple switch for this in your app. Here's an example from the RTL example in the RNTester:

-
<UIExplorerBlock title={'Quickly Test RTL Layout'}> +
<RNTesterBlock title={'Quickly Test RTL Layout'}> <View style={styles.flexDirectionRow}> <Text style={styles.switchRowTextView}> forceRTL @@ -70,7 +70,7 @@ value={this.state.isRTL} /> </View> </View> -</UIExplorerBlock> +</RNTesterBlock> _onDirectionChange = () => { I18nManager.forceRTL(!this.state.isRTL); @@ -81,7 +81,7 @@ _onDirectionChange = 'Check them out to see what they look like in RTL layout.' ); };

When working on a new feature, you can easily toggle this button and reload the app to see RTL layout. The benefit is you won't need to change the language setting to test, however some text alignment won't change, as explained in the next section. Therefore, it's always a good idea to test your app in the RTL language before launching.

Limitations and Future Plan #

The RTL support should cover most of the UX in your app; however, there are some limitations for now:

Try it Out! #

Check out the RTLExample in the UIExplorer to understand more about RTL support, and let us know how it works for you!

Finally, thank you for reading! We hope that the RTL support for React Native helps you grow your apps for international audience!

React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Apple TV)

Guides (Android)

components

APIs

Building For Apple TV #

Apple TV support has been implemented with the intention of making existing React Native iOS applications "just work" on tvOS, with few or no changes needed in the JavaScript code for the applications.

The UIExplorer example project supports Apple TV; use the UIExplorer-tvOS build target to build for tvOS.

Build changes #

  • Native layer: React Native Xcode projects all now have Apple TV build targets, with names ending in the string '-tvOS'.

  • react-native init: New React Native projects created with react-native init will have Apple TV target automatically created in their XCode projects.

  • JavaScript layer: Support for Apple TV has been added to Platform.ios.js. You can check whether code is running on AppleTV by doing

var Platform = require('Platform'); +Building For Apple TV
React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Apple TV)

Guides (Android)

components

APIs

Building For Apple TV #

Apple TV support has been implemented with the intention of making existing React Native iOS applications "just work" on tvOS, with few or no changes needed in the JavaScript code for the applications.

The RNTester app supports Apple TV; use the RNTester-tvOS build target to build for tvOS.

Build changes #

  • Native layer: React Native Xcode projects all now have Apple TV build targets, with names ending in the string '-tvOS'.

  • react-native init: New React Native projects created with react-native init will have Apple TV target automatically created in their XCode projects.

  • JavaScript layer: Support for Apple TV has been added to Platform.ios.js. You can check whether code is running on AppleTV by doing

var Platform = require('Platform'); var running_on_apple_tv = Platform.isTVOS;

Code changes #

  • General support for tvOS: Apple TV specific changes in native code are all wrapped by the TARGET_OS_TV define. These include changes to suppress APIs that are not supported on tvOS (e.g. web views, sliders, switches, status bar, etc.), and changes to support user input from the TV remote or keyboard.

  • Common codebase: Since tvOS and iOS share most Objective-C and JavaScript code in common, most documentation for iOS applies equally to tvOS.

  • Access to touchable controls: When running on Apple TV, the native view class is RCTTVView, which has additional methods to make use of the tvOS focus engine. The Touchable mixin has code added to detect focus changes and use existing methods to style the components properly and initiate the proper actions when the view is selected using the TV remote, so TouchableHighlight and TouchableOpacity will "just work". In particular:

    • touchableHandleActivePressIn will be executed when the touchable view goes into focus
    • touchableHandleActivePressOut will be executed when the touchable view goes out of focus
    • touchableHandlePress will be executed when the touchable view is actually selected by pressing the "select" button on the TV remote.

  • TV remote/keyboard input: A new native class, RCTTVRemoteHandler, sets up gesture recognizers for TV remote events. When TV remote events occur, this class fires notifications that are picked up by RCTTVNavigationEventEmitter (a subclass of RCTEventEmitter), that fires a JS event. This event will be picked up by instances of the TVEventHandler JavaScript object. Application code that needs to implement custom handling of TV remote events can create an instance of TVEventHandler and listen for these events, as in the following code:

var TVEventHandler = require('TVEventHandler'); . diff --git a/releases/next/docs/communication-ios.html b/releases/next/docs/communication-ios.html index d41f60996ff..a2df69ec950 100644 --- a/releases/next/docs/communication-ios.html +++ b/releases/next/docs/communication-ios.html @@ -74,7 +74,7 @@ Making a dimension flexible in both JS and native leads to undefined behavior. F newFrame.size = rootView.intrinsicContentSize; rootView.frame = newFrame; -}

In the example we have a FlexibleSizeExampleView view that holds a root view. We create the root view, initialize it and set the delegate. The delegate will handle size updates. Then, we set the root view's size flexibility to RCTRootViewSizeFlexibilityHeight, which means that rootViewDidChangeIntrinsicSize: method will be called every time the React Native content changes its height. Finally, we set the root view's width and position. Note that we set there height as well, but it has no effect as we made the height RN-dependent.

You can checkout full source code of the example here.

It's fine to change root view's size flexibility mode dynamically. Changing flexibility mode of a root view will schedule a layout recalculation and the delegate rootViewDidChangeIntrinsicSize: method will be called once the content size is known.

Note: React Native layout calculation is performed on a special thread, while native UI view updates are done on the main thread. This may cause temporary UI inconsistencies between native and React Native. This is a known problem and our team is working on synchronizing UI updates coming from different sources.

Note: React Native does not perform any layout calculations until the root view becomes a subview of some other views. If you want to hide React Native view until its dimensions are known, add the root view as a subview and make it initially hidden (use UIView's hidden property). Then change its visibility in the delegate method.

← PrevNext →

You can edit the content above on GitHub and send us a pull request!

React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Apple TV)

Guides (Android)

components

APIs

Debugging #

Enabling Keyboard Shortcuts #

React Native supports a few keyboard shortcuts in the iOS Simulator. They are described below. To enable them, open the Hardware menu, select Keyboard, and make sure that "Connect Hardware Keyboard" is checked.

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.

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.xcassets on iOS or the res/drawable folder 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 IS_TESTING environment variable.

RedBoxes and YellowBoxes are automatically disabled in release (production) builds.

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.

Note: the React Developer Tools Chrome extension does not work with React Native, but you can use its standalone version instead. Read the next section to learn how.

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.

React Developer Tools #

With React Native 0.43 or higher, you can use the standalone version of React Developer Tools to debug the React component hierarchy. To use it, install the react-devtools package globally:

npm install -g react-devtools

Now run react-devtools from the terminal to launch the standalone DevTools app:

react-devtools

<img src="https://camo.githubusercontent.com/3226d81c8d40f07f10c1f78876905a1bfc2d6d82/687474703a2f2f692e696d6775722e636f6d2f49586548695a442e706e67" width="700" alt="React DevTools">

It should connect to your simulator within a few seconds.

Note: if you prefer to avoid global installations, you can add react-devtools as a project dependency. With Yarn, you can run yarn add --dev react-devtools, and then run yarn react-devtools from your project folder to open the DevTools. With npm, you can run npm install --save-dev react-devtools, add "react-devtools": "react-devtools" to the scripts section in your package.json, and then run npm run react-devtools from your project folder to open the DevTools.

Integration with React Native Inspector #

You can open the in-app developer menu and choose "Show Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:

<img src="https://d2ppvlu71ri8gs.cloudfront.net/items/1R1d2x0O3M0C1t071Q0F/Screen%20Recording%202017-05-01%20at%2020.14.gif?v=45691135" alt="Show Inspector" width="300">

However, when react-devtools is running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:

<img src="https://d2ppvlu71ri8gs.cloudfront.net/items/1v031W3O1W322z3G1k15/Screen%20Recording%202017-05-01%20at%2020.16.gif?v=a87eb3f4" alt="Show Inspector with React DevTools" width="700">

You can choose "Hide Inspector" in the same menu to exit this mode.

Performance Monitor #

You can enable a performance overlay to help you debug performance problems by selecting "Perf Monitor" in the Developer Menu.

+Debugging
React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Apple TV)

Guides (Android)

components

APIs

Debugging #

Enabling Keyboard Shortcuts #

React Native supports a few keyboard shortcuts in the iOS Simulator. They are described below. To enable them, open the Hardware menu, select Keyboard, and make sure that "Connect Hardware Keyboard" is checked.

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.

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.xcassets on iOS or the res/drawable folder 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 IS_TESTING environment variable.

RedBoxes and YellowBoxes are automatically disabled in release (production) builds.

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.

Note: the React Developer Tools Chrome extension does not work with React Native, but you can use its standalone version instead. Read this section to learn how.

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.

React Developer Tools #

With React Native 0.43 or higher, you can use the standalone version of React Developer Tools to debug the React component hierarchy. To use it, install the react-devtools package globally:

npm install -g react-devtools

Now run react-devtools from the terminal to launch the standalone DevTools app:

react-devtools

React DevTools

It should connect to your simulator within a few seconds.

Note: if you prefer to avoid global installations, you can add react-devtools as a project dependency. With Yarn, you can run yarn add --dev react-devtools, and then run yarn react-devtools from your project folder to open the DevTools. With npm, you can run npm install --save-dev react-devtools, add "react-devtools": "react-devtools" to the scripts section in your package.json, and then run npm run react-devtools from your project folder to open the DevTools.

Integration with React Native Inspector #

You can open the in-app developer menu and choose "Show Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:

React Native Inspector

However, when react-devtools is running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:

React DevTools Inspector Integration

You can choose "Hide Inspector" in the same menu to exit this mode.

Performance Monitor #

You can enable a performance overlay to help you debug performance problems by selecting "Perf Monitor" in the Developer Menu.

Debugging in Ejected Apps #

Methods #

static create(config) #

@param {object} config Enhanced versions of all of the responder callbacks +PanResponder example in RNTester

Methods #

static create(config) #

@param {object} config Enhanced versions of all of the responder callbacks that provide not only the typical ResponderSyntheticEvent, but also the PanResponder gesture state. Simply replace the word Responder with PanResponder in each of the typical onResponder* callbacks. For diff --git a/releases/next/docs/testing.html b/releases/next/docs/testing.html index 2e982e700dd..6f7f8e1a992 100644 --- a/releases/next/docs/testing.html +++ b/releases/next/docs/testing.html @@ -4,8 +4,8 @@ $ npm run flow

Android 1.8.0_111

The version string 1.8.x_xxx corresponds to JDK 8.

You also need to install the Buck build tool.

To run the Android unit tests:

$ cd react-native $ ./scripts/run-android-local-unit-tests.sh

It's a good idea to add an Android unit test whenever you are working on code that can be tested by Java code alone. The Android unit tests live under ReactAndroid/src/tests, so you can browse through that directory for good examples of tests.

Integration Tests #

To run the integration tests, you need to install the Android NDK. See Prerequisites.

You also need to install the Buck build tool.

We recommend running the Android integration tests in an emulator, although you can also use a real Android device. It's a good idea to keep the emulator running with a visible window. That way if your tests stall, you can look at the emulator to debug.

Some devices and some emulator configurations may not work with the tests. We do maintain an emulator configuration that works, as the standard for testing. To run this emulator config:

$ cd react-native $ ./scripts/run-android-emulator.sh

Once you have an emulator running, to run the integration tests:

$ cd react-native -$ ./scripts/run-android-local-integration-tests.sh

The integration tests should only take a few minutes to run on a modern developer machine.

It's a good idea to add an Android integration test whenever you are working on code that needs both JavaScript and Java to be tested in conjunction. The Android integration tests live under ReactAndroid/src/androidTest, so you can browse through that directory for good examples of tests.

iOS #

Integration Tests #

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 the following for example usage and integration points:

You can run integration tests locally with cmd+U in the IntegrationTest and UIExplorer apps in Xcode, or by running the following in the command line on macOS:

$ cd react-native -$ ./scripts/objc-test-ios.sh

Your Xcode install will come with a variety of Simulators running the latest OS. You may need to manually create a new Simulator to match what the XCODE_DESTINATION param in the test script.

Screenshot/Snapshot Tests #

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 snapshot reference image. To do this, simply change to _runner.recordMode = YES; in UIExplorer/UIExplorerSnapshotTests.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.

Apple TV #

The same tests discussed above for iOS will also run on tvOS. In the UIExplorer Xcode project, select the UIExplorer-tvOS target, and you can follow the same steps above to run the tests in Xcode.

You can run Apple TV unit and integration tests locally by running the following in the command line on macOS:

$ cd react-native +$ ./scripts/run-android-local-integration-tests.sh

The integration tests should only take a few minutes to run on a modern developer machine.

It's a good idea to add an Android integration test whenever you are working on code that needs both JavaScript and Java to be tested in conjunction. The Android integration tests live under ReactAndroid/src/androidTest, so you can browse through that directory for good examples of tests.

iOS #

Integration Tests #

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 the following for example usage and integration points:

You can run integration tests locally with cmd+U in the IntegrationTest and RNTester apps in Xcode, or by running the following in the command line on macOS:

$ cd react-native +$ ./scripts/objc-test-ios.sh

Your Xcode install will come with a variety of Simulators running the latest OS. You may need to manually create a new Simulator to match what the XCODE_DESTINATION param in the test script.

Screenshot/Snapshot Tests #

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 snapshot reference image. To do this, simply change to _runner.recordMode = YES; in RNTester/RNTesterSnapshotTests.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.

Apple TV #

The same tests discussed above for iOS will also run on tvOS. In the RNTester Xcode project, select the RNTester-tvOS target, and you can follow the same steps above to run the tests in Xcode.

You can run Apple TV unit and integration tests locally by running the following in the command line on macOS:

$ cd react-native $ ./scripts/objc-test-tvos.sh (make sure the line `TEST="test"` is uncommented)

End-to-end tests #

Finally, make sure end-to-end tests run successfully by executing the following script:

$ cd react-native $ ./scripts/test-manual-e2e.sh

Website #

The React Native website is hosted on GitHub pages and is automatically generated from Markdown sources as well as comments in the JavaScript source files. It's always a good idea to check that the website is generated properly whenever you edit the docs.

$ cd website $ npm install diff --git a/releases/next/img/Inspector.gif b/releases/next/img/Inspector.gif new file mode 100644 index 00000000000..b7589733c82 Binary files /dev/null and b/releases/next/img/Inspector.gif differ diff --git a/releases/next/img/ReactDevTools.png b/releases/next/img/ReactDevTools.png new file mode 100644 index 00000000000..caa3af713b3 Binary files /dev/null and b/releases/next/img/ReactDevTools.png differ diff --git a/releases/next/img/ReactDevToolsInspector.gif b/releases/next/img/ReactDevToolsInspector.gif new file mode 100644 index 00000000000..c3540bee79c Binary files /dev/null and b/releases/next/img/ReactDevToolsInspector.gif differ diff --git a/support.html b/support.html index f455156c59f..9e2578c47a1 100644 --- a/support.html +++ b/support.html @@ -1,4 +1,4 @@ -Help
React Nativenext

Need help?

At Facebook, there are dozens of engineers who work on React Native full-time. But there are far more people in the community who make key contributions and fix things. So if you need help with your React Native app, the right place to go depends on the type of help that you need.

Browse the docs

Find what you're looking for in our detailed documentation and guides.

Explore samples

Take apart these fully built applications, and get some inspiration for your own.

Stay up to date

Find out what's happening in the world of React Native.

Join the community

Connect with other React Native developers. Show off your project, or ask how other people solved similar problems.

  • Frequently Asked Questions

    Many React Native users are active on Stack Overflow. Browse existing questions, or ask your own technical question.

  • React Native Community

    If you have an open-ended question or you just want to get a general sense of what React Native folks talk about, check out the React Native Community Facebook group. It has thousands of developers and almost all posts get a response.

  • Reactiflux Chat

    If you need an answer right away, check out the #react-native channel. There are usually a number of React Native experts there who can help out or point you to somewhere you might want to look.

Contribute

React Native is open source! Issues and pull requests are welcome.

  • Get Involved

    If you want to contribute, take a look at the list of good first tasks on GitHub.

  • Feature Requests

    If you have a feature request, add it to the list or upvote a similar one. The voting system helps surface which issues are most important to the community.

  • Report a Bug

    If you have discovered a bug in React Native, consider submitting a pull request with a fix. If you don't think you can fix it yourself, you can open an issue on GitHub.

React Nativenext

Need help?

At Facebook, there are dozens of engineers who work on React Native full-time. But there are far more people in the community who make key contributions and fix things. So if you need help with your React Native app, the right place to go depends on the type of help that you need.

Browse the docs

Find what you're looking for in our detailed documentation and guides.

Explore samples

Take apart these fully built applications, and get some inspiration for your own.

Stay up to date

Find out what's happening in the world of React Native.

Join the community

Connect with other React Native developers. Show off your project, or ask how other people solved similar problems.

  • Frequently Asked Questions

    Many React Native users are active on Stack Overflow. Browse existing questions, or ask your own technical question.

  • React Native Community

    If you have an open-ended question or you just want to get a general sense of what React Native folks talk about, check out the React Native Community Facebook group. It has thousands of developers and almost all posts get a response.

  • Reactiflux Chat

    If you need an answer right away, check out the #react-native channel. There are usually a number of React Native experts there who can help out or point you to somewhere you might want to look.

Contribute

React Native is open source! Issues and pull requests are welcome.

  • Get Involved

    If you want to contribute, take a look at the list of good first tasks on GitHub.

  • Feature Requests

    If you have a feature request, add it to the list or upvote a similar one. The voting system helps surface which issues are most important to the community.

  • Report a Bug

    If you have discovered a bug in React Native, consider submitting a pull request with a fix. If you don't think you can fix it yourself, you can open an issue on GitHub.