Bump docs to v0.58 (facebook#756)

* Replace old forum with a link to the community page

* v0.58

Author: hramos

website/core/Footer.js

@@ -44,9 +44,10 @@ class Footer extends React.Component {
             </a>
           </div>
           <div>
-            <h5>
-              <a href={this.props.config.baseUrl + 'help.html'}>Community</a>
-            </h5>
+            <h5>Community</h5>
+            <a href={this.props.config.baseUrl + 'help.html'}>
+              Community Resources
+            </a>
             <a href={this.props.config.baseUrl + 'showcase.html'}>
               Who's using React Native?
             </a>
@@ -55,9 +56,6 @@ class Footer extends React.Component {
               target="_blank">
               Stack Overflow
             </a>
-            <a href="https://discuss.reactjs.org" target="_blank">
-              Discussion Forum
-            </a>
             <a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a>
           </div>
           <div>

website/siteConfig.js

@@ -8,7 +8,7 @@
 const RemarkablePlugins = require('./core/RemarkablePlugins');
 
 const users = require('./showcase.json');
-const defaultVersionShown = '0.57';
+const defaultVersionShown = '0.58';
 const baseUrl = '/react-native/';
 const repoUrl = 'https://github.com/facebook/react-native';
 const siteConfig = {

website/versioned_docs/version-0.5/building-from-source.md

@@ -73,7 +73,7 @@ Add `gradle-download-task` as dependency in `android/build.gradle`:
 ```gradle
 ...
     dependencies {
-        classpath 'com.android.tools.build:gradle:2.3.3'
+        classpath 'com.android.tools.build:gradle:3.1.4'
         classpath 'de.undercouch:gradle-download-task:3.1.2'
 
         // NOTE: Do not place your application dependencies here; they belong
@@ -101,7 +101,7 @@ Modify your `android/app/build.gradle` to use the `:ReactAndroid` project instea
 ...
 dependencies {
     implementation fileTree(dir: 'libs', include: ['*.jar'])
-    implementation 'com.android.support:appcompat-v7:26.0.2'
+    implementation 'com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}'
 
     implementation project(':ReactAndroid')
 

website/versioned_docs/version-0.5/communication-ios.md

@@ -60,6 +60,8 @@ rootView.appProperties = @{@"images" : imageList};
 
 It is fine to update properties anytime. However, updates have to be performed on the main thread. You use the getter on any thread.
 
+> **_Note:_** Currently, there is a known issue where setting appProperties during the bridge startup, the change can be lost. See https://github.com/facebook/react-native/issues/20115 for more information.
+
 There is no way to update only a few properties at a time. We suggest that you build it into your own wrapper instead.
 
 > **_Note:_** Currently, JS functions `componentWillReceiveProps` and `componentWillUpdateProps` of the top level RN component will not be called after a prop update. However, you can access the new props in `componentWillMount` function.

website/versioned_docs/version-0.5/direct-manipulation.md

@@ -192,7 +192,11 @@ Determines the location of the given view in the window and returns the values v
 
 Like `measure()`, but measures the view relative an ancestor, specified as `relativeToNativeNode`. This means that the returned x, y are relative to the origin x, y of the ancestor view.
 
-As always, to obtain a native node handle for a component, you can use `ReactNative.findNodeHandle(component)`.
+As always, to obtain a native node handle for a component, you can use `findNodeHandle(component)`.
+
+```javascript
+import {findNodeHandle} from 'react-native';
+```
 
 ### focus()
 

website/versioned_docs/version-0.5/getting-started.md

@@ -109,7 +109,7 @@ Then run the following commands to create a new React Native project called "Awe
 expo init AwesomeProject
 
 cd AwesomeProject
-npm start
+npm start #you can also use: expo start
 ```
 
 This will start a development server for you.
@@ -310,7 +310,7 @@ Setting up your development environment can be somewhat tedious if you're new to
 
 * `Android SDK`
 * `Android SDK Platform`
-* `Performance (Intel ® HAXM)`
+* `Performance (Intel ® HAXM)` ([See here for AMD](https://android-developers.googleblog.com/2018/07/android-emulator-amd-processor-hyper-v.html))
 * `Android Virtual Device`
 
 <block class="native linux android" />
@@ -406,6 +406,16 @@ You can find the actual location of the SDK in the Android Studio "Preferences"
 
 Open a new Command Prompt window to ensure the new environment variable is loaded before proceeding to the next step.
 
+#### 4. Add platform-tools to Path
+
+Open the System pane under **System and Security** in the Windows Control Panel, then click on **Change settings...**. Open the **Advanced** tab and click on **Environment Variables...**. Select the **Path** variable, then click **Edit**. Click **New** and add the path to platform-tools to the list.
+
+The default location for this folder is:
+
+```powershell
+c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk\platform-tools
+```
+
 <block class="native linux android" />
 
 ### Watchman
@@ -436,7 +446,7 @@ Use the React Native command line interface to generate a new React Native proje
 react-native init AwesomeProject
 ```
 
-This is not necessary if you are integrating React Native into an existing application, if you "ejected" from Create React Native App, or if you're adding Android support to an existing React Native project (see [Platform Specific Code](platform-specific-code.md)).
+This is not necessary if you are integrating React Native into an existing application, if you "ejected" from Create React Native App, or if you're adding Android support to an existing React Native project (see [Platform Specific Code](platform-specific-code.md)). You can also use a third-party CLI to init your React Native app, such as [Ignite CLI](https://github.com/infinitered/ignite).
 
 <block class="native mac windows linux android" />
 

website/versioned_docs/version-0.5/images.md

@@ -66,9 +66,9 @@ Note that image sources required this way include size (width, height) info for
 
 ## Static Non-Image Resources
 
-The `require` syntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including `.mp3`, `.wav`, `.mp4`, `.mov`, `.html` and `.pdf`. See [packager defaults](https://github.com/facebook/react-native/blob/master/local-cli/util/Config.js#L68) for the full list.
+The `require` syntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including `.mp3`, `.wav`, `.mp4`, `.mov`, `.html` and `.pdf`. See [packager defaults](https://github.com/facebook/metro/blob/master/packages/metro-config/src/defaults/defaults.js#L14-L44) for the full list.
 
-You can add support for other types by creating a packager config file (see the [packager config file](https://github.com/facebook/metro/blob/master/packages/metro-config/src/defaults/defaults.js#L14-L44) for the full list of configuration options).
+You can add support for other types by creating a packager config file (see the [packager config file](https://github.com/facebook/react-native/blob/master/local-cli/util/Config.js#L68) for the full list of configuration options).
 
 A caveat is that videos must use absolute positioning instead of `flexGrow`, since size info is not currently passed for non-image assets. This limitation doesn't occur for videos that are linked directly into Xcode or the Assets folder for Android.
 

website/versioned_docs/version-0.5/improvingux.md

@@ -16,31 +16,31 @@ Entering text on touch phone is a challenge - small screen, software keyboard. B
 
 Check out [`TextInput` docs](textinput.md) for more configuration options.
 
-<video src="/react-native/img/textinput.mp4" autoplay loop width="320" height="430"></video>
+<video src="/react-native/img/textinput.mp4" muted autoplay loop width="320" height="430"></video>
 
 [Try it on your phone](https://snack.expo.io/H1iGt2vSW)
 
 ## Manage layout when keyboard is visible
 
 Software keyboard takes almost half of the screen. If you have interactive elements that can get covered by the keyboard, make sure they are still accessible by using the [`KeyboardAvoidingView` component](keyboardavoidingview.md).
 
-<video src="/react-native/img/keyboardavoidingview.mp4" autoplay loop width="320" height="448"></video>
+<video src="/react-native/img/keyboardavoidingview.mp4" muted autoplay loop width="320" height="448"></video>
 
 [Try it on your phone](https://snack.expo.io/ryxRkwnrW)
 
 ## Make tappable areas larger
 
 On mobile phones it's hard to be very precise when pressing buttons. Make sure all interactive elements are 44x44 or larger. One way to do this is to leave enough space for the element, `padding`, `minWidth` and `minHeight` style values can be useful for that. Alternatively, you can use [`hitSlop` prop](touchablewithoutfeedback.md#hitslop) to increase interactive area without affecting the layout. Here's a demo:
 
-<video src="/react-native/img/hitslop.mp4" autoplay loop width="320" height="120"></video>
+<video src="/react-native/img/hitslop.mp4" muted autoplay loop width="320" height="120"></video>
 
 [Try it on your phone](https://snack.expo.io/rJPwCt4HZ)
 
 ## Use Android Ripple
 
 Android API 21+ uses the material design ripple to provide user with feedback when they touch an interactable area on the screen. React Native exposes this through the [`TouchableNativeFeedback` component](touchablenativefeedback.md). Using this touchable effect instead of opacity or highlight will often make your app feel much more fitting on the platform. That said, you need to be careful when using it because it doesn't work on iOS or on Android API < 21, so you will need to fallback to using one of the other Touchable components on iOS. You can use a library like [react-native-platform-touchable](https://github.com/react-community/react-native-platform-touchable) to handle the platform differences for you.
 
-<video src="/react-native/img/ripple.mp4" autoplay loop width="320"></video>
+<video src="/react-native/img/ripple.mp4" muted autoplay loop width="320"></video>
 
 [Try it on your phone](https://snack.expo.io/SJywqe3rZ)
 

website/versioned_docs/version-0.5/more-resources.md

@@ -39,4 +39,6 @@ The folks who built the app for Facebook's F8 conference also [open-sourced the
 
 [Yoga](https://yogalayout.com/) is a stand-alone layout engine that extends beyond React Native and allows product engineers to build layouts quickly for multiple platforms with a highly optimized open source layout engine designed with speed, size, and ease of use in mind.
 
+[Bugsnag](https://www.bugsnag.com/), [Microsoft App Center](https://appcenter.ms/), and [Sentry](https://sentry.io/welcome/) all provide excellent crash and error monitoring services for React and React Native apps. These services allow you to proactively monitor crashes and issues occuring on your apps in real time so you can fix them quickly and improve user experience.
+
 The [React Developer Tools](debugging.md#react-developer-tools) are great for debugging React and React Native apps.

website/versioned_docs/version-0.5/native-modules-ios.md

@@ -59,6 +59,8 @@ RCT_EXPORT_METHOD(addEvent:(NSString *)name location:(NSString *)location)
 {
   RCTLogInfo(@"Pretending to create an event %@ at %@", name, location);
 }
+
+@end
 ```
 
 Now, from your JavaScript file you can call the method like this: