You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Move everything out of Known Issues and into more appropriate locations.
Summary:
Two of the known issues have been moved to the issue tracker:
* #8315
* #8316
Others have been moved into more appropriate locations, such as the `TextInput` issue to the API doc itself, and the React debugging issue to the Debugging doc.
The Android-specific compatibility concerns have been dropped entirely as it does not seem like people would find these in the docs.
Closes#8321
Differential Revision: D3477999
Pulled By: JoelMarcey
fbshipit-source-id: dfffc9910ebf5514eb14c6aa8a9a3e70761db874
Copy file name to clipboardExpand all lines: docs/Debugging.md
+3Lines changed: 3 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -66,6 +66,8 @@ To debug the JavaScript code in Chrome, select `Debug JS Remotely` from the Deve
66
66
67
67
In Chrome, press `Command⌘ + Option⌥ + I` or select `View` → `Developer` → `Developer Tools` to toggle the developer tools console. Enable [Pause On Caught Exceptions](http://stackoverflow.com/questions/2233339/javascript-is-there-a-way-to-get-chrome-to-break-on-all-errors/17324511#17324511) for a better debugging experience.
68
68
69
+
> It is [currently not possible](https://github.com/facebook/react-devtools/issues/229) 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.
70
+
69
71
### Debugging on a device with Chrome Developer Tools
70
72
71
73
On iOS devices, open the file [`RCTWebSocketExecutor.m`](https://github.com/facebook/react-native/blob/master/Libraries/WebSocket/RCTWebSocketExecutor.m) and change `localhost` to the IP address of your computer, then select `Debug JS Remotely` from the Developer Menu.
@@ -78,6 +80,7 @@ Alternatively, select `Dev Settings` from the Developer Menu, then update the `D
78
80
79
81
> 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.
80
82
83
+
81
84
### Debugging using a custom JavaScript debugger
82
85
83
86
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.
Copy file name to clipboardExpand all lines: docs/PlatformSpecificInformation.md
+5-6Lines changed: 5 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -11,16 +11,14 @@ When building a cross-platform app, you'll want to re-use as much code as possib
11
11
12
12
React Native provides two ways to easily organize your code and separate it by platform:
13
13
14
-
* Using the `Platform` module.
15
-
* Using platform-specific file extensions.
14
+
* Using the [`Platform` module](#platform-module).
15
+
* Using [platform-specific file extensions](#platform-specific-extensions).
16
16
17
-
```javascript
18
-
importBigButtonfrom'./components/BigButton';
19
-
```
17
+
Certain components may have properties that work on one platform only. All of these props are annotated with `@platform` and have a small badge next to them on the website.
20
18
21
-
React Native will import the correct component for the running platform.
22
19
23
20
## Platform module
21
+
24
22
React Native provides a module that detects the platform in which the app is running. You can use the detection logic to implement platform-specific code. Use this option when only small parts of a component are platform-specific.
25
23
26
24
```javascript
@@ -79,6 +77,7 @@ if(Platform.Version === 21){
79
77
```
80
78
81
79
## Platform-specific extensions
80
+
82
81
When your platform-specific code is more complex, you should consider splitting the code out into separate files. React Native will detect when a file has a `.ios.` or `.android.` extension and load the relevant platform file when required from other components.
83
82
84
83
For example, say you have the following files in your project:
Note that running on device requires [Apple Developer account](https://developer.apple.com/register) and provisioning your iPhone. This guide covers only React Native specific topic.
10
+
Running an iOS app on a device requires an [Apple Developer account](https://developer.apple.com/) and provisioning your iPhone. This guide covers only React Native specific topics.
11
11
12
-
## Accessing development server from device
12
+
## Accessing the development server from device
13
13
14
-
You can iterate quickly on device using development server. Ensure that you are on the same WiFi network as your computer.
14
+
You can iterate quickly on device using the development server. First, ensure that you are on the same Wi-Fi network as your computer.
15
15
16
-
1. Open `AwesomeApp/ios/AwesomeApp/AppDelegate.m`
17
-
2. Change the IP in the URL from `localhost` to your laptop's IP. On Mac, you can find the IP address in System Preferences / Network.
18
-
3. Temporarily disable App Transport Security (ATS) by [adding the `NSAllowsArbitraryLoads` entry to your `Info.plist` file][gpl]. Since ATS does not allow insecure HTTP requests to IP addresses, you must completely disable it to run on a device. This is only a requirement for development on a device, and unless you can't workaround an issue you should leave ATS enabled for production builds. For more information, see [this post on configuring ATS][bats].
19
-
4. In Xcode select your phone as build target and press "Build and run"
2. Change the host in the URL from `localhost` to your laptop's IP address. On Mac, you can find the IP address in System Preferences / Network.
18
+
3. In Xcode, select your phone as build target and press "Build and run"
23
19
24
20
> Hint
25
21
>
26
-
> Shake the device to open development menu (reload, debug, etc.)
22
+
> Shake the device to open the [developer menu](/docs/debugging.html#accessing-the-in-app-developer-menu).
23
+
24
+
## Building your app for production
25
+
26
+
You have built a great app using React Native, and you are now itching to release it in the App Store. The process is the same as any other native iOS app, with some additional considerations to take into account.
27
+
28
+
### Disabling the developer menu
29
+
30
+
Building an app for distribution in the App Store requires using the `Release` scheme in Xcode. Apps built for `Release` will automatically disable the in-app developer menu. This will prevent your users from inadvertently accessing the menu in production.
27
31
28
-
## Using offline bundle
32
+
###Using the offline bundle
29
33
30
-
When you run your app on device, we pack all the JavaScript code and the images used into the app's resources. This way you can test it without development server running and submit the app to the AppStore.
34
+
Set up your app to load your JavaScript, images, and other static assets from its resource bundle rather than the development server. This way you can test the app independently of the development server, and will allow you to distribute the app to beta testers and submit the app to the App Store.
3. The JS bundle will be built for dev or prod depending on your app's scheme (Debug = development build with warnings, Release = minified prod build with perf optimizations). To change the scheme navigate to `Product > Scheme > Edit Scheme...` in xcode and change `Build Configuration` between `Debug` and `Release`.
36
+
1. Open `ios/YourApp/AppDelegate.m`
37
+
2. Uncomment the line, `jsCodeLocation = [[NSBundle mainBundle] ...`
35
38
36
-
##Disabling in-app developer menu
39
+
### App Transport Security
37
40
38
-
When building your app for production, your app's scheme should be set to `Release` as detailed in [the debugging documentation](docs/debugging.html#debugging-react-native-apps)in order to disable the in-app developer menu.
41
+
App Transport Security is a security feature, added in iOS 9, that rejects all HTTP requests that are not sent over HTTPS. This can result in HTTP traffic being blocked, including the developer React Native server.
39
42
40
-
## Troubleshooting
43
+
ATS is disabled by default in projects generated using the React Native CLI in order to make development easier. You should re-enable ATS prior to building your app for production by removing the `NSAllowsArbitraryLoads` entry from your `Info.plist` file in the `ios/` folder.
41
44
42
-
If `curl` command fails make sure the packager is running. Also try adding `--ipv4` flag to the end of it.
45
+
To learn more about how to configure ATS on your own Xcode projects, see [this post on ATS][cats].
43
46
44
-
Note that since [v0.14](https://github.com/facebook/react-native/releases/tag/0.14.0) JS and images are automatically packaged into the iOS app using `Bundle React Native code and images` Xcode build phase.
Copy file name to clipboardExpand all lines: docs/Troubleshooting.md
+8Lines changed: 8 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -87,3 +87,11 @@ Execution failed for task ':app:installDebug'.
87
87
```
88
88
89
89
Try [downgrading your Gradle version to 1.2.3](https://github.com/facebook/react-native/issues/2720) in `android/build.gradle`.
90
+
91
+
## react-native init hangs
92
+
93
+
If you run into issues where running `react-native init` hangs in your system, try running it again in verbose mode and refering to [#2797](https://github.com/facebook/react-native/issues/2797) for common causes:
0 commit comments