Skip to content

Commit

Permalink
Documentation updates
Browse files Browse the repository at this point in the history
Summary:
Tackling a handful of docs issues:

- #12780
- #11227
- #2819
Closes #12867

Differential Revision: D4691083

Pulled By: hramos

fbshipit-source-id: 9115315f2d6132e975901c9a0b784e9d41eeb49e
  • Loading branch information
hramos authored and facebook-github-bot committed Mar 10, 2017
1 parent 014eef3 commit 30bf039
Show file tree
Hide file tree
Showing 5 changed files with 44 additions and 78 deletions.
50 changes: 34 additions & 16 deletions docs/GettingStarted.md
Original file line number Diff line number Diff line change
Expand Up @@ -65,19 +65,25 @@ one to start with, since the setup is a bit different.

## Installing Dependencies

You will need Node.js, Watchman, the React Native command line interface, and Xcode.
You will need Node, Watchman, the React Native command line interface, and Xcode.

<block class="mac android" />

## Installing Dependencies

You will need Node.js, Watchman, the React Native command line interface, and Android Studio.
You will need Node, Watchman, the React Native command line interface, a JDK, and Android Studio.

<block class="windows linux android" />
<block class="linux android" />

## Installing Dependencies

You will need Node.js, the React Native command line interface, and Android Studio.
You will need Node, the React Native command line interface, a JDK, and Android Studio.

<block class="windows android" />

## Installing Dependencies

You will need Node, the React Native command line interface, Python2, a JDK, and Android Studio.

<block class="mac ios android" />

