diff --git a/docs/GettingStarted.md b/docs/GettingStarted.md index ee1552419..2aa0b2623 100644 --- a/docs/GettingStarted.md +++ b/docs/GettingStarted.md @@ -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. ## 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. - + ## 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. + + + +## Installing Dependencies + +You will need Node, the React Native command line interface, Python2, a JDK, and Android Studio. @@ -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. ### 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. -### 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/). ### 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: @@ -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: @@ -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. @@ -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. + + +> 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. + + + #### 1. Download and install Android Studio -[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). +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. diff --git a/docs/NativeModulesAndroid.md b/docs/NativeModulesAndroid.md index 029e916bf..de71c1d09 100644 --- a/docs/NativeModulesAndroid.md +++ b/docs/NativeModulesAndroid.md @@ -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, diff --git a/docs/Performance.md b/docs/Performance.md index 823630990..f63bc6f2c 100644 --- a/docs/Performance.md +++ b/docs/Performance.md @@ -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 @@ -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. diff --git a/docs/Troubleshooting.md b/docs/Troubleshooting.md index 8d57fd84a..484ecbf4e 100644 --- a/docs/Troubleshooting.md +++ b/docs/Troubleshooting.md @@ -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 ` +``` +$ kill -9 +``` 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. @@ -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 @@ -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 ``` - diff --git a/website/src/react-native/css/react-native.css b/website/src/react-native/css/react-native.css index 180661c75..7ff24fb0a 100644 --- a/website/src/react-native/css/react-native.css +++ b/website/src/react-native/css/react-native.css @@ -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 {