diff --git a/website/versioned_docs/version-0.60/_integration-with-existing-apps-objc.md b/website/versioned_docs/version-0.60/_integration-with-existing-apps-objc.md index 590bfc3c5b2..f364f00df3f 100644 --- a/website/versioned_docs/version-0.60/_integration-with-existing-apps-objc.md +++ b/website/versioned_docs/version-0.60/_integration-with-existing-apps-objc.md @@ -83,7 +83,7 @@ Install the Command Line Tools. Choose "Preferences..." in the Xcode menu. Go to Before you integrate React Native into your application, you will want to decide what parts of the React Native framework you would like to integrate. We will use CocoaPods to specify which of these "subspecs" your app will depend on. -The list of supported `subspec`s is available in [`/node_modules/react-native/React.podspec`](https://github.com/facebook/react-native/blob/master/React.podspec). They are generally named by functionality. For example, you will generally always want the `Core` `subspec`. That will get you the `AppRegistry`, `StyleSheet`, `View` and other core React Native libraries. If you want to add the React Native `Text` library (e.g., for `` elements), then you will need the `RCTText` `subspec`. If you want the `Image` library (e.g., for `` elements), then you will need the `RCTImage` `subspec`. +The list of supported `subspec`s is available in [`/node_modules/react-native/React.podspec`](https://github.com/facebook/react-native/blob/0.60-stable/React.podspec). They are generally named by functionality. For example, you will generally always want the `Core` `subspec`. That will get you the `AppRegistry`, `StyleSheet`, `View` and other core React Native libraries. If you want to add the React Native `Text` library (e.g., for `` elements), then you will need the `RCTText` `subspec`. If you want the `Image` library (e.g., for `` elements), then you will need the `RCTImage` `subspec`. You can specify which `subspec`s your app will depend on in a `Podfile` file. The easiest way to create a `Podfile` is by running the CocoaPods `init` command in the `/ios` subfolder of your project: @@ -280,7 +280,7 @@ First `import` the `RCTRootView` header. } ``` -> Note that `RCTRootView initWithURL` starts up a new JSC VM. To save resources and simplify the communication between RN views in different parts of your native app, you can have multiple views powered by React Native that are associated with a single JS runtime. To do that, instead of using `[RCTRootView alloc] initWithURL`, use [`RCTBridge initWithBundleURL`](https://github.com/facebook/react-native/blob/master/React/Base/RCTBridge.h#L93) to create a bridge and then use `RCTRootView initWithBridge`. +> Note that `RCTRootView initWithURL` starts up a new JSC VM. To save resources and simplify the communication between RN views in different parts of your native app, you can have multiple views powered by React Native that are associated with a single JS runtime. To do that, instead of using `[RCTRootView alloc] initWithURL`, use [`RCTBridge initWithBundleURL`](https://github.com/facebook/react-native/blob/0.60-stable/React/Base/RCTBridge.h#L93) to create a bridge and then use `RCTRootView initWithBridge`. > When moving your app to production, the `NSURL` can point to a pre-bundled file on disk via something like `[[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];`. You can use the `react-native-xcode.sh` script in `node_modules/react-native/scripts/` to generate that pre-bundled file. diff --git a/website/versioned_docs/version-0.60/_integration-with-existing-apps-swift.md b/website/versioned_docs/version-0.60/_integration-with-existing-apps-swift.md index 2c59effe06e..2945c965a84 100644 --- a/website/versioned_docs/version-0.60/_integration-with-existing-apps-swift.md +++ b/website/versioned_docs/version-0.60/_integration-with-existing-apps-swift.md @@ -83,7 +83,7 @@ Install the Command Line Tools. Choose "Preferences..." in the Xcode menu. Go to Before you integrate React Native into your application, you will want to decide what parts of the React Native framework you would like to integrate. We will use CocoaPods to specify which of these "subspecs" your app will depend on. -The list of supported `subspec`s is available in [`/node_modules/react-native/React.podspec`](https://github.com/facebook/react-native/blob/master/React.podspec). They are generally named by functionality. For example, you will generally always want the `Core` `subspec`. That will get you the `AppRegistry`, `StyleSheet`, `View` and other core React Native libraries. If you want to add the React Native `Text` library (e.g., for `` elements), then you will need the `RCTText` `subspec`. If you want the `Image` library (e.g., for `` elements), then you will need the `RCTImage` `subspec`. +The list of supported `subspec`s is available in [`/node_modules/react-native/React.podspec`](https://github.com/facebook/react-native/blob/0.60-stable/React.podspec). They are generally named by functionality. For example, you will generally always want the `Core` `subspec`. That will get you the `AppRegistry`, `StyleSheet`, `View` and other core React Native libraries. If you want to add the React Native `Text` library (e.g., for `` elements), then you will need the `RCTText` `subspec`. If you want the `Image` library (e.g., for `` elements), then you will need the `RCTImage` `subspec`. You can specify which `subspec`s your app will depend on in a `Podfile` file. The easiest way to create a `Podfile` is by running the CocoaPods `init` command in the `/ios` subfolder of your project: @@ -269,7 +269,7 @@ import React } ``` -> Note that `RCTRootView bundleURL` starts up a new JSC VM. To save resources and simplify the communication between RN views in different parts of your native app, you can have multiple views powered by React Native that are associated with a single JS runtime. To do that, instead of using `RCTRootView bundleURL`, use [`RCTBridge initWithBundleURL`](https://github.com/facebook/react-native/blob/master/React/Base/RCTBridge.h#L89) to create a bridge and then use `RCTRootView initWithBridge`. +> Note that `RCTRootView bundleURL` starts up a new JSC VM. To save resources and simplify the communication between RN views in different parts of your native app, you can have multiple views powered by React Native that are associated with a single JS runtime. To do that, instead of using `RCTRootView bundleURL`, use [`RCTBridge initWithBundleURL`](https://github.com/facebook/react-native/blob/0.60-stable/React/Base/RCTBridge.h#L89) to create a bridge and then use `RCTRootView initWithBridge`. > When moving your app to production, the `NSURL` can point to a pre-bundled file on disk via something like `let mainBundle = NSBundle(URLForResource: "main" withExtension:"jsbundle")`. You can use the `react-native-xcode.sh` script in `node_modules/react-native/scripts/` to generate that pre-bundled file. diff --git a/website/versioned_docs/version-0.60/animations.md b/website/versioned_docs/version-0.60/animations.md index 3052877e943..b1a8e6e0389 100644 --- a/website/versioned_docs/version-0.60/animations.md +++ b/website/versioned_docs/version-0.60/animations.md @@ -281,7 +281,7 @@ The native driver also works with `Animated.event`. This is especially useful fo ``` -You can see the native driver in action by running the [RNTester app](https://github.com/facebook/react-native/tree/master/packages/rn-tester/), then loading the Native Animated Example. You can also take a look at the [source code](https://github.com/facebook/react-native/blob/master/packages/rn-tester/js/examples/NativeAnimation/NativeAnimationsExample.js) to learn how these examples were produced. +You can see the native driver in action by running the [RNTester app](https://github.com/facebook/react-native/tree/0.60-stable/packages/rn-tester/), then loading the Native Animated Example. You can also take a look at the [source code](https://github.com/facebook/react-native/blob/0.60-stable/packages/rn-tester/js/examples/NativeAnimation/NativeAnimationsExample.js) to learn how these examples were produced. #### Caveats @@ -309,8 +309,8 @@ While using transform styles such as `rotateY`, `rotateX`, and others ensure the The RNTester app has various examples of `Animated` in use: -- [AnimatedGratuitousApp](https://github.com/facebook/react-native/tree/master/packages/rn-tester/js/examples/Animated/AnimatedGratuitousApp) -- [NativeAnimationsExample](https://github.com/facebook/react-native/blob/master/packages/rn-tester/js/examples/NativeAnimation/NativeAnimationsExample.js) +- [AnimatedGratuitousApp](https://github.com/facebook/react-native/tree/0.60-stable/packages/rn-tester/js/examples/Animated/AnimatedGratuitousApp) +- [NativeAnimationsExample](https://github.com/facebook/react-native/blob/0.60-stable/packages/rn-tester/js/examples/NativeAnimation/NativeAnimationsExample.js) ## `LayoutAnimation` API @@ -391,7 +391,7 @@ const styles = StyleSheet.create({ }); ``` -This example uses a preset value, you can customize the animations as you need, see [LayoutAnimation.js](https://github.com/facebook/react-native/blob/master/Libraries/LayoutAnimation/LayoutAnimation.js) for more information. +This example uses a preset value, you can customize the animations as you need, see [LayoutAnimation.js](https://github.com/facebook/react-native/blob/0.60-stable/Libraries/LayoutAnimation/LayoutAnimation.js) for more information. ## Additional notes diff --git a/website/versioned_docs/version-0.60/button.md b/website/versioned_docs/version-0.60/button.md index ced60d3e7df..b2d33dc3262 100644 --- a/website/versioned_docs/version-0.60/button.md +++ b/website/versioned_docs/version-0.60/button.md @@ -5,7 +5,7 @@ title: Button A basic button component that should render nicely on any platform. Supports a minimal level of customization. -If this button doesn't look right for your app, you can build your own button using [TouchableOpacity](touchableopacity.md) or [TouchableNativeFeedback](touchablenativefeedback.md). For inspiration, look at the [source code for this button component](https://github.com/facebook/react-native/blob/master/Libraries/Components/Button.js). Or, take a look at the [wide variety of button components built by the community](https://js.coach/?menu%5Bcollections%5D=React%20Native&page=1&query=button). +If this button doesn't look right for your app, you can build your own button using [TouchableOpacity](touchableopacity.md) or [TouchableNativeFeedback](touchablenativefeedback.md). For inspiration, look at the [source code for this button component](https://github.com/facebook/react-native/blob/0.60-stable/Libraries/Components/Button.js). Or, take a look at the [wide variety of button components built by the community](https://js.coach/?menu%5Bcollections%5D=React%20Native&page=1&query=button). ### Example diff --git a/website/versioned_docs/version-0.60/communication-ios.md b/website/versioned_docs/version-0.60/communication-ios.md index 287514f3208..3ed2a0277a6 100644 --- a/website/versioned_docs/version-0.60/communication-ios.md +++ b/website/versioned_docs/version-0.60/communication-ios.md @@ -99,7 +99,7 @@ The fact that native modules are singletons limits the mechanism in the context Although this solution is complex, it is used in `RCTUIManager`, which is an internal React Native class that manages all React Native views. -Native modules can also be used to expose existing native libraries to JS. The [Geolocation library](https://github.com/facebook/react-native/tree/master/Libraries/Geolocation) is a living example of the idea. +Native modules can also be used to expose existing native libraries to JS. The [Geolocation library](https://github.com/facebook/react-native/tree/0.60-stable/Libraries/Geolocation) is a living example of the idea. > **_Warning_**: All native modules share the same namespace. Watch out for name collisions when creating new ones. @@ -191,7 +191,7 @@ Let's look at an example. In the example we have a `FlexibleSizeExampleView` view that holds a root view. We create the root view, initialize it and set the delegate. The delegate will handle size updates. Then, we set the root view's size flexibility to `RCTRootViewSizeFlexibilityHeight`, which means that `rootViewDidChangeIntrinsicSize:` method will be called every time the React Native content changes its height. Finally, we set the root view's width and position. Note that we set there height as well, but it has no effect as we made the height RN-dependent. -You can checkout full source code of the example [here](https://github.com/facebook/react-native/blob/master/packages/rn-tester/RNTester/NativeExampleViews/FlexibleSizeExampleView.m). +You can checkout full source code of the example [here](https://github.com/facebook/react-native/blob/0.60-stable/packages/rn-tester/RNTester/NativeExampleViews/FlexibleSizeExampleView.m). It's fine to change root view's size flexibility mode dynamically. Changing flexibility mode of a root view will schedule a layout recalculation and the delegate `rootViewDidChangeIntrinsicSize:` method will be called once the content size is known. diff --git a/website/versioned_docs/version-0.60/custom-webview-android.md b/website/versioned_docs/version-0.60/custom-webview-android.md index 44da28c6c6f..6bec3b8e976 100644 --- a/website/versioned_docs/version-0.60/custom-webview-android.md +++ b/website/versioned_docs/version-0.60/custom-webview-android.md @@ -5,7 +5,7 @@ title: Custom WebView While the built-in web view has a lot of features, it is not possible to handle every use-case in React Native. You can, however, extend the web view with native code without forking React Native or duplicating all the existing web view code. -Before you do this, you should be familiar with the concepts in [native UI components](native-components-android). You should also familiarise yourself with the [native code for web views](https://github.com/facebook/react-native/blob/master/ReactAndroid/src/main/java/com/facebook/react/views/webview/ReactWebViewManager.java), as you will have to use this as a reference when implementing new features—although a deep understanding is not required. +Before you do this, you should be familiar with the concepts in [native UI components](native-components-android). You should also familiarise yourself with the [native code for web views](https://github.com/facebook/react-native/blob/0.60-stable/ReactAndroid/src/main/java/com/facebook/react/views/webview/ReactWebViewManager.java), as you will have to use this as a reference when implementing new features—although a deep understanding is not required. ## Native Code @@ -110,7 +110,7 @@ public class NavigationCompletedEvent extends Event { You can trigger the event in your web view client. You can hook existing handlers if your events are based on them. -You should refer to [ReactWebViewManager.java](https://github.com/facebook/react-native/blob/master/ReactAndroid/src/main/java/com/facebook/react/views/webview/ReactWebViewManager.java) in the React Native codebase to see what handlers are available and how they are implemented. You can extend any methods here to provide extra functionality. +You should refer to [ReactWebViewManager.java](https://github.com/facebook/react-native/blob/0.60-stable/ReactAndroid/src/main/java/com/facebook/react/views/webview/ReactWebViewManager.java) in the React Native codebase to see what handlers are available and how they are implemented. You can extend any methods here to provide extra functionality. ```java public class NavigationCompletedEvent extends Event { @@ -206,7 +206,7 @@ If you want to add custom props to your native component, you can use `nativeCon For events, the event handler must always be set to a function. This means it isn't safe to use the event handler directly from `this.props`, as the user might not have provided one. The standard approach is to create a event handler in your class, and then invoking the event handler given in `this.props` if it exists. -If you are unsure how something should be implemented from the JS side, look at [WebView.android.js](https://github.com/facebook/react-native/blob/master/Libraries/Components/WebView/WebView.android.js) in the React Native source. +If you are unsure how something should be implemented from the JS side, look at [WebView.android.js](https://github.com/facebook/react-native/blob/0.60-stable/Libraries/Components/WebView/WebView.android.js) in the React Native source. ```jsx export default class CustomWebView extends Component { diff --git a/website/versioned_docs/version-0.60/custom-webview-ios.md b/website/versioned_docs/version-0.60/custom-webview-ios.md index 2d32c3ffbd9..d151d2c490e 100644 --- a/website/versioned_docs/version-0.60/custom-webview-ios.md +++ b/website/versioned_docs/version-0.60/custom-webview-ios.md @@ -5,7 +5,7 @@ title: Custom WebView While the built-in web view has a lot of features, it is not possible to handle every use-case in React Native. You can, however, extend the web view with native code without forking React Native or duplicating all the existing web view code. -Before you do this, you should be familiar with the concepts in [native UI components](native-components-ios). You should also familiarise yourself with the [native code for web views](https://github.com/facebook/react-native/blob/master/React/Views/RCTWebViewManager.m), as you will have to use this as a reference when implementing new features—although a deep understanding is not required. +Before you do this, you should be familiar with the concepts in [native UI components](native-components-ios). You should also familiarise yourself with the [native code for web views](https://github.com/facebook/react-native/blob/0.60-stable/React/Views/RCTWebViewManager.m), as you will have to use this as a reference when implementing new features—although a deep understanding is not required. ## Native Code @@ -94,7 +94,7 @@ RCT_EXPORT_VIEW_PROPERTY(finalUrl, NSString) ### Extending Existing Events -You should refer to [RCTWebView.m](https://github.com/facebook/react-native/blob/master/React/Views/RCTWebView.m) in the React Native codebase to see what handlers are available and how they are implemented. You can extend any methods here to provide extra functionality. +You should refer to [RCTWebView.m](https://github.com/facebook/react-native/blob/0.60-stable/React/Views/RCTWebView.m) in the React Native codebase to see what handlers are available and how they are implemented. You can extend any methods here to provide extra functionality. By default, most methods aren't exposed from RCTWebView. If you need to expose them, you need to create an [Objective C category](https://developer.apple.com/library/content/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/CustomizingExistingClasses/CustomizingExistingClasses.html), and then expose all the methods you need to use. @@ -180,7 +180,7 @@ If you want to add custom props to your native component, you can use `nativeCon For events, the event handler must always be set to a function. This means it isn't safe to use the event handler directly from `this.props`, as the user might not have provided one. The standard approach is to create a event handler in your class, and then invoking the event handler given in `this.props` if it exists. -If you are unsure how something should be implemented from the JS side, look at [WebView.ios.js](https://github.com/facebook/react-native/blob/master/Libraries/Components/WebView/WebView.ios.js) in the React Native source. +If you are unsure how something should be implemented from the JS side, look at [WebView.ios.js](https://github.com/facebook/react-native/blob/0.60-stable/Libraries/Components/WebView/WebView.ios.js) in the React Native source. ```jsx export default class CustomWebView extends Component { diff --git a/website/versioned_docs/version-0.60/debugging.md b/website/versioned_docs/version-0.60/debugging.md index 0865127d8f9..9be04c6d303 100644 --- a/website/versioned_docs/version-0.60/debugging.md +++ b/website/versioned_docs/version-0.60/debugging.md @@ -162,7 +162,7 @@ You may also access these through `Debug → Open System Log...` in the iOS Simu > If you're using Create React Native App or Expo CLI, this is configured for you already. -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. +On iOS devices, open the file [`RCTWebSocketExecutor.m`](https://github.com/facebook/react-native/blob/0.60-stable/Libraries/WebSocket/RCTWebSocketExecutor.m) and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu. On Android 5.0+ devices connected via USB, you can use the [`adb` command line tool](http://developer.android.com/tools/help/adb.html) to setup port forwarding from the device to your computer: diff --git a/website/versioned_docs/version-0.60/direct-manipulation.md b/website/versioned_docs/version-0.60/direct-manipulation.md index 1cc355c00c9..351debda0e0 100644 --- a/website/versioned_docs/version-0.60/direct-manipulation.md +++ b/website/versioned_docs/version-0.60/direct-manipulation.md @@ -11,7 +11,7 @@ It is sometimes necessary to make changes directly to a component without using ## setNativeProps with TouchableOpacity -[TouchableOpacity](https://github.com/facebook/react-native/blob/master/Libraries/Components/Touchable/TouchableOpacity.js) uses `setNativeProps` internally to update the opacity of its child component: +[TouchableOpacity](https://github.com/facebook/react-native/blob/0.60-stable/Libraries/Components/Touchable/TouchableOpacity.js) uses `setNativeProps` internally to update the opacity of its child component: ```jsx setOpacityTo(value) { @@ -54,7 +54,7 @@ render() { This is computationally intensive compared to the original example - React needs to re-render the component hierarchy each time the opacity changes, even though other properties of the view and its children haven't changed. Usually this overhead isn't a concern but when performing continuous animations and responding to gestures, judiciously optimizing your components can improve your animations' fidelity. -If you look at the implementation of `setNativeProps` in [NativeMethodsMixin](https://github.com/facebook/react-native/blob/master/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js) you will notice that it is a wrapper around `RCTUIManager.updateView` - this is the exact same function call that results from re-rendering - see [receiveComponent in ReactNativeBaseComponent](https://github.com/facebook/react-native/blob/fb2ec1ea47c53c2e7b873acb1cb46192ac74274e/Libraries/Renderer/oss/ReactNativeRenderer-prod.js#L5793-L5813). +If you look at the implementation of `setNativeProps` in [NativeMethodsMixin](https://github.com/facebook/react-native/blob/0.60-stable/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js) you will notice that it is a wrapper around `RCTUIManager.updateView` - this is the exact same function call that results from re-rendering - see [receiveComponent in ReactNativeBaseComponent](https://github.com/facebook/react-native/blob/fb2ec1ea47c53c2e7b873acb1cb46192ac74274e/Libraries/Renderer/oss/ReactNativeRenderer-prod.js#L5793-L5813). ## Composite components and setNativeProps diff --git a/website/versioned_docs/version-0.60/imagebackground.md b/website/versioned_docs/version-0.60/imagebackground.md index e22365eb0dc..432e9abb20c 100644 --- a/website/versioned_docs/version-0.60/imagebackground.md +++ b/website/versioned_docs/version-0.60/imagebackground.md @@ -5,7 +5,7 @@ title: ImageBackground A common feature request from developers familiar with the web is `background-image`. To handle this use case, you can use the `` component, which has the same props as ``, and add whatever children to it you would like to layer on top of it. -You might not want to use `` in some cases, since the implementation is basic. Refer to ``'s [source code](https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js) for more insight, and create your own custom component when needed. +You might not want to use `` in some cases, since the implementation is basic. Refer to ``'s [source code](https://github.com/facebook/react-native/blob/0.60-stable/Libraries/Image/ImageBackground.js) for more insight, and create your own custom component when needed. Note that you must specify some width and height style attributes. diff --git a/website/versioned_docs/version-0.60/inputaccessoryview.md b/website/versioned_docs/version-0.60/inputaccessoryview.md index 0c435637972..b99772652c5 100644 --- a/website/versioned_docs/version-0.60/inputaccessoryview.md +++ b/website/versioned_docs/version-0.60/inputaccessoryview.md @@ -44,7 +44,7 @@ export default class UselessTextInput extends Component { } ``` -This component can also be used to create sticky text inputs (text inputs which are anchored to the top of the keyboard). To do this, wrap a `TextInput` with the `InputAccessoryView` component, and don't set a `nativeID`. For an example, look at [InputAccessoryViewExample.js](https://github.com/facebook/react-native/blob/master/packages/rn-tester/js/examples/InputAccessoryView/InputAccessoryViewExample.js). +This component can also be used to create sticky text inputs (text inputs which are anchored to the top of the keyboard). To do this, wrap a `TextInput` with the `InputAccessoryView` component, and don't set a `nativeID`. For an example, look at [InputAccessoryViewExample.js](https://github.com/facebook/react-native/blob/0.60-stable/packages/rn-tester/js/examples/InputAccessoryView/InputAccessoryViewExample.js). --- diff --git a/website/versioned_docs/version-0.60/native-components-ios.md b/website/versioned_docs/version-0.60/native-components-ios.md index 0d37a72a423..f1327d7e7ed 100644 --- a/website/versioned_docs/version-0.60/native-components-ios.md +++ b/website/versioned_docs/version-0.60/native-components-ios.md @@ -504,4 +504,4 @@ The `RCTDatePickerIOSConsts` constants are exported from native by grabbing the } ``` -This guide covered many of the aspects of bridging over custom native components, but there is even more you might need to consider, such as custom hooks for inserting and laying out subviews. If you want to go even deeper, check out the [source code](https://github.com/facebook/react-native/blob/master/React/Views) of some of the implemented components. +This guide covered many of the aspects of bridging over custom native components, but there is even more you might need to consider, such as custom hooks for inserting and laying out subviews. If you want to go even deeper, check out the [source code](https://github.com/facebook/react-native/blob/0.60-stable/React/Views) of some of the implemented components. diff --git a/website/versioned_docs/version-0.60/native-modules-android.md b/website/versioned_docs/version-0.60/native-modules-android.md index af105c476af..66587e0f840 100644 --- a/website/versioned_docs/version-0.60/native-modules-android.md +++ b/website/versioned_docs/version-0.60/native-modules-android.md @@ -97,7 +97,7 @@ ReadableMap -> Object ReadableArray -> Array ``` -Read more about [ReadableMap](https://github.com/facebook/react-native/blob/master/ReactAndroid/src/main/java/com/facebook/react/bridge/ReadableMap.java) and [ReadableArray](https://github.com/facebook/react-native/blob/master/ReactAndroid/src/main/java/com/facebook/react/bridge/ReadableArray.java) +Read more about [ReadableMap](https://github.com/facebook/react-native/blob/0.60-stable/ReactAndroid/src/main/java/com/facebook/react/bridge/ReadableMap.java) and [ReadableArray](https://github.com/facebook/react-native/blob/0.60-stable/ReactAndroid/src/main/java/com/facebook/react/bridge/ReadableArray.java) ### Register the Module diff --git a/website/versioned_docs/version-0.60/native-modules-ios.md b/website/versioned_docs/version-0.60/native-modules-ios.md index c3e87ca695e..395c05edd12 100644 --- a/website/versioned_docs/version-0.60/native-modules-ios.md +++ b/website/versioned_docs/version-0.60/native-modules-ios.md @@ -90,7 +90,7 @@ The CalendarManager module is instantiated on the Objective-C side using a [Cale - object (`NSDictionary`) with string keys and values of any type from this list - function (`RCTResponseSenderBlock`) -But it also works with any type that is supported by the `RCTConvert` class (see [`RCTConvert`](https://github.com/facebook/react-native/blob/master/React/Base/RCTConvert.h) for details). The `RCTConvert` helper functions all accept a JSON value as input and map it to a native Objective-C type or class. +But it also works with any type that is supported by the `RCTConvert` class (see [`RCTConvert`](https://github.com/facebook/react-native/blob/0.60-stable/React/Base/RCTConvert.h) for details). The `RCTConvert` helper functions all accept a JSON value as input and map it to a native Objective-C type or class. In our `CalendarManager` example, we need to pass the event date to the native method. We can't send JavaScript Date objects over the bridge, so we need to convert the date to a string or number. We could write our native function like this: @@ -196,9 +196,9 @@ CalendarManager.findEvents((error, events) => { }); ``` -A native module should invoke its callback exactly once. It's okay to store the callback and invoke it later. This pattern is often used to wrap iOS APIs that require delegates - see [`RCTAlertManager`](https://github.com/facebook/react-native/blob/master/React/Modules/RCTAlertManager.m) for an example. If the callback is never invoked, some memory is leaked. If both `onSuccess` and `onFail` callbacks are passed, you should only invoke one of them. +A native module should invoke its callback exactly once. It's okay to store the callback and invoke it later. This pattern is often used to wrap iOS APIs that require delegates - see [`RCTAlertManager`](https://github.com/facebook/react-native/blob/0.60-stable/React/Modules/RCTAlertManager.m) for an example. If the callback is never invoked, some memory is leaked. If both `onSuccess` and `onFail` callbacks are passed, you should only invoke one of them. -If you want to pass error-like objects to JavaScript, use `RCTMakeError` from [`RCTUtils.h`](https://github.com/facebook/react-native/blob/master/React/Base/RCTUtils.h). Right now this only passes an Error-shaped dictionary to JavaScript, but we would like to automatically generate real JavaScript `Error` objects in the future. +If you want to pass error-like objects to JavaScript, use `RCTMakeError` from [`RCTUtils.h`](https://github.com/facebook/react-native/blob/0.60-stable/React/Base/RCTUtils.h). Right now this only passes an Error-shaped dictionary to JavaScript, but we would like to automatically generate real JavaScript `Error` objects in the future. ## Promises @@ -513,6 +513,6 @@ For those of you new to Swift and Objective-C, whenever you [mix the two languag #import ``` -You can also use `RCT_EXTERN_REMAP_MODULE` and `_RCT_EXTERN_REMAP_METHOD` to alter the JavaScript name of the module or methods you are exporting. For more information see [`RCTBridgeModule`](https://github.com/facebook/react-native/blob/master/React/Base/RCTBridgeModule.h). +You can also use `RCT_EXTERN_REMAP_MODULE` and `_RCT_EXTERN_REMAP_METHOD` to alter the JavaScript name of the module or methods you are exporting. For more information see [`RCTBridgeModule`](https://github.com/facebook/react-native/blob/0.60-stable/React/Base/RCTBridgeModule.h). > **Important when making third party modules**: Static libraries with Swift are only supported in Xcode 9 and later. In order for the Xcode project to build when you use Swift in the iOS static library you include in the module, your main app project must contain Swift code and a bridging header itself. If your app project does not contain any Swift code, a workaround can be a single empty .swift file and an empty bridging header. diff --git a/website/versioned_docs/version-0.60/panresponder.md b/website/versioned_docs/version-0.60/panresponder.md index 92cf5163fce..f5be3e5d4d4 100644 --- a/website/versioned_docs/version-0.60/panresponder.md +++ b/website/versioned_docs/version-0.60/panresponder.md @@ -90,7 +90,7 @@ class ExampleComponent extends Component { ### Working Example -To see it in action, try the [PanResponder example in RNTester](https://github.com/facebook/react-native/blob/master/packages/rn-tester/js/examples/PanResponder/PanResponderExample.js) +To see it in action, try the [PanResponder example in RNTester](https://github.com/facebook/react-native/blob/0.60-stable/packages/rn-tester/js/examples/PanResponder/PanResponderExample.js) --- diff --git a/website/versioned_docs/version-0.60/stylesheet.md b/website/versioned_docs/version-0.60/stylesheet.md index f9aa892ad7c..b2cbcb630a6 100644 --- a/website/versioned_docs/version-0.60/stylesheet.md +++ b/website/versioned_docs/version-0.60/stylesheet.md @@ -182,4 +182,4 @@ const styles = StyleSheet.create({ ### `absoluteFill` vs. `absoluteFillObject` -Currently, there is no difference between using `absoluteFill` vs. `absoluteFillObject` as you can see in the [source code](https://github.com/facebook/react-native/blob/master/Libraries/StyleSheet/StyleSheet.js#L255) +Currently, there is no difference between using `absoluteFill` vs. `absoluteFillObject` as you can see in the [source code](https://github.com/facebook/react-native/blob/0.60-stable/Libraries/StyleSheet/StyleSheet.js#L255) diff --git a/website/versioned_docs/version-0.60/troubleshooting.md b/website/versioned_docs/version-0.60/troubleshooting.md index 9509e291171..1a3fed91335 100644 --- a/website/versioned_docs/version-0.60/troubleshooting.md +++ b/website/versioned_docs/version-0.60/troubleshooting.md @@ -73,7 +73,7 @@ To revert the `User Search Header Paths` and `Header Search Paths` build setting ### No transports available -React Native implements a polyfill for WebSockets. These [polyfills](https://github.com/facebook/react-native/blob/master/Libraries/Core/InitializeCore.js) are initialized as part of the react-native module that you include in your application through `import React from 'react'`. If you load another module that requires WebSockets, such as [Firebase](https://github.com/facebook/react-native/issues/3645), be sure to load/require it after react-native: +React Native implements a polyfill for WebSockets. These [polyfills](https://github.com/facebook/react-native/blob/0.60-stable/Libraries/Core/InitializeCore.js) are initialized as part of the react-native module that you include in your application through `import React from 'react'`. If you load another module that requires WebSockets, such as [Firebase](https://github.com/facebook/react-native/issues/3645), be sure to load/require it after react-native: ``` import React from 'react'; diff --git a/website/versioned_docs/version-0.61/_integration-with-existing-apps-objc.md b/website/versioned_docs/version-0.61/_integration-with-existing-apps-objc.md index 590bfc3c5b2..19103da59e8 100644 --- a/website/versioned_docs/version-0.61/_integration-with-existing-apps-objc.md +++ b/website/versioned_docs/version-0.61/_integration-with-existing-apps-objc.md @@ -83,7 +83,7 @@ Install the Command Line Tools. Choose "Preferences..." in the Xcode menu. Go to Before you integrate React Native into your application, you will want to decide what parts of the React Native framework you would like to integrate. We will use CocoaPods to specify which of these "subspecs" your app will depend on. -The list of supported `subspec`s is available in [`/node_modules/react-native/React.podspec`](https://github.com/facebook/react-native/blob/master/React.podspec). They are generally named by functionality. For example, you will generally always want the `Core` `subspec`. That will get you the `AppRegistry`, `StyleSheet`, `View` and other core React Native libraries. If you want to add the React Native `Text` library (e.g., for `` elements), then you will need the `RCTText` `subspec`. If you want the `Image` library (e.g., for `` elements), then you will need the `RCTImage` `subspec`. +The list of supported `subspec`s is available in [`/node_modules/react-native/React.podspec`](https://github.com/facebook/react-native/blob/0.61-stable/React.podspec). They are generally named by functionality. For example, you will generally always want the `Core` `subspec`. That will get you the `AppRegistry`, `StyleSheet`, `View` and other core React Native libraries. If you want to add the React Native `Text` library (e.g., for `` elements), then you will need the `RCTText` `subspec`. If you want the `Image` library (e.g., for `` elements), then you will need the `RCTImage` `subspec`. You can specify which `subspec`s your app will depend on in a `Podfile` file. The easiest way to create a `Podfile` is by running the CocoaPods `init` command in the `/ios` subfolder of your project: @@ -280,7 +280,7 @@ First `import` the `RCTRootView` header. } ``` -> Note that `RCTRootView initWithURL` starts up a new JSC VM. To save resources and simplify the communication between RN views in different parts of your native app, you can have multiple views powered by React Native that are associated with a single JS runtime. To do that, instead of using `[RCTRootView alloc] initWithURL`, use [`RCTBridge initWithBundleURL`](https://github.com/facebook/react-native/blob/master/React/Base/RCTBridge.h#L93) to create a bridge and then use `RCTRootView initWithBridge`. +> Note that `RCTRootView initWithURL` starts up a new JSC VM. To save resources and simplify the communication between RN views in different parts of your native app, you can have multiple views powered by React Native that are associated with a single JS runtime. To do that, instead of using `[RCTRootView alloc] initWithURL`, use [`RCTBridge initWithBundleURL`](https://github.com/facebook/react-native/blob/0.61-stable/React/Base/RCTBridge.h#L93) to create a bridge and then use `RCTRootView initWithBridge`. > When moving your app to production, the `NSURL` can point to a pre-bundled file on disk via something like `[[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];`. You can use the `react-native-xcode.sh` script in `node_modules/react-native/scripts/` to generate that pre-bundled file. diff --git a/website/versioned_docs/version-0.61/_integration-with-existing-apps-swift.md b/website/versioned_docs/version-0.61/_integration-with-existing-apps-swift.md index 2c59effe06e..cf585798659 100644 --- a/website/versioned_docs/version-0.61/_integration-with-existing-apps-swift.md +++ b/website/versioned_docs/version-0.61/_integration-with-existing-apps-swift.md @@ -83,7 +83,7 @@ Install the Command Line Tools. Choose "Preferences..." in the Xcode menu. Go to Before you integrate React Native into your application, you will want to decide what parts of the React Native framework you would like to integrate. We will use CocoaPods to specify which of these "subspecs" your app will depend on. -The list of supported `subspec`s is available in [`/node_modules/react-native/React.podspec`](https://github.com/facebook/react-native/blob/master/React.podspec). They are generally named by functionality. For example, you will generally always want the `Core` `subspec`. That will get you the `AppRegistry`, `StyleSheet`, `View` and other core React Native libraries. If you want to add the React Native `Text` library (e.g., for `` elements), then you will need the `RCTText` `subspec`. If you want the `Image` library (e.g., for `` elements), then you will need the `RCTImage` `subspec`. +The list of supported `subspec`s is available in [`/node_modules/react-native/React.podspec`](https://github.com/facebook/react-native/blob/0.61-stable/React.podspec). They are generally named by functionality. For example, you will generally always want the `Core` `subspec`. That will get you the `AppRegistry`, `StyleSheet`, `View` and other core React Native libraries. If you want to add the React Native `Text` library (e.g., for `` elements), then you will need the `RCTText` `subspec`. If you want the `Image` library (e.g., for `` elements), then you will need the `RCTImage` `subspec`. You can specify which `subspec`s your app will depend on in a `Podfile` file. The easiest way to create a `Podfile` is by running the CocoaPods `init` command in the `/ios` subfolder of your project: @@ -269,7 +269,7 @@ import React } ``` -> Note that `RCTRootView bundleURL` starts up a new JSC VM. To save resources and simplify the communication between RN views in different parts of your native app, you can have multiple views powered by React Native that are associated with a single JS runtime. To do that, instead of using `RCTRootView bundleURL`, use [`RCTBridge initWithBundleURL`](https://github.com/facebook/react-native/blob/master/React/Base/RCTBridge.h#L89) to create a bridge and then use `RCTRootView initWithBridge`. +> Note that `RCTRootView bundleURL` starts up a new JSC VM. To save resources and simplify the communication between RN views in different parts of your native app, you can have multiple views powered by React Native that are associated with a single JS runtime. To do that, instead of using `RCTRootView bundleURL`, use [`RCTBridge initWithBundleURL`](https://github.com/facebook/react-native/blob/0.61-stable/React/Base/RCTBridge.h#L89) to create a bridge and then use `RCTRootView initWithBridge`. > When moving your app to production, the `NSURL` can point to a pre-bundled file on disk via something like `let mainBundle = NSBundle(URLForResource: "main" withExtension:"jsbundle")`. You can use the `react-native-xcode.sh` script in `node_modules/react-native/scripts/` to generate that pre-bundled file. diff --git a/website/versioned_docs/version-0.61/animations.md b/website/versioned_docs/version-0.61/animations.md index 3052877e943..3ed2555949e 100644 --- a/website/versioned_docs/version-0.61/animations.md +++ b/website/versioned_docs/version-0.61/animations.md @@ -281,7 +281,7 @@ The native driver also works with `Animated.event`. This is especially useful fo ``` -You can see the native driver in action by running the [RNTester app](https://github.com/facebook/react-native/tree/master/packages/rn-tester/), then loading the Native Animated Example. You can also take a look at the [source code](https://github.com/facebook/react-native/blob/master/packages/rn-tester/js/examples/NativeAnimation/NativeAnimationsExample.js) to learn how these examples were produced. +You can see the native driver in action by running the [RNTester app](https://github.com/facebook/react-native/tree/0.61-stable/packages/rn-tester/), then loading the Native Animated Example. You can also take a look at the [source code](https://github.com/facebook/react-native/blob/0.61-stable/packages/rn-tester/js/examples/NativeAnimation/NativeAnimationsExample.js) to learn how these examples were produced. #### Caveats @@ -309,8 +309,8 @@ While using transform styles such as `rotateY`, `rotateX`, and others ensure the The RNTester app has various examples of `Animated` in use: -- [AnimatedGratuitousApp](https://github.com/facebook/react-native/tree/master/packages/rn-tester/js/examples/Animated/AnimatedGratuitousApp) -- [NativeAnimationsExample](https://github.com/facebook/react-native/blob/master/packages/rn-tester/js/examples/NativeAnimation/NativeAnimationsExample.js) +- [AnimatedGratuitousApp](https://github.com/facebook/react-native/tree/0.61-stable/packages/rn-tester/js/examples/Animated/AnimatedGratuitousApp) +- [NativeAnimationsExample](https://github.com/facebook/react-native/blob/0.61-stable/packages/rn-tester/js/examples/NativeAnimation/NativeAnimationsExample.js) ## `LayoutAnimation` API @@ -391,7 +391,7 @@ const styles = StyleSheet.create({ }); ``` -This example uses a preset value, you can customize the animations as you need, see [LayoutAnimation.js](https://github.com/facebook/react-native/blob/master/Libraries/LayoutAnimation/LayoutAnimation.js) for more information. +This example uses a preset value, you can customize the animations as you need, see [LayoutAnimation.js](https://github.com/facebook/react-native/blob/0.61-stable/Libraries/LayoutAnimation/LayoutAnimation.js) for more information. ## Additional notes diff --git a/website/versioned_docs/version-0.61/button.md b/website/versioned_docs/version-0.61/button.md index ced60d3e7df..465cdaaa441 100644 --- a/website/versioned_docs/version-0.61/button.md +++ b/website/versioned_docs/version-0.61/button.md @@ -5,7 +5,7 @@ title: Button A basic button component that should render nicely on any platform. Supports a minimal level of customization. -If this button doesn't look right for your app, you can build your own button using [TouchableOpacity](touchableopacity.md) or [TouchableNativeFeedback](touchablenativefeedback.md). For inspiration, look at the [source code for this button component](https://github.com/facebook/react-native/blob/master/Libraries/Components/Button.js). Or, take a look at the [wide variety of button components built by the community](https://js.coach/?menu%5Bcollections%5D=React%20Native&page=1&query=button). +If this button doesn't look right for your app, you can build your own button using [TouchableOpacity](touchableopacity.md) or [TouchableNativeFeedback](touchablenativefeedback.md). For inspiration, look at the [source code for this button component](https://github.com/facebook/react-native/blob/0.61-stable/Libraries/Components/Button.js). Or, take a look at the [wide variety of button components built by the community](https://js.coach/?menu%5Bcollections%5D=React%20Native&page=1&query=button). ### Example diff --git a/website/versioned_docs/version-0.61/communication-ios.md b/website/versioned_docs/version-0.61/communication-ios.md index 287514f3208..6bc71eea4fa 100644 --- a/website/versioned_docs/version-0.61/communication-ios.md +++ b/website/versioned_docs/version-0.61/communication-ios.md @@ -99,7 +99,7 @@ The fact that native modules are singletons limits the mechanism in the context Although this solution is complex, it is used in `RCTUIManager`, which is an internal React Native class that manages all React Native views. -Native modules can also be used to expose existing native libraries to JS. The [Geolocation library](https://github.com/facebook/react-native/tree/master/Libraries/Geolocation) is a living example of the idea. +Native modules can also be used to expose existing native libraries to JS. The [Geolocation library](https://github.com/facebook/react-native/tree/0.61-stable/Libraries/Geolocation) is a living example of the idea. > **_Warning_**: All native modules share the same namespace. Watch out for name collisions when creating new ones. @@ -191,7 +191,7 @@ Let's look at an example. In the example we have a `FlexibleSizeExampleView` view that holds a root view. We create the root view, initialize it and set the delegate. The delegate will handle size updates. Then, we set the root view's size flexibility to `RCTRootViewSizeFlexibilityHeight`, which means that `rootViewDidChangeIntrinsicSize:` method will be called every time the React Native content changes its height. Finally, we set the root view's width and position. Note that we set there height as well, but it has no effect as we made the height RN-dependent. -You can checkout full source code of the example [here](https://github.com/facebook/react-native/blob/master/packages/rn-tester/RNTester/NativeExampleViews/FlexibleSizeExampleView.m). +You can checkout full source code of the example [here](https://github.com/facebook/react-native/blob/0.61-stable/packages/rn-tester/RNTester/NativeExampleViews/FlexibleSizeExampleView.m). It's fine to change root view's size flexibility mode dynamically. Changing flexibility mode of a root view will schedule a layout recalculation and the delegate `rootViewDidChangeIntrinsicSize:` method will be called once the content size is known. diff --git a/website/versioned_docs/version-0.61/custom-webview-android.md b/website/versioned_docs/version-0.61/custom-webview-android.md index 44da28c6c6f..492391662da 100644 --- a/website/versioned_docs/version-0.61/custom-webview-android.md +++ b/website/versioned_docs/version-0.61/custom-webview-android.md @@ -5,7 +5,7 @@ title: Custom WebView While the built-in web view has a lot of features, it is not possible to handle every use-case in React Native. You can, however, extend the web view with native code without forking React Native or duplicating all the existing web view code. -Before you do this, you should be familiar with the concepts in [native UI components](native-components-android). You should also familiarise yourself with the [native code for web views](https://github.com/facebook/react-native/blob/master/ReactAndroid/src/main/java/com/facebook/react/views/webview/ReactWebViewManager.java), as you will have to use this as a reference when implementing new features—although a deep understanding is not required. +Before you do this, you should be familiar with the concepts in [native UI components](native-components-android). You should also familiarise yourself with the [native code for web views](https://github.com/facebook/react-native/blob/0.61-stable/ReactAndroid/src/main/java/com/facebook/react/views/webview/ReactWebViewManager.java), as you will have to use this as a reference when implementing new features—although a deep understanding is not required. ## Native Code @@ -110,7 +110,7 @@ public class NavigationCompletedEvent extends Event { You can trigger the event in your web view client. You can hook existing handlers if your events are based on them. -You should refer to [ReactWebViewManager.java](https://github.com/facebook/react-native/blob/master/ReactAndroid/src/main/java/com/facebook/react/views/webview/ReactWebViewManager.java) in the React Native codebase to see what handlers are available and how they are implemented. You can extend any methods here to provide extra functionality. +You should refer to [ReactWebViewManager.java](https://github.com/facebook/react-native/blob/0.61-stable/ReactAndroid/src/main/java/com/facebook/react/views/webview/ReactWebViewManager.java) in the React Native codebase to see what handlers are available and how they are implemented. You can extend any methods here to provide extra functionality. ```java public class NavigationCompletedEvent extends Event { @@ -206,7 +206,7 @@ If you want to add custom props to your native component, you can use `nativeCon For events, the event handler must always be set to a function. This means it isn't safe to use the event handler directly from `this.props`, as the user might not have provided one. The standard approach is to create a event handler in your class, and then invoking the event handler given in `this.props` if it exists. -If you are unsure how something should be implemented from the JS side, look at [WebView.android.js](https://github.com/facebook/react-native/blob/master/Libraries/Components/WebView/WebView.android.js) in the React Native source. +If you are unsure how something should be implemented from the JS side, look at [WebView.android.js](https://github.com/facebook/react-native/blob/0.61-stable/Libraries/Components/WebView/WebView.android.js) in the React Native source. ```jsx export default class CustomWebView extends Component { diff --git a/website/versioned_docs/version-0.61/custom-webview-ios.md b/website/versioned_docs/version-0.61/custom-webview-ios.md index 2d32c3ffbd9..7ac2615e9cc 100644 --- a/website/versioned_docs/version-0.61/custom-webview-ios.md +++ b/website/versioned_docs/version-0.61/custom-webview-ios.md @@ -5,7 +5,7 @@ title: Custom WebView While the built-in web view has a lot of features, it is not possible to handle every use-case in React Native. You can, however, extend the web view with native code without forking React Native or duplicating all the existing web view code. -Before you do this, you should be familiar with the concepts in [native UI components](native-components-ios). You should also familiarise yourself with the [native code for web views](https://github.com/facebook/react-native/blob/master/React/Views/RCTWebViewManager.m), as you will have to use this as a reference when implementing new features—although a deep understanding is not required. +Before you do this, you should be familiar with the concepts in [native UI components](native-components-ios). You should also familiarise yourself with the [native code for web views](https://github.com/facebook/react-native/blob/0.61-stable/React/Views/RCTWebViewManager.m), as you will have to use this as a reference when implementing new features—although a deep understanding is not required. ## Native Code @@ -94,7 +94,7 @@ RCT_EXPORT_VIEW_PROPERTY(finalUrl, NSString) ### Extending Existing Events -You should refer to [RCTWebView.m](https://github.com/facebook/react-native/blob/master/React/Views/RCTWebView.m) in the React Native codebase to see what handlers are available and how they are implemented. You can extend any methods here to provide extra functionality. +You should refer to [RCTWebView.m](https://github.com/facebook/react-native/blob/0.61-stable/React/Views/RCTWebView.m) in the React Native codebase to see what handlers are available and how they are implemented. You can extend any methods here to provide extra functionality. By default, most methods aren't exposed from RCTWebView. If you need to expose them, you need to create an [Objective C category](https://developer.apple.com/library/content/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/CustomizingExistingClasses/CustomizingExistingClasses.html), and then expose all the methods you need to use. @@ -180,7 +180,7 @@ If you want to add custom props to your native component, you can use `nativeCon For events, the event handler must always be set to a function. This means it isn't safe to use the event handler directly from `this.props`, as the user might not have provided one. The standard approach is to create a event handler in your class, and then invoking the event handler given in `this.props` if it exists. -If you are unsure how something should be implemented from the JS side, look at [WebView.ios.js](https://github.com/facebook/react-native/blob/master/Libraries/Components/WebView/WebView.ios.js) in the React Native source. +If you are unsure how something should be implemented from the JS side, look at [WebView.ios.js](https://github.com/facebook/react-native/blob/0.61-stable/Libraries/Components/WebView/WebView.ios.js) in the React Native source. ```jsx export default class CustomWebView extends Component { diff --git a/website/versioned_docs/version-0.61/debugging.md b/website/versioned_docs/version-0.61/debugging.md index eda423529d0..619e2c739b8 100644 --- a/website/versioned_docs/version-0.61/debugging.md +++ b/website/versioned_docs/version-0.61/debugging.md @@ -153,7 +153,7 @@ You may also access these through `Debug → Open System Log...` in the iOS Simu > If you're using Create React Native App or Expo CLI, this is configured for you already. -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. +On iOS devices, open the file [`RCTWebSocketExecutor.m`](https://github.com/facebook/react-native/blob/0.61-stable/Libraries/WebSocket/RCTWebSocketExecutor.m) and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu. On Android 5.0+ devices connected via USB, you can use the [`adb` command line tool](http://developer.android.com/tools/help/adb.html) to setup port forwarding from the device to your computer: diff --git a/website/versioned_docs/version-0.61/direct-manipulation.md b/website/versioned_docs/version-0.61/direct-manipulation.md index 1cc355c00c9..a1378e9be77 100644 --- a/website/versioned_docs/version-0.61/direct-manipulation.md +++ b/website/versioned_docs/version-0.61/direct-manipulation.md @@ -11,7 +11,7 @@ It is sometimes necessary to make changes directly to a component without using ## setNativeProps with TouchableOpacity -[TouchableOpacity](https://github.com/facebook/react-native/blob/master/Libraries/Components/Touchable/TouchableOpacity.js) uses `setNativeProps` internally to update the opacity of its child component: +[TouchableOpacity](https://github.com/facebook/react-native/blob/0.61-stable/Libraries/Components/Touchable/TouchableOpacity.js) uses `setNativeProps` internally to update the opacity of its child component: ```jsx setOpacityTo(value) { @@ -54,7 +54,7 @@ render() { This is computationally intensive compared to the original example - React needs to re-render the component hierarchy each time the opacity changes, even though other properties of the view and its children haven't changed. Usually this overhead isn't a concern but when performing continuous animations and responding to gestures, judiciously optimizing your components can improve your animations' fidelity. -If you look at the implementation of `setNativeProps` in [NativeMethodsMixin](https://github.com/facebook/react-native/blob/master/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js) you will notice that it is a wrapper around `RCTUIManager.updateView` - this is the exact same function call that results from re-rendering - see [receiveComponent in ReactNativeBaseComponent](https://github.com/facebook/react-native/blob/fb2ec1ea47c53c2e7b873acb1cb46192ac74274e/Libraries/Renderer/oss/ReactNativeRenderer-prod.js#L5793-L5813). +If you look at the implementation of `setNativeProps` in [NativeMethodsMixin](https://github.com/facebook/react-native/blob/0.61-stable/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js) you will notice that it is a wrapper around `RCTUIManager.updateView` - this is the exact same function call that results from re-rendering - see [receiveComponent in ReactNativeBaseComponent](https://github.com/facebook/react-native/blob/fb2ec1ea47c53c2e7b873acb1cb46192ac74274e/Libraries/Renderer/oss/ReactNativeRenderer-prod.js#L5793-L5813). ## Composite components and setNativeProps diff --git a/website/versioned_docs/version-0.61/imagebackground.md b/website/versioned_docs/version-0.61/imagebackground.md index e22365eb0dc..81b61c00dc3 100644 --- a/website/versioned_docs/version-0.61/imagebackground.md +++ b/website/versioned_docs/version-0.61/imagebackground.md @@ -5,7 +5,7 @@ title: ImageBackground A common feature request from developers familiar with the web is `background-image`. To handle this use case, you can use the `` component, which has the same props as ``, and add whatever children to it you would like to layer on top of it. -You might not want to use `` in some cases, since the implementation is basic. Refer to ``'s [source code](https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js) for more insight, and create your own custom component when needed. +You might not want to use `` in some cases, since the implementation is basic. Refer to ``'s [source code](https://github.com/facebook/react-native/blob/0.61-stable/Libraries/Image/ImageBackground.js) for more insight, and create your own custom component when needed. Note that you must specify some width and height style attributes. diff --git a/website/versioned_docs/version-0.61/inputaccessoryview.md b/website/versioned_docs/version-0.61/inputaccessoryview.md index 0c435637972..6c50c07cceb 100644 --- a/website/versioned_docs/version-0.61/inputaccessoryview.md +++ b/website/versioned_docs/version-0.61/inputaccessoryview.md @@ -44,7 +44,7 @@ export default class UselessTextInput extends Component { } ``` -This component can also be used to create sticky text inputs (text inputs which are anchored to the top of the keyboard). To do this, wrap a `TextInput` with the `InputAccessoryView` component, and don't set a `nativeID`. For an example, look at [InputAccessoryViewExample.js](https://github.com/facebook/react-native/blob/master/packages/rn-tester/js/examples/InputAccessoryView/InputAccessoryViewExample.js). +This component can also be used to create sticky text inputs (text inputs which are anchored to the top of the keyboard). To do this, wrap a `TextInput` with the `InputAccessoryView` component, and don't set a `nativeID`. For an example, look at [InputAccessoryViewExample.js](https://github.com/facebook/react-native/blob/0.61-stable/packages/rn-tester/js/examples/InputAccessoryView/InputAccessoryViewExample.js). --- diff --git a/website/versioned_docs/version-0.61/native-components-ios.md b/website/versioned_docs/version-0.61/native-components-ios.md index db6e61257df..ef2e730cb42 100644 --- a/website/versioned_docs/version-0.61/native-components-ios.md +++ b/website/versioned_docs/version-0.61/native-components-ios.md @@ -504,4 +504,4 @@ The `RCTDatePickerIOSConsts` constants are exported from native by grabbing the } ``` -This guide covered many of the aspects of bridging over custom native components, but there is even more you might need to consider, such as custom hooks for inserting and laying out subviews. If you want to go even deeper, check out the [source code](https://github.com/facebook/react-native/blob/master/React/Views) of some of the implemented components. +This guide covered many of the aspects of bridging over custom native components, but there is even more you might need to consider, such as custom hooks for inserting and laying out subviews. If you want to go even deeper, check out the [source code](https://github.com/facebook/react-native/blob/0.61-stable/React/Views) of some of the implemented components. diff --git a/website/versioned_docs/version-0.61/native-modules-android.md b/website/versioned_docs/version-0.61/native-modules-android.md index af105c476af..c366b5f8319 100644 --- a/website/versioned_docs/version-0.61/native-modules-android.md +++ b/website/versioned_docs/version-0.61/native-modules-android.md @@ -97,7 +97,7 @@ ReadableMap -> Object ReadableArray -> Array ``` -Read more about [ReadableMap](https://github.com/facebook/react-native/blob/master/ReactAndroid/src/main/java/com/facebook/react/bridge/ReadableMap.java) and [ReadableArray](https://github.com/facebook/react-native/blob/master/ReactAndroid/src/main/java/com/facebook/react/bridge/ReadableArray.java) +Read more about [ReadableMap](https://github.com/facebook/react-native/blob/0.61-stable/ReactAndroid/src/main/java/com/facebook/react/bridge/ReadableMap.java) and [ReadableArray](https://github.com/facebook/react-native/blob/0.61-stable/ReactAndroid/src/main/java/com/facebook/react/bridge/ReadableArray.java) ### Register the Module diff --git a/website/versioned_docs/version-0.61/native-modules-ios.md b/website/versioned_docs/version-0.61/native-modules-ios.md index c3e87ca695e..e21c06abcd4 100644 --- a/website/versioned_docs/version-0.61/native-modules-ios.md +++ b/website/versioned_docs/version-0.61/native-modules-ios.md @@ -90,7 +90,7 @@ The CalendarManager module is instantiated on the Objective-C side using a [Cale - object (`NSDictionary`) with string keys and values of any type from this list - function (`RCTResponseSenderBlock`) -But it also works with any type that is supported by the `RCTConvert` class (see [`RCTConvert`](https://github.com/facebook/react-native/blob/master/React/Base/RCTConvert.h) for details). The `RCTConvert` helper functions all accept a JSON value as input and map it to a native Objective-C type or class. +But it also works with any type that is supported by the `RCTConvert` class (see [`RCTConvert`](https://github.com/facebook/react-native/blob/0.61-stable/React/Base/RCTConvert.h) for details). The `RCTConvert` helper functions all accept a JSON value as input and map it to a native Objective-C type or class. In our `CalendarManager` example, we need to pass the event date to the native method. We can't send JavaScript Date objects over the bridge, so we need to convert the date to a string or number. We could write our native function like this: @@ -196,9 +196,9 @@ CalendarManager.findEvents((error, events) => { }); ``` -A native module should invoke its callback exactly once. It's okay to store the callback and invoke it later. This pattern is often used to wrap iOS APIs that require delegates - see [`RCTAlertManager`](https://github.com/facebook/react-native/blob/master/React/Modules/RCTAlertManager.m) for an example. If the callback is never invoked, some memory is leaked. If both `onSuccess` and `onFail` callbacks are passed, you should only invoke one of them. +A native module should invoke its callback exactly once. It's okay to store the callback and invoke it later. This pattern is often used to wrap iOS APIs that require delegates - see [`RCTAlertManager`](https://github.com/facebook/react-native/blob/0.61-stable/React/Modules/RCTAlertManager.m) for an example. If the callback is never invoked, some memory is leaked. If both `onSuccess` and `onFail` callbacks are passed, you should only invoke one of them. -If you want to pass error-like objects to JavaScript, use `RCTMakeError` from [`RCTUtils.h`](https://github.com/facebook/react-native/blob/master/React/Base/RCTUtils.h). Right now this only passes an Error-shaped dictionary to JavaScript, but we would like to automatically generate real JavaScript `Error` objects in the future. +If you want to pass error-like objects to JavaScript, use `RCTMakeError` from [`RCTUtils.h`](https://github.com/facebook/react-native/blob/0.61-stable/React/Base/RCTUtils.h). Right now this only passes an Error-shaped dictionary to JavaScript, but we would like to automatically generate real JavaScript `Error` objects in the future. ## Promises @@ -513,6 +513,6 @@ For those of you new to Swift and Objective-C, whenever you [mix the two languag #import ``` -You can also use `RCT_EXTERN_REMAP_MODULE` and `_RCT_EXTERN_REMAP_METHOD` to alter the JavaScript name of the module or methods you are exporting. For more information see [`RCTBridgeModule`](https://github.com/facebook/react-native/blob/master/React/Base/RCTBridgeModule.h). +You can also use `RCT_EXTERN_REMAP_MODULE` and `_RCT_EXTERN_REMAP_METHOD` to alter the JavaScript name of the module or methods you are exporting. For more information see [`RCTBridgeModule`](https://github.com/facebook/react-native/blob/0.61-stable/React/Base/RCTBridgeModule.h). > **Important when making third party modules**: Static libraries with Swift are only supported in Xcode 9 and later. In order for the Xcode project to build when you use Swift in the iOS static library you include in the module, your main app project must contain Swift code and a bridging header itself. If your app project does not contain any Swift code, a workaround can be a single empty .swift file and an empty bridging header. diff --git a/website/versioned_docs/version-0.61/panresponder.md b/website/versioned_docs/version-0.61/panresponder.md index 92cf5163fce..a2a03789125 100644 --- a/website/versioned_docs/version-0.61/panresponder.md +++ b/website/versioned_docs/version-0.61/panresponder.md @@ -90,7 +90,7 @@ class ExampleComponent extends Component { ### Working Example -To see it in action, try the [PanResponder example in RNTester](https://github.com/facebook/react-native/blob/master/packages/rn-tester/js/examples/PanResponder/PanResponderExample.js) +To see it in action, try the [PanResponder example in RNTester](https://github.com/facebook/react-native/blob/0.61-stable/packages/rn-tester/js/examples/PanResponder/PanResponderExample.js) --- diff --git a/website/versioned_docs/version-0.61/stylesheet.md b/website/versioned_docs/version-0.61/stylesheet.md index f9aa892ad7c..515e3edf9ea 100644 --- a/website/versioned_docs/version-0.61/stylesheet.md +++ b/website/versioned_docs/version-0.61/stylesheet.md @@ -182,4 +182,4 @@ const styles = StyleSheet.create({ ### `absoluteFill` vs. `absoluteFillObject` -Currently, there is no difference between using `absoluteFill` vs. `absoluteFillObject` as you can see in the [source code](https://github.com/facebook/react-native/blob/master/Libraries/StyleSheet/StyleSheet.js#L255) +Currently, there is no difference between using `absoluteFill` vs. `absoluteFillObject` as you can see in the [source code](https://github.com/facebook/react-native/blob/0.61-stable/Libraries/StyleSheet/StyleSheet.js#L255) diff --git a/website/versioned_docs/version-0.61/troubleshooting.md b/website/versioned_docs/version-0.61/troubleshooting.md index 9509e291171..2699329dfa8 100644 --- a/website/versioned_docs/version-0.61/troubleshooting.md +++ b/website/versioned_docs/version-0.61/troubleshooting.md @@ -73,7 +73,7 @@ To revert the `User Search Header Paths` and `Header Search Paths` build setting ### No transports available -React Native implements a polyfill for WebSockets. These [polyfills](https://github.com/facebook/react-native/blob/master/Libraries/Core/InitializeCore.js) are initialized as part of the react-native module that you include in your application through `import React from 'react'`. If you load another module that requires WebSockets, such as [Firebase](https://github.com/facebook/react-native/issues/3645), be sure to load/require it after react-native: +React Native implements a polyfill for WebSockets. These [polyfills](https://github.com/facebook/react-native/blob/0.61-stable/Libraries/Core/InitializeCore.js) are initialized as part of the react-native module that you include in your application through `import React from 'react'`. If you load another module that requires WebSockets, such as [Firebase](https://github.com/facebook/react-native/issues/3645), be sure to load/require it after react-native: ``` import React from 'react'; diff --git a/website/versioned_docs/version-0.62/_integration-with-existing-apps-objc.md b/website/versioned_docs/version-0.62/_integration-with-existing-apps-objc.md index f8b0f161ef0..d6181e4a6c3 100644 --- a/website/versioned_docs/version-0.62/_integration-with-existing-apps-objc.md +++ b/website/versioned_docs/version-0.62/_integration-with-existing-apps-objc.md @@ -83,7 +83,7 @@ Install the Command Line Tools. Choose "Preferences..." in the Xcode menu. Go to Before you integrate React Native into your application, you will want to decide what parts of the React Native framework you would like to integrate. We will use CocoaPods to specify which of these "subspecs" your app will depend on. -The list of supported `subspec`s is available in [`/node_modules/react-native/React.podspec`](https://github.com/facebook/react-native/blob/master/React.podspec). They are generally named by functionality. For example, you will generally always want the `Core` `subspec`. That will get you the `AppRegistry`, `StyleSheet`, `View` and other core React Native libraries. If you want to add the React Native `Text` library (e.g., for `` elements), then you will need the `RCTText` `subspec`. If you want the `Image` library (e.g., for `` elements), then you will need the `RCTImage` `subspec`. +The list of supported `subspec`s is available in [`/node_modules/react-native/React.podspec`](https://github.com/facebook/react-native/blob/0.62-stable/React.podspec). They are generally named by functionality. For example, you will generally always want the `Core` `subspec`. That will get you the `AppRegistry`, `StyleSheet`, `View` and other core React Native libraries. If you want to add the React Native `Text` library (e.g., for `` elements), then you will need the `RCTText` `subspec`. If you want the `Image` library (e.g., for `` elements), then you will need the `RCTImage` `subspec`. You can specify which `subspec`s your app will depend on in a `Podfile` file. The easiest way to create a `Podfile` is by running the CocoaPods `init` command in the `/ios` subfolder of your project: @@ -280,7 +280,7 @@ First `import` the `RCTRootView` header. } ``` -> Note that `RCTRootView initWithURL` starts up a new JSC VM. To save resources and simplify the communication between RN views in different parts of your native app, you can have multiple views powered by React Native that are associated with a single JS runtime. To do that, instead of using `[RCTRootView alloc] initWithURL`, use [`RCTBridge initWithBundleURL`](https://github.com/facebook/react-native/blob/master/React/Base/RCTBridge.h#L93) to create a bridge and then use `RCTRootView initWithBridge`. +> Note that `RCTRootView initWithURL` starts up a new JSC VM. To save resources and simplify the communication between RN views in different parts of your native app, you can have multiple views powered by React Native that are associated with a single JS runtime. To do that, instead of using `[RCTRootView alloc] initWithURL`, use [`RCTBridge initWithBundleURL`](https://github.com/facebook/react-native/blob/0.62-stable/React/Base/RCTBridge.h#L93) to create a bridge and then use `RCTRootView initWithBridge`. > When moving your app to production, the `NSURL` can point to a pre-bundled file on disk via something like `[[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];`. You can use the `react-native-xcode.sh` script in `node_modules/react-native/scripts/` to generate that pre-bundled file. diff --git a/website/versioned_docs/version-0.62/_integration-with-existing-apps-swift.md b/website/versioned_docs/version-0.62/_integration-with-existing-apps-swift.md index 73446996658..eac86580446 100644 --- a/website/versioned_docs/version-0.62/_integration-with-existing-apps-swift.md +++ b/website/versioned_docs/version-0.62/_integration-with-existing-apps-swift.md @@ -83,7 +83,7 @@ Install the Command Line Tools. Choose "Preferences..." in the Xcode menu. Go to Before you integrate React Native into your application, you will want to decide what parts of the React Native framework you would like to integrate. We will use CocoaPods to specify which of these "subspecs" your app will depend on. -The list of supported `subspec`s is available in [`/node_modules/react-native/React.podspec`](https://github.com/facebook/react-native/blob/master/React.podspec). They are generally named by functionality. For example, you will generally always want the `Core` `subspec`. That will get you the `AppRegistry`, `StyleSheet`, `View` and other core React Native libraries. If you want to add the React Native `Text` library (e.g., for `` elements), then you will need the `RCTText` `subspec`. If you want the `Image` library (e.g., for `` elements), then you will need the `RCTImage` `subspec`. +The list of supported `subspec`s is available in [`/node_modules/react-native/React.podspec`](https://github.com/facebook/react-native/blob/0.62-stable/React.podspec). They are generally named by functionality. For example, you will generally always want the `Core` `subspec`. That will get you the `AppRegistry`, `StyleSheet`, `View` and other core React Native libraries. If you want to add the React Native `Text` library (e.g., for `` elements), then you will need the `RCTText` `subspec`. If you want the `Image` library (e.g., for `` elements), then you will need the `RCTImage` `subspec`. You can specify which `subspec`s your app will depend on in a `Podfile` file. The easiest way to create a `Podfile` is by running the CocoaPods `init` command in the `/ios` subfolder of your project: @@ -269,7 +269,7 @@ import React } ``` -> Note that `RCTRootView bundleURL` starts up a new JSC VM. To save resources and simplify the communication between RN views in different parts of your native app, you can have multiple views powered by React Native that are associated with a single JS runtime. To do that, instead of using `RCTRootView bundleURL`, use [`RCTBridge initWithBundleURL`](https://github.com/facebook/react-native/blob/master/React/Base/RCTBridge.h#L89) to create a bridge and then use `RCTRootView initWithBridge`. +> Note that `RCTRootView bundleURL` starts up a new JSC VM. To save resources and simplify the communication between RN views in different parts of your native app, you can have multiple views powered by React Native that are associated with a single JS runtime. To do that, instead of using `RCTRootView bundleURL`, use [`RCTBridge initWithBundleURL`](https://github.com/facebook/react-native/blob/0.62-stable/React/Base/RCTBridge.h#L89) to create a bridge and then use `RCTRootView initWithBridge`. > When moving your app to production, the `NSURL` can point to a pre-bundled file on disk via something like `let mainBundle = NSBundle(URLForResource: "main" withExtension:"jsbundle")`. You can use the `react-native-xcode.sh` script in `node_modules/react-native/scripts/` to generate that pre-bundled file. diff --git a/website/versioned_docs/version-0.62/animations.md b/website/versioned_docs/version-0.62/animations.md index 63f1a28d7d3..1bc9f3789bc 100644 --- a/website/versioned_docs/version-0.62/animations.md +++ b/website/versioned_docs/version-0.62/animations.md @@ -706,7 +706,7 @@ The native driver also works with `Animated.event`. This is especially useful fo ``` -You can see the native driver in action by running the [RNTester app](https://github.com/facebook/react-native/tree/master/packages/rn-tester/), then loading the Native Animated Example. You can also take a look at the [source code](https://github.com/facebook/react-native/blob/master/packages/rn-tester/js/examples/NativeAnimation/NativeAnimationsExample.js) to learn how these examples were produced. +You can see the native driver in action by running the [RNTester app](https://github.com/facebook/react-native/tree/0.62-stable/packages/rn-tester/), then loading the Native Animated Example. You can also take a look at the [source code](https://github.com/facebook/react-native/blob/0.62-stable/packages/rn-tester/js/examples/NativeAnimation/NativeAnimationsExample.js) to learn how these examples were produced. #### Caveats @@ -734,8 +734,8 @@ While using transform styles such as `rotateY`, `rotateX`, and others ensure the The RNTester app has various examples of `Animated` in use: -- [AnimatedGratuitousApp](https://github.com/facebook/react-native/tree/master/packages/rn-tester/js/examples/Animated/AnimatedGratuitousApp) -- [NativeAnimationsExample](https://github.com/facebook/react-native/blob/master/packages/rn-tester/js/examples/NativeAnimation/NativeAnimationsExample.js) +- [AnimatedGratuitousApp](https://github.com/facebook/react-native/tree/0.62-stable/packages/rn-tester/js/examples/Animated/AnimatedGratuitousApp) +- [NativeAnimationsExample](https://github.com/facebook/react-native/blob/0.62-stable/packages/rn-tester/js/examples/NativeAnimation/NativeAnimationsExample.js) ## `LayoutAnimation` API @@ -816,7 +816,7 @@ const styles = StyleSheet.create({ }); ``` -This example uses a preset value, you can customize the animations as you need, see [LayoutAnimation.js](https://github.com/facebook/react-native/blob/master/Libraries/LayoutAnimation/LayoutAnimation.js) for more information. +This example uses a preset value, you can customize the animations as you need, see [LayoutAnimation.js](https://github.com/facebook/react-native/blob/0.62-stable/Libraries/LayoutAnimation/LayoutAnimation.js) for more information. ## Additional notes diff --git a/website/versioned_docs/version-0.62/button.md b/website/versioned_docs/version-0.62/button.md index bae17a69408..c7dceb695ea 100644 --- a/website/versioned_docs/version-0.62/button.md +++ b/website/versioned_docs/version-0.62/button.md @@ -5,7 +5,7 @@ title: Button A basic button component that should render nicely on any platform. Supports a minimal level of customization. -If this button doesn't look right for your app, you can build your own button using [TouchableOpacity](touchableopacity) or [TouchableNativeFeedback](touchablenativefeedback). For inspiration, look at the [source code for this button component](https://github.com/facebook/react-native/blob/master/Libraries/Components/Button.js). Or, take a look at the [wide variety of button components built by the community](https://js.coach/?menu%5Bcollections%5D=React%20Native&page=1&query=button). +If this button doesn't look right for your app, you can build your own button using [TouchableOpacity](touchableopacity) or [TouchableNativeFeedback](touchablenativefeedback). For inspiration, look at the [source code for this button component](https://github.com/facebook/react-native/blob/0.62-stable/Libraries/Components/Button.js). Or, take a look at the [wide variety of button components built by the community](https://js.coach/?menu%5Bcollections%5D=React%20Native&page=1&query=button). ```jsx