Expand All @@ -90,33 +96,41 @@ brew install node
brew install watchman
```

> [Watchman](https://facebook.github.io/watchman) is a tool by Facebook for watching
changes in the filesystem. It is highly recommended you install it for better performance.
If you have already installed Node on your system, make sure it is version 4 or newer.

[Watchman](https://facebook.github.io/watchman) is a tool by Facebook for watching changes in the filesystem. It is highly recommended you install it for better performance.

<block class="linux android" />

### Node

Follow the [installation instructions for your Linux distribution](https://nodejs.org/en/download/package-manager/) to install Node.js 4 or newer.
Follow the [installation instructions for your Linux distribution](https://nodejs.org/en/download/package-manager/) to install Node 4 or newer.

<block class='windows android' />

### Node
### Node, Python2, JDK

We recommend installing Node.js and Python2 via [Chocolatey](https://chocolatey.org), a popular package manager for Windows. Open a Command Prompt as Administrator, then run:
We recommend installing Node and Python2 via [Chocolatey](https://chocolatey.org), a popular package manager for Windows.

Android Studio, which we will install next, requires a recent version of the [Java SE Development Kit (JDK)](http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html) which can be installed using Chocolatey.

Open a Command Prompt as Administrator, then run:

```
choco install nodejs.install
choco install python2
choco install jdk8
```

If you have already installed Node on your system, make sure it is version 4 or newer. If you already have a JDK on your system, make sure it is version 8 or newer.

> You can find additional installation options on [Node.js's Downloads page](https://nodejs.org/en/download/).
<block class="mac ios android" />

### The React Native CLI

Node.js comes with npm, which lets you install the React Native command line interface.
Node comes with npm, which lets you install the React Native command line interface.

Run the following command in a Terminal:

Expand All @@ -130,7 +144,7 @@ npm install -g react-native-cli

### The React Native CLI

Node.js comes with npm, which lets you install the React Native command line interface.
Node comes with npm, which lets you install the React Native command line interface.

Run the following command in a Terminal:

Expand All @@ -144,7 +158,9 @@ npm install -g react-native-cli

### Xcode

The easiest way to install Xcode 8 is via the [Mac App Store](https://itunes.apple.com/us/app/xcode/id497799835?mt=12). Installing Xcode will also install the iOS Simulator and all the necessary tools to build your iOS app.
The easiest way to install Xcode is via the [Mac App Store](https://itunes.apple.com/us/app/xcode/id497799835?mt=12). Installing Xcode will also install the iOS Simulator and all the necessary tools to build your iOS app.

If you have already installed Xcode on your system, make sure it is version 8 or higher.

You will also need to install the Xcode Command Line Tools. Open Xcode, then choose "Preferences..." from the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.

Expand All @@ -156,13 +172,15 @@ You will also need to install the Xcode Command Line Tools. Open Xcode, then cho

Setting up your development environment can be somewhat tedious if you're new to Android development. If you're already familiar with Android development, there are a few things you may need to configure. In either case, please make sure to carefully follow the next few steps.

#### 1. Download and install Android Studio
<block class="mac linux android" />

[Android Studio](https://developer.android.com/studio/install.html) provides the Android SDK and AVD (emulator) required to run and test your React Native apps.
> Android Studio requires a recent version of the [Java SE Development Kit (JDK)](http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html). Go ahead and install JDK 8 or newer if needed.
<block class="mac android" />
<block class="mac linux windows android" />

#### 1. Download and install Android Studio

> Android Studio requires a recent version of the [Java SE Development Kit (JDK)](http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html).
Android Studio provides the Android SDK and AVD (emulator) required to run and test your React Native apps. [Download Android Studio](https://developer.android.com/studio/index.html), then follow the [installation instructions](https://developer.android.com/studio/install.html). Choose `Custom` installation when prompted by the Setup Wizard, and proceed to the next step.

<block class="mac windows android" />

Expand Down
54 changes: 0 additions & 54 deletions docs/NativeModulesAndroid.md
Original file line number Diff line number Diff line change
Expand Up @@ -283,60 +283,6 @@ measureLayout();
Native modules should not have any assumptions about what thread they are being called on, as the current assignment is subject to change in the future. If a blocking call is required, the heavy work should be dispatched to an internally managed worker thread, and any callbacks distributed from there.
### Sending Events to JavaScript
Native modules can signal events to JavaScript without being invoked directly. The easiest way to do this is to use the `RCTDeviceEventEmitter` which can be obtained from the `ReactContext` as in the code snippet below.
```java
...
private void sendEvent(ReactContext reactContext,
String eventName,
@Nullable WritableMap params) {
reactContext
.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
.emit(eventName, params);
}
...
WritableMap params = Arguments.createMap();
...
sendEvent(reactContext, "keyboardWillShow", params);
```
JavaScript modules can then register to receive events by `addListenerOn` using the `Subscribable` mixin
```js
import { DeviceEventEmitter } from 'react-native';
...
var ScrollResponderMixin = {
mixins: [Subscribable.Mixin],
componentWillMount: function() {
...
this.addListenerOn(DeviceEventEmitter,
'keyboardWillShow',
this.scrollResponderKeyboardWillShow);
...
},
scrollResponderKeyboardWillShow:function(e: Event) {
this.keyboardWillOpenTo = e;
this.props.onKeyboardWillShow && this.props.onKeyboardWillShow(e);
},
```
You can also directly use the `DeviceEventEmitter` module to listen for events.
```js
...
componentWillMount: function() {
DeviceEventEmitter.addListener('keyboardWillShow', function(e: Event) {
// handle event.
});
}
...
```

### Getting activity result from `startActivityForResult`
You'll need to listen to `onActivityResult` if you want to get results from an activity you started with `startActivityForResult`. To do this, you must extend `BaseActivityEventListener` or implement `ActivityEventListener`. The former is preferred as it is more resilient to API changes. Then, you need to register the listener in the module's constructor,
Expand Down
4 changes: 1 addition & 3 deletions docs/Performance.md
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ The scroll events are dispatched to the JS thread, but their receipt is not nece
### Running in development mode (`dev=true`)

JavaScript thread performance suffers greatly when running in dev mode.
This is unavoidable: a lot more work needs to be done at runtime to provide you with good warnings and error messages, such as validating propTypes and various other assertions.
This is unavoidable: a lot more work needs to be done at runtime to provide you with good warnings and error messages, such as validating propTypes and various other assertions. Always make sure to test performance in [release builds](docs/running-on-device.html#building-your-app-for-production).

### Using `console.log` statements

Expand All @@ -80,8 +80,6 @@ Use the new [`FlatList`](docs/flatlist.html) or [`SectionList`](docs/sectionlist
Besides simplifying the API, the new list components also have significant performance enhancements,
the main one being nearly constant memory usage for any number of rows.

TODO: Link to blog post

### JS FPS plunges when re-rendering a view that hardly changes

If you are using a ListView, you must provide a `rowHasChanged` function that can reduce a lot of work by quickly determining whether or not a row needs to be re-rendered. If you are using immutable data structures, this would be as simple as a reference equality check.
Expand Down
11 changes: 7 additions & 4 deletions docs/Troubleshooting.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,15 @@ The React Native packager runs on port 8081. If another process is already using

Run the following command on a Mac to find the id for the process that is listening on port 8081:

`$ sudo lsof -i :8081`
```
$ sudo lsof -i :8081
```

Then run the following to terminate the process:

`$ kill -9 <PID>`
```
$ kill -9 <PID>
```

On Windows you can find the process using port 8081 using [Resource Monitor](https://stackoverflow.com/questions/48198/how-can-you-find-out-which-process-is-listening-on-a-port-on-windows) and stop it using Task Manager.

Expand All @@ -36,7 +40,7 @@ You will also need to update your applications to load the JavaScript bundle fro

### NPM locking error

If you encounter an error such as "npm WARN locking Error: EACCES" while using the React Native CLI, try running the following:
If you encounter an error such as `npm WARN locking Error: EACCES` while using the React Native CLI, try running the following:

```
sudo chown -R $USER ~/.npm
Expand Down Expand Up @@ -101,4 +105,3 @@ Issue caused by the number of directories [inotify](https://github.com/guard/lis
```
echo fs.inotify.max_user_watches=582222 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
```

3 changes: 2 additions & 1 deletion website/src/react-native/css/react-native.css
Original file line number Diff line number Diff line change
Expand Up @@ -1701,7 +1701,8 @@ input#algolia-doc-search:focus {
color: rgba(0, 0, 0, 0.4); }

.home-showcase-section .showcase img {
width: 110px;
width: 100px;
height: 100px;
border-radius: 20px; }

.showcaseHeader {
Expand Down

0 comments on commit 30bf039

Please sign in to comment.