status-im
/
react-native
mirror of https://github.com/status-im/react-native.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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 https://github.com/facebook/react-native/pull/8321

Differential Revision: D3477999

Pulled By: JoelMarcey

fbshipit-source-id: dfffc9910ebf5514eb14c6aa8a9a3e70761db874
This commit is contained in:
Héctor Ramos 2016-06-23 14:12:01 -07:00 committed by Facebook Github Bot 3
parent 8e9e489f21
commit 0c9dba46bb
7 changed files with 49 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
Libraries/Components/TextInput/TextInput.js
View File

@ -81,6 +81,14 @@ type Event = Object;
* <TextInput {...props} />
* </View>
* ```
*
* `TextInput` has by default a border at the bottom of its view. This border
* has its padding set by the background image provided by the system, and it
* cannot be changed. Solutions to avoid this is to either not set height
* explicitly, case in which the system will take care of displaying the border
* in the correct position, or to not display the border by setting
* `underlineColorAndroid` to transparent.
*
*/
var TextInput = React.createClass({
statics: {

3
docs/Debugging.md
View File

@ -66,6 +66,8 @@ To debug the JavaScript code in Chrome, select `Debug JS Remotely` from the Deve
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.
> 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.
### Debugging on a device with Chrome Developer Tools
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
> 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.

90
docs/KnownIssues.md
View File

@ -1,90 +0,0 @@
---
id: known-issues
title: Known Issues
layout: docs
category: Guides
permalink: docs/known-issues.html
next: performance
---
### Devtools "React" Tab Does Not Work
It's [currently not possible](https://github.com/facebook/react-devtools/issues/229) to use the "React" tab in the devtools to inspect app widgets. This is due to a change in how the application scripts are evaluated in the devtools plugin; they are now run inside a Web Worker, and the plugin is unaware of this and so unable to communicate properly with React Native.
However, you can still use the Console feature of the devtools, and debugging JavaScript with breakpoints works too. To use the console, make sure to select the `⚙debuggerWorker.js` entry in the devtools dropdown that by default is set to `<top frame>`.
### Missing Android Modules and Views
The work on React Native for Android started later than React Native for iOS. Most views and modules are now available on Android, with the following exceptions:
#### Views
- Maps - Please use Leland Richardson's [react-native-maps](https://github.com/lelandrichardson/react-native-maps) as it is more feature-complete than our internal implementation.
#### Modules
- Android Push Notifications - Please use a [3rd party module](https://js.coach/react-native?filters=android&search=gcm).
### Some props are only supported on one platform
There are properties that work on one platform only, either because they can inherently only be supported on that platform or because they haven't been implemented on the other platforms yet. All of these are annotated with `@platform` in JS docs and have a small badge next to them on the website. See e.g. [Image](docs/image.html).
### Platform parity
There are known cases where the APIs could be made more consistent across iOS and Android:
- `<ViewPagerAndroid>` and `<ScrollView pagingEnabled={true}>` on iOS do a similar thing. We might want to unify them to `<ViewPager>`.
- `ProgressBar` could render a horizontal progress bar on both platforms (on iOS this is `ProgressViewIOS`, on Android it's `ProgressBarAndroid`).
### 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.
Another issue with `overflow: 'hidden'` on Android: a view is not clipped by the parent's `borderRadius` even if the parent has `overflow: 'hidden'` enabled – the corners of the inner view will be visible outside of the rounded corners. This is only on Android; it works as expected on iOS. See a [demo of the bug](https://rnplay.org/apps/BlGjdQ) and the [corresponding issue](https://github.com/facebook/react-native/issues/3198).
### View shadows
The `shadow*` [view styles](docs/view.html#style) apply on iOS, and the `elevation` view prop is available on Android. Setting `elevation` on Android is equivalent to using the [native elevation API](https://developer.android.com/training/material/shadows-clipping.html#Elevation), and has the same limitations (most significantly, it only works on Android 5.0+). Setting `elevation` on Android also affects the z-order for overlapping views.
### Android M permissions
The open source version of React Native doesn't yet support the [Android M permission model](http://developer.android.com/training/permissions/requesting.html).
### 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](https://github.com/facebook/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](https://github.com/facebook/react-native/issues/2797) for common causes.
### Moving folder after iOS build
Moving a React Native project after it has been compiled in iOS can sometimes cause errors with pre-compiled headers e.g. `mv MyAwesomeProject/ newDir/MyAwesomeProject`. This results in a message resembling: `error: PCH was compiled with module cache path ...`. If you were compiling using Xcode you can [hold option when you clean the build](http://stackoverflow.com/a/15463219/3110982). If you're using `react-native run-ios` you can manually clean the header cache by deleting the contents of your ModuleCache folder. e.g. `rm -rf ios/build/ModuleCache/*`
### Text Input Border
The text input has by default a border at the bottom of its view. This border has its padding set by the background image provided by the system, and it cannot be changed. Solutions to avoid this is to either not set height explicitly, case in which the system will take care of displaying the border in the correct position, or to not display the border by setting underlineColorAndroid to transparent.
### iOS App Transport Security and loading HTTP resources
As of iOS 9, new Xcode projects enable App Transport Security by default, which rejects all HTTP requests that are not sent over HTTPS. This can result in HTTP traffic being blocked (including the developer React Native server) with the following console errors:
```
App Transport Security has blocked a cleartext HTTP (http://) resource load since it is insecure. Temporary exceptions can be configured via your app's Info.plist file.
```
```
NSURLSession/NSURLConnection HTTP load failed (kCFStreamErrorDomainSSL, -9802)
```
See our guide for [running on an iOS device](RunningOnDeviceIOS.md) and working around the ATS issues, or [several](http://useyourloaf.com/blog/app-transport-security/) [community](https://www.hackingwithswift.com/example-code/system/how-to-handle-the-https-requirements-in-ios-9-with-app-transport-security) [posts](https://ste.vn/2015/06/10/configuring-app-transport-security-ios-9-osx-10-11/) on handling common cases like [whitelisting specific domains](http://stackoverflow.com/a/30732693) for non-HTTPS traffic.

2
docs/NavigatorComparison.md
View File

@ -4,7 +4,7 @@ title: Navigator Comparison
layout: docs
category: Guides
permalink: docs/navigator-comparison.html
next: known-issues
next: performance
---
The differences between [Navigator](docs/navigator.html)

11
docs/PlatformSpecificInformation.md
View File

@ -11,16 +11,14 @@ When building a cross-platform app, you'll want to re-use as much code as possib
React Native provides two ways to easily organize your code and separate it by platform:
* Using the `Platform` module.
* Using platform-specific file extensions.
* Using the [`Platform` module](#platform-module).
* Using [platform-specific file extensions](#platform-specific-extensions).
```javascript
import BigButton from './components/BigButton';
```
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.
React Native will import the correct component for the running platform.
## Platform module
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.
```javascript
@ -79,6 +77,7 @@ if(Platform.Version === 21){
```
## Platform-specific extensions
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.
For example, say you have the following files in your project:

45
docs/RunningOnDeviceIOS.md
View File

@ -7,38 +7,41 @@ permalink: docs/running-on-device-ios.html
next: running-on-simulator-ios
---
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.
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.
## Accessing development server from device
## Accessing the development server from device
You can iterate quickly on device using development server. Ensure that you are on the same WiFi network as your computer.
You can iterate quickly on device using the development server. First, ensure that you are on the same Wi-Fi network as your computer.
1. Open `AwesomeApp/ios/AwesomeApp/AppDelegate.m`
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.
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].
4. In Xcode select your phone as build target and press "Build and run"
[gpl]: https://gist.github.com/andrewsardone/91797ff9923b9ac6ea64
[bats]: http://ste.vn/2015/06/10/configuring-app-transport-security-ios-9-osx-10-11/
1. Open `ios/YourApp/AppDelegate.m`
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.
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.)
> Shake the device to open the [developer menu](/docs/debugging.html#accessing-the-in-app-developer-menu).
## Using offline bundle
## Building your app for production
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.
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.
1. Open `AwesomeApp/ios/AwesomeApp/AppDelegate.m`
2. Uncomment `jsCodeLocation = [[NSBundle mainBundle] ...`
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`.
### Disabling the developer menu
## Disabling in-app developer menu
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.
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.
### Using the offline bundle
## Troubleshooting
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.
If `curl` command fails make sure the packager is running. Also try adding `--ipv4` flag to the end of it.
1. Open `ios/YourApp/AppDelegate.m`
2. Uncomment the line, `jsCodeLocation = [[NSBundle mainBundle] ...`
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.
### App Transport Security
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.
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.
To learn more about how to configure ATS on your own Xcode projects, see [this post on ATS][cats].
[cats]: http://ste.vn/2015/06/10/configuring-app-transport-security-ios-9-osx-10-11/

8
docs/Troubleshooting.md
View File

@ -87,3 +87,11 @@ Execution failed for task ':app:installDebug'.
```
Try [downgrading your Gradle version to 1.2.3](https://github.com/facebook/react-native/issues/2720) in `android/build.gradle`.
## react-native init hangs
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:
```
react-native init --verbose
```