diff --git a/docs/_getting-started-linux-android.md b/docs/_getting-started-linux-android.md index 9aaafcbef06..52a040e183f 100644 --- a/docs/_getting-started-linux-android.md +++ b/docs/_getting-started-linux-android.md @@ -13,7 +13,7 @@ Follow the [installation instructions for your Linux distribution](https://nodej

Java Development Kit

-React Native currently recommends version 11 of the Java SE Development Kit (JDK). You may encounter problems using higher JDK versions. You may download and install [OpenJDK](http://openjdk.java.net) from [AdoptOpenJDK](https://adoptopenjdk.net/) or your system packager. +React Native currently recommends version 11 of the Java SE Development Kit (JDK). You may encounter problems using higher JDK versions. You may download and install [OpenJDK](https://openjdk.java.net) from [AdoptOpenJDK](https://adoptopenjdk.net/) or your system packager.

Android development environment

diff --git a/docs/_getting-started-macos-android.md b/docs/_getting-started-macos-android.md index 23f9941b1f3..9a6330fa560 100644 --- a/docs/_getting-started-macos-android.md +++ b/docs/_getting-started-macos-android.md @@ -9,7 +9,7 @@ While you can use any editor of your choice to develop your app, you will need t

Node & Watchman

-We recommend installing Node and Watchman using [Homebrew](http://brew.sh/). Run the following commands in a Terminal after installing Homebrew: +We recommend installing Node and Watchman using [Homebrew](https://brew.sh/). Run the following commands in a Terminal after installing Homebrew: ```shell brew install node @@ -22,7 +22,7 @@ If you have already installed Node on your system, make sure it is Node 16 or ne

Java Development Kit

-We recommend installing the OpenJDK distribution called Azul **Zulu** using [Homebrew](http://brew.sh/). Run the following commands in a Terminal after installing Homebrew: +We recommend installing the OpenJDK distribution called Azul **Zulu** using [Homebrew](https://brew.sh/). Run the following commands in a Terminal after installing Homebrew: ```shell brew tap homebrew/cask-versions diff --git a/docs/_getting-started-macos-ios.md b/docs/_getting-started-macos-ios.md index 8d1a97b710b..7cc545728de 100644 --- a/docs/_getting-started-macos-ios.md +++ b/docs/_getting-started-macos-ios.md @@ -9,7 +9,7 @@ While you can use any editor of your choice to develop your app, you will need t ### Node & Watchman -We recommend installing Node and Watchman using [Homebrew](http://brew.sh/). Run the following commands in a Terminal after installing Homebrew: +We recommend installing Node and Watchman using [Homebrew](https://brew.sh/). Run the following commands in a Terminal after installing Homebrew: ```shell brew install node @@ -90,7 +90,7 @@ This is the **suggested approach** to decouple the build infrastructure from the On top of this, it's possible to add any other environment variable and to source the `.xcode.env` file in your build script phases. If you need to run script that requires some specific environment, this is the **suggested approach**: it allows to decouple the build phases from a specific environment. :::info -If you are already using [NVM](http://nvm.sh/) (a command which helps you install and switch between versions of Node.js) and [zsh](https://ohmyz.sh/), you might want to move the code that initialize NVM from your `~/.zshrc` into a `~/.zshenv` file to help Xcode find your Node executable: +If you are already using [NVM](https://nvm.sh/) (a command which helps you install and switch between versions of Node.js) and [zsh](https://ohmyz.sh/), you might want to move the code that initialize NVM from your `~/.zshrc` into a `~/.zshenv` file to help Xcode find your Node executable: ```zsh export NVM_DIR="$HOME/.nvm" diff --git a/docs/_integration-with-existing-apps-objc.md b/docs/_integration-with-existing-apps-objc.md index 32e0ed39fd2..3b7c0701724 100644 --- a/docs/_integration-with-existing-apps-objc.md +++ b/docs/_integration-with-existing-apps-objc.md @@ -85,9 +85,9 @@ Add `node_modules/` to your `.gitignore` file. ### 3. Install CocoaPods -[CocoaPods](http://cocoapods.org) is a package management tool for iOS and macOS development. We use it to add the actual React Native framework code locally into your current project. +[CocoaPods](https://cocoapods.org) is a package management tool for iOS and macOS development. We use it to add the actual React Native framework code locally into your current project. -We recommend installing CocoaPods using [Homebrew](http://brew.sh/). +We recommend installing CocoaPods using [Homebrew](https://brew.sh/). ```shell brew install cocoapods diff --git a/docs/_integration-with-existing-apps-swift.md b/docs/_integration-with-existing-apps-swift.md index f8cdaa48146..93d586d3fa5 100644 --- a/docs/_integration-with-existing-apps-swift.md +++ b/docs/_integration-with-existing-apps-swift.md @@ -83,9 +83,9 @@ Add `node_modules/` to your `.gitignore` file. ### 3. Install CocoaPods -[CocoaPods](http://cocoapods.org) is a package management tool for iOS and macOS development. We use it to add the actual React Native framework code locally into your current project. +[CocoaPods](https://cocoapods.org) is a package management tool for iOS and macOS development. We use it to add the actual React Native framework code locally into your current project. -We recommend installing CocoaPods using [Homebrew](http://brew.sh/). +We recommend installing CocoaPods using [Homebrew](https://brew.sh/). ```shell $ brew install cocoapods diff --git a/docs/animated.md b/docs/animated.md index af44b6a55af..55c74a6a211 100644 --- a/docs/animated.md +++ b/docs/animated.md @@ -247,7 +247,7 @@ Config is an object that may have the following options. Note that you can only define one of bounciness/speed, tension/friction, or stiffness/damping/mass, but not more than one: -The friction/tension or bounciness/speed options match the spring model in [`Facebook Pop`](https://github.com/facebook/pop), [Rebound](https://github.com/facebookarchive/rebound), and [Origami](http://origami.design/). +The friction/tension or bounciness/speed options match the spring model in [`Facebook Pop`](https://github.com/facebook/pop), [Rebound](https://github.com/facebookarchive/rebound), and [Origami](https://origami.design/). - `friction`: Controls "bounciness"/overshoot. Default 7. - `tension`: Controls speed. Default 40. diff --git a/docs/asyncstorage.md b/docs/asyncstorage.md index 2b5fc0cfe04..8fa79f07ba8 100644 --- a/docs/asyncstorage.md +++ b/docs/asyncstorage.md @@ -9,7 +9,7 @@ title: '🚧 AsyncStorage' It is recommended that you use an abstraction on top of `AsyncStorage` instead of `AsyncStorage` directly for anything more than light usage since it operates globally. -On iOS, `AsyncStorage` is backed by native code that stores small values in a serialized dictionary and larger values in separate files. On Android, `AsyncStorage` will use either [RocksDB](http://rocksdb.org/) or SQLite based on what is available. +On iOS, `AsyncStorage` is backed by native code that stores small values in a serialized dictionary and larger values in separate files. On Android, `AsyncStorage` will use either [RocksDB](https://rocksdb.org/) or SQLite based on what is available. The `AsyncStorage` JavaScript code is a facade that provides a clear JavaScript API, real `Error` objects, and non-multi functions. Each method in the API returns a `Promise` object. diff --git a/docs/communication-android.md b/docs/communication-android.md index 2a7aafefbfd..e5d1efa2527 100644 --- a/docs/communication-android.md +++ b/docs/communication-android.md @@ -34,8 +34,8 @@ public class MainActivity extends ReactActivity { protected Bundle getLaunchOptions() { Bundle initialProperties = new Bundle(); ArrayList imageList = new ArrayList(Arrays.asList( - "http://foo.com/bar1.png", - "http://foo.com/bar2.png" + "https://dummyimage.com/600x400/ffffff/000000.png", + "https://dummyimage.com/600x400/000000/ffffff.png" )); initialProperties.putStringArrayList("images", imageList); return initialProperties; @@ -54,7 +54,7 @@ class MainActivity : ReactActivity() { override fun createReactActivityDelegate(): ReactActivityDelegate { return object : ReactActivityDelegate(this, mainComponentName) { override fun getLaunchOptions(): Bundle { - val imageList = arrayListOf("http://foo.com/bar1.png", "http://foo.com/bar2.png") + val imageList = arrayListOf("https://dummyimage.com/600x400/ffffff/000000.png", "https://dummyimage.com/600x400/000000/ffffff.png") val initialProperties = Bundle().apply { putStringArrayList("images", imageList) } return initialProperties } @@ -89,8 +89,8 @@ export default class ImageBrowserApp extends React.Component { ```java Bundle updatedProps = mReactRootView.getAppProperties(); ArrayList imageList = new ArrayList(Arrays.asList( - "http://foo.com/bar3.png", - "http://foo.com/bar4.png" + "https://dummyimage.com/600x400/ff0000/000000.png", + "https://dummyimage.com/600x400/ffffff/ff0000.png" )); updatedProps.putStringArrayList("images", imageList); @@ -103,7 +103,7 @@ mReactRootView.setAppProperties(updatedProps); ```kotlin var updatedProps: Bundle = reactRootView.getAppProperties() -var imageList = arrayListOf("http://foo.com/bar3.png", "http://foo.com/bar4.png") +var imageList = arrayListOf("https://dummyimage.com/600x400/ff0000/000000.png", "https://dummyimage.com/600x400/ffffff/ff0000.png") ``` diff --git a/docs/communication-ios.md b/docs/communication-ios.md index 2d2539350e2..957c0a59c6d 100644 --- a/docs/communication-ios.md +++ b/docs/communication-ios.md @@ -22,8 +22,8 @@ In order to embed a React Native view in a native component, we use `RCTRootView `RCTRootView` has an initializer that allows you to pass arbitrary properties down to the React Native app. The `initialProperties` parameter has to be an instance of `NSDictionary`. The dictionary is internally converted into a JSON object that the top-level JS component can reference. ```objectivec -NSArray *imageList = @[@"http://foo.com/bar1.png", - @"http://foo.com/bar2.png"]; +NSArray *imageList = @[@"https://dummyimage.com/600x400/ffffff/000000.png", + @"https://dummyimage.com/600x400/000000/ffffff.png"]; NSDictionary *props = @{@"images" : imageList}; @@ -49,8 +49,8 @@ export default class ImageBrowserApp extends React.Component { `RCTRootView` also provides a read-write property `appProperties`. After `appProperties` is set, the React Native app is re-rendered with new properties. The update is only performed when the new updated properties differ from the previous ones. ```objectivec -NSArray *imageList = @[@"http://foo.com/bar3.png", - @"http://foo.com/bar4.png"]; +NSArray *imageList = @[@"https://dummyimage.com/600x400/ff0000/000000.png", + @"https://dummyimage.com/600x400/ffffff/ff0000.png"]; rootView.appProperties = @{@"images" : imageList}; ``` diff --git a/docs/debugging.md b/docs/debugging.md index 609bcc41581..04cbee63eeb 100644 --- a/docs/debugging.md +++ b/docs/debugging.md @@ -87,7 +87,7 @@ On iOS devices, open the file [`RCTWebSocketExecutor.mm`](https://github.com/fac -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 set up port forwarding from the device to your computer: +On Android 5.0+ devices connected via USB, you can use the [`adb` command line tool](https://developer.android.com/tools/help/adb.html) to set up port forwarding from the device to your computer: ```sh adb reverse tcp:8081 tcp:8081 @@ -124,7 +124,7 @@ You can use Safari to debug the iOS version of your app without having to enable - Select your app's JSContext: `Develop → Simulator (or other device) → JSContext` - Safari's Web Inspector should open which has a Console and a Debugger -While sourcemaps may not be enabled by default, you can follow [this guide](http://blog.nparashuram.com/2019/10/debugging-react-native-ios-apps-with.html) or [video](https://www.youtube.com/watch?v=GrGqIIz51k4) to enable them and set break points at the right places in the source code. +While sourcemaps may not be enabled by default, you can follow [this guide](https://blog.nparashuram.com/2019/10/debugging-react-native-ios-apps-with.html) or [video](https://www.youtube.com/watch?v=GrGqIIz51k4) to enable them and set break points at the right places in the source code. However, every time the app is reloaded (using live reload, or by manually reloading), a new JSContext is created. Choosing "Automatically Show Web Inspectors for JSContexts" saves you from having to select the latest JSContext manually. diff --git a/docs/easing.md b/docs/easing.md index b701ca5df13..0bd05189658 100644 --- a/docs/easing.md +++ b/docs/easing.md @@ -7,7 +7,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con The `Easing` module implements common easing functions. This module is used by [`Animated.timing()`](animated.md#timing) to convey physically believable motion in animations. -You can find a visualization of some common easing functions at http://easings.net/ +You can find a visualization of some common easing functions at https://easings.net/ ### Predefined animations @@ -393,7 +393,7 @@ static linear(t: number); A linear function, `f(t) = t`. Position correlates to elapsed time one to one. -http://cubic-bezier.com/#0,0,1,1 +https://cubic-bezier.com/#0,0,1,1 --- @@ -405,7 +405,7 @@ static ease(t: number); A basic inertial interaction, similar to an object slowly accelerating to speed. -http://cubic-bezier.com/#.42,0,1,1 +https://cubic-bezier.com/#.42,0,1,1 --- @@ -417,7 +417,7 @@ static quad(t: number); A quadratic function, `f(t) = t * t`. Position equals the square of elapsed time. -http://easings.net/#easeInQuad +https://easings.net/#easeInQuad --- @@ -429,7 +429,7 @@ static cubic(t: number); A cubic function, `f(t) = t * t * t`. Position equals the cube of elapsed time. -http://easings.net/#easeInCubic +https://easings.net/#easeInCubic --- @@ -441,7 +441,7 @@ static poly(n: number); A power function. Position is equal to the Nth power of elapsed time. -n = 4: http://easings.net/#easeInQuart n = 5: http://easings.net/#easeInQuint +n = 4: https://easings.net/#easeInQuart n = 5: https://easings.net/#easeInQuint --- @@ -453,7 +453,7 @@ static sin(t: number); A sinusoidal function. -http://easings.net/#easeInSine +https://easings.net/#easeInSine --- @@ -465,7 +465,7 @@ static circle(t: number); A circular function. -http://easings.net/#easeInCirc +https://easings.net/#easeInCirc --- @@ -477,7 +477,7 @@ static exp(t: number); An exponential function. -http://easings.net/#easeInExpo +https://easings.net/#easeInExpo --- @@ -491,7 +491,7 @@ A basic elastic interaction, similar to a spring oscillating back and forth. Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times. -http://easings.net/#easeInElastic +https://easings.net/#easeInElastic --- @@ -513,7 +513,7 @@ static bounce(t: number); Provides a basic bouncing effect. -http://easings.net/#easeInBounce +https://easings.net/#easeInBounce --- @@ -525,7 +525,7 @@ static bezier(x1: number, y1: number, x2: number, y2: number); Provides a cubic bezier curve, equivalent to CSS Transitions' `transition-timing-function`. -A useful tool to visualize cubic bezier curves can be found at http://cubic-bezier.com/ +A useful tool to visualize cubic bezier curves can be found at https://cubic-bezier.com/ --- diff --git a/docs/headless-js-android.md b/docs/headless-js-android.md index 26220a3937a..54986f7d623 100644 --- a/docs/headless-js-android.md +++ b/docs/headless-js-android.md @@ -253,7 +253,7 @@ public class NetworkChangeReceiver extends BroadcastReceiver { private boolean isAppOnForeground(Context context) { /** We need to check if app is in foreground otherwise the app will crash. - http://stackoverflow.com/questions/8489993/check-android-application-is-in-foreground-or-not + https://stackoverflow.com/questions/8489993/check-android-application-is-in-foreground-or-not **/ ActivityManager activityManager = (ActivityManager) context.getSystemService(Context.ACTIVITY_SERVICE); List appProcesses = @@ -336,7 +336,7 @@ class NetworkChangeReceiver : BroadcastReceiver() { private fun isAppOnForeground(context: Context): Boolean { /** * We need to check if app is in foreground otherwise the app will crash. - * http://stackoverflow.com/questions/8489993/check-android-application-is-in-foreground-or-not + * https://stackoverflow.com/questions/8489993/check-android-application-is-in-foreground-or-not */ val activityManager = context.getSystemService(Context.ACTIVITY_SERVICE) as ActivityManager val appProcesses = activityManager.runningAppProcesses ?: return false diff --git a/docs/image.md b/docs/image.md index 96653484d69..b0a5c585d5a 100644 --- a/docs/image.md +++ b/docs/image.md @@ -324,7 +324,7 @@ The mechanism that should be used to resize the image when the image's dimension - `scale`: The image gets drawn downscaled or upscaled. Compared to `resize`, `scale` is faster (usually hardware accelerated) and produces higher quality images. This should be used if the image is smaller than the view. It should also be used if the image is slightly bigger than the view. -More details about `resize` and `scale` can be found at http://frescolib.org/docs/resizing. +More details about `resize` and `scale` can be found at https://frescolib.org/docs/resizing. | Type | Default | | ------------------------------------- | -------- | diff --git a/docs/javascript-environment.md b/docs/javascript-environment.md index 97e41683a6e..45ebf1a3131 100644 --- a/docs/javascript-environment.md +++ b/docs/javascript-environment.md @@ -10,7 +10,7 @@ import TableRow from '@site/core/TableRowWithCodeBlock'; When using React Native, you're going to be running your JavaScript code in up to three environments: - In most cases, React Native will use [Hermes](hermes), an open-source JavaScript engine optimized for React Native. -- If Hermes is disabled, React Native will use [JavaScriptCore](http://trac.webkit.org/wiki/JavaScriptCore), the JavaScript engine that powers Safari. Note that on iOS, JavaScriptCore does not use JIT due to the absence of writable executable memory in iOS apps. +- If Hermes is disabled, React Native will use [JavaScriptCore](https://trac.webkit.org/wiki/JavaScriptCore), the JavaScript engine that powers Safari. Note that on iOS, JavaScriptCore does not use JIT due to the absence of writable executable memory in iOS apps. - When using Chrome debugging, all JavaScript code runs within Chrome itself, communicating with native code via WebSockets. Chrome uses [V8](https://v8.dev/) as its JavaScript engine. While these environments are very similar, you may end up hitting some inconsistencies. It is best to avoid relying on specifics of any runtime. @@ -31,19 +31,19 @@ A full list of React Native's enabled transformations can be found in [metro-rea ECMAScript 5 ECMAScript 2015 (ES6) - + - - - + + + - + - - - + + + diff --git a/docs/linking.md b/docs/linking.md index c17b746f7c5..6639f0bfe32 100644 --- a/docs/linking.md +++ b/docs/linking.md @@ -40,9 +40,9 @@ If you want to enable deep links in your app, please read the below guide: -> For instructions on how to add support for deep linking on Android, refer to [Enabling Deep Links for App Content - Add Intent Filters for Your Deep Links](http://developer.android.com/training/app-indexing/deep-linking.html#adding-filters). +> For instructions on how to add support for deep linking on Android, refer to [Enabling Deep Links for App Content - Add Intent Filters for Your Deep Links](https://developer.android.com/training/app-indexing/deep-linking.html#adding-filters). -If you wish to receive the intent in an existing instance of MainActivity, you may set the `launchMode` of MainActivity to `singleTask` in `AndroidManifest.xml`. See [``](http://developer.android.com/guide/topics/manifest/activity-element.html) documentation for more information. +If you wish to receive the intent in an existing instance of MainActivity, you may set the `launchMode` of MainActivity to `singleTask` in `AndroidManifest.xml`. See [``](https://developer.android.com/guide/topics/manifest/activity-element.html) documentation for more information. ```xml ; If the app launch was triggered by an app link, it will give the link url, otherwise it will give `null`. -> To support deep linking on Android, refer http://developer.android.com/training/app-indexing/deep-linking.html#handling-intents +> To support deep linking on Android, refer https://developer.android.com/training/app-indexing/deep-linking.html#handling-intents > getInitialURL may return `null` while debugging is enabled. Disable the debugger to ensure it gets passed. @@ -620,7 +620,7 @@ static openURL(url: string): Promise; Try to open the given `url` with any of the installed apps. -You can use other URLs, like a location (e.g. "geo:37.484847,-122.148386" on Android or "http://maps.apple.com/?ll=37.484847,-122.148386" on iOS), a contact, or any other URL that can be opened with the installed apps. +You can use other URLs, like a location (e.g. "geo:37.484847,-122.148386" on Android or "https://maps.apple.com/?ll=37.484847,-122.148386" on iOS), a contact, or any other URL that can be opened with the installed apps. The method returns a `Promise` object. If the user confirms the open dialog or the url automatically opens, the promise is resolved. If the user cancels the open dialog or there are no registered applications for the url, the promise is rejected. diff --git a/docs/network.md b/docs/network.md index b63c2dc8963..fca64e0c497 100644 --- a/docs/network.md +++ b/docs/network.md @@ -207,7 +207,7 @@ request.open('GET', 'https://mywebsite.com/endpoint/'); request.send(); ``` -> The security model for XMLHttpRequest is different than on web as there is no concept of [CORS](http://en.wikipedia.org/wiki/Cross-origin_resource_sharing) in native apps. +> The security model for XMLHttpRequest is different than on web as there is no concept of [CORS](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing) in native apps. ## WebSocket Support diff --git a/docs/performance.md b/docs/performance.md index bb7f4fddc37..135bddf4804 100644 --- a/docs/performance.md +++ b/docs/performance.md @@ -19,7 +19,7 @@ Now to confuse the matter a little bit, open up the [Dev Menu](debugging.md#acce For most React Native applications, your business logic will run on the JavaScript thread. This is where your React application lives, API calls are made, touch events are processed, etc... Updates to native-backed views are batched and sent over to the native side at the end of each iteration of the event loop, before the frame deadline (if all goes well). If the JavaScript thread is unresponsive for a frame, it will be considered a dropped frame. For example, if you were to call `this.setState` on the root component of a complex application and it resulted in re-rendering computationally expensive component subtrees, it's conceivable that this might take 200ms and result in 12 frames being dropped. Any animations controlled by JavaScript would appear to freeze during that time. If anything takes longer than 100ms, the user will feel it. -This often happens during `Navigator` transitions: when you push a new route, the JavaScript thread needs to render all of the components necessary for the scene in order to send over the proper commands to the native side to create the backing views. It's common for the work being done here to take a few frames and cause [jank](http://jankfree.org/) because the transition is controlled by the JavaScript thread. Sometimes components will do additional work on `componentDidMount`, which might result in a second stutter in the transition. +This often happens during `Navigator` transitions: when you push a new route, the JavaScript thread needs to render all of the components necessary for the scene in order to send over the proper commands to the native side to create the backing views. It's common for the work being done here to take a few frames and cause [jank](https://jankfree.org/) because the transition is controlled by the JavaScript thread. Sometimes components will do additional work on `componentDidMount`, which might result in a second stutter in the transition. Another example is responding to touches: if you are doing work across multiple frames on the JavaScript thread, you might notice a delay in responding to `TouchableOpacity`, for example. This is because the JavaScript thread is busy and cannot process the raw touch events sent over from the main thread. As a result, `TouchableOpacity` cannot react to the touch events and command the native view to adjust its opacity. diff --git a/docs/running-on-device.md b/docs/running-on-device.md index fd7f4f262d0..dbfce8d4564 100644 --- a/docs/running-on-device.md +++ b/docs/running-on-device.md @@ -191,7 +191,7 @@ You can now enable Live reloading from the [Dev Menu](debugging.md#accessing-the You can also connect to the development server over Wi-Fi. You'll first need to install the app on your device using a USB cable, but once that has been done you can debug wirelessly by following these instructions. You'll need your development machine's current IP address before proceeding. -Open the command prompt and type `ipconfig` to find your machine's IP address ([more info](http://windows.microsoft.com/en-us/windows/using-command-line-tools-networking-information)). +Open the command prompt and type `ipconfig` to find your machine's IP address ([more info](https://windows.microsoft.com/en-us/windows/using-command-line-tools-networking-information)). 1. Make sure your laptop and your phone are on the **same** Wi-Fi network. 2. Open your React Native app on your device. diff --git a/docs/testing-overview.md b/docs/testing-overview.md index 63d480f35e1..5714c365ff6 100644 --- a/docs/testing-overview.md +++ b/docs/testing-overview.md @@ -251,7 +251,7 @@ E2E tests give you the highest possible confidence that part of your app is work Try to cover the vital parts of your app with E2E tests: authentication flow, core functionalities, payments, etc. Use faster JS tests for the non-vital parts of your app. The more tests you add, the higher your confidence, but also, the more time you'll spend maintaining and running them. Consider the tradeoffs and decide what's best for you. -There are several E2E testing tools available: in the React Native community, [Detox](https://github.com/wix/detox/) is a popular framework because it’s tailored for React Native apps. Another popular library in the space of iOS and Android apps is [Appium](http://appium.io/) or [Maestro](https://maestro.mobile.dev/). +There are several E2E testing tools available: in the React Native community, [Detox](https://github.com/wix/detox/) is a popular framework because it’s tailored for React Native apps. Another popular library in the space of iOS and Android apps is [Appium](https://appium.io/) or [Maestro](https://maestro.mobile.dev/). @@ -265,7 +265,7 @@ We hope you enjoyed reading and learned something from this guide. There are man - [React Native Testing Library](https://callstack.github.io/react-native-testing-library/) - [Jest docs](https://jestjs.io/docs/en/tutorial-react-native) - [Detox](https://github.com/wix/detox/) -- [Appium](http://appium.io/) +- [Appium](https://appium.io/) - [Maestro](https://maestro.mobile.dev/) --- diff --git a/docs/textinput.md b/docs/textinput.md index 590ff1f5d83..9e28a6be7ab 100644 --- a/docs/textinput.md +++ b/docs/textinput.md @@ -449,7 +449,7 @@ Determines the color of the keyboard. Determines which keyboard to open, e.g.`numeric`. -See screenshots of all the types [here](http://lefkowitz.me/2018/04/30/visual-guide-to-react-native-textinput-keyboardtype-options/). +See screenshots of all the types [here](https://lefkowitz.me/2018/04/30/visual-guide-to-react-native-textinput-keyboardtype-options/). The following values work across platforms: diff --git a/docs/view.md b/docs/view.md index a6699f63e35..eb1796f9e88 100644 --- a/docs/view.md +++ b/docs/view.md @@ -121,7 +121,7 @@ Indicates to accessibility services whether the user should be notified when thi - `'polite'`- Accessibility services should announce changes to this view. - `'assertive'` - Accessibility services should interrupt ongoing speech to immediately announce changes to this view. -See the [Android `View` docs](http://developer.android.com/reference/android/view/View.html#attr_android:accessibilityLiveRegion) for reference. +See the [Android `View` docs](https://developer.android.com/reference/android/view/View.html#attr_android:accessibilityLiveRegion) for reference. | Type | | ----------------------------------- | @@ -420,7 +420,7 @@ Possible values: - `'no'` - The view is not important for accessibility. - `'no-hide-descendants'` - The view is not important for accessibility, nor are any of its descendant views. -See the [Android `importantForAccessibility` docs](http://developer.android.com/reference/android/R.attr.html#importantForAccessibility) for reference. +See the [Android `importantForAccessibility` docs](https://developer.android.com/reference/android/R.attr.html#importantForAccessibility) for reference. | Type | | ------------------------------------------------ | diff --git a/website/blog/2016-03-24-introducing-hot-reloading.md b/website/blog/2016-03-24-introducing-hot-reloading.md index 5d12b0a7672..4c2b56576bc 100644 --- a/website/blog/2016-03-24-introducing-hot-reloading.md +++ b/website/blog/2016-03-24-introducing-hot-reloading.md @@ -167,7 +167,7 @@ In order to walk the dependency tree, the runtime receives the inverse dependenc ## React Components -React components are a bit harder to get to work with Hot Reloading. The problem is that we can't simply replace the old code with the new one as we'd loose the component's state. For React web applications, [Dan Abramov](https://twitter.com/dan_abramov) implemented a babel [transform](http://gaearon.github.io/react-hot-loader/) that uses Webpack's HMR API to solve this issue. In a nutshell, his solution works by creating a proxy for every single React component on _transform time_. The proxies hold the component's state and delegate the lifecycle methods to the actual components, which are the ones we hot reload: +React components are a bit harder to get to work with Hot Reloading. The problem is that we can't simply replace the old code with the new one as we'd loose the component's state. For React web applications, [Dan Abramov](https://twitter.com/dan_abramov) implemented a babel [transform](https://gaearon.github.io/react-hot-loader/) that uses Webpack's HMR API to solve this issue. In a nutshell, his solution works by creating a proxy for every single React component on _transform time_. The proxies hold the component's state and delegate the lifecycle methods to the actual components, which are the ones we hot reload: ![](/blog/assets/hmr-proxy.png) @@ -177,7 +177,7 @@ The default [transformer](https://github.com/facebook/react-native/blob/master/p ## Redux Stores -To enable Hot Reloading on [Redux](http://redux.js.org/) stores you will just need to use the HMR API similarly to what you'd do on a web project that uses Webpack: +To enable Hot Reloading on [Redux](https://redux.js.org/) stores you will just need to use the HMR API similarly to what you'd do on a web project that uses Webpack: ``` // configureStore.js diff --git a/website/blog/2016-04-13-react-native-a-year-in-review.md b/website/blog/2016-04-13-react-native-a-year-in-review.md index 13db53d3e26..cd8452e51a7 100644 --- a/website/blog/2016-04-13-react-native-a-year-in-review.md +++ b/website/blog/2016-04-13-react-native-a-year-in-review.md @@ -9,7 +9,7 @@ hero: '/blog/assets/big-hero.png' tags: [announcement] --- -It's been one year since we open-sourced React Native. What started as an idea with a handful of engineers is now a framework being used by product teams across Facebook and beyond. Today at F8 we announced that Microsoft is bringing [React Native to the Windows ecosystem](http://microsoft.github.io/code-push/articles/ReactNativeWindows.html), giving developers the potential to build React Native on Windows PC, Phone, and Xbox. It will also provide open source tools and services such as a React Native extension for Visual Studio Code and CodePush to help developers create React Native apps on the Windows platform. In addition, [Samsung](https://www.tizen.org/blogs) is building React Native for its hybrid platform, which will empower developers to build apps for millions of SmartTVs and mobile and wearable devices. We also released the [Facebook SDK for React Native](https://github.com/facebook/react-native-fbsdk), which makes it easier for developers to incorporate Facebook social features like Login, Sharing, App Analytics, and Graph APIs into their apps. In one year, React Native has changed the way developers build on every major platform. +It's been one year since we open-sourced React Native. What started as an idea with a handful of engineers is now a framework being used by product teams across Facebook and beyond. Today at F8 we announced that Microsoft is bringing [React Native to the Windows ecosystem](https://microsoft.github.io/code-push/articles/ReactNativeWindows.html), giving developers the potential to build React Native on Windows PC, Phone, and Xbox. It will also provide open source tools and services such as a React Native extension for Visual Studio Code and CodePush to help developers create React Native apps on the Windows platform. In addition, [Samsung](https://www.tizen.org/blogs) is building React Native for its hybrid platform, which will empower developers to build apps for millions of SmartTVs and mobile and wearable devices. We also released the [Facebook SDK for React Native](https://github.com/facebook/react-native-fbsdk), which makes it easier for developers to incorporate Facebook social features like Login, Sharing, App Analytics, and Graph APIs into their apps. In one year, React Native has changed the way developers build on every major platform. It's been an epic ride — but we are only getting started. Here is a look back at how React Native has grown and evolved since we open-sourced it a year ago, some challenges we faced along the way, and what we expect as we look ahead to the future. diff --git a/website/blog/2016-08-12-react-native-meetup-san-francisco.md b/website/blog/2016-08-12-react-native-meetup-san-francisco.md index 44f11012082..8ff8cbf8560 100644 --- a/website/blog/2016-08-12-react-native-meetup-san-francisco.md +++ b/website/blog/2016-08-12-react-native-meetup-san-francisco.md @@ -9,7 +9,7 @@ hero: '/blog/img/rnmsf-august-2016-hero.jpg' tags: [events] --- -Last week I had the opportunity to attend the [React Native Meetup](http://www.meetup.com/React-Native-San-Francisco/photos/27168649/#452793854) at Zynga’s San Francisco office. With around 200 people in attendance, it served as a great place to meet other developers near me that are also interested in React Native. +Last week I had the opportunity to attend the [React Native Meetup](https://www.meetup.com/React-Native-San-Francisco/photos/27168649/#452793854) at Zynga’s San Francisco office. With around 200 people in attendance, it served as a great place to meet other developers near me that are also interested in React Native. ![](/blog/assets/rnmsf-august-2016-hero.jpg) @@ -25,7 +25,7 @@ But first, the event started off with a quick introduction and a brief recap of - [rnpm](https://github.com/rnpm/rnpm) is now part of React Native core! You can now use `react-native link` in place of `rnpm link` to [install libraries with native dependencies](/docs/linking-libraries-ios). - The React Native Meetup community is growing fast! There are now over 4,800 developers across a variety of React Native meetup groups all over the globe. -If [one of these meetups](http://www.meetup.com/find/?allMeetups=false&keywords=react+native&radius=Infinity&userFreeform=San+Francisco%2C+CA&mcId=z94105&mcName=San+Francisco%2C+CA&sort=recommended&eventFilter=mysugg) is held near you, I highly recommend attending! +If [one of these meetups](https://www.meetup.com/find/?allMeetups=false&keywords=react+native&radius=Infinity&userFreeform=San+Francisco%2C+CA&mcId=z94105&mcName=San+Francisco%2C+CA&sort=recommended&eventFilter=mysugg) is held near you, I highly recommend attending! ## Rapid Prototyping in React at Zynga diff --git a/website/blog/2016-08-19-right-to-left-support-for-react-native-apps.md b/website/blog/2016-08-19-right-to-left-support-for-react-native-apps.md index fd28f4e840c..07ba775f598 100644 --- a/website/blog/2016-08-19-right-to-left-support-for-react-native-apps.md +++ b/website/blog/2016-08-19-right-to-left-support-for-react-native-apps.md @@ -64,7 +64,7 @@ With this update, when you allow RTL layout for your app: sharedI18nUtilInstance.allowRTL(context, true); ``` -3. For Android, you need add `android:supportsRtl="true"` to the [``](http://developer.android.com/guide/topics/manifest/application-element.html) element in `AndroidManifest.xml` file. +3. For Android, you need add `android:supportsRtl="true"` to the [``](https://developer.android.com/guide/topics/manifest/application-element.html) element in `AndroidManifest.xml` file. Now, when you recompile your app and change the device language to an RTL language (e.g. Arabic or Hebrew), your app layout should change to RTL automatically. diff --git a/website/blog/2016-12-05-easier-upgrades.md b/website/blog/2016-12-05-easier-upgrades.md index dee4123594d..f7949800ca4 100644 --- a/website/blog/2016-12-05-easier-upgrades.md +++ b/website/blog/2016-12-05-easier-upgrades.md @@ -119,4 +119,4 @@ As a conclusion, I would say, enjoy the feature and feel free [to suggest improv ### Thank you! -I would like to thank the awesome companies [Zenika](http://www.zenika.com) and [M6 Web](http://www.groupem6.fr/le-groupe_en/activites/diversifications/m6-web.html) without whom none of this would have been possible! +I would like to thank the awesome companies [Zenika](https://www.zenika.com) and [M6 Web (archived)](https://web.archive.org/web/20161230163633/http://www.groupem6.fr:80/le-groupe_en/activites/diversifications/m6-web.html) without whom none of this would have been possible! diff --git a/website/blog/2017-06-21-react-native-monthly-1.md b/website/blog/2017-06-21-react-native-monthly-1.md index 48d6e8fe39b..2f6898bfefd 100644 --- a/website/blog/2017-06-21-react-native-monthly-1.md +++ b/website/blog/2017-06-21-react-native-monthly-1.md @@ -44,7 +44,7 @@ As teams' plans might be of interest to a broader audience, we'll be sharing the - Looking into improving the release process by using [Detox](https://github.com/wix/detox) for E2E testing. Pull request should land soon. - Blob pull request they have been working on has been merged, subsequent pull requests coming up. -- Increasing [Haul](https://github.com/callstack-io/haul) adoption across internal projects to see how it performs compared to [Metro Bundler](http://github.com/facebook/metro-bundler). Working on better multi-threaded performance with the Webpack team. +- Increasing [Haul](https://github.com/callstack-io/haul) adoption across internal projects to see how it performs compared to [Metro Bundler](https://github.com/facebook/metro-bundler). Working on better multi-threaded performance with the Webpack team. - Internally, they have implemented a better infrastructure to manage open source projects. Plans to be getting more stuff out in upcoming weeks. - The React Native Europe conference is coming along, nothing interesting yet, but y'all invited! - Stepped back from [react-navigation](https://github.com/react-community/react-navigation) for a while to investigate alternatives (especially native navigations). diff --git a/website/blog/2017-07-28-react-native-monthly-2.md b/website/blog/2017-07-28-react-native-monthly-2.md index 702fb7d654b..a8a5e51f691 100644 --- a/website/blog/2017-07-28-react-native-monthly-2.md +++ b/website/blog/2017-07-28-react-native-monthly-2.md @@ -56,7 +56,7 @@ Here are the notes from each team: ### Facebook -- Facebook is internally exploring being able to embed native [ComponentKit](http://componentkit.org/) and [Litho](https://fblitho.com/) components inside of React Native. +- Facebook is internally exploring being able to embed native [ComponentKit](https://componentkit.org/) and [Litho](https://fblitho.com/) components inside of React Native. - Contributions to React Native are very welcome! If you are wondering how you can contribute, the ["How to Contribute" guide](https://github.com/facebook/react-native-website/blob/master/CONTRIBUTING.md) describes our development process and lays out the steps to send your first pull request. There are other ways to contribute that do not require writing code, such as by triaging issues or updating the docs. - At the time of writing, React Native has **635** [open issues](https://github.com/facebook/react-native/issues) and **249** [open pull requests](https://github.com/facebook/react-native/pulls). This is overwhelming for our maintainers, and when things get fixed internally, it is difficult to ensure the relevant tasks are updated. - We are unsure what the best approach is to handle this while keeping the community satisfied. Some (but not all!) options include closing stale issues, giving significantly more people permissions to manage issues, and automatically closing issues that do not follow the issue template. We wrote a "What to Expect from Maintainers" guide to set expectations and avoid surprises. If you have ideas on how we can make this experience better for maintainers as well as ensuring people opening issues and pull requests feel heard and valued, please let us know! diff --git a/website/blog/2017-09-21-react-native-monthly-4.md b/website/blog/2017-09-21-react-native-monthly-4.md index 8406bd0d6b9..2edf75d54c5 100644 --- a/website/blog/2017-09-21-react-native-monthly-4.md +++ b/website/blog/2017-09-21-react-native-monthly-4.md @@ -20,15 +20,15 @@ The React Native monthly meeting continues! Here are the notes from each team: Trying to lower the entry barrier for the developers embracing React Native with the following things: - Announced [BuilderX.io](https://builderx.io/) at [React Native EU](https://react-native.eu). BuilderX is a design tool that directly works with JavaScript files (only React Native is supported at the moment) to generate beautiful, readable, and editable code. -- Launched [ReactNativeSeed.com](http://reactnativeseed.com/) which provides a set of boilerplates for your next React Native project. It comes with a variety of options that include TypeScript & Flow for data-types, MobX, Redux, and mobx-state-tree for state-management with CRNA and plain React-Native as the stack. +- Launched [ReactNativeSeed.com](https://reactnativeseed.com/) which provides a set of boilerplates for your next React Native project. It comes with a variety of options that include TypeScript & Flow for data-types, MobX, Redux, and mobx-state-tree for state-management with CRNA and plain React-Native as the stack. ### Expo - Will release SDK 21 shortly, which adds support for react-native 0.48.3 and a bunch of bugfixes/reliability improvements/new features in the Expo SDK, including video recording, a new splash screen API, support for `react-native-gesture-handler`, and improved error handling. -- Re: [react-native-gesture-handler](https://github.com/kmagiera/react-native-gesture-handler), [Krzysztof Magiera](https://github.com/kmagiera) of [Software Mansion](http://swmansion.com/) continues pushing this forward and we've been helping him with testing it and funding part of his development time. Having this integrated in Expo in SDK21 will allow people to play with it easily in Snack, so we're excited to see what people come up with. +- Re: [react-native-gesture-handler](https://github.com/kmagiera/react-native-gesture-handler), [Krzysztof Magiera](https://github.com/kmagiera) of [Software Mansion](https://swmansion.com/) continues pushing this forward and we've been helping him with testing it and funding part of his development time. Having this integrated in Expo in SDK21 will allow people to play with it easily in Snack, so we're excited to see what people come up with. - Re: improved error logging / handling - see [this gist of an internal Expo PR](https://gist.github.com/brentvatne/00407710a854627aa021fdf90490b958) for details on logging, (in particular, "Problem 2"), and [this commit](https://github.com/expo/xdl/commit/1d62eca293dfb867fc0afc920c3dad94b7209987) for a change that handles failed attempts to import npm standard library modules. There is plenty of opportunity to improve error messages upstream in React Native in this way and we will work on follow up upstream PRs. It would be great for the community to get involved too. -- [native.directory](http://native.directory/) continues to grow, you can add your projects from [the GitHub repo](https://github.com/react-community/native-directory). -- Visit hackathons around North America, including [PennApps](http://pennapps.com/), [Hack The North](http://hackthenorth.com/), [HackMIT](https://hackmit.org/), and soon [MHacks](https://mhacks.org/). +- [native.directory](https://native.directory/) continues to grow, you can add your projects from [the GitHub repo](https://github.com/react-community/native-directory). +- Visit hackathons around North America, including [PennApps](https://pennapps.com/), [Hack The North](https://hackthenorth.com/), [HackMIT](https://hackmit.org/), and soon [MHacks](https://mhacks.org/). ### Facebook @@ -37,7 +37,7 @@ Trying to lower the entry barrier for the developers embracing React Native with ### Microsoft -- Released Code Signing feature for CodePush. React Native developers are now able to sign their application bundles in CodePush. The announcement can be found [here](http://microsoft.github.io/code-push/articles/CodeSigningAnnouncement.html) +- Released Code Signing feature for CodePush. React Native developers are now able to sign their application bundles in CodePush. The announcement can be found [here](https://microsoft.github.io/code-push/articles/CodeSigningAnnouncement.html) - Working on completing integration of CodePush to Mobile Center. Considering test/crash integration as well. ## Next session diff --git a/website/blog/2018-01-09-react-native-monthly-6.md b/website/blog/2018-01-09-react-native-monthly-6.md index 2e46956f7c0..49cf89777e8 100644 --- a/website/blog/2018-01-09-react-native-monthly-6.md +++ b/website/blog/2018-01-09-react-native-monthly-6.md @@ -20,8 +20,8 @@ The React Native monthly meeting is still going strong! Make sure to check a not ### Infinite Red - We have our Keynote speakers for [Chain React conf](https://infinite.red/ChainReactConf): [Kent C. Dodds](https://twitter.com/kentcdodds) and [Tracy Lee](https://twitter.com/ladyleet). We will be opening CFP very soon. -- [Community chat](http://community.infinite.red/) now at 1600 people. -- [React Native Newsletter](http://reactnative.cc/) now at 8500 subscribers. +- [Community chat](https://community.infinite.red/) now at 1600 people. +- [React Native Newsletter](https://reactnative.cc/) now at 8500 subscribers. - Currently researching best practice for making RN crash resistant, reports to follow. - Adding ability to report from [Solidarity](https://shift.infinite.red/effortless-environment-reports-d129d53eb405). - Published a HOW-TO for releasing on [React Native and Android](https://shift.infinite.red/simple-react-native-android-releases-319dc5e29605). diff --git a/website/blog/2018-01-18-implementing-twitters-app-loading-animation-in-react-native.md b/website/blog/2018-01-18-implementing-twitters-app-loading-animation-in-react-native.md index 27d6544d027..2f590e254fc 100644 --- a/website/blog/2018-01-18-implementing-twitters-app-loading-animation-in-react-native.md +++ b/website/blog/2018-01-18-implementing-twitters-app-loading-animation-in-react-native.md @@ -286,6 +286,6 @@ This component has been published to npm and is on GitHub as [react-native-mask- ## More Reading / Extra Credit -1. [This gitbook](http://browniefed.com/react-native-animation-book/) is a great resource to learn more about Animated after you have read the React Native docs. +1. [This gitbook](https://browniefed.com/react-native-animation-book/) is a great resource to learn more about Animated after you have read the React Native docs. 1. The actual Twitter animation seems to speed up the mask reveal towards the end. Try modifying the loader to use a different easing function (or a spring!) to better match that behavior. 1. The current end-scale of the mask is hard coded and likely won’t reveal the entire app on a tablet. Calculating the end scale based on screen size and image size would be an awesome PR. diff --git a/website/blog/2018-03-05-AWS-app-sync.md b/website/blog/2018-03-05-AWS-app-sync.md index c87d98a1ca7..498505948ec 100644 --- a/website/blog/2018-03-05-AWS-app-sync.md +++ b/website/blog/2018-03-05-AWS-app-sync.md @@ -51,7 +51,7 @@ npm install --global awsmobile-cli awsmobile configure ``` -Another example of encoded best practices that is specific to the mobile ecosystem is password security. The default `Auth` category implementation leverages Amazon Cognito user pools for user registration and sign-in. This service implements [Secure Remote Password protocol](http://srp.stanford.edu) as a way of protecting users during authentication attempts. If you're inclined to read through the [mathematics of the protocol](http://srp.stanford.edu/ndss.html#SECTION00032200000000000000), you'll notice that you must use a large prime number when calculating the password verifier over a primitive root to generate a Group. In React Native environments, [JIT is disabled](/docs/javascript-environment). This makes BigInteger calculations for security operations such as this less performant. To account for this, we've released native bridges in Android and iOS that you can link inside your project: +Another example of encoded best practices that is specific to the mobile ecosystem is password security. The default `Auth` category implementation leverages Amazon Cognito user pools for user registration and sign-in. This service implements [Secure Remote Password protocol](https://srp.stanford.edu) as a way of protecting users during authentication attempts. If you're inclined to read through the [mathematics of the protocol](https://srp.stanford.edu/ndss.html#SECTION00032200000000000000), you'll notice that you must use a large prime number when calculating the password verifier over a primitive root to generate a Group. In React Native environments, [JIT is disabled](/docs/javascript-environment). This makes BigInteger calculations for security operations such as this less performant. To account for this, we've released native bridges in Android and iOS that you can link inside your project: ``` npm install --save aws-amplify-react-native @@ -102,7 +102,7 @@ Shortly after the launch of AWS Amplify, we also released [AWS AppSync](https:// AWS AppSync enables you to connect to resources in your own AWS account, meaning you own and control your data. This is done by using data sources, and the service supports [Amazon DynamoDB](https://aws.amazon.com/dynamodb/), [Amazon Elasticsearch](https://aws.amazon.com/elasticsearch-service/), and [AWS Lambda](https://aws.amazon.com/lambda/). This enables you to combine functionality (such as NoSQL and full-text search) in a single GraphQL API as a schema. This enables you to mix and match data sources. The AppSync service can also [provision from a schema](https://docs.aws.amazon.com/appsync/latest/devguide/provision-from-schema.html), so if you aren't familiar with AWS services, you can write GraphQL SDL, click a button, and you're automatically up and running. -The real-time functionality in AWS AppSync is controlled via [GraphQL subscriptions with a well-known, event-based pattern](http://graphql.org/blog/subscriptions-in-graphql-and-relay/). Because subscriptions in AWS AppSync are [controlled on the schema](https://docs.aws.amazon.com/appsync/latest/devguide/real-time-data.html) with a GraphQL directive, and a schema can use any data source, this means you can trigger notifications from database operations with Amazon DynamoDB and Amazon Elasticsearch Service, or from other parts of your infrastructure with AWS Lambda. +The real-time functionality in AWS AppSync is controlled via [GraphQL subscriptions with a well-known, event-based pattern](https://graphql.org/blog/subscriptions-in-graphql-and-relay/). Because subscriptions in AWS AppSync are [controlled on the schema](https://docs.aws.amazon.com/appsync/latest/devguide/real-time-data.html) with a GraphQL directive, and a schema can use any data source, this means you can trigger notifications from database operations with Amazon DynamoDB and Amazon Elasticsearch Service, or from other parts of your infrastructure with AWS Lambda. In a way similar to AWS Amplify, you can use [enterprise security features](https://docs.aws.amazon.com/appsync/latest/devguide/security.html) on your GraphQL API with AWS AppSync. The service lets you get started quickly with API keys. However, as you roll to production it can transition to using AWS Identity and Access Management (IAM) or OIDC tokens from Amazon Cognito user pools. You can control access at the resolver level with policies on types. You can even use logical checks for [fine-grained access control](https://docs.aws.amazon.com/appsync/latest/devguide/security.html#fine-grained-access-control) checks at run time, such as detecting if a user is the owner of a specific database resource. There are also capabilities around checking group membership for executing resolvers or individual database record access. diff --git a/website/blog/2018-03-22-building-input-accessory-view-for-react-native.md b/website/blog/2018-03-22-building-input-accessory-view-for-react-native.md index 4f24089d935..33194f0617f 100644 --- a/website/blog/2018-03-22-building-input-accessory-view-for-react-native.md +++ b/website/blog/2018-03-22-building-input-accessory-view-for-react-native.md @@ -38,7 +38,7 @@ Here, the text input is actually part of the input accessory view itself. This i
-Who owns the `` in this example? Can it be the `UITextView` or `UITextField` again? The text input is _inside_ the input accessory view, this sounds like a circular dependency. Solving this issue alone is [another blog post](http://derpturkey.com/uitextfield-docked-like-ios-messenger/) in itself. Spoilers: the owner is a generic `UIView` subclass who we manually tell to [becomeFirstResponder](https://developer.apple.com/documentation/uikit/uiresponder/1621113-becomefirstresponder?language=objc). +Who owns the `` in this example? Can it be the `UITextView` or `UITextField` again? The text input is _inside_ the input accessory view, this sounds like a circular dependency. Solving this issue alone is [another blog post](https://derpturkey.com/uitextfield-docked-like-ios-messenger/) in itself. Spoilers: the owner is a generic `UIView` subclass who we manually tell to [becomeFirstResponder](https://developer.apple.com/documentation/uikit/uiresponder/1621113-becomefirstresponder?language=objc). ## API Design @@ -73,7 +73,7 @@ On iPhone X, text and emoji keyboard are different heights. Most applications us Another tricky bug we encountered was avoiding the home pill on iPhone X. You may be thinking, “Apple developed [safeAreaLayoutGuide](https://developer.apple.com/documentation/uikit/uiview/2891102-safearealayoutguide?language=objc) for this very reason, this is trivial!”. We were just as naive. The first issue is that the native `` implementation has no window to anchor to until the moment it is about to appear. That's alright, we can override `-(BOOL)becomeFirstResponder` and enforce layout constraints there. Adhering to these constraints bumps the accessory view up, but another bug arises: -The input accessory view successfully avoids the home pill, but now content behind the unsafe area is visible. The solution lies in this [radar](http://www.openradar.me/34411433). I wrapped the native `` hierarchy in a container which doesn't conform to the `safeAreaLayoutGuide` constraints. The native container covers the content in the unsafe area, while the `` stays within the safe area boundaries. +The input accessory view successfully avoids the home pill, but now content behind the unsafe area is visible. The solution lies in this [radar](https://www.openradar.me/34411433). I wrapped the native `` hierarchy in a container which doesn't conform to the `safeAreaLayoutGuide` constraints. The native container covers the content in the unsafe area, while the `` stays within the safe area boundaries.
diff --git a/website/blog/2018-05-07-using-typescript-with-react-native.md b/website/blog/2018-05-07-using-typescript-with-react-native.md index ec571d6a107..71d928b8045 100644 --- a/website/blog/2018-05-07-using-typescript-with-react-native.md +++ b/website/blog/2018-05-07-using-typescript-with-react-native.md @@ -302,6 +302,6 @@ The first time the test is run, it will create a snapshot of the rendered compon ## Next Steps -Check out the official [React tutorial](https://reactjs.org/tutorial/tutorial.html) and state-management library [Redux](http://redux.js.org). These resources can be helpful when writing React Native apps. Additionally, you may want to look at [ReactXP](https://microsoft.github.io/reactxp/), a component library written entirely in TypeScript that supports both React on the web as well as React Native. +Check out the official [React tutorial](https://reactjs.org/tutorial/tutorial.html) and state-management library [Redux](https://redux.js.org). These resources can be helpful when writing React Native apps. Additionally, you may want to look at [ReactXP](https://microsoft.github.io/reactxp/), a component library written entirely in TypeScript that supports both React on the web as well as React Native. Have fun in a more type-safe React Native development environment! diff --git a/website/blog/2019-06-12-react-native-open-source-update.md b/website/blog/2019-06-12-react-native-open-source-update.md index 48375551d1d..0e2a59d711c 100644 --- a/website/blog/2019-06-12-react-native-open-source-update.md +++ b/website/blog/2019-06-12-react-native-open-source-update.md @@ -25,7 +25,7 @@ We’d like to highlight a number of recent contributions which we thought were - [Support for iOS Accessibility flags](https://github.com/facebook/react-native/pull/23913) and [support for "reduce motion"](https://github.com/facebook/react-native/pull/23839). - [Android keyboard accessibility improvements](https://github.com/facebook/react-native/pull/24359). Added a `clickable` prop and an `onClick` callback for invoking actions via keyboard navigation _(note: this will soon be renamed to `focusable`)._ - [Use CALayers to draw text](https://github.com/facebook/react-native/pull/24387). Fixed an issue that made scaled-up text disappear on iOS. -- **New App Screen:** The community came up with a [design for the new app screen](https://github.com/react-native-community/discussions-and-proposals/issues/122) that is implemented in 0.60. This screen is what most people see when they are first using React Native. It now links first time users to the documentation and the look fits with our upcoming website redesign 🌟. Huge thanks to [Orta](http://twitter.com/orta), [Adam Shurson](https://www.linkedin.com/in/ashurson/), [Glauber Castro](https://github.com/glauberfc), [Karan Singh](https://github.com/karanpratapsingh), [Eli Perkins](https://twitter.com/_eliperkins), [Lucas Bento](https://twitter.com/lbentosilva) and [Eric Lewis](https://twitter.com/ericlewis) for all their work and collaboration! +- **New App Screen:** The community came up with a [design for the new app screen](https://github.com/react-native-community/discussions-and-proposals/issues/122) that is implemented in 0.60. This screen is what most people see when they are first using React Native. It now links first time users to the documentation and the look fits with our upcoming website redesign 🌟. Huge thanks to [Orta](https://twitter.com/orta), [Adam Shurson](https://www.linkedin.com/in/ashurson/), [Glauber Castro](https://github.com/glauberfc), [Karan Singh](https://github.com/karanpratapsingh), [Eli Perkins](https://twitter.com/_eliperkins), [Lucas Bento](https://twitter.com/lbentosilva) and [Eric Lewis](https://twitter.com/ericlewis) for all their work and collaboration! - Check out the new app screen on the “*[React Native Show](https://www.youtube.com/watch?v=ImlAqMZxveg)“ *video series. - **TurboModule Types:** The new [TurboModules system](https://github.com/react-native-community/discussions-and-proposals/issues/40) requires [types for all native modules](https://github.com/facebook/react-native/issues/24875) to guarantee type safe operations in native. In just over two weeks, the community sent ~40 Pull Requests to complete this work for flow typed native modules. Aside from the people already mentioned above, we’d like to thank [Michał Chudziak](https://twitter.com/michalchudziak), [Michał Pierzchała](https://twitter.com/thymikee), [Wojtek Szafraniec](https://github.com/wojteg1337), and [Jean Regisser](https://github.com/jeanregisser) and everyone else who sent one or more Pull Requests. - **Haste:** Since 2015 React Native used the [“haste” module system](https://github.com/reactjs/reactjs.org/commit/0629e3e2289ed54fac854472aec9a5f6c8318c98#diff-c42b758729cb89976b3a8fd51d1227fa) that allows importing modules just via a global id instead of a relative path which is convenient but not well supported by many tools. [James Ide](https://twitter.com/JI) proposed removing haste, similar to how React removed haste many years ago. He planned all the work through an [umbrella task](https://github.com/facebook/react-native/issues/24316) and he sent 18 Pull Requests to make it happen! Check out [his Twitter thread](https://twitter.com/JI/status/1136369775083319296) to learn more. diff --git a/website/blog/2021-04-08-GAAD-March-Accessibility-Issue-Update.md b/website/blog/2021-04-08-GAAD-March-Accessibility-Issue-Update.md index 5528b31b4af..25148f35520 100644 --- a/website/blog/2021-04-08-GAAD-March-Accessibility-Issue-Update.md +++ b/website/blog/2021-04-08-GAAD-March-Accessibility-Issue-Update.md @@ -22,7 +22,7 @@ Thank you to all the community members who have participated. You are truly movi - [feat: set disabled accessibilityState when TouchableHighlight is disabled #31135](https://github.com/facebook/react-native/pull/31135) closed by [@natural_clar](https://twitter.com/natural_clar) -- [[Android] Selected State does not annonce when TextInput Component selected #31144](https://github.com/facebook/react-native/pull/31144) closed by [fabriziobertoglio1987](http://fabriziobertoglio1987) +- [[Android] Selected State does not annonce when TextInput Component selected #31144](https://github.com/facebook/react-native/pull/31144) closed by [fabriziobertoglio1987](https://fabriziobertoglio.xyz/) - [Added talkback support for TouchableNativeFeedback accessibility: disabled prop #31224](https://github.com/facebook/react-native/pull/31224) closed by [@kyamashiro73](https://twitter.com/kyamashiro73) diff --git a/website/blog/2021-08-26-many-platform-vision.md b/website/blog/2021-08-26-many-platform-vision.md index af8a739d196..4ecafdb4699 100644 --- a/website/blog/2021-08-26-many-platform-vision.md +++ b/website/blog/2021-08-26-many-platform-vision.md @@ -41,7 +41,7 @@ One of the best outcomes of cross-platform frameworks like React Native is how t As an example, the accessibility abstractions in React Native are influenced by how Android, iOS, and web each approach accessibility in different ways. This enabled us to build a common interface that improves how accessibility hints are handled on both mobile platforms. -As another example, our research into user perception of speed on the web led to concurrent features like Suspense. Over the past year, these features were vetted by the new [Facebook.com](http://facebook.com/) website. Now with our new renderer, these features are making their way to React Native and influencing how we design event scheduling and priorities. The React team’s investment into improving the web experience is benefiting React Native for native platforms. +As another example, our research into user perception of speed on the web led to concurrent features like Suspense. Over the past year, these features were vetted by the new [Facebook.com](https://facebook.com/) website. Now with our new renderer, these features are making their way to React Native and influencing how we design event scheduling and priorities. The React team’s investment into improving the web experience is benefiting React Native for native platforms. ### Competition Drives Innovation @@ -49,12 +49,12 @@ In addition to domain-specific engineers and meetups and conferences, each platf -**We believe that competition leads to better outcomes for everyone in the long run.** By studying what makes other players on each platform great, we can learn lessons that may apply to other platforms. For example, the race to simplify complex websites influenced the development of React and gave React Native a head start to offer a declarative framework for mobile apps. The demand for faster iteration cycles and build times for the web also led to the development of Fast Refresh which significantly benefited React Native. Similarly, performance optimizations in our internal mobile frameworks — especially around data fetching and parallelization — challenged us to improve React Native in a way that has also influenced React when we built the new [Facebook.com](http://facebook.com/) website. +**We believe that competition leads to better outcomes for everyone in the long run.** By studying what makes other players on each platform great, we can learn lessons that may apply to other platforms. For example, the race to simplify complex websites influenced the development of React and gave React Native a head start to offer a declarative framework for mobile apps. The demand for faster iteration cycles and build times for the web also led to the development of Fast Refresh which significantly benefited React Native. Similarly, performance optimizations in our internal mobile frameworks — especially around data fetching and parallelization — challenged us to improve React Native in a way that has also influenced React when we built the new [Facebook.com](https://facebook.com/) website.
Screenshot of the Facebook.com website
- React and Relay powers the Facebook.com website. + React and Relay powers the Facebook.com website.
diff --git a/website/blog/2023-01-12-version-071.md b/website/blog/2023-01-12-version-071.md index 2e74253f326..55f537d2920 100644 --- a/website/blog/2023-01-12-version-071.md +++ b/website/blog/2023-01-12-version-071.md @@ -214,7 +214,7 @@ We especially want to thank those who contributed to these major React Native pr - **Flexbox Gap Support**: [@intergalacticspacehighway](https://github.com/intergalacticspacehighway) and [@jacobp100](https://github.com/jacobp100). - **Web-inspired props**: [@gabrieldonadel](https://github.com/gabrieldonadel) [@dakshbhardwaj](https://github.com/dakshbhardwaj) [@dhruvtailor7](https://github.com/dhruvtailor7) [@ankit-tailor](https://github.com/ankit-tailor) [@madhav23bansal](https://github.com/madhav23bansal). -- **Codegen Improvements**: [@AntoineDoubovetzky](http://github.com/AntoineDoubovetzky), [@MaeIg](http://github.com/MaeIg), [@Marcoo09](http://github.com/Marcoo09), [@Naturalclar](http://github.com/Naturalclar), [@Pranav-yadav](http://github.com/Pranav-yadav), [@ZihanChen-MSFT](http://github.com/ZihanChen-MSFT), [@dakshbhardwaj](http://github.com/dakshbhardwaj), [@dhruvtailor7](http://github.com/dhruvtailor7), [@gabrieldonadel](http://github.com/gabrieldonadel), [@harshsiri110](http://github.com/harshsiri110), [@ken0nek](http://github.com/ken0nek), [@kylemacabasco](http://github.com/kylemacabasco), [@matiassalles99](http://github.com/matiassalles99), [@mdaj06](http://github.com/mdaj06), [@mohitcharkha](http://github.com/mohitcharkha), [@tarunrajput](http://github.com/tarunrajput), [@vinayharwani13](http://github.com/vinayharwani13), [@youedd](http://github.com/youedd), [@byCedric](http://github.com/byCedric). +- **Codegen Improvements**: [@AntoineDoubovetzky](https://github.com/AntoineDoubovetzky), [@MaeIg](https://github.com/MaeIg), [@Marcoo09](https://github.com/Marcoo09), [@Naturalclar](https://github.com/Naturalclar), [@Pranav-yadav](https://github.com/Pranav-yadav), [@ZihanChen-MSFT](https://github.com/ZihanChen-MSFT), [@dakshbhardwaj](https://github.com/dakshbhardwaj), [@dhruvtailor7](https://github.com/dhruvtailor7), [@gabrieldonadel](https://github.com/gabrieldonadel), [@harshsiri110](https://github.com/harshsiri110), [@ken0nek](https://github.com/ken0nek), [@kylemacabasco](https://github.com/kylemacabasco), [@matiassalles99](https://github.com/matiassalles99), [@mdaj06](https://github.com/mdaj06), [@mohitcharkha](https://github.com/mohitcharkha), [@tarunrajput](https://github.com/tarunrajput), [@vinayharwani13](https://github.com/vinayharwani13), [@youedd](https://github.com/youedd), [@byCedric](https://github.com/byCedric). Finally, thanks to [@cortinico](https://github.com/cortinico), [@kelset](https://github.com/kelset), [@dmytrorykun](https://github.com/dmytrorykun), [@cipolleschi](https://github.com/cipolleschi), and [@titozzz](https://github.com/titozzz) for cutting this release! diff --git a/website/community/communities.md b/website/community/communities.md index cdc327defc2..1f9ddd92bdb 100644 --- a/website/community/communities.md +++ b/website/community/communities.md @@ -7,7 +7,7 @@ The React Native ecosystem is far and wide, and people can be part of it in many ### Local communities -There are a lot of React Native gatherings that happen around the world. Often there is React Native content in React meetups as well, use tools like [Meetup](http://www.meetup.com/topics/react-native/) and [Eventbrite](https://www.eventbrite.co.uk/d/online/react-native/?page=1) to find out recent events in your area - or start one! +There are a lot of React Native gatherings that happen around the world. Often there is React Native content in React meetups as well, use tools like [Meetup](https://www.meetup.com/topics/react-native/) and [Eventbrite](https://www.eventbrite.co.uk/d/online/react-native/?page=1) to find out recent events in your area - or start one! ### Company-based communities @@ -15,7 +15,7 @@ Some companies actively involved in the React Native have also their own communi - [Callstack.io's](https://www.callstack.com/) [Discord server](https://discordapp.com/invite/zwR2Cdh) - [Invertase.io's (e.g. React Native Firebase)](https://invertase.io/) [Discord server](https://discord.gg/C9aK28N) -- [Infinite Red's](https://infinite.red/) [Slack Group](http://community.infinite.red/) +- [Infinite Red's](https://infinite.red/) [Slack Group](https://community.infinite.red/) - [Expo's](https://expo.dev/) [Discord server](https://chat.expo.dev/) ### Content sharing diff --git a/website/community/support.md b/website/community/support.md index ab0ccb124b1..59a6ffcb45c 100644 --- a/website/community/support.md +++ b/website/community/support.md @@ -20,7 +20,7 @@ Many times, when upgrading your apps and libraries from a version of React Nativ ### Stack Overflow -Many members of the community use Stack Overflow to ask questions. Read through the [existing questions](http://stackoverflow.com/questions/tagged/react-native?sort=frequent) tagged with **react-native** or [ask your own](http://stackoverflow.com/questions/ask?tags=react-native)! +Many members of the community use Stack Overflow to ask questions. Read through the [existing questions](https://stackoverflow.com/questions/tagged/react-native?sort=frequent) tagged with **react-native** or [ask your own](https://stackoverflow.com/questions/ask?tags=react-native)! ### Reactiflux Chat diff --git a/website/contributing/contributing-overview.md b/website/contributing/contributing-overview.md index 58130ea7274..0f88f391908 100644 --- a/website/contributing/contributing-overview.md +++ b/website/contributing/contributing-overview.md @@ -54,7 +54,7 @@ You can learn more about the contribution process in the following documents: - [Triaging GitHub Issues](/contributing/triaging-github-issues) - [Managing Pull Requests](/contributing/managing-pull-requests) -We also have a thriving community of contributors who would be happy to help you get set up. You can reach out to the React Native team through [@ReactNative](http://twitter.com/reactnative). +We also have a thriving community of contributors who would be happy to help you get set up. You can reach out to the React Native team through [@ReactNative](https://twitter.com/reactnative). ### Repositories @@ -89,7 +89,7 @@ If you are adding new functionality or introducing a change in behavior, we will The React Native blog is generated [from the Markdown sources for the blog](https://github.com/facebook/react-native-website/tree/HEAD/website/blog). -Please open an issue in the React Native website repository or tag us on [@ReactNative on Twitter](http://twitter.com/reactnative) and get the go-ahead from a maintainer before writing an article intended for the React Native blog. +Please open an issue in the React Native website repository or tag us on [@ReactNative on Twitter](https://twitter.com/reactnative) and get the go-ahead from a maintainer before writing an article intended for the React Native blog. In most cases, you might want to share your article on your own blog or writing medium instead. It's worth asking, though, in case we find your article is a good fit for the blog. We recommend referring to the `react-native-website` repository [Readme file](https://github.com/facebook/react-native-website#-contributing) to learn more about contributing to the website in general. diff --git a/website/contributing/triaging-github-issues.md b/website/contributing/triaging-github-issues.md index bafc70e491c..a08dc8dd9d9 100644 --- a/website/contributing/triaging-github-issues.md +++ b/website/contributing/triaging-github-issues.md @@ -13,25 +13,25 @@ Start out by looking at issues that need triage, as identified by the ["Needs: T We sometimes get issues that are quite not appropriate for the GitHub issue tracker. Add the "Type: Invalid" label, and a bot will close the issue automatically. ::: -Once you get to this point, you can transition to parsing the content of the issue itself. Does this issue include a **clear description** of the problem? +Once you get to this point, you can transition to parsing the content of the issue itself. Does this issue include a **clear description** of the problem? -If not, _politely_ ask the issue author to update their issue with the necessary information, and apply a "Needs: Author Feedback" label. +If not, _politely_ ask the issue author to update their issue with the necessary information, and apply a "Needs: Author Feedback" label. We aim to always be friendly and helpful and expect the same from every member of our community. ## Improving an Issue -If the issue contains all the necessary information, take a moment to consider if the issue can still be improved in some way. Is the formatting alright? You may lightly edit the issue to improve readability as needed. +If the issue contains all the necessary information, take a moment to consider if the issue can still be improved in some way. Is the formatting alright? You may lightly edit the issue to improve readability as needed. -If the issue contains an unformatted block of code, surround it with three back ticks (```) to convert it into a markdown code block. +If the issue contains an unformatted block of code, surround it with three back ticks (```) to convert it into a markdown code block. Are there any labels you can add to help categorize it better? If the issue only affects Android apps, you may add a "Platform: Android" label. Perhaps the issue only manifests itself when developing on Windows, in which case you might add the "Platform: Windows" label. -We have a long list of [labels](http://github.com/facebook/react-native/issues/labels), please take a look and see if anything might apply! +We have a long list of [labels](https://github.com/facebook/react-native/issues/labels), please take a look and see if anything might apply! ## Handling Duplicates -As you work through these issues, you will start to get a better understanding of the type of problems that get reported. You may even start noticing the same issue gets reported. +As you work through these issues, you will start to get a better understanding of the type of problems that get reported. You may even start noticing the same issue gets reported. In these cases, you can close the issue and add a comment that says "Duplicate of #issue". By following this convention, GitHub will automatically mark the issue as a duplicate. @@ -41,7 +41,7 @@ Next up, we need to determine how severe the issue is. ### Is this a potential **release blocker**? -These issues should be addressed within the next week or two, as they may prevent release coordinators from cutting a clean release candidate. +These issues should be addressed within the next week or two, as they may prevent release coordinators from cutting a clean release candidate. Issues that might be labeled as such could be regressions that break one of our pre-commit tests. Avoid flagging an issue as a release blocker if it has been around for some time (if the issue is already present in one or more releases, it cannot be a RC blocker by definition). diff --git a/website/showcase.json b/website/showcase.json index 6b93902d179..3de2150911f 100644 --- a/website/showcase.json +++ b/website/showcase.json @@ -295,7 +295,7 @@ "icon": "baidu.png", "linkPlayStore": "https://play.google.com/store/apps/details?id=com.baidu.searchbox&hl=en&gl=US", "linkAppStore": "https://apps.apple.com/us/app/%E6%89%8B%E6%9C%BA%E7%99%BE%E5%BA%A6-%E7%99%BE%E5%BA%A6%E4%B8%80%E4%B8%8B%E4%BD%A0%E5%B0%B1%E5%BE%97%E5%88%B0/id382201985", - "infoLink": "http://baike.baidu.com/link?url=TW8YhcVN4tO_Jz5VqMclCjGhf12EEqMD_TeVC6efe2REZlx80r6T0dX96hdmNl36XogLyExXzrvFU9rFeqxg_K", + "infoLink": "https://baike.baidu.com/link?url=TW8YhcVN4tO_Jz5VqMclCjGhf12EEqMD_TeVC6efe2REZlx80r6T0dX96hdmNl36XogLyExXzrvFU9rFeqxg_K", "infoTitle": "Baidu Mobile is a search engine used by over 600 million people in China" }, { @@ -319,7 +319,7 @@ "icon": "jdcom.png", "linkAppStore": "https://itunes.apple.com/cn/app/shou-ji-jing-dong-xin-ren/id414245413?mt=8", "linkPlayStore": "https://app.jd.com/android.html", - "infoLink": "http://ir.jd.com/phoenix.zhtml?c=253315&p=irol-homeProfile", + "infoLink": "https://ir.jd.com/phoenix.zhtml?c=253315&p=irol-homeProfile", "infoTitle": "JD.com is China’s largest ecommerce company by revenue and a member of the Fortune Global 500." }, {