diff --git a/docs/_getting-started-linux-android.md b/docs/_getting-started-linux-android.md index 2cfb56a450d..5816574984c 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 17 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

@@ -126,9 +126,7 @@ Click "Next" then "Finish" to create your AVD. At this point you should be able

Step 1: Start Metro

-First, you will need to start Metro, the JavaScript bundler that ships with React Native. Metro "takes in an entry file and various options, and returns a single JavaScript file that includes all your code and its dependencies."—[Metro Docs](https://facebook.github.io/metro/docs/concepts) - -To start Metro, run following command inside your React Native project folder: +[**Metro**](https://facebook.github.io/metro/) is the JavaScript build tool for React Native. To start the Metro development server, run the following from your project folder: @@ -147,7 +145,9 @@ yarn start -> If you're familiar with web development, Metro is a lot like webpack—for React Native apps. Unlike Kotlin or Java, JavaScript isn't compiled—and neither is React Native. Bundling isn't the same as compiling, but it can help improve startup performance and translate some platform-specific JavaScript into more widely supported JavaScript. +:::note +If you're familiar with web development, Metro is similar to bundlers such as Vite and Webpack, but is designed end-to-end for React Native. For instance, Metro uses [Babel](https://babel.dev/) to transform syntax such as JSX into executable JavaScript. +:::

Step 2: Start your application

diff --git a/docs/_getting-started-macos-android.md b/docs/_getting-started-macos-android.md index 63c4745095f..cb546bee6a6 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,21 +22,21 @@ 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 -brew install --cask zulu11 +brew install --cask zulu17 # Get path to where cask was installed to double-click installer -brew info --cask zulu11 +brew info --cask zulu17 ``` -After you install the JDK, update your `JAVA_HOME` environment variable. If you used above steps, JDK will likely be at `/Library/Java/JavaVirtualMachines/zulu-11.jdk/Contents/Home` +After you install the JDK, update your `JAVA_HOME` environment variable. If you used above steps, JDK will likely be at `/Library/Java/JavaVirtualMachines/zulu-17.jdk/Contents/Home` The Zulu OpenJDK distribution offers JDKs for **both Intel and M1 Macs**. This will make sure your builds are faster on M1 Macs compared to using an Intel-based JDK. -If you have already installed JDK on your system, we recommend JDK 11. You may encounter problems using higher JDK versions. +If you have already installed JDK on your system, we recommend JDK 17. You may encounter problems using higher JDK versions.

Android development environment

@@ -141,9 +141,7 @@ Click "Next" then "Finish" to create your AVD. At this point you should be able

Step 1: Start Metro

-First, you will need to start Metro, the JavaScript bundler that ships with React Native. Metro "takes in an entry file and various options, and returns a single JavaScript file that includes all your code and its dependencies."—[Metro Docs](https://facebook.github.io/metro/docs/concepts) - -To start Metro, run following command inside your React Native project folder: +[**Metro**](https://facebook.github.io/metro/) is the JavaScript build tool for React Native. To start the Metro development server, run the following from your project folder: @@ -162,7 +160,9 @@ yarn start -> If you're familiar with web development, Metro is a lot like webpack—for React Native apps. Unlike Kotlin or Java, JavaScript isn't compiled—and neither is React Native. Bundling isn't the same as compiling, but it can help improve startup performance and translate some platform-specific JavaScript into more widely supported JavaScript. +:::note +If you're familiar with web development, Metro is similar to bundlers such as Vite and Webpack, but is designed end-to-end for React Native. For instance, Metro uses [Babel](https://babel.dev/) to transform syntax such as JSX into executable JavaScript. +:::

Step 2: Start your application

diff --git a/docs/_getting-started-macos-ios.md b/docs/_getting-started-macos-ios.md index 7cdafddbf2a..856ea4acd09 100644 --- a/docs/_getting-started-macos-ios.md +++ b/docs/_getting-started-macos-ios.md @@ -1,3 +1,4 @@ +import Anchor from './Anchor.jsx'; import RemoveGlobalCLI from './\_remove-global-cli.md'; import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; @@ -9,7 +10,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 +91,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" @@ -104,9 +105,7 @@ You might also want to ensure that all "shell script build phase" of your Xcode ### Step 1: Start Metro -First, you will need to start Metro, the JavaScript bundler that ships with React Native. Metro "takes in an entry file and various options, and returns a single JavaScript file that includes all your code and its dependencies."—[Metro Docs](https://facebook.github.io/metro/docs/concepts) - -To start Metro, run following command inside your React Native project folder: +[**Metro**](https://facebook.github.io/metro/) is the JavaScript build tool for React Native. To start the Metro development server, run the following from your project folder: @@ -125,7 +124,9 @@ yarn start -> If you're familiar with web development, Metro is a lot like webpack—for React Native apps. Unlike Swift or Objective-C, JavaScript isn't compiled—and neither is React Native. Bundling isn't the same as compiling, but it can help improve startup performance and translate some platform-specific JavaScript into more widely supported JavaScript. +:::note +If you're familiar with web development, Metro is similar to bundlers such as Vite and Webpack, but is designed end-to-end for React Native. For instance, Metro uses [Babel](https://babel.dev/) to transform syntax such as JSX into executable JavaScript. +::: ### Step 2: Start your application diff --git a/docs/_getting-started-windows-android.md b/docs/_getting-started-windows-android.md index efb304be7f1..49ba9dbf50e 100644 --- a/docs/_getting-started-windows-android.md +++ b/docs/_getting-started-windows-android.md @@ -13,15 +13,15 @@ We recommend installing Node via [Chocolatey](https://chocolatey.org), a popular It is recommended to use an LTS version of Node. If you want to be able to switch between different versions, you might want to install Node via [nvm-windows](https://github.com/coreybutler/nvm-windows), a Node version manager for Windows. -React Native also requires [Java SE Development Kit (JDK)](https://openjdk.java.net/projects/jdk/11/), which can be installed using Chocolatey as well. +React Native also requires [Java SE Development Kit (JDK)](https://openjdk.java.net/projects/jdk/17/), which can be installed using Chocolatey as well. Open an Administrator Command Prompt (right click Command Prompt and select "Run as Administrator"), then run the following command: ```powershell -choco install -y nodejs-lts microsoft-openjdk11 +choco install -y nodejs-lts microsoft-openjdk17 ``` -If you have already installed Node on your system, make sure it is Node 16 or newer. If you already have a JDK on your system, we recommend JDK11. You may encounter problems using higher JDK versions. +If you have already installed Node on your system, make sure it is Node 16 or newer. If you already have a JDK on your system, we recommend JDK17. You may encounter problems using higher JDK versions. > You can find additional installation options on [Node's Downloads page](https://nodejs.org/en/download/). @@ -157,9 +157,7 @@ Click "Next" then "Finish" to create your AVD. At this point you should be able

Step 1: Start Metro

-First, you will need to start Metro, the JavaScript bundler that ships with React Native. Metro "takes in an entry file and various options, and returns a single JavaScript file that includes all your code and its dependencies."—[Metro Docs](https://facebook.github.io/metro/docs/concepts) - -To start Metro, run following command inside your React Native project folder: +[**Metro**](https://facebook.github.io/metro/) is the JavaScript build tool for React Native. To start the Metro development server, run the following from your project folder: @@ -178,7 +176,9 @@ yarn start -> If you're familiar with web development, Metro is a lot like webpack—for React Native apps. Unlike Kotlin or Java, JavaScript isn't compiled—and neither is React Native. Bundling isn't the same as compiling, but it can help improve startup performance and translate some platform-specific JavaScript into more widely supported JavaScript. +:::note +If you're familiar with web development, Metro is similar to bundlers such as Vite and Webpack, but is designed end-to-end for React Native. For instance, Metro uses [Babel](https://babel.dev/) to transform syntax such as JSX into executable JavaScript. +:::

Step 2: Start your application

diff --git a/docs/_integration-with-existing-apps-java.md b/docs/_integration-with-existing-apps-java.md index ae5d98cacec..d5f3cb0a5ca 100644 --- a/docs/_integration-with-existing-apps-java.md +++ b/docs/_integration-with-existing-apps-java.md @@ -88,7 +88,7 @@ React Native uses the React Native Gradle Plugin to configure your dependencies First, let's edit your `settings.gradle` file by adding this line: ```groovy -includeBuild('../node_modules/react-native-gradle-plugin') +includeBuild('../node_modules/@react-native/gradle-plugin') ``` Then you need to open your top level `build.gradle` and include this line: diff --git a/docs/_integration-with-existing-apps-kotlin.md b/docs/_integration-with-existing-apps-kotlin.md index 5183eab9e69..c2c7e68081e 100644 --- a/docs/_integration-with-existing-apps-kotlin.md +++ b/docs/_integration-with-existing-apps-kotlin.md @@ -88,7 +88,7 @@ React Native uses the React Native Gradle Plugin to configure your dependencies First, let's edit your `settings.gradle` file by adding this line: ```groovy -includeBuild('../node_modules/react-native-gradle-plugin') +includeBuild('../node_modules/@react-native/gradle-plugin') ``` Then you need to open your top level `build.gradle` and include this line: 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..1ef41381c7d 100644 --- a/docs/debugging.md +++ b/docs/debugging.md @@ -56,23 +56,44 @@ Unhandled JavaScript errors such as `undefined is not a function` will automatic When syntax error occurs the full screen LogBox error will automatically open with the stack trace and location of the syntax error. This error is not dismissable because it represents invalid JavaScript execution that must be fixed before continuing with your app. To dismiss these errors, fix the syntax error and either save to automatically dismiss (with Fast Refresh enabled) or Cmd ⌘/Ctrl + R to reload (with Fast Refresh disabled). -## Chrome Developer Tools +## JavaScript debugging + +### Flipper + +To debug JavaScript code in Flipper, select "Open Debugger" from the Dev Menu. This will automatically open the debugger tab inside Flipper. + +To install and get started with Flipper, follow [this guide](https://fbflipper.com/docs/getting-started/). -To debug JavaScript code in Chrome, select "Open Debugger" from the Dev Menu. This will open a new tab at [http://localhost:8081/debugger-ui](http://localhost:8081/debugger-ui). +### Expo CLI -From here, select `More Tools → Developer Tools` from the Chrome menu to open [Chrome DevTools](https://developer.chrome.com/devtools). Alternatively, you can use the shortcut ⌥ Option + Cmd ⌘ + I (macOS) / Ctrl + Shift + I (Windows and Linux). +If you're using Expo CLI in a project running with Hermes, you can debug your JavaScript code by starting your project with `npx expo start` and then pressing j to open the debugger in Google Chrome or Microsoft Edge. -- If you're new to Chrome DevTools, we recommend learning about the [Console](https://developer.chrome.com/docs/devtools/#console) and [Sources](https://developer.chrome.com/docs/devtools/#sources) tabs in the docs. -- You may want to enable [Pause on Caught Exceptions](https://developer.chrome.com/docs/devtools/javascript/breakpoints/#exceptions) for a better debugging experience. +## Chrome Developer Tools :::info -The React Developer Tools Chrome extension does not work with React Native, but you can use its standalone version instead. Read [this section](debugging.md#react-developer-tools) to learn how. -::: +**Starting from version 0.73, Remote Debugging is deprecated.** These Chrome DevTools steps use the _Remote Debugging_ workflow, where JS code is executed in Chrome's V8 engine on the dev machine during debugging, instead of on-device. This method is incompatible with some New Architecture features such as JSI. -:::note -On Android, if the times between the debugger and device have drifted, things such as animations and event behavior might not work properly. This can be fixed by running `` adb shell "date `date +%m%d%H%M%Y.%S%3N`" ``. Root access is required if using a physical device. +Please prefer using Flipper or [direct debugging with Safari](#safari-developer-tools). ::: +
+Re-enabling Remote Debugging in React Native 0.73 + +If your project still relies on this feature, you can manually enable it manually through the `NativeDevSettings.setIsDebuggingRemotely` function. + +```jsx +import NativeDevSettings from 'react-native/Libraries/NativeModules/specs/NativeDevSettings'; +export default function App() { + useEffect(() => { + NativeDevSettings.setIsDebuggingRemotely(true); + }, []); + + return ; +} +``` + +
+ ### Debugging on a physical device :::info @@ -87,7 +108,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 @@ -117,14 +138,14 @@ Custom debugger commands executed this way should be short-lived processes, and ## Safari Developer Tools -You can use Safari to debug the iOS version of your app without having to enable "Debug JS Remotely". +You can use Safari to debug the iOS version of your app when using JSC. - On a physical device go to: `Settings → Safari → Advanced → Make sure "Web Inspector" is turned on` (This step is not needed on the Simulator) - On your Mac enable Develop menu in Safari: `Settings... (or Preferences...) → Advanced → Select "Show Develop menu in menu bar"` - 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/hermes.md b/docs/hermes.md index e8a401bb80a..18b7ebf6bbb 100644 --- a/docs/hermes.md +++ b/docs/hermes.md @@ -95,7 +95,7 @@ This will compile JavaScript to bytecode during build time which will improve yo Hermes supports the Chrome debugger by implementing the Chrome inspector protocol. This means Chrome's tools can be used to directly debug JavaScript running on Hermes, on an emulator or on a real, physical, device. :::info -Note that this is very different with the "Remote JS Debugging" from the In-App Dev Menu documented in the [Debugging](debugging#debugging-using-a-custom-javascript-debugger) section, which actually runs the JS code on Chrome's V8 on your development machine (laptop or desktop). +Note that this is very different with the deprecated "Remote JS Debugging" from the In-App Dev Menu documented in the [Debugging](debugging#remote-debugging) section, which actually runs the JS code on Chrome's V8 on your development machine (laptop or desktop) instead of connecting to the JS engine running the app on your device. ::: Chrome connects to Hermes running on device via Metro, so you'll need to know where Metro is listening. Typically this will be on `localhost:8081`, but this is [configurable](https://facebook.github.io/metro/docs/configuration). When running `yarn start` the address is written to stdout on startup. 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/metro.md b/docs/metro.md new file mode 100644 index 00000000000..42ea16ca033 --- /dev/null +++ b/docs/metro.md @@ -0,0 +1,104 @@ +--- +id: metro +title: Metro +--- + +React Native uses [Metro](https://facebook.github.io/metro/) to build your JavaScript code and assets. + +## Configuring Metro + +Configuration options for Metro can be customized in your project's `metro.config.js` file. This can export either: + +- **An object (recommended)** that will be merged on top of Metro's internal config defaults. +- [**A function**](#advanced-using-a-config-function) that will be called with Metro's internal config defaults and should return a final config object. + +:::tip +Please see [**Configuring Metro**](https://facebook.github.io/metro/docs/configuration) on the Metro website for documentation on all available config options. +::: + +In React Native, your Metro config should extend either [`@react-native/metro-config`](https://www.npmjs.com/package/@react-native/metro-config) or [`@expo/metro-config`](https://www.npmjs.com/package/@expo/metro-config). These packages contain essential defaults necessary to build and run React Native apps. + +Below is the default `metro.config.js` file in a React Native template project: + + +```js +const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config'); + +/** + * Metro configuration + * https://facebook.github.io/metro/docs/configuration + * + * @type {import('metro-config').MetroConfig} + */ +const config = {}; + +module.exports = mergeConfig(getDefaultConfig(__dirname), config); +``` + +Metro options you wish to customize can be done so within the `config` object. + +### Advanced: Using a config function + +Exporting a config function is an opt-in to managing the final config yourself — **Metro will not apply any internal defaults**. This pattern can be useful when needing to read the base default config object from Metro or to set options dynamically. + +:::info +**From `@react-native/metro-config` 0.72.1**, it is no longer necessary to use a config function to access the complete default config. See the **Tip** section below. +::: + + +```js +const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config'); + +module.exports = function (baseConfig) { + const defaultConfig = mergeConfig(baseConfig, getDefaultConfig(__dirname)); + const {resolver: {assetExts, sourceExts}} = defaultConfig; + + return mergeConfig( + defaultConfig, + { + resolver: { + assetExts: assetExts.filter(ext => ext !== 'svg'), + sourceExts: [...sourceExts, 'svg'], + }, + }, + ); +}; +``` + +:::tip +Using a config function is for advanced use cases. A simpler method than the above, e.g. for customising `sourceExts`, would be to read these defaults from `@react-native/metro-config`. + +**Alternative** + + +```js +const defaultConfig = getDefaultConfig(__dirname); + +const config = { + resolver: { + sourceExts: [...defaultConfig.resolver.sourceExts, 'svg'], + }, +}; + +module.exports = mergeConfig(defaultConfig, config); +``` + +**However!**, we recommend copying and editing when overriding these config values — placing the source of truth in your config file. + +✅ **Recommended** + + +```js +const config = { + resolver: { + sourceExts: ['js', 'ts', 'tsx', 'svg'], + }, +}; +``` + +::: + +## Learn more about Metro + +- [Metro website](https://facebook.github.io/metro/) +- [Video: "Metro & React Native DevX" talk at App.js 2023](https://www.youtube.com/watch?v=c9D4pg0y9cI) diff --git a/docs/native-components-ios.md b/docs/native-components-ios.md index ef590bac188..b16eaf8b30c 100644 --- a/docs/native-components-ios.md +++ b/docs/native-components-ios.md @@ -65,7 +65,7 @@ module.exports = requireNativeComponent('RNTMap'); ``` ```tsx title="MyApp.tsx" -import MapView from './MapView.js'; +import MapView from './MapView.tsx'; ... 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/optimizing-flatlist-configuration.md b/docs/optimizing-flatlist-configuration.md index f8c03ec0095..3d7e60a4188 100644 --- a/docs/optimizing-flatlist-configuration.md +++ b/docs/optimizing-flatlist-configuration.md @@ -93,16 +93,30 @@ The more complex your components are, the slower they will render. Try to avoid The heavier your components are, the slower they render. Avoid heavy images (use a cropped version or thumbnail for list items, as small as possible). Talk to your design team, use as little effects and interactions and information as possible in your list. Show them in your item's detail. -### Use shouldComponentUpdate +### Use `memo()` -Implement update verification to your components. React's `PureComponent` implement a [`shouldComponentUpdate`](https://reactjs.org/docs/react-component.html#shouldcomponentupdate) with shallow comparison. This is expensive here because it needs to check all your props. If you want a good bit-level performance, create the strictest rules for your list item components, checking only props that could potentially change. If your list is basic enough, you could even use +`React.memo()` creates a memoized component that will be re-rendered only when the props passed to the component change. We can use this function to optimize the components in the FlatList. ```tsx -shouldComponentUpdate() { - return false -} +import React, {memo} from 'react'; +import {View, Text} from 'react-native'; + +const MyListItem = memo( + ({title}: {title: string}) => ( + + {title} + + ), + (prevProps, nextProps) => { + return prevProps.title === nextProps.title; + }, +); + +export default MyListItem; ``` +In this example, we have determined that MyListItem should be re-rendered only when the title changes. We passed the comparison function as the second argument to React.memo() so that the component is re-rendered only when the specified prop is changed. If the comparison function returns true, the component will not be re-rendered. + ### Use cached optimized images You can use the community packages (such as [react-native-fast-image](https://github.com/DylanVann/react-native-fast-image) from [@DylanVann](https://github.com/DylanVann)) for more performant images. Every image in your list is a `new Image()` instance. The faster it reaches the `loaded` hook, the faster your JavaScript thread will be free again. diff --git a/docs/performance.md b/docs/performance.md index bb7f4fddc37..b79f9b8e4ff 100644 --- a/docs/performance.md +++ b/docs/performance.md @@ -3,7 +3,7 @@ id: performance title: Performance Overview --- -A compelling reason for using React Native instead of WebView-based tools is to achieve 60 frames per second and a native look and feel to your apps. Where possible, we would like for React Native to do the right thing and help you to focus on your app instead of performance optimization, but there are areas where we're not quite there yet, and others where React Native (similar to writing native code directly) cannot possibly determine the best way to optimize for you and so manual intervention will be necessary. We try our best to deliver buttery-smooth UI performance by default, but sometimes that isn't possible. +A compelling reason to use React Native instead of WebView-based tools is to achieve 60 frames per second and provide a native look and feel to your apps. Whenever feasible, we aim for React Native to handle optimizations automatically, allowing you to focus on your app without worrying about performance. However, there are certain areas where we haven't quite reached that level yet, and others where React Native (similar to writing native code directly) cannot determine the best optimization approach for you. In such cases, manual intervention becomes necessary. We strive to deliver buttery-smooth UI performance by default, but there may be instances where that isn't possible. This guide is intended to teach you some basics to help you to [troubleshoot performance issues](profiling.md), as well as discuss [common sources of problems and their suggested solutions](performance.md#common-sources-of-performance-problems). @@ -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/ram-bundles-inline-requires.md b/docs/ram-bundles-inline-requires.md index b7f5ba9e912..0a69c941ed5 100644 --- a/docs/ram-bundles-inline-requires.md +++ b/docs/ram-bundles-inline-requires.md @@ -148,21 +148,20 @@ Every app is different, but it may make sense to only load the modules you need We now need to update `metro.config.js` in the root of the project to use our newly generated `modulePaths.js` file: + ```js -const modulePaths = require('./packager/modulePaths'); -const resolve = require('path').resolve; +const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config'); const fs = require('fs'); - -// Update the following line if the root folder of your app is somewhere else. -const ROOT_FOLDER = resolve(__dirname, '..'); +const path = require('path'); +const modulePaths = require('./packager/modulePaths'); const config = { transformer: { getTransformOptions: () => { const moduleMap = {}; - modulePaths.forEach(path => { - if (fs.existsSync(path)) { - moduleMap[resolve(path)] = true; + modulePaths.forEach(modulePath => { + if (fs.existsSync(modulePath)) { + moduleMap[path.resolve(modulePath)] = true; } }); return { @@ -171,12 +170,13 @@ const config = { }; }, }, - projectRoot: ROOT_FOLDER, }; -module.exports = config; +module.exports = mergeConfig(getDefaultConfig(__dirname), config); ``` +See also [**Configuring Metro**](/docs/metro#configuring-metro). + The `preloadedModules` entry in the config indicates which modules should be marked as preloaded when building a RAM bundle. When the bundle is loaded, those modules are immediately loaded, before any requires have even executed. The `blockList` entry indicates that those modules should not be required inline. Because they are preloaded, there is no performance benefit from using an inline require. In fact the generated JavaScript spends extra time resolving the inline require every time the imports are referenced. ## Test and Measure Improvements diff --git a/docs/running-on-device.md b/docs/running-on-device.md index fdc03d52686..1efb87399d9 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/text.md b/docs/text.md index b6a12d659ae..444886a2fb5 100644 --- a/docs/text.md +++ b/docs/text.md @@ -545,9 +545,11 @@ Called when a touch is released. The View is now responding to touch events. This is the time to highlight and show the user what is happening. -| Type | -| ------------------------------------------------- | -| ({nativeEvent: [PressEvent](pressevent)}) => void | +On Android, return true from this callback to prevent any other native components from becoming responder until this responder terminates. + +| Type | +| ------------------------------------------------------------ | +| ({nativeEvent: [PressEvent](pressevent)}) => void \| boolean | --- 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/the-new-architecture/backward-compatibility-fabric-components.md b/docs/the-new-architecture/backward-compatibility-fabric-components.md index 99f8d8b35c9..ccd83bde29b 100644 --- a/docs/the-new-architecture/backward-compatibility-fabric-components.md +++ b/docs/the-new-architecture/backward-compatibility-fabric-components.md @@ -257,6 +257,8 @@ The same two lines should be added in the implementation file, as first and last The above snippet uses the same `RCT_NEW_ARCH_ENABLED` flag used in the previous [section](#dependencies-ios). When this flag is not set, Xcode skips the lines within the `#ifdef` during compilation and it does not include them into the compiled binary. The compiled binary will have a the `RNMyComponentView.o` object but it will be an empty object. +After wrapping the above components with a `#ifdef` pragma, you need to implement the component for the legacy architecture, following [the legacy Native Component documentation](https://reactnative.dev/docs/native-components-ios). This is needed because the New Renderer works in a different way from the legacy one, and it is not able to follow the new code's paths of the New Renderer. + ### Android As we can't use conditional compilation blocks on Android, we will define two different source sets. This will allow to create a backward compatible TurboModule with the proper source that is loaded and compiled depending on the used architecture. diff --git a/docs/the-new-architecture/pillars-turbomodule.md b/docs/the-new-architecture/pillars-turbomodule.md index 2a7ab81402b..45443f6fc42 100644 --- a/docs/the-new-architecture/pillars-turbomodule.md +++ b/docs/the-new-architecture/pillars-turbomodule.md @@ -166,7 +166,7 @@ The upper part of the file contains some descriptive information like the name o Then there are the dependencies for this package. For this guide, you need `react` and `react-native`. -Finally, the **Codegen** configuration is specified by the `codegenConfig` field. It contains an array of libraries, each of which is defined by three other fields: +Finally, the **Codegen** configuration is specified by the `codegenConfig` field. It contains an object that defines the module through four fields: - `name`: The name of the library. By convention, you should add the `Spec` suffix. - `type`: The type of module contained by this package. In this case, it is a Turbo Native Module; thus, the value to use is `modules`. diff --git a/docs/view.md b/docs/view.md index a6699f63e35..ef46b508de0 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 | | ------------------------------------------------ | @@ -580,9 +580,11 @@ If a parent `View` wants to prevent a child `View` from becoming responder on a The View is now responding for touch events. This is the time to highlight and show the user what is happening. -| Type | -| ------------------------------------------------- | -| ({nativeEvent: [PressEvent](pressevent)}) => void | +On Android, return true from this callback to prevent any other native components from becoming responder until this responder terminates. + +| Type | +| ------------------------------------------------------------ | +| ({nativeEvent: [PressEvent](pressevent)}) => void \| boolean | --- diff --git a/package.json b/package.json index 4dacf750757..c33e416e30a 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,12 @@ ], "scripts": { "postinstall": "yarn update-lock", - "update-lock": "yarn-deduplicate" + "update-lock": "yarn-deduplicate", + "docusaurus": "yarn workspace react-native-website docusaurus", + "website:start": "yarn workspace react-native-website start", + "website:build": "yarn workspace react-native-website build", + "website:build:fast": "yarn workspace react-native-website build:fast", + "website:serve": "yarn workspace react-native-website serve" }, "husky": { "hooks": { diff --git a/plugins/remark-lint-no-dead-urls/package.json b/plugins/remark-lint-no-dead-urls/package.json index 087c5dcf9d0..6ee923e1c57 100644 --- a/plugins/remark-lint-no-dead-urls/package.json +++ b/plugins/remark-lint-no-dead-urls/package.json @@ -18,7 +18,7 @@ "test": "yarn node --experimental-vm-modules $(yarn bin jest)" }, "dependencies": { - "got": "^12.5.3", + "got": "^13.0.0", "unified-lint-rule": "^2.1.1", "unist-util-visit": "^4.1.2" }, diff --git a/website/architecture/architecture-glossary.md b/website/architecture/architecture-glossary.md index 5dd7766fd11..c416ed16bed 100644 --- a/website/architecture/architecture-glossary.md +++ b/website/architecture/architecture-glossary.md @@ -26,7 +26,7 @@ A lightweight API to embed a JavaScript engine in a C++ application. Fabric uses ## Java Native Interface (JNI) -An [API for to write Java native methods](https://docs.oracle.com/javase/8/docs/technotes/guides/jni/) used to communicate between Fabric’s C++ core and Android, written in Java. +An [API to write Java native methods](https://docs.oracle.com/javase/8/docs/technotes/guides/jni/) used to communicate between Fabric’s C++ core and Android, written in Java. ## React Component 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/staying-updated.md b/website/community/staying-updated.md index 593c6ab985c..16d85739eff 100644 --- a/website/community/staying-updated.md +++ b/website/community/staying-updated.md @@ -41,6 +41,7 @@ Listed here are but a few of the main React Native related conferences, with lin #### [ChainReact](https://cr.infinite.red/), organized by [InfiniteRed](https://infinite.red/) +- [ChainReact 2023](https://www.youtube.com/playlist?list=PLFHvL21g9bk30F2UaJfn6TqJn15MAoBOc) - [ChainReact 2019](https://www.youtube.com/playlist?list=PLFHvL21g9bk2bTWTCP1BueiiIz8q258z9) - [ChainReact 2018](https://www.youtube.com/playlist?list=PLFHvL21g9bk1skdjnKVGXREDmP_HVDj-u) - [ChainReact 2017](https://www.youtube.com/playlist?list=PLFHvL21g9bk3RxJ1Ut5nR_uTZFVOxu522) 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/how-to-build-from-source.md b/website/contributing/how-to-build-from-source.md index f11c40c64c8..fe54f579b0c 100644 --- a/website/contributing/how-to-build-from-source.md +++ b/website/contributing/how-to-build-from-source.md @@ -29,13 +29,14 @@ Both with stable releases and nightlies, you will be consuming **precompiled** a ```diff // ... include ':app' - includeBuild('../node_modules/react-native-gradle-plugin') + includeBuild('../node_modules/@react-native/gradle-plugin') + + includeBuild('../node_modules/react-native') { + dependencySubstitution { -+ substitute(module("com.facebook.react:react-android")).using(project(":ReactAndroid")) -+ substitute(module("com.facebook.react:react-native")).using(project(":ReactAndroid")) -+ substitute(module("com.facebook.react:hermes-android")).using(project(":ReactAndroid:hermes-engine")) -+ substitute(module("com.facebook.react:hermes-engine")).using(project(":ReactAndroid:hermes-engine")) ++ substitute(module("com.facebook.react:react-android")).using(project(":packages:react-native:ReactAndroid")) ++ substitute(module("com.facebook.react:react-native")).using(project(":packages:react-native:ReactAndroid")) ++ substitute(module("com.facebook.react:hermes-android")).using(project(":packages:react-native:ReactAndroid:hermes-engine")) ++ substitute(module("com.facebook.react:hermes-engine")).using(project(":packages:react-native:ReactAndroid:hermes-engine")) + } + } ``` diff --git a/website/contributing/how-to-contribute-code.md b/website/contributing/how-to-contribute-code.md index 5718986081a..e6d10499eb6 100644 --- a/website/contributing/how-to-contribute-code.md +++ b/website/contributing/how-to-contribute-code.md @@ -22,6 +22,10 @@ Now you are set up to run several commands: - `yarn start` starts the Metro packager server. - `yarn lint` checks the code style. - `yarn format` automatically formats your code. +- `yarn build` builds all configured packages (also run by `yarn start`). + - `yarn watch` watches packages and rebuilds files on change. + - `yarn clean` cleans package build directories. + - Packages which require a build are configured in [scripts/build/config.js](https://github.com/facebook/react-native/blob/main/scripts/build/config.js). - `yarn test` runs the Jest-based JavaScript test suite. - `yarn test --watch` runs an interactive JavaScript test watcher. - `yarn test ` runs JavaScript tests with matching filenames. diff --git a/website/contributing/how-to-open-a-pull-request.md b/website/contributing/how-to-open-a-pull-request.md index 86c683f822e..40354a8684f 100644 --- a/website/contributing/how-to-open-a-pull-request.md +++ b/website/contributing/how-to-open-a-pull-request.md @@ -48,12 +48,25 @@ We recommend creating a new branch in your fork to keep track of your changes: git checkout --branch my_feature_branch --track origin/main ``` +### 4. Run `yarn` and build packages + +This will install all JavaScript dependencies, and build all necessary packages inside the repo. The following should be run from the repo root: + +```sh +yarn +yarn build +``` + +`yarn build` is also run as part of `yarn start`. + ## Chapter II: Implementing your Changes ### 1. Make changes to the code You can now make any changes deemed necessary using your code editor of choice. [Visual Studio Code](https://code.visualstudio.com/) is popular with JavaScript developers. If you're mostly making changes to iOS or Android, using Xcode or Android Studio might provide a nicer integrated experience. +If you are making changes inside a package with a JavaScript build, you can use `yarn watch` to continuously rebuild as you make changes. + ### 2. Test your changes Make sure your changes are correct and do not introduce any test failures. You can learn more in [Running and Writing Tests](/contributing/how-to-run-and-write-tests). @@ -62,7 +75,7 @@ Make sure your changes are correct and do not introduce any test failures. You c We understand it can take a while to ramp up and get a sense of the style followed for each of the languages in use in the core React Native repository. Developers should not need to worry about minor nits, so whenever possible, we use tools that automate the process of rewriting your code to follow conventions. -For example, we use [Prettier](https://prettier.io/) to format our JavaScript code. This saves you time and energy as you can let Prettier fix up any formatting issues automatically through its editor integrations, or by manually running `yarn run prettier`. +For example, we use [Prettier](https://prettier.io/) to format our JavaScript code. This saves you time and energy as you can let Prettier fix up any formatting issues automatically through its editor integrations, or by manually running `yarn run prettier`. We also use a linter to catch styling issues that may exist in your code. You can check the status of your code styling by running `yarn run lint`. diff --git a/website/contributing/release-updating-packages.md b/website/contributing/release-updating-packages.md index cbd295bc988..5dba9255c95 100644 --- a/website/contributing/release-updating-packages.md +++ b/website/contributing/release-updating-packages.md @@ -5,6 +5,13 @@ title: Updating monorepo packages This page contains relevant information about how to update packages in the `react-native` [monorepo](https://github.com/react-native-community/discussions-and-proposals/pull/480). +:::note + +From 0.72 onwards, all packages versions should be updated and aligned by using `bump-all-updated-packages` script, both in `main` and `*-stable` branches. +Practically, this means that the secondary command `align-package-versions` is only present in the 0.71 branch - and neither are present in versions lower than that. + +::: + ## Finding all packages that have unpublished changes #### Use case @@ -71,8 +78,6 @@ Example script output, where no package versions were changed: ## Align package versions across monorepo -> Side note: We do not anticipate that this script might be useful in future. With current monorepo setup, all packages versions should be updated and aligned by using `bump-all-updated-packages` script, both in `main` and `*-stable` branches. - #### Use case You (or someone from release cycle team) want to verify that the latest versions of @react-native/\* packages are specified across monorepo, including `template`. 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/package.json b/website/package.json index 474ff7b35a9..5942d828378 100644 --- a/website/package.json +++ b/website/package.json @@ -10,8 +10,10 @@ "url": "https://github.com/facebook/react-native-website/issues" }, "scripts": { + "docusaurus": "docusaurus", "start": "docusaurus start", "build": "docusaurus build && yarn run update-redirect ./build/_redirects ./versions.json", + "build:fast": "PREVIEW_DEPLOY=true yarn run build", "swizzle": "docusaurus swizzle", "deploy": "docusaurus deploy", "serve": "docusaurus serve", @@ -45,9 +47,10 @@ ] }, "dependencies": { - "@docusaurus/core": "^2.3.1", - "@docusaurus/plugin-pwa": "^2.3.1", - "@docusaurus/preset-classic": "^2.3.1", + "@docusaurus/core": "^2.4.1", + "@docusaurus/plugin-google-gtag": "^2.4.1", + "@docusaurus/plugin-pwa": "^2.4.1", + "@docusaurus/preset-classic": "^2.4.1", "docusaurus-plugin-sass": "^0.2.2", "esbuild-loader": "^2.19.0", "react": "^18.2.0", @@ -56,7 +59,7 @@ "sass": "^1.53.0" }, "devDependencies": { - "@docusaurus/types": "^2.3.1", + "@docusaurus/types": "^2.4.1", "@react-native-website/lint-examples": "0.0.0", "@react-native-website/update-redirects": "0.0.0", "alex": "^10.0.0", 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." }, { diff --git a/website/sidebars.json b/website/sidebars.json index 6ab5547dda6..45cc7e83d10 100644 --- a/website/sidebars.json +++ b/website/sidebars.json @@ -21,6 +21,7 @@ "Workflow": [ "running-on-device", "fast-refresh", + "metro", { "type": "category", "label": "Debugging", diff --git a/website/src/theme/DocVersionBanner/index.js b/website/src/theme/DocVersionBanner/index.js new file mode 100644 index 00000000000..03274d26dd4 --- /dev/null +++ b/website/src/theme/DocVersionBanner/index.js @@ -0,0 +1,131 @@ +import React from 'react'; +import clsx from 'clsx'; +import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; +import Link from '@docusaurus/Link'; +import Translate from '@docusaurus/Translate'; +import { + useActivePlugin, + useDocVersionSuggestions, +} from '@docusaurus/plugin-content-docs/client'; +import {ThemeClassNames} from '@docusaurus/theme-common'; +import { + useDocsPreferredVersion, + useDocsVersion, +} from '@docusaurus/theme-common/internal'; + +function UnreleasedVersionLabel({siteTitle, versionMetadata}) { + return ( + {versionMetadata.label}, + }}> + { + 'This is unreleased documentation for {siteTitle} {versionLabel} version.' + } + + ); +} + +function UnmaintainedVersionLabel({siteTitle, versionMetadata}) { + return ( + {versionMetadata.label}, + }}> + { + 'This is documentation for {siteTitle} {versionLabel}, which is no longer in active development.' + } + + ); +} +const BannerLabelComponents = { + unreleased: UnreleasedVersionLabel, + unmaintained: UnmaintainedVersionLabel, +}; + +function BannerLabel(props) { + const BannerLabelComponent = + BannerLabelComponents[props.versionMetadata.banner]; + return ; +} + +function LatestVersionSuggestionLabel({versionLabel, to, onClick}) { + return ( + + + + latest version + + + + ), + }}> + { + 'For up-to-date documentation, see the {latestVersionLink} ({versionLabel}).' + } + + ); +} + +function DocVersionBannerEnabled({className, versionMetadata}) { + const { + siteConfig: {title: siteTitle}, + } = useDocusaurusContext(); + const {pluginId} = useActivePlugin({failfast: true}); + const getVersionMainDoc = version => + version.docs.find(doc => doc.id === version.mainDocId); + const {savePreferredVersionName} = useDocsPreferredVersion(pluginId); + const {latestDocSuggestion, latestVersionSuggestion} = + useDocVersionSuggestions(pluginId); + + // Try to link to same doc in latest version (not always possible), falling + // back to main doc of latest version + const latestVersionSuggestedDoc = + latestDocSuggestion ?? getVersionMainDoc(latestVersionSuggestion); + + return ( +
+ +
+ savePreferredVersionName(latestVersionSuggestion.name)} + /> +
+
+ ); +} + +export default function DocVersionBanner({className}) { + const versionMetadata = useDocsVersion(); + if (versionMetadata.banner) { + return ( + + ); + } + return null; +} diff --git a/website/versioned_docs/version-0.65/text.md b/website/versioned_docs/version-0.65/text.md index 5ac6abe97ba..8748d658a2b 100644 --- a/website/versioned_docs/version-0.65/text.md +++ b/website/versioned_docs/version-0.65/text.md @@ -469,9 +469,11 @@ This function is called on press. The View is now responding to touch events. This is the time to highlight and show the user what is happening. -| Type | -| --------------------------------------------------- | -| ({ nativeEvent: [PressEvent](pressevent) }) => void | +On Android, return true from this callback to prevent any other native components from becoming responder until this responder terminates. + +| Type | +| -------------------------------------------------------------- | +| ({ nativeEvent: [PressEvent](pressevent) }) => void \| boolean | --- diff --git a/website/versioned_docs/version-0.65/view.md b/website/versioned_docs/version-0.65/view.md index 806fbc81a7c..29d882a54c7 100644 --- a/website/versioned_docs/version-0.65/view.md +++ b/website/versioned_docs/version-0.65/view.md @@ -373,9 +373,11 @@ If a parent `View` wants to prevent a child `View` from becoming responder on a The View is now responding for touch events. This is the time to highlight and show the user what is happening. -| Type | Required | -| --------------------------------------------------- | -------- | -| ({ nativeEvent: [PressEvent](pressevent) }) => void | No | +On Android, return true from this callback to prevent any other native components from becoming responder until this responder terminates. + +| Type | Required | +| -------------------------------------------------------------- | -------- | +| ({ nativeEvent: [PressEvent](pressevent) }) => void \| boolean | No | --- diff --git a/website/versioned_docs/version-0.66/text.md b/website/versioned_docs/version-0.66/text.md index 56e4f63084d..455b03dc178 100644 --- a/website/versioned_docs/version-0.66/text.md +++ b/website/versioned_docs/version-0.66/text.md @@ -513,9 +513,11 @@ Called when a touch is released. The View is now responding to touch events. This is the time to highlight and show the user what is happening. -| Type | -| --------------------------------------------------- | -| ({ nativeEvent: [PressEvent](pressevent) }) => void | +On Android, return true from this callback to prevent any other native components from becoming responder until this responder terminates. + +| Type | +| -------------------------------------------------------------- | +| ({ nativeEvent: [PressEvent](pressevent) }) => void \| boolean | --- diff --git a/website/versioned_docs/version-0.66/view.md b/website/versioned_docs/version-0.66/view.md index 1093488b925..5f59bc7420c 100644 --- a/website/versioned_docs/version-0.66/view.md +++ b/website/versioned_docs/version-0.66/view.md @@ -441,9 +441,11 @@ If a parent `View` wants to prevent a child `View` from becoming responder on a The View is now responding for touch events. This is the time to highlight and show the user what is happening. -| Type | -| --------------------------------------------------- | -| ({ nativeEvent: [PressEvent](pressevent) }) => void | +On Android, return true from this callback to prevent any other native components from becoming responder until this responder terminates. + +| Type | +| -------------------------------------------------------------- | +| ({ nativeEvent: [PressEvent](pressevent) }) => void \| boolean | --- diff --git a/website/versioned_docs/version-0.67/text.md b/website/versioned_docs/version-0.67/text.md index 02f6c015743..8ac44f5dcda 100644 --- a/website/versioned_docs/version-0.67/text.md +++ b/website/versioned_docs/version-0.67/text.md @@ -513,9 +513,11 @@ Called when a touch is released. The View is now responding to touch events. This is the time to highlight and show the user what is happening. -| Type | -| --------------------------------------------------- | -| ({ nativeEvent: [PressEvent](pressevent) }) => void | +On Android, return true from this callback to prevent any other native components from becoming responder until this responder terminates. + +| Type | +| -------------------------------------------------------------- | +| ({ nativeEvent: [PressEvent](pressevent) }) => void \| boolean | --- diff --git a/website/versioned_docs/version-0.67/view.md b/website/versioned_docs/version-0.67/view.md index 1093488b925..5f59bc7420c 100644 --- a/website/versioned_docs/version-0.67/view.md +++ b/website/versioned_docs/version-0.67/view.md @@ -441,9 +441,11 @@ If a parent `View` wants to prevent a child `View` from becoming responder on a The View is now responding for touch events. This is the time to highlight and show the user what is happening. -| Type | -| --------------------------------------------------- | -| ({ nativeEvent: [PressEvent](pressevent) }) => void | +On Android, return true from this callback to prevent any other native components from becoming responder until this responder terminates. + +| Type | +| -------------------------------------------------------------- | +| ({ nativeEvent: [PressEvent](pressevent) }) => void \| boolean | --- diff --git a/website/versioned_docs/version-0.68/text.md b/website/versioned_docs/version-0.68/text.md index 18fb8d927dc..8c3286459b4 100644 --- a/website/versioned_docs/version-0.68/text.md +++ b/website/versioned_docs/version-0.68/text.md @@ -513,9 +513,11 @@ Called when a touch is released. The View is now responding to touch events. This is the time to highlight and show the user what is happening. -| Type | -| --------------------------------------------------- | -| ({ nativeEvent: [PressEvent](pressevent) }) => void | +On Android, return true from this callback to prevent any other native components from becoming responder until this responder terminates. + +| Type | +| -------------------------------------------------------------- | +| ({ nativeEvent: [PressEvent](pressevent) }) => void \| boolean | --- diff --git a/website/versioned_docs/version-0.68/view.md b/website/versioned_docs/version-0.68/view.md index 1093488b925..5f59bc7420c 100644 --- a/website/versioned_docs/version-0.68/view.md +++ b/website/versioned_docs/version-0.68/view.md @@ -441,9 +441,11 @@ If a parent `View` wants to prevent a child `View` from becoming responder on a The View is now responding for touch events. This is the time to highlight and show the user what is happening. -| Type | -| --------------------------------------------------- | -| ({ nativeEvent: [PressEvent](pressevent) }) => void | +On Android, return true from this callback to prevent any other native components from becoming responder until this responder terminates. + +| Type | +| -------------------------------------------------------------- | +| ({ nativeEvent: [PressEvent](pressevent) }) => void \| boolean | --- diff --git a/website/versioned_docs/version-0.69/text.md b/website/versioned_docs/version-0.69/text.md index b0e4db488d6..9305c290887 100644 --- a/website/versioned_docs/version-0.69/text.md +++ b/website/versioned_docs/version-0.69/text.md @@ -525,9 +525,11 @@ Called when a touch is released. The View is now responding to touch events. This is the time to highlight and show the user what is happening. -| Type | -| --------------------------------------------------- | -| ({ nativeEvent: [PressEvent](pressevent) }) => void | +On Android, return true from this callback to prevent any other native components from becoming responder until this responder terminates. + +| Type | +| -------------------------------------------------------------- | +| ({ nativeEvent: [PressEvent](pressevent) }) => void \| boolean | --- diff --git a/website/versioned_docs/version-0.69/view.md b/website/versioned_docs/version-0.69/view.md index f9ab982b994..d5636f9e0f0 100644 --- a/website/versioned_docs/version-0.69/view.md +++ b/website/versioned_docs/version-0.69/view.md @@ -453,9 +453,11 @@ If a parent `View` wants to prevent a child `View` from becoming responder on a The View is now responding for touch events. This is the time to highlight and show the user what is happening. -| Type | -| --------------------------------------------------- | -| ({ nativeEvent: [PressEvent](pressevent) }) => void | +On Android, return true from this callback to prevent any other native components from becoming responder until this responder terminates. + +| Type | +| -------------------------------------------------------------- | +| ({ nativeEvent: [PressEvent](pressevent) }) => void \| boolean | --- diff --git a/website/versioned_docs/version-0.70/text.md b/website/versioned_docs/version-0.70/text.md index b0e4db488d6..9305c290887 100644 --- a/website/versioned_docs/version-0.70/text.md +++ b/website/versioned_docs/version-0.70/text.md @@ -525,9 +525,11 @@ Called when a touch is released. The View is now responding to touch events. This is the time to highlight and show the user what is happening. -| Type | -| --------------------------------------------------- | -| ({ nativeEvent: [PressEvent](pressevent) }) => void | +On Android, return true from this callback to prevent any other native components from becoming responder until this responder terminates. + +| Type | +| -------------------------------------------------------------- | +| ({ nativeEvent: [PressEvent](pressevent) }) => void \| boolean | --- diff --git a/website/versioned_docs/version-0.70/view.md b/website/versioned_docs/version-0.70/view.md index f9ab982b994..d5636f9e0f0 100644 --- a/website/versioned_docs/version-0.70/view.md +++ b/website/versioned_docs/version-0.70/view.md @@ -453,9 +453,11 @@ If a parent `View` wants to prevent a child `View` from becoming responder on a The View is now responding for touch events. This is the time to highlight and show the user what is happening. -| Type | -| --------------------------------------------------- | -| ({ nativeEvent: [PressEvent](pressevent) }) => void | +On Android, return true from this callback to prevent any other native components from becoming responder until this responder terminates. + +| Type | +| -------------------------------------------------------------- | +| ({ nativeEvent: [PressEvent](pressevent) }) => void \| boolean | --- diff --git a/website/versioned_docs/version-0.71/text.md b/website/versioned_docs/version-0.71/text.md index 6871982c8ce..46b7626fbef 100644 --- a/website/versioned_docs/version-0.71/text.md +++ b/website/versioned_docs/version-0.71/text.md @@ -587,9 +587,11 @@ Called when a touch is released. The View is now responding to touch events. This is the time to highlight and show the user what is happening. -| Type | -| ------------------------------------------------- | -| ({nativeEvent: [PressEvent](pressevent)}) => void | +On Android, return true from this callback to prevent any other native components from becoming responder until this responder terminates. + +| Type | +| ------------------------------------------------------------ | +| ({nativeEvent: [PressEvent](pressevent)}) => void \| boolean | --- diff --git a/website/versioned_docs/version-0.71/view.md b/website/versioned_docs/version-0.71/view.md index 97147e6a997..d3ceede0eef 100644 --- a/website/versioned_docs/version-0.71/view.md +++ b/website/versioned_docs/version-0.71/view.md @@ -615,9 +615,11 @@ If a parent `View` wants to prevent a child `View` from becoming responder on a The View is now responding for touch events. This is the time to highlight and show the user what is happening. -| Type | -| ------------------------------------------------- | -| ({nativeEvent: [PressEvent](pressevent)}) => void | +On Android, return true from this callback to prevent any other native components from becoming responder until this responder terminates. + +| Type | +| ------------------------------------------------------------ | +| ({nativeEvent: [PressEvent](pressevent)}) => void \| boolean | --- diff --git a/website/versioned_docs/version-0.72/_integration-with-existing-apps-java.md b/website/versioned_docs/version-0.72/_integration-with-existing-apps-java.md index ae5d98cacec..d5f3cb0a5ca 100644 --- a/website/versioned_docs/version-0.72/_integration-with-existing-apps-java.md +++ b/website/versioned_docs/version-0.72/_integration-with-existing-apps-java.md @@ -88,7 +88,7 @@ React Native uses the React Native Gradle Plugin to configure your dependencies First, let's edit your `settings.gradle` file by adding this line: ```groovy -includeBuild('../node_modules/react-native-gradle-plugin') +includeBuild('../node_modules/@react-native/gradle-plugin') ``` Then you need to open your top level `build.gradle` and include this line: diff --git a/website/versioned_docs/version-0.72/_integration-with-existing-apps-kotlin.md b/website/versioned_docs/version-0.72/_integration-with-existing-apps-kotlin.md index 5183eab9e69..c2c7e68081e 100644 --- a/website/versioned_docs/version-0.72/_integration-with-existing-apps-kotlin.md +++ b/website/versioned_docs/version-0.72/_integration-with-existing-apps-kotlin.md @@ -88,7 +88,7 @@ React Native uses the React Native Gradle Plugin to configure your dependencies First, let's edit your `settings.gradle` file by adding this line: ```groovy -includeBuild('../node_modules/react-native-gradle-plugin') +includeBuild('../node_modules/@react-native/gradle-plugin') ``` Then you need to open your top level `build.gradle` and include this line: diff --git a/website/versioned_docs/version-0.72/metro.md b/website/versioned_docs/version-0.72/metro.md new file mode 100644 index 00000000000..42ea16ca033 --- /dev/null +++ b/website/versioned_docs/version-0.72/metro.md @@ -0,0 +1,104 @@ +--- +id: metro +title: Metro +--- + +React Native uses [Metro](https://facebook.github.io/metro/) to build your JavaScript code and assets. + +## Configuring Metro + +Configuration options for Metro can be customized in your project's `metro.config.js` file. This can export either: + +- **An object (recommended)** that will be merged on top of Metro's internal config defaults. +- [**A function**](#advanced-using-a-config-function) that will be called with Metro's internal config defaults and should return a final config object. + +:::tip +Please see [**Configuring Metro**](https://facebook.github.io/metro/docs/configuration) on the Metro website for documentation on all available config options. +::: + +In React Native, your Metro config should extend either [`@react-native/metro-config`](https://www.npmjs.com/package/@react-native/metro-config) or [`@expo/metro-config`](https://www.npmjs.com/package/@expo/metro-config). These packages contain essential defaults necessary to build and run React Native apps. + +Below is the default `metro.config.js` file in a React Native template project: + + +```js +const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config'); + +/** + * Metro configuration + * https://facebook.github.io/metro/docs/configuration + * + * @type {import('metro-config').MetroConfig} + */ +const config = {}; + +module.exports = mergeConfig(getDefaultConfig(__dirname), config); +``` + +Metro options you wish to customize can be done so within the `config` object. + +### Advanced: Using a config function + +Exporting a config function is an opt-in to managing the final config yourself — **Metro will not apply any internal defaults**. This pattern can be useful when needing to read the base default config object from Metro or to set options dynamically. + +:::info +**From `@react-native/metro-config` 0.72.1**, it is no longer necessary to use a config function to access the complete default config. See the **Tip** section below. +::: + + +```js +const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config'); + +module.exports = function (baseConfig) { + const defaultConfig = mergeConfig(baseConfig, getDefaultConfig(__dirname)); + const {resolver: {assetExts, sourceExts}} = defaultConfig; + + return mergeConfig( + defaultConfig, + { + resolver: { + assetExts: assetExts.filter(ext => ext !== 'svg'), + sourceExts: [...sourceExts, 'svg'], + }, + }, + ); +}; +``` + +:::tip +Using a config function is for advanced use cases. A simpler method than the above, e.g. for customising `sourceExts`, would be to read these defaults from `@react-native/metro-config`. + +**Alternative** + + +```js +const defaultConfig = getDefaultConfig(__dirname); + +const config = { + resolver: { + sourceExts: [...defaultConfig.resolver.sourceExts, 'svg'], + }, +}; + +module.exports = mergeConfig(defaultConfig, config); +``` + +**However!**, we recommend copying and editing when overriding these config values — placing the source of truth in your config file. + +✅ **Recommended** + + +```js +const config = { + resolver: { + sourceExts: ['js', 'ts', 'tsx', 'svg'], + }, +}; +``` + +::: + +## Learn more about Metro + +- [Metro website](https://facebook.github.io/metro/) +- [Video: "Metro & React Native DevX" talk at App.js 2023](https://www.youtube.com/watch?v=c9D4pg0y9cI) diff --git a/website/versioned_docs/version-0.72/ram-bundles-inline-requires.md b/website/versioned_docs/version-0.72/ram-bundles-inline-requires.md index b7f5ba9e912..0a69c941ed5 100644 --- a/website/versioned_docs/version-0.72/ram-bundles-inline-requires.md +++ b/website/versioned_docs/version-0.72/ram-bundles-inline-requires.md @@ -148,21 +148,20 @@ Every app is different, but it may make sense to only load the modules you need We now need to update `metro.config.js` in the root of the project to use our newly generated `modulePaths.js` file: + ```js -const modulePaths = require('./packager/modulePaths'); -const resolve = require('path').resolve; +const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config'); const fs = require('fs'); - -// Update the following line if the root folder of your app is somewhere else. -const ROOT_FOLDER = resolve(__dirname, '..'); +const path = require('path'); +const modulePaths = require('./packager/modulePaths'); const config = { transformer: { getTransformOptions: () => { const moduleMap = {}; - modulePaths.forEach(path => { - if (fs.existsSync(path)) { - moduleMap[resolve(path)] = true; + modulePaths.forEach(modulePath => { + if (fs.existsSync(modulePath)) { + moduleMap[path.resolve(modulePath)] = true; } }); return { @@ -171,12 +170,13 @@ const config = { }; }, }, - projectRoot: ROOT_FOLDER, }; -module.exports = config; +module.exports = mergeConfig(getDefaultConfig(__dirname), config); ``` +See also [**Configuring Metro**](/docs/metro#configuring-metro). + The `preloadedModules` entry in the config indicates which modules should be marked as preloaded when building a RAM bundle. When the bundle is loaded, those modules are immediately loaded, before any requires have even executed. The `blockList` entry indicates that those modules should not be required inline. Because they are preloaded, there is no performance benefit from using an inline require. In fact the generated JavaScript spends extra time resolving the inline require every time the imports are referenced. ## Test and Measure Improvements diff --git a/website/versioned_docs/version-0.72/text.md b/website/versioned_docs/version-0.72/text.md index b6a12d659ae..444886a2fb5 100644 --- a/website/versioned_docs/version-0.72/text.md +++ b/website/versioned_docs/version-0.72/text.md @@ -545,9 +545,11 @@ Called when a touch is released. The View is now responding to touch events. This is the time to highlight and show the user what is happening. -| Type | -| ------------------------------------------------- | -| ({nativeEvent: [PressEvent](pressevent)}) => void | +On Android, return true from this callback to prevent any other native components from becoming responder until this responder terminates. + +| Type | +| ------------------------------------------------------------ | +| ({nativeEvent: [PressEvent](pressevent)}) => void \| boolean | --- diff --git a/website/versioned_docs/version-0.72/view.md b/website/versioned_docs/version-0.72/view.md index a6699f63e35..298612759a5 100644 --- a/website/versioned_docs/version-0.72/view.md +++ b/website/versioned_docs/version-0.72/view.md @@ -580,9 +580,11 @@ If a parent `View` wants to prevent a child `View` from becoming responder on a The View is now responding for touch events. This is the time to highlight and show the user what is happening. -| Type | -| ------------------------------------------------- | -| ({nativeEvent: [PressEvent](pressevent)}) => void | +On Android, return true from this callback to prevent any other native components from becoming responder until this responder terminates. + +| Type | +| ------------------------------------------------------------ | +| ({nativeEvent: [PressEvent](pressevent)}) => void \| boolean | --- diff --git a/website/versioned_sidebars/version-0.72-sidebars.json b/website/versioned_sidebars/version-0.72-sidebars.json index 6ab5547dda6..45cc7e83d10 100644 --- a/website/versioned_sidebars/version-0.72-sidebars.json +++ b/website/versioned_sidebars/version-0.72-sidebars.json @@ -21,6 +21,7 @@ "Workflow": [ "running-on-device", "fast-refresh", + "metro", { "type": "category", "label": "Debugging", diff --git a/yarn.lock b/yarn.lock index 2e086a4d8f1..b629ebff021 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1298,10 +1298,10 @@ "@docsearch/css" "3.2.0" algoliasearch "^4.0.0" -"@docusaurus/core@2.3.1", "@docusaurus/core@^2.3.1": - version "2.3.1" - resolved "https://registry.yarnpkg.com/@docusaurus/core/-/core-2.3.1.tgz#32849f2ffd2f086a4e55739af8c4195c5eb386f2" - integrity sha512-0Jd4jtizqnRAr7svWaBbbrCCN8mzBNd2xFLoT/IM7bGfFie5y58oz97KzXliwiLY3zWjqMXjQcuP1a5VgCv2JA== +"@docusaurus/core@2.4.1", "@docusaurus/core@^2.4.1": + version "2.4.1" + resolved "https://registry.yarnpkg.com/@docusaurus/core/-/core-2.4.1.tgz#4b8ff5766131ce3fbccaad0b1daf2ad4dc76f62d" + integrity sha512-SNsY7PshK3Ri7vtsLXVeAJGS50nJN3RgF836zkyUfAD01Fq+sAk5EwWgLw+nnm5KVNGDu7PRR2kRGDsWvqpo0g== dependencies: "@babel/core" "^7.18.6" "@babel/generator" "^7.18.7" @@ -1313,13 +1313,13 @@ "@babel/runtime" "^7.18.6" "@babel/runtime-corejs3" "^7.18.6" "@babel/traverse" "^7.18.8" - "@docusaurus/cssnano-preset" "2.3.1" - "@docusaurus/logger" "2.3.1" - "@docusaurus/mdx-loader" "2.3.1" + "@docusaurus/cssnano-preset" "2.4.1" + "@docusaurus/logger" "2.4.1" + "@docusaurus/mdx-loader" "2.4.1" "@docusaurus/react-loadable" "5.5.2" - "@docusaurus/utils" "2.3.1" - "@docusaurus/utils-common" "2.3.1" - "@docusaurus/utils-validation" "2.3.1" + "@docusaurus/utils" "2.4.1" + "@docusaurus/utils-common" "2.4.1" + "@docusaurus/utils-validation" "2.4.1" "@slorber/static-site-generator-webpack-plugin" "^4.0.7" "@svgr/webpack" "^6.2.1" autoprefixer "^10.4.7" @@ -1375,33 +1375,33 @@ webpack-merge "^5.8.0" webpackbar "^5.0.2" -"@docusaurus/cssnano-preset@2.3.1": - version "2.3.1" - resolved "https://registry.yarnpkg.com/@docusaurus/cssnano-preset/-/cssnano-preset-2.3.1.tgz#e042487655e3e062417855e12edb3f6eee8f5ecb" - integrity sha512-7mIhAROES6CY1GmCjR4CZkUfjTL6B3u6rKHK0ChQl2d1IevYXq/k/vFgvOrJfcKxiObpMnE9+X6R2Wt1KqxC6w== +"@docusaurus/cssnano-preset@2.4.1": + version "2.4.1" + resolved "https://registry.yarnpkg.com/@docusaurus/cssnano-preset/-/cssnano-preset-2.4.1.tgz#eacadefb1e2e0f59df3467a0fe83e4ff79eed163" + integrity sha512-ka+vqXwtcW1NbXxWsh6yA1Ckii1klY9E53cJ4O9J09nkMBgrNX3iEFED1fWdv8wf4mJjvGi5RLZ2p9hJNjsLyQ== dependencies: cssnano-preset-advanced "^5.3.8" postcss "^8.4.14" postcss-sort-media-queries "^4.2.1" tslib "^2.4.0" -"@docusaurus/logger@2.3.1": - version "2.3.1" - resolved "https://registry.yarnpkg.com/@docusaurus/logger/-/logger-2.3.1.tgz#d76aefb452e3734b4e0e645efc6cbfc0aae52869" - integrity sha512-2lAV/olKKVr9qJhfHFCaqBIl8FgYjbUFwgUnX76+cULwQYss+42ZQ3grHGFvI0ocN2X55WcYe64ellQXz7suqg== +"@docusaurus/logger@2.4.1": + version "2.4.1" + resolved "https://registry.yarnpkg.com/@docusaurus/logger/-/logger-2.4.1.tgz#4d2c0626b40752641f9fdd93ad9b5a7a0792f767" + integrity sha512-5h5ysIIWYIDHyTVd8BjheZmQZmEgWDR54aQ1BX9pjFfpyzFo5puKXKYrYJXbjEHGyVhEzmB9UXwbxGfaZhOjcg== dependencies: chalk "^4.1.2" tslib "^2.4.0" -"@docusaurus/mdx-loader@2.3.1": - version "2.3.1" - resolved "https://registry.yarnpkg.com/@docusaurus/mdx-loader/-/mdx-loader-2.3.1.tgz#7ec6acee5eff0a280e1b399ea4dd690b15a793f7" - integrity sha512-Gzga7OsxQRpt3392K9lv/bW4jGppdLFJh3luKRknCKSAaZrmVkOQv2gvCn8LAOSZ3uRg5No7AgYs/vpL8K94lA== +"@docusaurus/mdx-loader@2.4.1": + version "2.4.1" + resolved "https://registry.yarnpkg.com/@docusaurus/mdx-loader/-/mdx-loader-2.4.1.tgz#6425075d7fc136dbfdc121349060cedd64118393" + integrity sha512-4KhUhEavteIAmbBj7LVFnrVYDiU51H5YWW1zY6SmBSte/YLhDutztLTBE0PQl1Grux1jzUJeaSvAzHpTn6JJDQ== dependencies: "@babel/parser" "^7.18.8" "@babel/traverse" "^7.18.8" - "@docusaurus/logger" "2.3.1" - "@docusaurus/utils" "2.3.1" + "@docusaurus/logger" "2.4.1" + "@docusaurus/utils" "2.4.1" "@mdx-js/mdx" "^1.6.22" escape-html "^1.0.3" file-loader "^6.2.0" @@ -1416,13 +1416,13 @@ url-loader "^4.1.1" webpack "^5.73.0" -"@docusaurus/module-type-aliases@2.3.1": - version "2.3.1" - resolved "https://registry.yarnpkg.com/@docusaurus/module-type-aliases/-/module-type-aliases-2.3.1.tgz#986186200818fed999be2e18d6c698eaf4683a33" - integrity sha512-6KkxfAVOJqIUynTRb/tphYCl+co3cP0PlHiMDbi+SzmYxMdgIrwYqH9yAnGSDoN6Jk2ZE/JY/Azs/8LPgKP48A== +"@docusaurus/module-type-aliases@2.4.1": + version "2.4.1" + resolved "https://registry.yarnpkg.com/@docusaurus/module-type-aliases/-/module-type-aliases-2.4.1.tgz#38b3c2d2ae44bea6d57506eccd84280216f0171c" + integrity sha512-gLBuIFM8Dp2XOCWffUDSjtxY7jQgKvYujt7Mx5s4FCTfoL5dN1EVbnrn+O2Wvh8b0a77D57qoIDY7ghgmatR1A== dependencies: "@docusaurus/react-loadable" "5.5.2" - "@docusaurus/types" "2.3.1" + "@docusaurus/types" "2.4.1" "@types/history" "^4.7.11" "@types/react" "*" "@types/react-router-config" "*" @@ -1430,18 +1430,18 @@ react-helmet-async "*" react-loadable "npm:@docusaurus/react-loadable@5.5.2" -"@docusaurus/plugin-content-blog@2.3.1": - version "2.3.1" - resolved "https://registry.yarnpkg.com/@docusaurus/plugin-content-blog/-/plugin-content-blog-2.3.1.tgz#236b8ee4f20f7047aa9c285ae77ae36683ad48a3" - integrity sha512-f5LjqX+9WkiLyGiQ41x/KGSJ/9bOjSD8lsVhPvYeUYHCtYpuiDKfhZE07O4EqpHkBx4NQdtQDbp+aptgHSTuiw== - dependencies: - "@docusaurus/core" "2.3.1" - "@docusaurus/logger" "2.3.1" - "@docusaurus/mdx-loader" "2.3.1" - "@docusaurus/types" "2.3.1" - "@docusaurus/utils" "2.3.1" - "@docusaurus/utils-common" "2.3.1" - "@docusaurus/utils-validation" "2.3.1" +"@docusaurus/plugin-content-blog@2.4.1": + version "2.4.1" + resolved "https://registry.yarnpkg.com/@docusaurus/plugin-content-blog/-/plugin-content-blog-2.4.1.tgz#c705a8b1a36a34f181dcf43b7770532e4dcdc4a3" + integrity sha512-E2i7Knz5YIbE1XELI6RlTnZnGgS52cUO4BlCiCUCvQHbR+s1xeIWz4C6BtaVnlug0Ccz7nFSksfwDpVlkujg5Q== + dependencies: + "@docusaurus/core" "2.4.1" + "@docusaurus/logger" "2.4.1" + "@docusaurus/mdx-loader" "2.4.1" + "@docusaurus/types" "2.4.1" + "@docusaurus/utils" "2.4.1" + "@docusaurus/utils-common" "2.4.1" + "@docusaurus/utils-validation" "2.4.1" cheerio "^1.0.0-rc.12" feed "^4.2.2" fs-extra "^10.1.0" @@ -1452,18 +1452,18 @@ utility-types "^3.10.0" webpack "^5.73.0" -"@docusaurus/plugin-content-docs@2.3.1": - version "2.3.1" - resolved "https://registry.yarnpkg.com/@docusaurus/plugin-content-docs/-/plugin-content-docs-2.3.1.tgz#feae1555479558a55182f22f8a07acc5e0d7444d" - integrity sha512-DxztTOBEruv7qFxqUtbsqXeNcHqcVEIEe+NQoI1oi2DBmKBhW/o0MIal8lt+9gvmpx3oYtlwmLOOGepxZgJGkw== - dependencies: - "@docusaurus/core" "2.3.1" - "@docusaurus/logger" "2.3.1" - "@docusaurus/mdx-loader" "2.3.1" - "@docusaurus/module-type-aliases" "2.3.1" - "@docusaurus/types" "2.3.1" - "@docusaurus/utils" "2.3.1" - "@docusaurus/utils-validation" "2.3.1" +"@docusaurus/plugin-content-docs@2.4.1": + version "2.4.1" + resolved "https://registry.yarnpkg.com/@docusaurus/plugin-content-docs/-/plugin-content-docs-2.4.1.tgz#ed94d9721b5ce7a956fb01cc06c40d8eee8dfca7" + integrity sha512-Lo7lSIcpswa2Kv4HEeUcGYqaasMUQNpjTXpV0N8G6jXgZaQurqp7E8NGYeGbDXnb48czmHWbzDL4S3+BbK0VzA== + dependencies: + "@docusaurus/core" "2.4.1" + "@docusaurus/logger" "2.4.1" + "@docusaurus/mdx-loader" "2.4.1" + "@docusaurus/module-type-aliases" "2.4.1" + "@docusaurus/types" "2.4.1" + "@docusaurus/utils" "2.4.1" + "@docusaurus/utils-validation" "2.4.1" "@types/react-router-config" "^5.0.6" combine-promises "^1.1.0" fs-extra "^10.1.0" @@ -1474,75 +1474,75 @@ utility-types "^3.10.0" webpack "^5.73.0" -"@docusaurus/plugin-content-pages@2.3.1": - version "2.3.1" - resolved "https://registry.yarnpkg.com/@docusaurus/plugin-content-pages/-/plugin-content-pages-2.3.1.tgz#f534a37862be5b3f2ba5b150458d7527646b6f39" - integrity sha512-E80UL6hvKm5VVw8Ka8YaVDtO6kWWDVUK4fffGvkpQ/AJQDOg99LwOXKujPoICC22nUFTsZ2Hp70XvpezCsFQaA== - dependencies: - "@docusaurus/core" "2.3.1" - "@docusaurus/mdx-loader" "2.3.1" - "@docusaurus/types" "2.3.1" - "@docusaurus/utils" "2.3.1" - "@docusaurus/utils-validation" "2.3.1" +"@docusaurus/plugin-content-pages@2.4.1": + version "2.4.1" + resolved "https://registry.yarnpkg.com/@docusaurus/plugin-content-pages/-/plugin-content-pages-2.4.1.tgz#c534f7e49967699a45bbe67050d1605ebbf3d285" + integrity sha512-/UjuH/76KLaUlL+o1OvyORynv6FURzjurSjvn2lbWTFc4tpYY2qLYTlKpTCBVPhlLUQsfyFnshEJDLmPneq2oA== + dependencies: + "@docusaurus/core" "2.4.1" + "@docusaurus/mdx-loader" "2.4.1" + "@docusaurus/types" "2.4.1" + "@docusaurus/utils" "2.4.1" + "@docusaurus/utils-validation" "2.4.1" fs-extra "^10.1.0" tslib "^2.4.0" webpack "^5.73.0" -"@docusaurus/plugin-debug@2.3.1": - version "2.3.1" - resolved "https://registry.yarnpkg.com/@docusaurus/plugin-debug/-/plugin-debug-2.3.1.tgz#26fef904713e148f6dee44957506280f8b7853bb" - integrity sha512-Ujpml1Ppg4geB/2hyu2diWnO49az9U2bxM9Shen7b6qVcyFisNJTkVG2ocvLC7wM1efTJcUhBO6zAku2vKJGMw== +"@docusaurus/plugin-debug@2.4.1": + version "2.4.1" + resolved "https://registry.yarnpkg.com/@docusaurus/plugin-debug/-/plugin-debug-2.4.1.tgz#461a2c77b0c5a91b2c05257c8f9585412aaa59dc" + integrity sha512-7Yu9UPzRShlrH/G8btOpR0e6INFZr0EegWplMjOqelIwAcx3PKyR8mgPTxGTxcqiYj6hxSCRN0D8R7YrzImwNA== dependencies: - "@docusaurus/core" "2.3.1" - "@docusaurus/types" "2.3.1" - "@docusaurus/utils" "2.3.1" + "@docusaurus/core" "2.4.1" + "@docusaurus/types" "2.4.1" + "@docusaurus/utils" "2.4.1" fs-extra "^10.1.0" react-json-view "^1.21.3" tslib "^2.4.0" -"@docusaurus/plugin-google-analytics@2.3.1": - version "2.3.1" - resolved "https://registry.yarnpkg.com/@docusaurus/plugin-google-analytics/-/plugin-google-analytics-2.3.1.tgz#e2e7db4cf6a7063e8ba5e128d4e413f4d6a0c862" - integrity sha512-OHip0GQxKOFU8n7gkt3TM4HOYTXPCFDjqKbMClDD3KaDnyTuMp/Zvd9HSr770lLEscgPWIvzhJByRAClqsUWiQ== +"@docusaurus/plugin-google-analytics@2.4.1": + version "2.4.1" + resolved "https://registry.yarnpkg.com/@docusaurus/plugin-google-analytics/-/plugin-google-analytics-2.4.1.tgz#30de1c35773bf9d52bb2d79b201b23eb98022613" + integrity sha512-dyZJdJiCoL+rcfnm0RPkLt/o732HvLiEwmtoNzOoz9MSZz117UH2J6U2vUDtzUzwtFLIf32KkeyzisbwUCgcaQ== dependencies: - "@docusaurus/core" "2.3.1" - "@docusaurus/types" "2.3.1" - "@docusaurus/utils-validation" "2.3.1" + "@docusaurus/core" "2.4.1" + "@docusaurus/types" "2.4.1" + "@docusaurus/utils-validation" "2.4.1" tslib "^2.4.0" -"@docusaurus/plugin-google-gtag@2.3.1": - version "2.3.1" - resolved "https://registry.yarnpkg.com/@docusaurus/plugin-google-gtag/-/plugin-google-gtag-2.3.1.tgz#b8da54a60c0a50aca609c3643faef78cb4f247a0" - integrity sha512-uXtDhfu4+Hm+oqWUySr3DNI5cWC/rmP6XJyAk83Heor3dFjZqDwCbkX8yWPywkRiWev3Dk/rVF8lEn0vIGVocA== +"@docusaurus/plugin-google-gtag@2.4.1", "@docusaurus/plugin-google-gtag@^2.4.1": + version "2.4.1" + resolved "https://registry.yarnpkg.com/@docusaurus/plugin-google-gtag/-/plugin-google-gtag-2.4.1.tgz#6a3eb91022714735e625c7ca70ef5188fa7bd0dc" + integrity sha512-mKIefK+2kGTQBYvloNEKtDmnRD7bxHLsBcxgnbt4oZwzi2nxCGjPX6+9SQO2KCN5HZbNrYmGo5GJfMgoRvy6uA== dependencies: - "@docusaurus/core" "2.3.1" - "@docusaurus/types" "2.3.1" - "@docusaurus/utils-validation" "2.3.1" + "@docusaurus/core" "2.4.1" + "@docusaurus/types" "2.4.1" + "@docusaurus/utils-validation" "2.4.1" tslib "^2.4.0" -"@docusaurus/plugin-google-tag-manager@2.3.1": - version "2.3.1" - resolved "https://registry.yarnpkg.com/@docusaurus/plugin-google-tag-manager/-/plugin-google-tag-manager-2.3.1.tgz#f19bc01cc784fa4734187c5bc637f0574857e15d" - integrity sha512-Ww2BPEYSqg8q8tJdLYPFFM3FMDBCVhEM4UUqKzJaiRMx3NEoly3qqDRAoRDGdIhlC//Rf0iJV9cWAoq2m6k3sw== +"@docusaurus/plugin-google-tag-manager@2.4.1": + version "2.4.1" + resolved "https://registry.yarnpkg.com/@docusaurus/plugin-google-tag-manager/-/plugin-google-tag-manager-2.4.1.tgz#b99f71aec00b112bbf509ef2416e404a95eb607e" + integrity sha512-Zg4Ii9CMOLfpeV2nG74lVTWNtisFaH9QNtEw48R5QE1KIwDBdTVaiSA18G1EujZjrzJJzXN79VhINSbOJO/r3g== dependencies: - "@docusaurus/core" "2.3.1" - "@docusaurus/types" "2.3.1" - "@docusaurus/utils-validation" "2.3.1" + "@docusaurus/core" "2.4.1" + "@docusaurus/types" "2.4.1" + "@docusaurus/utils-validation" "2.4.1" tslib "^2.4.0" -"@docusaurus/plugin-pwa@^2.3.1": - version "2.3.1" - resolved "https://registry.yarnpkg.com/@docusaurus/plugin-pwa/-/plugin-pwa-2.3.1.tgz#2fdac66cb94d03ef9e8d07294a23ec96fb92c87c" - integrity sha512-Flo513wqK+OlNxMrKgcMkqiVVKFqaCqZortu+3MKvL3uN4KleA7UJjgEfTvBIg7XXj7OrFVXPZv+OEB0gRwGTA== +"@docusaurus/plugin-pwa@^2.4.1": + version "2.4.1" + resolved "https://registry.yarnpkg.com/@docusaurus/plugin-pwa/-/plugin-pwa-2.4.1.tgz#648a3dbe8e80927390cb7c8477bbb2b1e98ade3b" + integrity sha512-kiD4qu5u3Nhwa6dPFrBDGInJYI/MWu01mbeLJFLk7oFqbkvLrHPKyB6KxrKQQfx/sAJKro79RYejigUDj0Ahig== dependencies: "@babel/core" "^7.18.6" "@babel/preset-env" "^7.18.6" - "@docusaurus/core" "2.3.1" - "@docusaurus/theme-common" "2.3.1" - "@docusaurus/theme-translations" "2.3.1" - "@docusaurus/types" "2.3.1" - "@docusaurus/utils" "2.3.1" - "@docusaurus/utils-validation" "2.3.1" + "@docusaurus/core" "2.4.1" + "@docusaurus/theme-common" "2.4.1" + "@docusaurus/theme-translations" "2.4.1" + "@docusaurus/types" "2.4.1" + "@docusaurus/utils" "2.4.1" + "@docusaurus/utils-validation" "2.4.1" babel-loader "^8.2.5" clsx "^1.2.1" core-js "^3.23.3" @@ -1554,39 +1554,39 @@ workbox-precaching "^6.5.3" workbox-window "^6.5.3" -"@docusaurus/plugin-sitemap@2.3.1": - version "2.3.1" - resolved "https://registry.yarnpkg.com/@docusaurus/plugin-sitemap/-/plugin-sitemap-2.3.1.tgz#f526ab517ca63b7a3460d585876f5952cb908aa0" - integrity sha512-8Yxile/v6QGYV9vgFiYL+8d2N4z4Er3pSHsrD08c5XI8bUXxTppMwjarDUTH/TRTfgAWotRbhJ6WZLyajLpozA== - dependencies: - "@docusaurus/core" "2.3.1" - "@docusaurus/logger" "2.3.1" - "@docusaurus/types" "2.3.1" - "@docusaurus/utils" "2.3.1" - "@docusaurus/utils-common" "2.3.1" - "@docusaurus/utils-validation" "2.3.1" +"@docusaurus/plugin-sitemap@2.4.1": + version "2.4.1" + resolved "https://registry.yarnpkg.com/@docusaurus/plugin-sitemap/-/plugin-sitemap-2.4.1.tgz#8a7a76ed69dc3e6b4474b6abb10bb03336a9de6d" + integrity sha512-lZx+ijt/+atQ3FVE8FOHV/+X3kuok688OydDXrqKRJyXBJZKgGjA2Qa8RjQ4f27V2woaXhtnyrdPop/+OjVMRg== + dependencies: + "@docusaurus/core" "2.4.1" + "@docusaurus/logger" "2.4.1" + "@docusaurus/types" "2.4.1" + "@docusaurus/utils" "2.4.1" + "@docusaurus/utils-common" "2.4.1" + "@docusaurus/utils-validation" "2.4.1" fs-extra "^10.1.0" sitemap "^7.1.1" tslib "^2.4.0" -"@docusaurus/preset-classic@^2.3.1": - version "2.3.1" - resolved "https://registry.yarnpkg.com/@docusaurus/preset-classic/-/preset-classic-2.3.1.tgz#f0193f06093eb55cafef66bd1ad9e0d33198bf95" - integrity sha512-OQ5W0AHyfdUk0IldwJ3BlnZ1EqoJuu2L2BMhqLbqwNWdkmzmSUvlFLH1Pe7CZSQgB2YUUC/DnmjbPKk/qQD0lQ== - dependencies: - "@docusaurus/core" "2.3.1" - "@docusaurus/plugin-content-blog" "2.3.1" - "@docusaurus/plugin-content-docs" "2.3.1" - "@docusaurus/plugin-content-pages" "2.3.1" - "@docusaurus/plugin-debug" "2.3.1" - "@docusaurus/plugin-google-analytics" "2.3.1" - "@docusaurus/plugin-google-gtag" "2.3.1" - "@docusaurus/plugin-google-tag-manager" "2.3.1" - "@docusaurus/plugin-sitemap" "2.3.1" - "@docusaurus/theme-classic" "2.3.1" - "@docusaurus/theme-common" "2.3.1" - "@docusaurus/theme-search-algolia" "2.3.1" - "@docusaurus/types" "2.3.1" +"@docusaurus/preset-classic@^2.4.1": + version "2.4.1" + resolved "https://registry.yarnpkg.com/@docusaurus/preset-classic/-/preset-classic-2.4.1.tgz#072f22d0332588e9c5f512d4bded8d7c99f91497" + integrity sha512-P4//+I4zDqQJ+UDgoFrjIFaQ1MeS9UD1cvxVQaI6O7iBmiHQm0MGROP1TbE7HlxlDPXFJjZUK3x3cAoK63smGQ== + dependencies: + "@docusaurus/core" "2.4.1" + "@docusaurus/plugin-content-blog" "2.4.1" + "@docusaurus/plugin-content-docs" "2.4.1" + "@docusaurus/plugin-content-pages" "2.4.1" + "@docusaurus/plugin-debug" "2.4.1" + "@docusaurus/plugin-google-analytics" "2.4.1" + "@docusaurus/plugin-google-gtag" "2.4.1" + "@docusaurus/plugin-google-tag-manager" "2.4.1" + "@docusaurus/plugin-sitemap" "2.4.1" + "@docusaurus/theme-classic" "2.4.1" + "@docusaurus/theme-common" "2.4.1" + "@docusaurus/theme-search-algolia" "2.4.1" + "@docusaurus/types" "2.4.1" "@docusaurus/react-loadable@5.5.2", "react-loadable@npm:@docusaurus/react-loadable@5.5.2": version "5.5.2" @@ -1596,27 +1596,27 @@ "@types/react" "*" prop-types "^15.6.2" -"@docusaurus/theme-classic@2.3.1": - version "2.3.1" - resolved "https://registry.yarnpkg.com/@docusaurus/theme-classic/-/theme-classic-2.3.1.tgz#8e6e194236e702c0d4e8d7b7cbb6886ae456e598" - integrity sha512-SelSIDvyttb7ZYHj8vEUhqykhAqfOPKk+uP0z85jH72IMC58e7O8DIlcAeBv+CWsLbNIl9/Hcg71X0jazuxJug== - dependencies: - "@docusaurus/core" "2.3.1" - "@docusaurus/mdx-loader" "2.3.1" - "@docusaurus/module-type-aliases" "2.3.1" - "@docusaurus/plugin-content-blog" "2.3.1" - "@docusaurus/plugin-content-docs" "2.3.1" - "@docusaurus/plugin-content-pages" "2.3.1" - "@docusaurus/theme-common" "2.3.1" - "@docusaurus/theme-translations" "2.3.1" - "@docusaurus/types" "2.3.1" - "@docusaurus/utils" "2.3.1" - "@docusaurus/utils-common" "2.3.1" - "@docusaurus/utils-validation" "2.3.1" +"@docusaurus/theme-classic@2.4.1": + version "2.4.1" + resolved "https://registry.yarnpkg.com/@docusaurus/theme-classic/-/theme-classic-2.4.1.tgz#0060cb263c1a73a33ac33f79bb6bc2a12a56ad9e" + integrity sha512-Rz0wKUa+LTW1PLXmwnf8mn85EBzaGSt6qamqtmnh9Hflkc+EqiYMhtUJeLdV+wsgYq4aG0ANc+bpUDpsUhdnwg== + dependencies: + "@docusaurus/core" "2.4.1" + "@docusaurus/mdx-loader" "2.4.1" + "@docusaurus/module-type-aliases" "2.4.1" + "@docusaurus/plugin-content-blog" "2.4.1" + "@docusaurus/plugin-content-docs" "2.4.1" + "@docusaurus/plugin-content-pages" "2.4.1" + "@docusaurus/theme-common" "2.4.1" + "@docusaurus/theme-translations" "2.4.1" + "@docusaurus/types" "2.4.1" + "@docusaurus/utils" "2.4.1" + "@docusaurus/utils-common" "2.4.1" + "@docusaurus/utils-validation" "2.4.1" "@mdx-js/react" "^1.6.22" clsx "^1.2.1" copy-text-to-clipboard "^3.0.1" - infima "0.2.0-alpha.42" + infima "0.2.0-alpha.43" lodash "^4.17.21" nprogress "^0.2.0" postcss "^8.4.14" @@ -1627,17 +1627,18 @@ tslib "^2.4.0" utility-types "^3.10.0" -"@docusaurus/theme-common@2.3.1": - version "2.3.1" - resolved "https://registry.yarnpkg.com/@docusaurus/theme-common/-/theme-common-2.3.1.tgz#82f52d80226efef8c4418c4eacfc5051aa215f7f" - integrity sha512-RYmYl2OR2biO+yhmW1aS5FyEvnrItPINa+0U2dMxcHpah8reSCjQ9eJGRmAgkZFchV1+aIQzXOI1K7LCW38O0g== - dependencies: - "@docusaurus/mdx-loader" "2.3.1" - "@docusaurus/module-type-aliases" "2.3.1" - "@docusaurus/plugin-content-blog" "2.3.1" - "@docusaurus/plugin-content-docs" "2.3.1" - "@docusaurus/plugin-content-pages" "2.3.1" - "@docusaurus/utils" "2.3.1" +"@docusaurus/theme-common@2.4.1": + version "2.4.1" + resolved "https://registry.yarnpkg.com/@docusaurus/theme-common/-/theme-common-2.4.1.tgz#03e16f7aa96455e952f3243ac99757b01a3c83d4" + integrity sha512-G7Zau1W5rQTaFFB3x3soQoZpkgMbl/SYNG8PfMFIjKa3M3q8n0m/GRf5/H/e5BqOvt8c+ZWIXGCiz+kUCSHovA== + dependencies: + "@docusaurus/mdx-loader" "2.4.1" + "@docusaurus/module-type-aliases" "2.4.1" + "@docusaurus/plugin-content-blog" "2.4.1" + "@docusaurus/plugin-content-docs" "2.4.1" + "@docusaurus/plugin-content-pages" "2.4.1" + "@docusaurus/utils" "2.4.1" + "@docusaurus/utils-common" "2.4.1" "@types/history" "^4.7.11" "@types/react" "*" "@types/react-router-config" "*" @@ -1648,19 +1649,19 @@ use-sync-external-store "^1.2.0" utility-types "^3.10.0" -"@docusaurus/theme-search-algolia@2.3.1": - version "2.3.1" - resolved "https://registry.yarnpkg.com/@docusaurus/theme-search-algolia/-/theme-search-algolia-2.3.1.tgz#d587b40913119e9287d14670e277b933d8f453f0" - integrity sha512-JdHaRqRuH1X++g5fEMLnq7OtULSGQdrs9AbhcWRQ428ZB8/HOiaN6mj3hzHvcD3DFgu7koIVtWPQnvnN7iwzHA== +"@docusaurus/theme-search-algolia@2.4.1": + version "2.4.1" + resolved "https://registry.yarnpkg.com/@docusaurus/theme-search-algolia/-/theme-search-algolia-2.4.1.tgz#906bd2cca3fced0241985ef502c892f58ff380fc" + integrity sha512-6BcqW2lnLhZCXuMAvPRezFs1DpmEKzXFKlYjruuas+Xy3AQeFzDJKTJFIm49N77WFCTyxff8d3E4Q9pi/+5McQ== dependencies: "@docsearch/react" "^3.1.1" - "@docusaurus/core" "2.3.1" - "@docusaurus/logger" "2.3.1" - "@docusaurus/plugin-content-docs" "2.3.1" - "@docusaurus/theme-common" "2.3.1" - "@docusaurus/theme-translations" "2.3.1" - "@docusaurus/utils" "2.3.1" - "@docusaurus/utils-validation" "2.3.1" + "@docusaurus/core" "2.4.1" + "@docusaurus/logger" "2.4.1" + "@docusaurus/plugin-content-docs" "2.4.1" + "@docusaurus/theme-common" "2.4.1" + "@docusaurus/theme-translations" "2.4.1" + "@docusaurus/utils" "2.4.1" + "@docusaurus/utils-validation" "2.4.1" algoliasearch "^4.13.1" algoliasearch-helper "^3.10.0" clsx "^1.2.1" @@ -1670,18 +1671,18 @@ tslib "^2.4.0" utility-types "^3.10.0" -"@docusaurus/theme-translations@2.3.1": - version "2.3.1" - resolved "https://registry.yarnpkg.com/@docusaurus/theme-translations/-/theme-translations-2.3.1.tgz#b2b1ecc00a737881b5bfabc19f90b20f0fe02bb3" - integrity sha512-BsBZzAewJabVhoGG1Ij2u4pMS3MPW6gZ6sS4pc+Y7czevRpzxoFNJXRtQDVGe7mOpv/MmRmqg4owDK+lcOTCVQ== +"@docusaurus/theme-translations@2.4.1": + version "2.4.1" + resolved "https://registry.yarnpkg.com/@docusaurus/theme-translations/-/theme-translations-2.4.1.tgz#4d49df5865dae9ef4b98a19284ede62ae6f98726" + integrity sha512-T1RAGP+f86CA1kfE8ejZ3T3pUU3XcyvrGMfC/zxCtc2BsnoexuNI9Vk2CmuKCb+Tacvhxjv5unhxXce0+NKyvA== dependencies: fs-extra "^10.1.0" tslib "^2.4.0" -"@docusaurus/types@2.3.1", "@docusaurus/types@^2.3.1": - version "2.3.1" - resolved "https://registry.yarnpkg.com/@docusaurus/types/-/types-2.3.1.tgz#785ade2e0f4e35e1eb7fb0d04c27d11c3991a2e8" - integrity sha512-PREbIRhTaNNY042qmfSE372Jb7djZt+oVTZkoqHJ8eff8vOIc2zqqDqBVc5BhOfpZGPTrE078yy/torUEZy08A== +"@docusaurus/types@2.4.1", "@docusaurus/types@^2.4.1": + version "2.4.1" + resolved "https://registry.yarnpkg.com/@docusaurus/types/-/types-2.4.1.tgz#d8e82f9e0f704984f98df1f93d6b4554d5458705" + integrity sha512-0R+cbhpMkhbRXX138UOc/2XZFF8hiZa6ooZAEEJFp5scytzCw4tC1gChMFXrpa3d2tYE6AX8IrOEpSonLmfQuQ== dependencies: "@types/history" "^4.7.11" "@types/react" "*" @@ -1692,30 +1693,30 @@ webpack "^5.73.0" webpack-merge "^5.8.0" -"@docusaurus/utils-common@2.3.1": - version "2.3.1" - resolved "https://registry.yarnpkg.com/@docusaurus/utils-common/-/utils-common-2.3.1.tgz#1abe66846eb641547e4964d44f3011938e58e50b" - integrity sha512-pVlRpXkdNcxmKNxAaB1ya2hfCEvVsLDp2joeM6K6uv55Oc5nVIqgyYSgSNKZyMdw66NnvMfsu0RBylcwZQKo9A== +"@docusaurus/utils-common@2.4.1": + version "2.4.1" + resolved "https://registry.yarnpkg.com/@docusaurus/utils-common/-/utils-common-2.4.1.tgz#7f72e873e49bd5179588869cc3ab7449a56aae63" + integrity sha512-bCVGdZU+z/qVcIiEQdyx0K13OC5mYwxhSuDUR95oFbKVuXYRrTVrwZIqQljuo1fyJvFTKHiL9L9skQOPokuFNQ== dependencies: tslib "^2.4.0" -"@docusaurus/utils-validation@2.3.1": - version "2.3.1" - resolved "https://registry.yarnpkg.com/@docusaurus/utils-validation/-/utils-validation-2.3.1.tgz#b65c718ba9b84b7a891bccf5ac6d19b57ee7d887" - integrity sha512-7n0208IG3k1HVTByMHlZoIDjjOFC8sbViHVXJx0r3Q+3Ezrx+VQ1RZ/zjNn6lT+QBCRCXlnlaoJ8ug4HIVgQ3w== +"@docusaurus/utils-validation@2.4.1": + version "2.4.1" + resolved "https://registry.yarnpkg.com/@docusaurus/utils-validation/-/utils-validation-2.4.1.tgz#19959856d4a886af0c5cfb357f4ef68b51151244" + integrity sha512-unII3hlJlDwZ3w8U+pMO3Lx3RhI4YEbY3YNsQj4yzrkZzlpqZOLuAiZK2JyULnD+TKbceKU0WyWkQXtYbLNDFA== dependencies: - "@docusaurus/logger" "2.3.1" - "@docusaurus/utils" "2.3.1" + "@docusaurus/logger" "2.4.1" + "@docusaurus/utils" "2.4.1" joi "^17.6.0" js-yaml "^4.1.0" tslib "^2.4.0" -"@docusaurus/utils@2.3.1": - version "2.3.1" - resolved "https://registry.yarnpkg.com/@docusaurus/utils/-/utils-2.3.1.tgz#24b9cae3a23b1e6dc88f95c45722c7e82727b032" - integrity sha512-9WcQROCV0MmrpOQDXDGhtGMd52DHpSFbKLfkyaYumzbTstrbA5pPOtiGtxK1nqUHkiIv8UwexS54p0Vod2I1lg== +"@docusaurus/utils@2.4.1": + version "2.4.1" + resolved "https://registry.yarnpkg.com/@docusaurus/utils/-/utils-2.4.1.tgz#9c5f76eae37b71f3819c1c1f0e26e6807c99a4fc" + integrity sha512-1lvEZdAQhKNht9aPXPoh69eeKnV0/62ROhQeFKKxmzd0zkcuE/Oc5Gpnt00y/f5bIsmOsYMY7Pqfm/5rteT5GA== dependencies: - "@docusaurus/logger" "2.3.1" + "@docusaurus/logger" "2.4.1" "@svgr/webpack" "^6.2.1" escape-string-regexp "^4.0.0" file-loader "^6.2.0" @@ -2197,9 +2198,9 @@ graceful-fs "4.2.10" "@pnpm/npm-conf@^2.1.0": - version "2.2.0" - resolved "https://registry.yarnpkg.com/@pnpm/npm-conf/-/npm-conf-2.2.0.tgz#221b4cfcde745d5f8928c25f391e5cc9d405b345" - integrity sha512-roLI1ul/GwzwcfcVpZYPdrgW2W/drLriObl1h+yLF5syc8/5ULWw2ALbCHUWF+4YltIqA3xFSbG4IwyJz37e9g== + version "2.2.2" + resolved "https://registry.yarnpkg.com/@pnpm/npm-conf/-/npm-conf-2.2.2.tgz#0058baf1c26cbb63a828f0193795401684ac86f0" + integrity sha512-UA91GwWPhFExt3IizW6bOeY/pQ0BkuNwKjk9iQW9KqxluGCrg4VenZ0/L+2Y0+ZOtme72EVvg6v0zo3AMQRCeA== dependencies: "@pnpm/config.env-replace" "^1.1.0" "@pnpm/network.ca-file" "^1.0.1" @@ -6094,9 +6095,9 @@ fast-url-parser@1.1.3: punycode "^1.3.2" fast-xml-parser@^4.0.12: - version "4.2.4" - resolved "https://registry.yarnpkg.com/fast-xml-parser/-/fast-xml-parser-4.2.4.tgz#6e846ede1e56ad9e5ef07d8720809edf0ed07e9b" - integrity sha512-fbfMDvgBNIdDJLdLOwacjFAPYt67tr31H9ZhWSm45CDAxvd0I6WTlSOUo7K2P/K5sA5JgMKG64PI3DMcaFdWpQ== + version "4.2.5" + resolved "https://registry.yarnpkg.com/fast-xml-parser/-/fast-xml-parser-4.2.5.tgz#a6747a09296a6cb34f2ae634019bf1738f3b421f" + integrity sha512-B9/wizE4WngqQftFPmdaMYlXoJlJOYxGQOanC77fq9k8+Z0v5dDSVh+3glErdIROP//s/jgb7ZuxKfB8nVyo0g== dependencies: strnum "^1.0.5" @@ -6616,10 +6617,27 @@ globby@^13.1.1: merge2 "^1.4.1" slash "^4.0.0" -got@^12.1.0, got@^12.5.3: - version "12.6.0" - resolved "https://registry.yarnpkg.com/got/-/got-12.6.0.tgz#8d382ee5de4432c086e83c133efdd474484f6ac7" - integrity sha512-WTcaQ963xV97MN3x0/CbAriXFZcXCfgxVp91I+Ze6pawQOa7SgzwSx2zIJJsX+kTajMnVs0xcFD1TxZKFqhdnQ== +got@^12.1.0: + version "12.6.1" + resolved "https://registry.yarnpkg.com/got/-/got-12.6.1.tgz#8869560d1383353204b5a9435f782df9c091f549" + integrity sha512-mThBblvlAF1d4O5oqyvN+ZxLAYwIJK7bpMxgYqPD9okW0C3qm5FFn7k811QrcuEBwaogR3ngOFoCfs6mRv7teQ== + dependencies: + "@sindresorhus/is" "^5.2.0" + "@szmarczak/http-timer" "^5.0.1" + cacheable-lookup "^7.0.0" + cacheable-request "^10.2.8" + decompress-response "^6.0.0" + form-data-encoder "^2.1.2" + get-stream "^6.0.1" + http2-wrapper "^2.1.10" + lowercase-keys "^3.0.0" + p-cancelable "^3.0.0" + responselike "^3.0.0" + +got@^13.0.0: + version "13.0.0" + resolved "https://registry.yarnpkg.com/got/-/got-13.0.0.tgz#a2402862cef27a5d0d1b07c0fb25d12b58175422" + integrity sha512-XfBk1CxOOScDcMr9O1yKkNaQyy865NbYs+F7dr4H0LZMVgCj2Le59k6PqbNHoL5ToeaEQUYh6c6yMfVcc6SJxA== dependencies: "@sindresorhus/is" "^5.2.0" "@szmarczak/http-timer" "^5.0.1" @@ -7232,10 +7250,10 @@ indent-string@^5.0.0: resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-5.0.0.tgz#4fd2980fccaf8622d14c64d694f4cf33c81951a5" integrity sha512-m6FAo/spmsW2Ab2fU35JTYwtOKa2yAwXSwgjSv1TJzh4Mh7mC3lzAOVLBprb72XsTrgkEIsl7YrFNAiDiRhIGg== -infima@0.2.0-alpha.42: - version "0.2.0-alpha.42" - resolved "https://registry.yarnpkg.com/infima/-/infima-0.2.0-alpha.42.tgz#f6e86a655ad40877c6b4d11b2ede681eb5470aa5" - integrity sha512-ift8OXNbQQwtbIt6z16KnSWP7uJ/SysSMFI4F87MNRTicypfl4Pv3E2OGVv6N3nSZFJvA8imYulCBS64iyHYww== +infima@0.2.0-alpha.43: + version "0.2.0-alpha.43" + resolved "https://registry.yarnpkg.com/infima/-/infima-0.2.0-alpha.43.tgz#f7aa1d7b30b6c08afef441c726bac6150228cbe0" + integrity sha512-2uw57LvUqW0rK/SWYnd/2rRfxNA5DDNOh33jxF7fy46VWoNhGxiUQyVZHbBMjQ33mQem0cjdDVwgWVAmlRfgyQ== inflight@^1.0.4: version "1.0.6" @@ -10350,9 +10368,9 @@ p-try@^2.0.0: integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ== package-json@^8.1.0: - version "8.1.0" - resolved "https://registry.yarnpkg.com/package-json/-/package-json-8.1.0.tgz#2a22806f1ed7c786c8e6ff26cfe20003bf4c6850" - integrity sha512-hySwcV8RAWeAfPsXb9/HGSPn8lwDnv6fabH+obUZKX169QknRkRhPxd1yMubpKDskLFATkl3jHpNtVtDPFA0Wg== + version "8.1.1" + resolved "https://registry.yarnpkg.com/package-json/-/package-json-8.1.1.tgz#3e9948e43df40d1e8e78a85485f1070bf8f03dc8" + integrity sha512-cbH9IAIJHNj9uXi196JVsRlt7cHKak6u/e6AkL/bkRelZ7rlL3X1YKxsZwa36xipOEKAsdtmaG6aAJoM1fx2zA== dependencies: got "^12.1.0" registry-auth-token "^5.0.1" @@ -12193,19 +12211,19 @@ semver-regex@^3.1.2: integrity sha512-6IiqeZNgq01qGf0TId0t3NvKzSvUsjcpdEO3AQNeIjR6A2+ckTnQlDpl4qu1bjRv0RzN3FP9hzFmws3lKqRWkA== semver@^5.4.1, semver@^5.6.0: - version "5.7.1" - resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7" - integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ== + version "5.7.2" + resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.2.tgz#48d55db737c3287cd4835e17fa13feace1c41ef8" + integrity sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g== semver@^6.0.0, semver@^6.1.1, semver@^6.1.2, semver@^6.3.0: - version "6.3.0" - resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d" - integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw== + version "6.3.1" + resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4" + integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA== semver@^7.0.0, semver@^7.3.2, semver@^7.3.4, semver@^7.3.5, semver@^7.3.7: - version "7.3.7" - resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.7.tgz#12c5b649afdbf9049707796e22a4028814ce523f" - integrity sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g== + version "7.5.4" + resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.4.tgz#483986ec4ed38e1c6c48c34894a9182dbff68a6e" + integrity sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA== dependencies: lru-cache "^6.0.0" @@ -14135,9 +14153,9 @@ wildcard@^2.0.0: integrity sha512-JcKqAHLPxcdb9KM49dufGXn2x3ssnfjbcaQdLlfZsL9rH9wgDQjUtDxbo8NE0F6SFvydeu1VhZe7hZuHsB2/pw== word-wrap@^1.2.3: - version "1.2.3" - resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.3.tgz#610636f6b1f703891bd34771ccb17fb93b47079c" - integrity sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ== + version "1.2.4" + resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.4.tgz#cb4b50ec9aca570abd1f52f33cd45b6c61739a9f" + integrity sha512-2V81OA4ugVo5pRo46hAoD2ivUJx8jXmWXfUkY4KFNw0hEptvN0QfH3K4nHiwzGeKl5rFKedV48QVoqYavy4YpA== workbox-background-sync@6.5.3: version "6.5.3"