181113 sync 0.57 (reactnativecn#31)

* Add Salesforce App to the showcase (reactnativecn#594)

* Fix 'Expo getting started' link (reactnativecn#598)

* Fix 'Expo getting started' link

* Update getting-started.md

* Update getting-started.md

* add default value to TextInput clearButtonMode description (reactnativecn#558)

* add default value to TextInput clearButtonMode description

Small documentation tweak - added information about default value of `clearButtonMode` property to `TextInput` component.

* Update textinput.md

* typo in 'specially' (reactnativecn#636)

* typo

* Update animations.md

* Add possible Buttons to rationale (reactnativecn#580)

* Missing code for passing result to ReactInstanceManager (reactnativecn#559)

> This is for projects which integrate react-native in existing android applications.

Any Native Module which uses `startActivityForResult()` and expects to catch the result in its `onActivityResult()` would fail if we do not override the `onActivityResult()` in our React Activity and pass it on to the `ReactInstanceManager` instance created.

* Update TouchableWithoutFeedback and Building For TV Devices (reactnativecn#565)

* Add onBlur and onFocus description

* Update TV Code changes

* Update touchablewithoutfeedback.md

* Update touchablewithoutfeedback.md

* Update building-for-apple-tv.md

* [DOCS] autoCapitalize caveat for name-phone-pad (reactnativecn#633)

* [DOCS] autoCapitalize caveat for name-phone-pad

https://developer.apple.com/documentation/uikit/uikeyboardtype/namephonepad

> UIKeyboardType.namePhonePad specifies a keypad designed for entering a person’s name or phone number. This keyboard type does not support auto-capitalization.

* Update textinput.md

* Added allowFileAccess Android WebView property (reactnativecn#586)

* remove methods from the KeyboardAvoidingView docs (reactnativecn#587)

* remove methods from the KeyboardAvoidingView docs

* Revert change to bullet points

* Update keyboardavoidingview.md

* Update keyboardavoidingview.md

* fix typo easing (reactnativecn#615)

* fix typo easing

static in easing; 
to
static in(easing)

* Update easing.md

* Update easing.md

* Update easing.md

* Update easing.md

* Update easing.md

* Update easing.md

* Text component behaviour inside another Text component (reactnativecn#589)

* Fix: <Text> element behaviour inside <Text>

* Update text.md

* Update text.md

* Typo (reactnativecn#638)

Change 'indiciating' to 'indicating'

* Document buttonPositive, buttonNegative, buttonNeutral (reactnativecn#650)

* Invalid anchors (reactnativecn#647)

* Invalid anchors

On [web version](https://facebook.github.io/react-native/docs/switch) camelcase anchors not supported

* Update switch.md

* Update switch.md

* Fix broken link in understanding-cli.md (reactnativecn#648)

* Fix broken link in understanding-cli.md

* Change link to metro config in understanding-cli.md

* Update guides with latest content across all versions (reactnativecn#656)

* Automatically correct unversioned guides.

* Collapse updates to unversioned docs back into Version 0.5

* Update navigation.md (reactnativecn#658)

added missing space

* Remove html extensions from links on index page (reactnativecn#637)

* Fix path of generated APK (reactnativecn#639)

In React Native v0.57.4, the generated APK can be found under `android/app/build/outputs/apk/release/app-release.apk`.

* Recommend installing SDK 27 in Getting Started

I have got an error saying it requires android sdk 27 while trying to run "react-native run-android" command in my pc....

* Update doc unversioning script to use latest data from docs/

* Run unversion script

* Prettier

* Prettier

* Match font-size in lists to font-size in p

* Sync with latest changes

* Update Getting Started

* Add yarn command for fixing Guides

* Blog Post: Open Source Roadmap (reactnativecn#657)

* Blog Post: Open Source Roadmap

* Link to discussions repo

* Add thumbColor changes to Switch on versioned 0.57 (reactnativecn#620)

* Removed performance section from stylesheet as no longer true (reactnativecn#629)

See facebook/react-native@a8e3c7f
`StyleSheet.create` is now an identity function, the `ReactNativePropRegistry` (`StyleSheetRegistry`) was removed.

* Update Out-of-Tree Platform docs to reflect new module patterns (reactnativecn#604)

* .big-button nicer hover effect (reactnativecn#603)

* Lighter big button color change on hover (reactnativecn#600)

* Adds a basic example to Share API (reactnativecn#539)

* Adds a basic example to Share.md

This commit adds a basic example to the Share API. The example highlights use of the Share.sharedAction, Share.dismissedAction, and Share.share methods as well as how they are intended to be used together.

* Add missing 's' in accessibilityStates prop mentions (reactnativecn#659)

* Correct whitespace in AsyncStorage "Fetching data" (reactnativecn#661)

* fix incomplete sentence in DatePickerAndroid docs (reactnativecn#654)

* Update native-components-ios.md (reactnativecn#625)

* Update native-components-ios.md

`RCTBubblingEventBlock` must be prefixed with `on` but this does not mentioned in the documentation. I find it in this [link](https://stackoverflow.com/a/46430329/3127015) and I really waste my time to figure out why my callback does not call. I then think it can be helpful to others to know it as well.

* Update native-components-ios.md

* Add missing properties doc to LayoutAnimation (reactnativecn#623)

* Fixes to the Layout Props page (reactnativecn#595)

- Fixed grammar in the `aspectRatio` segment
- Changed the supported types of many props from `number, , string` to the more fitting `number, string`

* Added info on how to debug using Safari (reactnativecn#588)

* Added info on how to debug using Safari

* Update debugging.md

* Add docs for ImageBackground (reactnativecn#597)

* Backport ImageBackground docs all the way back to 0.46

* Small grammar fix (reactnativecn#643)

"Notice that {pic} is surrounded by braces, to embed the variable pic into JSX. " is not a grammatically correct sentence.

It can be quickly fixed by removing the comma, but the sentence can be made more concise and clear.

My proposed fix:
"Notice the braces surrounding `{pic}` - these embed the variable `pic` into JSX." 

This changes the focus of the sentence to braces and explains more concisely what function they are performing.

* Clarifying exactly what properties absoluteFill includes (reactnativecn#644)

* Update to new way of referencing dependencies (reactnativecn#642)

also made Ndk version consistent with links

* Clarifying opacity is between 0 and 1, adding default (reactnativecn#634)

* tweak the wording to stick to jdk 8 (reactnativecn#640)

* Introduce apply git patch file after running `react-native-git-upgrade` command (reactnativecn#632)

The troubles I met in the react-native upgrading process motivated me to add more details about applying git patch file generated by command `react-native-git-upgrade`. Conflicts will only be marked up for resolving after applying the patch.

* Fixed prop descriptions of 'color' and 'value' props in picker-item.md (reactnativecn#627)

* Fix small bug in ReadMe doc and add consistent periods. (reactnativecn#622)

* Refactor State doc to return proper elemnt and keep consistent function format (reactnativecn#621)

* Update height-and-width.md (reactnativecn#616)

Correcting grammar for clarity.

* Reorder props alphabetically (reactnativecn#609)

* tintColor is deprecated, updated docs to reflect this change (reactnativecn#605)

* Add deprecation notice for tintColor to 0.57 docs

* Add reference to shadow props in View style docs (reactnativecn#599)

* File structure should include the 1x version too. (reactnativecn#581)

Its unclear in the docs that the 1x version should be included too. I believe that you do need it, correct me if I'm wrong?

* move styles declaration to the top for emphasis (reactnativecn#200)

* move styles declaration to the top for emphasis

* Update style.md

* Update gradle documentation (reactnativecn#199)

* Update gradle documentation

`compile` is now deprecated in favor of `implementation`.

https://stackoverflow.com/questions/44493378/whats-the-difference-between-implementation-and-compile-in-gradle

* Update integration-with-existing-apps.md

* Update guide sync script to ensure v0.5 is always up to date

Switch to Pretty Quick

* Switch from lint-staged to husky + pretty-quick

* Update copyright headers to yearless format

* Remove outdated images in Android GS

* add crash reporting services for react native (reactnativecn#666)

* Added testId in doc for TouchableWithoutFeedback (reactnativecn#667)

Thos prop was missing from the documentation, but people are still using it extensively.

.prettierrc

@@ -1,13 +1,7 @@
 {
   "overrides": [
     {
-      "files": ".prettierrc",
-      "options": {
-        "parser": "json"
-      }
-    },
-    {
-      "files": ["website/core/**/*.js", "website/static/js/**/*.js"],
+      "files": "*.js",
       "options": {
         "arrowParens": "avoid",
         "bracketSpacing": false,
@@ -18,19 +12,15 @@
       }
     },
     {
-      "files": [
-        "docs/**/*.md",
-        "website/versioned_docs/**/*.md",
-        "website/blog/**/*.md"
-      ],
+      "files": "*.md",
       "options": {
         "arrowParens": "always",
         "bracketSpacing": false,
         "jsxBracketSameLine": true,
         "printWidth": 80,
         "proseWrap": "never",
         "singleQuote": true,
-        "trailingComma": "es5"
+        "trailingComma": "all"
       }
     }
   ]

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2015-present, Facebook, Inc.
+Copyright (c) Facebook, Inc. and its affiliates.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+SOFTWARE.

README.md

@@ -19,24 +19,24 @@ This repo contains the website configuration and documentation powering the
 1.  Git
 1.  Node: install version 6.2.2 or greater. Node v8 would be ideal.
 1.  Yarn: See
-    [Yarn website for installation instructions](https://yarnpkg.com/lang/en/docs/install/)
-1.  A fork of the repo (for any contributions)
+    [Yarn website for installation instructions](https://yarnpkg.com/lang/en/docs/install/).
+1.  A fork of the repo (for any contributions).
 1.  A clone of the `react-native-website` repo.
 1.  Docusaurus: Run `yarn global add docusaurus-init` or `npm install --global docusaurus-init`
 1.  Prettier: See
-    [Prettier website for installation instructions](https://prettier.io/docs/en/install.html)
+    [Prettier website for installation instructions](https://prettier.io/docs/en/install.html).
 
 ### Installation
 
-1.  `cd react-native-website` to go into the project root
-1.  `cd website` to go into the website portion of the project
+1.  `cd react-native-website` to go into the project root.
+1.  `cd website` to go into the website portion of the project.
 1.  `yarn` to install the website's npm dependencies (or `npm install`, if not
-    using Yarn)
+    using Yarn).
 
 ### Running locally
 
-1.  `yarn start` to start the development server (powered by Docusaurus) (or `npm start`, if not using Yarn)
-1.  `open http://localhost:3000/` to open the site in your favorite browser
+1.  `yarn start` to start the development server (powered by Docusaurus) (or `npm start`, if not using Yarn).
+1.  `open http://localhost:3000/` to open the site in your favorite browser.
 
 # Overview
 
@@ -115,9 +115,9 @@ be in reverse chronological order.
 
 #### Cutting a new version
 
-1.  `cd react-native-website` to go into the project root
-1.  `cd website` to go into the website portion of the project
-1.  Run `yarn version <version>` where '<version>' is the new version being
+1.  `cd react-native-website` to go into the project root.
+1.  `cd website` to go into the website portion of the project.
+1.  Run `yarn version <version>` where `<version>` is the new version being
     released.
 
 ## Website configuration
@@ -138,14 +138,14 @@ React Native showcase.
 ### Create a branch
 
 1.  `git checkout master` from any folder in your local `react-native-website`
-    repository
-1.  `git pull origin master` to ensure you have the latest main code
+    repository.
+1.  `git pull origin master` to ensure you have the latest main code.
 1.  `git checkout -b the-name-of-my-branch` (replacing `the-name-of-my-branch`
-    with a suitable name) to create a branch
+    with a suitable name) to create a branch.
 
 ### Make the change
 
-1.  Follow the "Running locally" instructions
+1.  Follow the "Running locally" instructions.
 1.  Save the files and check in the browser. Some changes may require a server restart.
 1.  Changes to /docs will only be visible in the latest version of the documentation (master).
 
@@ -159,10 +159,10 @@ React Native showcase.
 ### Push it
 
 1.  Run `yarn prettier` to ensure your changes are consistent with other files in
-    the repo
+    the repo.
 1.  `git add -A && git commit -m "My message"` (replacing `My message` with a
     commit message, such as `Fixed header logo on Android`) to stage and commit
-    your changes
+    your changes.
 1.  `git push my-fork-name the-name-of-my-branch`
 1.  Go to the
     [react-native-website repo](https://github.com/facebook/react-native-website)

docs/accessibility.md

@@ -91,7 +91,7 @@ Accessibility Role tells a person using either VoiceOver on iOS or TalkBack on A
 * **header** Used when an element acts as a header for a content section (e.g. the title of a navigation bar).
 * **summary** Used when an element can be used to provide a quick summary of current conditions in the app when the app first launches.
 
-#### accessibilityState (iOS, Android)
+#### accessibilityStates (iOS, Android)
 
 > **Note:** > `accessibilityRole` and `accessibilityStates` are meant to be a cross-platform solution to replace `accessibilityTraits` and `accessibilityComponentType`, which will soon be deprecated. When possible, use `accessibilityRole` and `accessibilityStates` instead of `accessibilityTraits` and `accessibilityComponentType`.
 
@@ -100,7 +100,7 @@ Accessibility State tells a person using either VoiceOver on iOS or TalkBack on
 * **selected** Used when the element is in a selected state. For example, a button is selected.
 * **disabled** Used when the element is disabled and cannot be interacted with.
 
-To use, set the `accessibilityState` to an array containing either `selected`, `disabled`, or both.
+To use, set the `accessibilityStates` to an array containing either `selected`, `disabled`, or both.
 
 #### accessibilityTraits (iOS)
 

docs/accessibilityinfo.md

@@ -16,7 +16,7 @@ class ScreenReaderStatusExample extends React.Component {
   componentDidMount() {
     AccessibilityInfo.addEventListener(
       'change',
-      this._handleScreenReaderToggled
+      this._handleScreenReaderToggled,
     );
     AccessibilityInfo.fetch().then((isEnabled) => {
       this.setState({
@@ -28,7 +28,7 @@ class ScreenReaderStatusExample extends React.Component {
   componentWillUnmount() {
     AccessibilityInfo.removeEventListener(
       'change',
-      this._handleScreenReaderToggled
+      this._handleScreenReaderToggled,
     );
   }
 

docs/alertios.md

@@ -76,7 +76,7 @@ AlertIOS.alert(
       text: 'Install',
       onPress: () => console.log('Install Pressed'),
     },
-  ]
+  ],
 );
 ```
 
@@ -118,7 +118,7 @@ AlertIOS.prompt(
       onPress: (password) => console.log('OK Pressed, password: ' + password),
     },
   ],
-  'secure-text'
+  'secure-text',
 );
 ```
 
@@ -132,7 +132,7 @@ AlertIOS.prompt(
   null,
   (text) => console.log('Your username is ' + text),
   null,
-  'default'
+  'default',
 );
 ```
 

docs/animated.md

@@ -13,7 +13,7 @@ Animated.timing(
   this.state.fadeAnim, // The value to drive
   {
     toValue: 1, // Animate to final value of 1
-  }
+  },
 ).start(); // Start the animation
 ```
 
@@ -212,7 +212,7 @@ Specifying stiffness/damping/mass as parameters makes `Animated.spring` use an a
 Other configuration options are as follows:
 
 * `velocity`: The initial velocity of the object attached to the spring. Default 0 (object is at rest).
-* `overshootClamping`: Boolean indiciating whether the spring should be clamped and not bounce. Default false.
+* `overshootClamping`: Boolean indicating whether the spring should be clamped and not bounce. Default false.
 * `restDisplacementThreshold`: The threshold of displacement from rest below which the spring should be considered at rest. Default 0.001.
 * `restSpeedThreshold`: The speed at which the spring should be considered at rest in pixels per second. Default 0.001.
 * `delay`: Start the animation after delay (milliseconds). Default 0.

docs/animatedvaluexy.md

@@ -28,7 +28,7 @@ class DraggableView extends React.Component {
       onPanResponderRelease: () => {
         Animated.spring(
           this.state.pan, // Auto-multiplexed
-          {toValue: {x: 0, y: 0}} // Back to zero
+          {toValue: {x: 0, y: 0}}, // Back to zero
         ).start();
       },
     });

docs/animations.md

@@ -271,7 +271,7 @@ Animated.timing(this.state.animatedValue, {
 
 Animated values are only compatible with one driver so if you use native driver when starting an animation on a value, make sure every animation on that value also uses the native driver.
 
-The native driver also works with `Animated.event`. This is specially useful for animations that follow the scroll position as without the native driver, the animation will always run a frame behind the gesture due to the async nature of React Native.
+The native driver also works with `Animated.event`. This is especially useful for animations that follow the scroll position as without the native driver, the animation will always run a frame behind the gesture due to the async nature of React Native.
 
 ```javascript
 <Animated.ScrollView // <-- Use the Animated ScrollView wrapper
@@ -284,7 +284,7 @@ The native driver also works with `Animated.event`. This is specially useful for
         },
       },
     ],
-    {useNativeDriver: true} // <-- Add this
+    {useNativeDriver: true}, // <-- Add this
   )}>
   {content}
 </Animated.ScrollView>

docs/asyncstorage.md

@@ -39,9 +39,9 @@ _retrieveData = async () => {
       // We have data!!
       console.log(value);
     }
-   } catch (error) {
-     // Error retrieving data
-   }
+  } catch (error) {
+    // Error retrieving data
+  }
 }
 ```
 

docs/building-for-apple-tv.md

@@ -139,19 +139,19 @@ var running_on_android_tv = Platform.isTV;
 
 * _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:
+* _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 `TouchableWithoutFeedback`, `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.
+  * `onFocus` will be executed when the touchable view goes into focus
+  * `onBlur` will be executed when the touchable view goes out of focus
+  * `onPress` will be executed when the touchable view is actually selected by pressing the "select" button on the TV remote.
 
 <block class="android" />
 
-* _Access to touchable controls_: When running on Android TV the Android framework will automatically apply a directional navigation scheme based on relative position of focusable elements in your views. 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`, `TouchableOpacity` and `TouchableNativeFeedback` will "just work". In particular:
+* _Access to touchable controls_: When running on Android TV the Android framework will automatically apply a directional navigation scheme based on relative position of focusable elements in your views. 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 `TouchableWithoutFeedback`, `TouchableHighlight`, `TouchableOpacity` and `TouchableNativeFeedback` 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.
+  * `onFocus` will be executed when the touchable view goes into focus
+  * `onBlur` will be executed when the touchable view goes out of focus
+  * `onPress` will be executed when the touchable view is actually selected by pressing the "select" button on the TV remote.
 
 <block class="ios" />
 

docs/building-from-source.md

@@ -41,7 +41,7 @@ Example:
 
 ```
 sdk.dir=/Users/your_unix_name/android-sdk-macosx
-ndk.dir=/Users/your_unix_name/android-ndk/android-ndk-r10e
+ndk.dir=/Users/your_unix_name/android-ndk/android-ndk-r17b
 ```
 
 #### Download links for Android NDK
@@ -94,15 +94,15 @@ project(':ReactAndroid').projectDir = new File(
 ...
 ```
 
-Modify your `android/app/build.gradle` to use the `:ReactAndroid` project instead of the pre-compiled library, e.g. - replace `compile 'com.facebook.react:react-native:+'` with `compile project(':ReactAndroid')`:
+Modify your `android/app/build.gradle` to use the `:ReactAndroid` project instead of the pre-compiled library, e.g. - replace `implementation 'com.facebook.react:react-native:+'` with `implementation project(':ReactAndroid')`:
 
 ```gradle
 ...
 dependencies {
-    compile fileTree(dir: 'libs', include: ['*.jar'])
-    compile 'com.android.support:appcompat-v7:26.0.2'
+    implementation fileTree(dir: 'libs', include: ['*.jar'])
+    implementation 'com.android.support:appcompat-v7:26.0.2'
 
-    compile project(':ReactAndroid')
+    implementation project(':ReactAndroid')
 
     ...
 }

docs/custom-webview-android.md

@@ -195,7 +195,7 @@ export default class CustomWebView extends Component {
 const RCTCustomWebView = requireNativeComponent(
   'RCTCustomWebView',
   CustomWebView,
-  WebView.extraNativeComponentConfig
+  WebView.extraNativeComponentConfig,
 );
 ```
 
@@ -253,6 +253,6 @@ const RCTCustomWebView = requireNativeComponent(
       ...WebView.extraNativeComponentConfig.nativeOnly,
       onScrollToBottom: true,
     },
-  }
+  },
 );
 ```

docs/custom-webview-ios.md

@@ -168,7 +168,7 @@ export default class CustomWebView extends Component {
 const RCTCustomWebView = requireNativeComponent(
   'RCTCustomWebView',
   CustomWebView,
-  WebView.extraNativeComponentConfig
+  WebView.extraNativeComponentConfig,
 );
 ```
 
@@ -227,6 +227,6 @@ const RCTCustomWebView = requireNativeComponent(
       ...WebView.extraNativeComponentConfig.nativeOnly,
       onScrollToBottom: true,
     },
-  }
+  },
 );
 ```

docs/datepickerandroid.md

@@ -52,7 +52,7 @@ The available keys for the `options` object are:
   * 'spinner': Show a date picker in spinner mode.
   * 'default': Show a default native date picker(spinner/calendar) based on android versions.
 
-Returns a Promise which will be invoked an object containing `action`, `year`, `month` (0-11), `day` if the user picked a date. If the user dismissed the dialog, the Promise will still be resolved with action being `DatePickerAndroid.dismissedAction` and all the other keys being undefined. **Always** check whether the `action` before reading the values.
+Returns a Promise which will be invoked an object containing `action`, `year`, `month` (0-11), `day` if the user picked a date. If the user dismissed the dialog, the Promise will still be resolved with action being `DatePickerAndroid.dismissedAction` and all the other keys being undefined. **Always** check whether the `action` is equal to `DatePickerAndroid.dateSetAction` before reading the values.
 
 Note the native date picker dialog has some UI glitches on Android 4 and lower when using the `minDate` and `maxDate` options.
 

docs/debugging.md

@@ -73,6 +73,19 @@ The debugger will receive a list of all project roots, separated by a space. For
 
 > Custom debugger commands executed this way should be short-lived processes, and they shouldn't produce more than 200 kilobytes of output.
 
+## Safari Developer Tools
+
+You can use Safari to debug the iOS version of your app without having to enable "Debug JS Remotely".
+
+* Enable Develop menu in Safari: `Preferences → Advanced → Select "Show Develop menu in menu bar"`
+* Select your app's JSContext: `Develop → Simulator → JSContext`
+* Safari's Web Inspector should open which has a Console and a Debugger
+
+However, there are some disadvantages:
+
+1. No sourcemaps when debugging
+2. Every time the app is reloaded (using live reload, or by manually reloading), a new JSContext is created. Choosing "Automatically Show Web Inspectors for JSContexts" saves you from having to select the latest JSContext manually.
+
 ## React Developer Tools
 
 You can use [the standalone version of React Developer Tools](https://github.com/facebook/react-devtools/tree/master/packages/react-devtools) to debug the React component hierarchy. To use it, install the `react-devtools` package globally: