diff --git a/.alexrc.js b/.alexrc.js index 7b4df1dddea..d87dcaad46a 100644 --- a/.alexrc.js +++ b/.alexrc.js @@ -1,5 +1,5 @@ /** - * Copyright (c) Facebook, Inc. and its affiliates. + * Copyright (c) Meta Platforms, Inc. and affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. diff --git a/.eslintrc.json b/.eslintrc.json index ff6320b5297..7eb64a72542 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -4,8 +4,8 @@ "overrides": [ { "files": ["*.yaml", "*.yml"], - "plugins": ["yaml"], - "extends": ["plugin:yaml/recommended"] + "plugins": ["yml"], + "extends": ["plugin:yml/standard"] }, { "files": ["*.md", "*.mdx"], diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml index f26515f17bd..87bd9df2ea2 100644 --- a/.github/ISSUE_TEMPLATE/config.yml +++ b/.github/ISSUE_TEMPLATE/config.yml @@ -7,7 +7,7 @@ contact_links: url: https://github.com/react-native-community/upgrade-support about: Need help upgrading to a newer React Native version? Visit the Upgrade Support repository. - name: 🤔 Questions and Help - url: https://reactnative.dev/help + url: https://reactnative.dev/community/support about: Looking for help with your app? Please refer to the React Native community's support resources. - name: 🚀 React Native Discussions and Feature Proposals url: https://github.com/react-native-community/discussions-and-proposals diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md index 6c7645b5d66..c4a3c1d16b2 100644 --- a/CODE_OF_CONDUCT.md +++ b/CODE_OF_CONDUCT.md @@ -1,100 +1,80 @@ -# [Open Source Code of Conduct](https://code.facebook.com/codeofconduct) - -This code of conduct outlines our expectations for participants within the -**Facebook Open Source** community, as well as steps to reporting unacceptable -behavior. We are committed to providing a welcoming and inspiring community for -all and expect our code of conduct to be honored. Anyone who violates this code -of conduct may be banned from the community. - -Our open source community strives to: - -* **Be friendly and patient.** -* **Be welcoming:** We strive to be a community that welcomes and supports - people of all backgrounds and identities. This includes, but is not limited to - members of any race, ethnicity, culture, national origin, colour, immigration - status, social and economic class, educational level, sex, sexual orientation, - gender identity and expression, age, size, family status, political belief, - religion, and mental and physical ability. -* **Be considerate:** Your work will be used by other people, and you in turn - will depend on the work of others. Any decision you take will affect users and - colleagues, and you should take those consequences into account when making - decisions. Remember that we’re a world-wide community, so you might not be - communicating in someone else’s primary language. -* **Be respectful:** Not all of us will agree all the time, but disagreement is - no excuse for poor behavior and poor manners. We might all experience some - frustration now and then, but we cannot allow that frustration to turn into a - personal attack. It’s important to remember that a community where people feel - uncomfortable or threatened is not a productive one. -* **Be careful in the words that you choose:** we are a community of - professionals, and we conduct ourselves professionally. Be kind to others. Do - not insult or put down other participants. Harassment and other exclusionary - behavior aren’t acceptable. This includes, but is not limited to: - * Violent threats or language directed against another person. - * Discriminatory jokes and language. - * Posting sexually explicit or violent material. - * Posting (or threatening to post) other people’s personally identifying - information (“doxing”). - * Personal insults, especially those using racist or sexist terms. - * Unwelcome sexual attention. - * Advocating for, or encouraging, any of the above behavior. - * Repeated harassment of others. In general, if someone asks you to stop, then - stop. -* **When we disagree, try to understand why:** Disagreements, both social and - technical, happen all the time. It is important that we resolve disagreements - and differing views constructively. -* **Remember that we’re different.** The strength of our community comes from - its diversity, people from a wide range of backgrounds. Different people have - different perspectives on issues. Being unable to understand why someone holds - a viewpoint doesn’t mean that they’re wrong. Don’t forget that it is human to - err and blaming each other doesn’t get us anywhere. Instead, focus on helping - to resolve issues and learning from mistakes. - -This code is not exhaustive or complete. It serves to distill our common -understanding of a collaborative, shared environment, and goals. We expect it to -be followed in spirit as much as in the letter. - -## Diversity Statement - -We encourage everyone to participate and are committed to building a community -for all. Although we may not be able to satisfy everyone, we all agree that -everyone is equal. Whenever a participant has made a mistake, we expect them to -take responsibility for it. If someone has been harmed or offended, it is our -responsibility to listen carefully and respectfully, and do our best to right -the wrong. - -Although this list cannot be exhaustive, we explicitly honor diversity in age, -gender, gender identity or expression, culture, ethnicity, language, national -origin, political beliefs, profession, race, religion, sexual orientation, -socioeconomic status, and technical ability. We will not tolerate discrimination -based on any of the protected characteristics above, including participants with -disabilities. - -## Reporting Issues - -If you experience or witness unacceptable behavior—or have any other -concerns—please report it by contacting us via opensource@fb.com. All reports -will be handled with discretion. In your report please include: - -* Your contact information. -* Names (real, nicknames, or pseudonyms) of any individuals involved. If there - are additional witnesses, please include them as well. Your account of what - occurred, and if you believe the incident is ongoing. If there is a publicly - available record (e.g. a mailing list archive or a public IRC logger), please - include a link. -* Any additional information that may be helpful. - -After filing a report, a representative will contact you personally. If the -person who is harassing you is part of the response team, they will recuse -themselves from handling your incident. A representative will then review the -incident, follow up with any additional questions, and make a decision as to how -to respond. We will respect confidentiality requests for the purpose of -protecting victims of abuse. - -Anyone asked to stop unacceptable behavior is expected to comply immediately. If -an individual engages in unacceptable behavior, the representative may take any -action they deem appropriate, up to and including a permanent ban from our -community without warning. - -_This Code Of Conduct follows the -[template](http://todogroup.org/opencodeofconduct/) established by the -[TODO Group](http://todogroup.org/)._ +# Code of Conduct + +## Our Pledge + +In the interest of fostering an open and welcoming environment, we as +contributors and maintainers pledge to make participation in our project and +our community a harassment-free experience for everyone, regardless of age, body +size, disability, ethnicity, sex characteristics, gender identity and expression, +level of experience, education, socio-economic status, nationality, personal +appearance, race, religion, or sexual identity and orientation. + +## Our Standards + +Examples of behavior that contributes to creating a positive environment +include: + +- Using welcoming and inclusive language +- Being respectful of differing viewpoints and experiences +- Gracefully accepting constructive criticism +- Focusing on what is best for the community +- Showing empathy towards other community members + +Examples of unacceptable behavior by participants include: + +- The use of sexualized language or imagery and unwelcome sexual attention or + advances +- Trolling, insulting/derogatory comments, and personal or political attacks +- Public or private harassment +- Publishing others' private information, such as a physical or electronic + address, without explicit permission +- Other conduct which could reasonably be considered inappropriate in a + professional setting + +## Our Responsibilities + +Project maintainers are responsible for clarifying the standards of acceptable +behavior and are expected to take appropriate and fair corrective action in +response to any instances of unacceptable behavior. + +Project maintainers have the right and responsibility to remove, edit, or +reject comments, commits, code, wiki edits, issues, and other contributions +that are not aligned to this Code of Conduct, or to ban temporarily or +permanently any contributor for other behaviors that they deem inappropriate, +threatening, offensive, or harmful. + +## Scope + +This Code of Conduct applies within all project spaces, and it also applies when +an individual is representing the project or its community in public spaces. +Examples of representing a project or community include using an official +project e-mail address, posting via an official social media account, or acting +as an appointed representative at an online or offline event. Representation of +a project may be further defined and clarified by project maintainers. + +This Code of Conduct also applies outside the project spaces when there is a +reasonable belief that an individual's behavior may have a negative impact on +the project or its community. + +## Enforcement + +Instances of abusive, harassing, or otherwise unacceptable behavior may be +reported by contacting the project team at . All +complaints will be reviewed and investigated and will result in a response that +is deemed necessary and appropriate to the circumstances. The project team is +obligated to maintain confidentiality with regard to the reporter of an incident. +Further details of specific enforcement policies may be posted separately. + +Project maintainers who do not follow or enforce the Code of Conduct in good +faith may face temporary or permanent repercussions as determined by other +members of the project's leadership. + +## Attribution + +This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, +available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html + +[homepage]: https://www.contributor-covenant.org + +For answers to common questions about this code of conduct, see +https://www.contributor-covenant.org/faq diff --git a/LICENSE b/LICENSE index b96dcb0480a..b93be90515c 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ MIT License -Copyright (c) Facebook, Inc. and its affiliates. +Copyright (c) Meta Platforms, Inc. and affiliates. Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/docs/_getting-started-macos-android.md b/docs/_getting-started-macos-android.md index fd52291bab0..eada9f7e420 100644 --- a/docs/_getting-started-macos-android.md +++ b/docs/_getting-started-macos-android.md @@ -73,7 +73,7 @@ Finally, click "Apply" to download and install the Android SDK and related build The React Native tools require some environment variables to be set up in order to build apps with native code. -Add the following lines to your `$HOME/.bash_profile` or `$HOME/.bashrc` (if you are using `zsh` then `~/.zprofile` or `~/.zshrc`) config file: +Add the following lines to your `~/.zprofile` or `~/.zshrc` (if you are using `bash`, then `~/.bash_profile` or `~/.bashrc`) config file: ```shell export ANDROID_SDK_ROOT=$HOME/Library/Android/sdk @@ -81,9 +81,7 @@ export PATH=$PATH:$ANDROID_SDK_ROOT/emulator export PATH=$PATH:$ANDROID_SDK_ROOT/platform-tools ``` -> `.bash_profile` is specific to `bash`. If you're using another shell, you will need to edit the appropriate shell-specific config file. - -Type `source $HOME/.bash_profile` for `bash` or `source $HOME/.zprofile` to load the config into your current shell. Verify that ANDROID_SDK_ROOT has been set by running `echo $ANDROID_SDK_ROOT` and the appropriate directories have been added to your path by running `echo $PATH`. +Run `source ~/.zprofile` (or `source ~/.bash_profile` for `bash`) to load the config into your current shell. Verify that ANDROID_SDK_ROOT has been set by running `echo $ANDROID_SDK_ROOT` and the appropriate directories have been added to your path by running `echo $PATH`. > Please make sure you use the correct Android SDK path. You can find the actual location of the SDK in the Android Studio "Preferences" dialog, under **Appearance & Behavior** → **System Settings** → **Android SDK**. diff --git a/docs/_getting-started-macos-ios.md b/docs/_getting-started-macos-ios.md index 9860a4cc4ba..7359e734983 100644 --- a/docs/_getting-started-macos-ios.md +++ b/docs/_getting-started-macos-ios.md @@ -2,7 +2,7 @@ import M1Cocoapods from './\_markdown-m1-cocoapods.mdx'; import RemoveGlobalCLI ## Installing dependencies -You will need Node, Watchman, the React Native command line interface, Xcode and CocoaPods. +You will need Node, Watchman, the React Native command line interface, a Ruby version manager, Xcode and CocoaPods. While you can use any editor of your choice to develop your app, you will need to install Xcode in order to set up the necessary tooling to build your React Native app for iOS. @@ -19,6 +19,35 @@ If you have already installed Node on your system, make sure it is Node 14 or ne [Watchman](https://facebook.github.io/watchman) is a tool by Facebook for watching changes in the filesystem. It is highly recommended you install it for better performance. +### Ruby + +[Ruby](https://www.ruby-lang.org/en/) is a general-purpose programming language. React Native uses in some scripts related to the iOS dependency management. As every programming language, there are different versions of Ruby that have been developed during the years. + +React Native uses a `.ruby-version` file to make sure that your version of Ruby is aligned with what is needed. Currently, macOS 12.5.1 is shipped with Ruby 2.6.8, which is **not** what is required by React Native. Our suggestion is to install a Ruby version manager and to install the proper version of Ruby in your system. + +Some common Ruby version manager are: + +- [rbenv](https://github.com/rbenv/rbenv) +- [RVM](https://rvm.io/) +- [chruby](https://github.com/postmodern/chruby) +- [asdf-vm](https://github.com/asdf-vm) with the [asdf-ruby](https://github.com/asdf-vm/asdf-ruby) plugin + +To check what is your current version of Ruby, you can run this command: + +``` +ruby --version +``` + +React Native uses [this version](https://github.com/facebook/react-native/blob/main/template/_ruby-version) of Ruby. You can also find which version your specific project needs in the `.ruby-version` file at root of your RN project. + +### Ruby's Bundler + +Ruby uses the concept of **gems** to handle its own dependencies. You can think of a gem as a package in NPM, a formula in Homebrew or a single pod in Cocoapods. + +Ruby's [Bundler](https://bundler.io/) is a Ruby gem that helps managing the Ruby dependencies of your project. We need Ruby to install Cocoapods and using Bundler will make sure that all the dependencies are aligned and that the project works properly. + +If you want to learn more about why we need this tool, you can read [this article](https://bundler.io/guides/rationale.html#bundlers-purpose-and-rationale). + ### Xcode The easiest way to install Xcode is via the [Mac App Store](https://itunes.apple.com/us/app/xcode/id497799835?mt=12). Installing Xcode will also install the iOS Simulator and all the necessary tools to build your iOS app. @@ -37,15 +66,7 @@ To install a simulator, open Xcode > Preferences... and select #### CocoaPods -[CocoaPods](https://cocoapods.org/) is built with Ruby and it will be installable with the default Ruby available on macOS. - -Using the default Ruby available on macOS will require you to use `sudo` when installing gems. (This is only an issue for the duration of the gem installation, though.) - -```shell -sudo gem install cocoapods -``` - -Otherwise you can use a Ruby version manager, such as `rbenv`. Apps created with the command `npx react-native init` described below are configured to work well with `rbenv` and will pick the correct Ruby version requested by the template. +[CocoaPods](https://cocoapods.org/) is one of the dependency management system available for iOS. It is built with Ruby and you can install it using the version of Ruby you configured with in the previous steps. For more information, please visit [CocoaPods Getting Started guide](https://guides.cocoapods.org/using/getting-started.html). @@ -67,6 +88,17 @@ npx react-native init AwesomeProject This is not necessary if you are integrating React Native into an existing application, if you "ejected" from Expo, or if you're adding iOS support to an existing React Native project (see [Integration with Existing Apps](integration-with-existing-apps.md)). You can also use a third-party CLI to init your React Native app, such as [Ignite CLI](https://github.com/infinitered/ignite). +:::info + +If you are having trouble with iOS, try to reinstall the dependencies by running: + +1. `cd ios` to navigate to the +2. `bundle install` to install Bundler + 1. If needed: install a [Ruby Version Manager](#ruby) and update the Ruby version +3. `bundle exec pod install` to install the iOS dependencies. + +::: + ### [Optional] Using a specific version or template If you want to start a new project with a specific React Native version, you can use the `--version` argument: diff --git a/docs/_getting-started-windows-android.md b/docs/_getting-started-windows-android.md index 038a898e240..1ae3a3c9c21 100644 --- a/docs/_getting-started-windows-android.md +++ b/docs/_getting-started-windows-android.md @@ -17,14 +17,14 @@ React Native also requires [Java SE Development Kit (JDK)](https://openjdk.java. 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 openjdk11 +choco install -y nodejs-lts microsoft-openjdk11 ``` If you have already installed Node on your system, make sure it is Node 14 or newer. If you already have a JDK on your system, we recommend JDK11. You may encounter problems using higher JDK versions. > You can find additional installation options on [Node's Downloads page](https://nodejs.org/en/download/). -> If you're using the latest version of Java Development Kit, you'll need to change the Gradle version of your project so it can recognize the JDK. You can do that by going to `{project root folder}\android\gradle\wrapper\gradle-wrapper.properties` and changing the `distributionUrl` value to upgrade the Gradle version. You can check out [here the lastest releases of Gradle](https://gradle.org/releases/). +> If you're using the latest version of Java Development Kit, you'll need to change the Gradle version of your project so it can recognize the JDK. You can do that by going to `{project root folder}\android\gradle\wrapper\gradle-wrapper.properties` and changing the `distributionUrl` value to upgrade the Gradle version. You can check out [here the latest releases of Gradle](https://gradle.org/releases/).

Android development environment

diff --git a/docs/accessibility.md b/docs/accessibility.md index 17f444c3552..de91a016c42 100644 --- a/docs/accessibility.md +++ b/docs/accessibility.md @@ -161,6 +161,7 @@ In the above example method `addOne` changes the state variable `count`. As soon - **timer** Used to represent a timer. - **togglebutton** Used to represent a toggle button. Should be used with accessibilityState checked to indicate if the button is toggled on or off. - **toolbar** Used to represent a tool bar (a container of action buttons or components). +- **grid** Used with ScrollView, VirtualizedList, FlatList, or SectionList to represent a grid. Adds the in/out of grid announcements to the android GridView. ### `accessibilityState` @@ -203,6 +204,111 @@ A Boolean value indicating whether the accessibility elements contained within t For example, in a window that contains sibling views `A` and `B`, setting `accessibilityElementsHidden` to `true` on view `B` causes VoiceOver to ignore the elements in the view `B`. This is similar to the Android property `importantForAccessibility="no-hide-descendants"`. +### `aria-valuemax` + +Represents the maximum value for range-based components, such as sliders and progress bars. + +### `aria-valuemin` + +Represents the maximum value for range-based components, such as sliders and progress bars. + +### `aria-valuenow` + +Represents the current value for range-based components, such as sliders and progress bars. + +### `aria-valuetext` + +Represents the textual description of the component. + +### `aria-busy` + +Indicates an element is being modified and that assistive technologies may want to wait until the changes are complete before informing the user about the update. + +| Type | Default | +| ------- | ------- | +| boolean | false | + +### `aria-checked` + +Indicates the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes. + +| Type | Default | +| ---------------- | ------- | +| boolean, 'mixed' | false | + +### `aria-disabled` + +Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. + +| Type | Default | +| ------- | ------- | +| boolean | false | + +### `aria-expanded` + +Indicates whether an expandable element is currently expanded or collapsed. + +| Type | Default | +| ------- | ------- | +| boolean | false | + +### `aria-hidden` + +Indicates whether the accessibility elements contained within this accessibility element are hidden. + +For example, in a window that contains sibling views `A` and `B`, setting `aria-hidden` to `true` on view `B` causes VoiceOver to ignore the elements in the view `B`. + +| Type | Default | +| ------- | ------- | +| boolean | false | + +### `aria-label` + +Defines a string value that labels an interactive element. + +| Type | +| ------ | +| string | + +### `aria-labelledby`
Android
+ +Identifies the element that labels the element it is applied to. The value of `aria-labelledby` should match the [`nativeID`](view.md#nativeid) of the related element: + +```jsx + + Label for Input Field + + +``` + +| Type | +| ------ | +| string | + +### `aria-live`
Android
+ +Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region. + +- **off** Accessibility services should not announce changes to this view. +- **polite** Accessibility services should announce changes to this view. +- **assertive** Accessibility services should interrupt ongoing speech to immediately announce changes to this view. + +### `aria-modal`
iOS
+ +Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver. + +| Type | Default | +| ------- | ------- | +| boolean | false | + +### `aria-selected` + +Indicates whether a selectable element is currently selected or not. + +| Type | +| ------- | +| boolean | + ### `importantForAccessibility`
Android
In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The `importantForAccessibility` property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to `auto`, `yes`, `no` and `no-hide-descendants` (the last value will force accessibility services to ignore the component and all of its children). diff --git a/docs/accessibilityinfo.md b/docs/accessibilityinfo.md index 3d0555520b1..39fe88bcf58 100644 --- a/docs/accessibilityinfo.md +++ b/docs/accessibilityinfo.md @@ -210,7 +210,7 @@ Post a string to be announced by the screen reader with modification options. By static getRecommendedTimeoutMillis(originalTimeout) ``` -Gets the timeout in millisecond that the user needs. +Gets the timeout in millisecond that the user needs. This value is set in "Time to take action (Accessibility timeout)" of "Accessibility" settings. **Parameters:** @@ -293,6 +293,16 @@ Query whether a screen reader is currently enabled. Returns a promise which reso --- +### `prefersCrossFadeTransitions()`
iOS
+ +```jsx +static prefersCrossFadeTransitions() +``` + +Query whether reduce motion and prefer cross-fade transitions settings are currently enabled. Returns a promise which resolves to a boolean. The result is `true` when prefer cross-fade transitions is enabled and `false` otherwise. + +--- + ### `removeEventListener()` ```jsx diff --git a/docs/alert.md b/docs/alert.md index cd332863c3b..a347205a57c 100644 --- a/docs/alert.md +++ b/docs/alert.md @@ -142,7 +142,7 @@ export default App; ## iOS -On iOS you can specify any number of buttons. Each button can optionally specify a style, available options are represented by the [AlertButtonStyle](#alertbuttonstyle-ios) enum. +On iOS you can specify any number of buttons. Each button can optionally specify a style or be emphasized, available options are represented by the [AlertButtonStyle](#alertbuttonstyle-ios) enum and the `isPreferred` field on [Buttons](alert#buttons). ## Android @@ -293,11 +293,12 @@ Array of objects containing Alert buttons configuration. **Objects properties:** -| Name | Type | Description | -| -------------------------------------- | ---------------------------------------------- | ------------------------------------------------------- | -| text | string | Button label. | -| onPress | function | Callback function when button is pressed. | -| style
iOS
| [AlertButtonStyle](alert#alertbuttonstyle-ios) | Button style, on Android this property will be ignored. | +| Name | Type | Description | +| -------------------------------------------- | ---------------------------------------------- | ------------------------------------------------------------------------------ | +| text | string | Button label. | +| onPress | function | Callback function when button is pressed. | +| style
iOS
| [AlertButtonStyle](alert#alertbuttonstyle-ios) | Button style, on Android this property will be ignored. | +| isPreferred
iOS
| boolean | Whether button should be emphasized, on Android this property will be ignored. | --- diff --git a/docs/build-speed.md b/docs/build-speed.md index 7cbcacb390c..e1ed3ec0031 100644 --- a/docs/build-speed.md +++ b/docs/build-speed.md @@ -6,7 +6,7 @@ title: Speeding up your Build phase Building your React Native app could be **expensive** and take several minutes of developers time. This can be problematic as your project grows and generally in bigger organizations with multiple React Native developers. -With [the New React Native Architecture](/docs/next/new-architecture-app-modules-android), this problem is becoming more critical +With [the New React Native Architecture](new-architecture-app-intro), this problem is becoming more critical as you might have to compile some native C++ code in your project with the Android NDK in addition to the native code already necessary for the iOS and Android platforms. To mitigate this performance hit, this page shares some suggestions on how to **improve your build time**. @@ -79,12 +79,12 @@ On Mac OS, we can install ccache with `brew install ccache`. Once installed you can configure it as follows to cache NDK compile results: ``` -ln -s ccache /usr/local/bin/gcc -ln -s ccache /usr/local/bin/g++ -ln -s ccache /usr/local/bin/cc -ln -s ccache /usr/local/bin/c++ -ln -s ccache /usr/local/bin/clang -ln -s ccache /usr/local/bin/clang++ +ln -s $(which ccache) /usr/local/bin/gcc +ln -s $(which ccache) /usr/local/bin/g++ +ln -s $(which ccache) /usr/local/bin/cc +ln -s $(which ccache) /usr/local/bin/c++ +ln -s $(which ccache) /usr/local/bin/clang +ln -s $(which ccache) /usr/local/bin/clang++ ``` This will create symbolic links to `ccache` inside the `/usr/local/bin/` which are called `gcc`, `g++`, and so on. diff --git a/docs/colors.md b/docs/colors.md index b396bfbfb38..835f8a897cf 100644 --- a/docs/colors.md +++ b/docs/colors.md @@ -26,14 +26,27 @@ React Native supports `rgb()` and `rgba()` in both hexadecimal and functional no - `'#f0ff'` (#rgba) - `'#ff00ff00'` (#rrggbbaa) - `'rgb(255, 0, 255)'` +- `'rgb(255 0 255)'` - `'rgba(255, 0, 255, 1.0)'` +- `'rgba(255 0 255 / 1.0)'` ### Hue Saturation Lightness (HSL) React Native supports `hsl()` and `hsla()` in functional notation: - `'hsl(360, 100%, 100%)'` +- `'hsl(360 100% 100%)'` - `'hsla(360, 100%, 100%, 1.0)'` +- `'hsla(360 100% 100% / 1.0)'` + +### Hue Whiteness Blackness (HWB) + +React Native supports `hwb()` in functional notation: + +- `'hwb(0, 0%, 100%)'` +- `'hwb(360, 100%, 100%)'` +- `'hwb(0 0% 0%)'` +- `'hwb(70 50% 0%)'` ### Color ints diff --git a/docs/flatlist.md b/docs/flatlist.md index 0398e1181c3..9314678a537 100644 --- a/docs/flatlist.md +++ b/docs/flatlist.md @@ -245,11 +245,11 @@ For simplicity, data is a plain array. If you want to use something else, like a ### `ItemSeparatorComponent` -Rendered in between each item, but not at the top or bottom. By default, `highlighted` and `leadingItem` props are provided. `renderItem` provides `separators.highlight`/`unhighlight` which will update the `highlighted` prop, but you can also add custom props with `separators.updateProps`. +Rendered in between each item, but not at the top or bottom. By default, `highlighted` and `leadingItem` props are provided. `renderItem` provides `separators.highlight`/`unhighlight` which will update the `highlighted` prop, but you can also add custom props with `separators.updateProps`. Can be a React Component (e.g. `SomeComponent`), or a React element (e.g. ``). -| Type | -| --------- | -| component | +| Type | +| ---------------------------- | +| component, function, element | --- diff --git a/docs/flexbox.md b/docs/flexbox.md index 4ba10df006b..f4b44da084c 100644 --- a/docs/flexbox.md +++ b/docs/flexbox.md @@ -16,7 +16,7 @@ The defaults are different, with `flexDirection` defaulting to `column` instead [`flex`](layout-props#flex) will define how your items are going to **“fill”** over the available space along your main axis. Space will be divided according to each element's flex property. -In the following example, the red, yellow, and green views are all children in the container view that has `flex: 1` set. The red view uses `flex: 1` , the yellow view uses `flex: 2`, and the green view uses `flex: 3` . **1+2+3 = 6**, which means that the red view will get `1/6` of the space, the yellow `2/6` of the space, and the green `3/6` of the space. +In the following example, the red, orange, and green views are all children in the container view that has `flex: 1` set. The red view uses `flex: 1` , the orange view uses `flex: 2`, and the green view uses `flex: 3` . **1+2+3 = 6**, which means that the red view will get `1/6` of the space, the orange `2/6` of the space, and the green `3/6` of the space. ```SnackPlayer name=Flex%20Example import React from "react"; diff --git a/docs/headless-js-android.md b/docs/headless-js-android.md index 61bf1181e3b..10c712c4a55 100644 --- a/docs/headless-js-android.md +++ b/docs/headless-js-android.md @@ -56,7 +56,7 @@ public class MyTaskService extends HeadlessJsTaskService { "SomeTaskName", Arguments.fromBundle(extras), 5000, // timeout for the task - false // optional: defines whether or not the task is allowed in foreground. Default is false + false // optional: defines whether or not the task is allowed in foreground. Default is false ); } return null; @@ -79,10 +79,10 @@ class MyTaskService : HeadlessJsTaskService() { override fun getTaskConfig(intent: Intent): HeadlessJsTaskConfig? { return intent.extras?.let { HeadlessJsTaskConfig( - "SomeT askName", + "SomeTaskName", Arguments.fromBundle(it), 5000, // timeout for the task - false // optional: defines whether or not the task is allowed in foreground. + false // optional: defines whether or not the task is allowed in foreground. // Default is false ) } diff --git a/docs/hermes.md b/docs/hermes.md index cd6b6c9eaf4..553e74e803d 100644 --- a/docs/hermes.md +++ b/docs/hermes.md @@ -9,9 +9,78 @@ import M1Cocoapods from './\_markdown-m1-cocoapods.mdx'; -[Hermes](https://hermesengine.dev) is an open-source JavaScript engine optimized for React Native. For many apps, enabling Hermes will result in improved start-up time, decreased memory usage, and smaller app size. At this time Hermes is an **opt-in** React Native feature, and this guide explains how to enable it. +[Hermes](https://hermesengine.dev) is an open-source JavaScript engine optimized for React Native. For many apps, enabling Hermes will result in improved start-up time, decreased memory usage, and smaller app size. +As of React Native 0.70, Hermes is the default engine and no additional configuration is required to enable it. -First, ensure you're using at least version 0.60.4 of React Native. +## Bundled Hermes + +Starting with React Native 0.69.0, every version of React Native will come with a **bundled version** of Hermes. +We will be building a version of Hermes for you whenever we release a new version of React Native. This will make sure you're consuming a version of Hermes which is fully compatible with the version of React Native you're using. + +Historically, we had problems with matching versions of Hermes with versions of React Native. This fully eliminates this problem, and offers users a JS engine that is compatible with the specific React Native version. + +This change is fully transparent to users of React Native. You can still enable/disable Hermes using the command described in this page. +You can [read more about the technical implementation on this page](/architecture/bundled-hermes). + +## Confirming Hermes is in use + +If you've recently created a new app from scratch, you should see if Hermes is enabled in the welcome view: + +![Where to find JS engine status in AwesomeProject](/docs/assets/HermesApp.jpg) + +A `HermesInternal` global variable will be available in JavaScript that can be used to verify that Hermes is in use: + +```jsx +const isHermes = () => !!global.HermesInternal; +``` + +:::caution +If you are using a non-standard way of loading the JS bundle, it is possible that the `HermesInternal` variable is available but you aren't using the highly optimised pre-compiled bytecode. +Confirm that you are using the `.hbc` file and also benchmark the before/after as detailed below. +::: + +To see the benefits of Hermes, try making a release build/deployment of your app to compare. For example: + +```shell +$ npx react-native run-android --variant release +``` + +or for iOS: + +```shell +$ npx react-native run-ios --configuration Release +``` + +This will compile JavaScript to bytecode during build time which will improve your app's startup speed on device. + +## Debugging JS on Hermes using Google Chrome's DevTools + +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 Developer 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). +::: + +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. + +Once you know where the Metro server is listening, you can connect with Chrome using the following steps: + +1. Navigate to `chrome://inspect` in a Chrome browser instance. + +2. Use the `Configure...` button to add the Metro server address (typically `localhost:8081` as described above). + +![Configure button in Chrome DevTools devices page](/docs/assets/HermesDebugChromeConfig.png) + +![Dialog for adding Chrome DevTools network targets](/docs/assets/HermesDebugChromeMetroAddress.png) + +3. You should now see a "Hermes React Native" target with an "inspect" link which can be used to bring up debugger. If you don't see the "inspect" link, make sure the Metro server is running. ![Target inspect link](/docs/assets/HermesDebugChromeInspect.png) + +4. You can now use the Chrome debug tools. For example, to breakpoint the next time some JavaScript is run, click on the pause button and trigger an action in your app which would cause JavaScript to execute. ![Pause button in debug tools](/docs/assets/HermesDebugChromePause.png) + +## Enabling Hermes on Older Versions of React Native + +Hermes is the default engine as of React Native 0.70. This section explains how to enable Hermes on older versions of React Native. +First, ensure you're using at least version 0.60.4 of React Native to enable Hermes on Android or 0.64 of React Native to enable Hermes on iOS. If you have an existing app based on an earlier version of React Native, you will have to upgrade it first. See [Upgrading to new React Native Versions](/docs/upgrading) for how to do this. After upgrading the app, make sure everything works before trying to switch to Hermes. @@ -24,8 +93,6 @@ Version mismatch can result in instant crash of your apps in the worst case scen Hermes requires [Microsoft Visual C++ 2015 Redistributable](https://www.microsoft.com/en-us/download/details.aspx?id=48145). ::: -## Enabling Hermes - ### Android Edit your `android/app/build.gradle` file and make the change illustrated below: @@ -36,6 +103,18 @@ Edit your `android/app/build.gradle` file and make the change illustrated below: - enableHermes: false // clean and rebuild if changing + enableHermes: true // clean and rebuild if changing ] + +// ... + +if (enableHermes) { +- def hermesPath = "../../node_modules/hermes-engine/android/"; +- debugImplementation files(hermesPath + "hermes-debug.aar") +- releaseImplementation files(hermesPath + "hermes-release.aar") ++ //noinspection GradleDynamicVersion ++ implementation("com.facebook.react:hermes-engine:+") { // From node_modules ++ exclude group:'com.facebook.fbjni' ++ } +} else { ``` Also, if you're using ProGuard, you will need to add these rules in `proguard-rules.pro` : @@ -93,67 +172,32 @@ That's it! You should now be able to develop and deploy your app as usual: $ npx react-native run-ios ``` -## Confirming Hermes is in use +## Switching back to JavaScriptCore -If you've recently created a new app from scratch, you should see if Hermes is enabled in the welcome view: +React Native also supports using JavaScriptCore as the JS engine. Follow these instructions to opt-out of Hermes. -![Where to find JS engine status in AwesomeProject](/docs/assets/HermesApp.jpg) +### Android -A `HermesInternal` global variable will be available in JavaScript that can be used to verify that Hermes is in use: +Edit your `android/app/build.gradle` file and make the change illustrated below: -```jsx -const isHermes = () => !!global.HermesInternal; +```diff + project.ext.react = [ +- enableHermes: true, // clean and rebuild if changing ++ enableHermes: false, // clean and rebuild if changing + ] ``` -:::caution -If you are using a non-standard way of loading the JS bundle, it is possible that the `HermesInternal` variable is available but you aren't using the highly optimised pre-compiled bytecode. -Confirm that you are using the `.hbc` file and also benchmark the before/after as detailed below. -::: - -To see the benefits of Hermes, try making a release build/deployment of your app to compare. For example: - -```shell -$ npx react-native run-android --variant release -``` +### iOS -or for iOS: +Edit your `ios/Podfile` file and make the change illustrated below: -```shell -$ npx react-native run-ios --configuration Release +```diff + use_react_native!( + :path => config[:reactNativePath], + # Hermes is now enabled by default. Disable by setting this flag to false. + # Upcoming versions of React Native may rely on get_default_flags(), but + # we make it explicit here to aid in the React Native upgrade process. +- :hermes_enabled => flags[:hermes_enabled], ++ :hermes_enabled => false, + ) ``` - -This will compile JavaScript to bytecode during build time which will improve your app's startup speed on device. - -## Bundled Hermes - -Starting with React Native 0.69.0, every version of React Native will come with a **bundled version** of Hermes. -We will be building a version of Hermes for you whenever we release a new version of React Native. This will make sure you're consuming a version of Hermes which is fully compatible with the version of React Native you're using. - -Historically, we had problems with matching versions of Hermes with versions of React Native. This fully eliminates this problem, and offers users a JS engine that is compatible with the specific React Native version. - -This change is fully transparent to users of React Native. You can still enable/disable Hermes using the command described in this page. -You can [read more about the technical implementation on this page](/architecture/bundled-hermes). - -## Debugging JS on Hermes using Google Chrome's DevTools - -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 Developer 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). -::: - -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. - -Once you know where the Metro server is listening, you can connect with Chrome using the following steps: - -1. Navigate to `chrome://inspect` in a Chrome browser instance. - -2. Use the `Configure...` button to add the Metro server address (typically `localhost:8081` as described above). - -![Configure button in Chrome DevTools devices page](/docs/assets/HermesDebugChromeConfig.png) - -![Dialog for adding Chrome DevTools network targets](/docs/assets/HermesDebugChromeMetroAddress.png) - -3. You should now see a "Hermes React Native" target with an "inspect" link which can be used to bring up debugger. If you don't see the "inspect" link, make sure the Metro server is running. ![Target inspect link](/docs/assets/HermesDebugChromeInspect.png) - -4. You can now use the Chrome debug tools. For example, to breakpoint the next time some JavaScript is run, click on the pause button and trigger an action in your app which would cause JavaScript to execute. ![Pause button in debug tools](/docs/assets/HermesDebugChromePause.png) diff --git a/docs/image.md b/docs/image.md index 82c8349770f..ad09cb513e1 100644 --- a/docs/image.md +++ b/docs/image.md @@ -259,6 +259,19 @@ When the image is resized, the corners of the size specified by `capInsets` will --- +### `crossOrigin` + +A string of a keyword specifying the CORS mode to use when fetching the image resource. It works similar to crossorigin attribute in HTML. + +- `anonymous`: No exchange of user credentials in the image request. +- `use-credentials`: Sets `Access-Control-Allow-Credentials` header value to `true` in the image request. + +| Type | Default | +| ---------------------------------------- | ------------- | +| enum(`'anonymous'`, `'use-credentials'`) | `'anonymous'` | + +--- + ### `defaultSource` A static image to display while loading the image source. @@ -273,7 +286,7 @@ A static image to display while loading the image source. ### `fadeDuration`
Android
-Fade animation duration in miliseconds. +Fade animation duration in milliseconds. | Type | Default | | ------ | ------- | @@ -281,6 +294,16 @@ Fade animation duration in miliseconds. --- +### `height` + +Height of the image component. + +| Type | +| ------ | +| number | + +--- + ### `loadingIndicatorSource` Similarly to `source`, this property represents the resource used to render the loading indicator for the image. The loading indicator is displayed until image is ready to be displayed, typically after the image is downloaded. @@ -393,6 +416,16 @@ More details about `resize` and `scale` can be found at http://frescolib.org/doc --- +### `referrerPolicy` + +A string indicating which referrer to use when fetching the resource. Sets the value for `Referrer-Policy` header in the image request. Works similar to `referrerpolicy` attribute in HTML. + +| Type | Default | +| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------- | +| enum(`'no-referrer'`, `'no-referrer-when-downgrade'`, `'origin'`, `'origin-when-cross-origin'`, `'same-origin'`, `'strict-origin'`, `'strict-origin-when-cross-origin'`, `'unsafe-url'`) | `'strict-origin-when-cross-origin'` | + +--- + ### `resizeMode` Determines how to resize the image when the frame doesn't match the raw image dimensions. Defaults to `cover`. @@ -430,6 +463,34 @@ The currently supported formats are `png`, `jpg`, `jpeg`, `bmp`, `gif`, `webp`, --- +### `src` + +A string representing the remote URL of the image. This prop has precedence over `source` prop. + +**Example:** `src={'https://reactnative.dev/img/tiny_logo.png'}` + +| Type | +| ------ | +| string | + +--- + +### `srcSet` + +A string representing comma separated list of possible candidate image source. Each image source contains a URL of an image and a pixel density descriptor. If no descriptor is specified, it defaults to descriptor of `1x`. + +If `srcSet` does not contain a `1x` descriptor, the value in `src` is used as image source with `1x` descriptor (if provided). + +This prop has precedence over both the `src` and `source` props. + +**Example:** `srcSet={'https://reactnative.dev/img/tiny_logo.png 1x, https://reactnative.dev/img/header_logo.svg 2x'}` + +| Type | +| ------ | +| string | + +--- + ### `style` | Type | @@ -446,6 +507,26 @@ A unique identifier for this element to be used in UI Automation testing scripts | ------ | | string | +--- + +### `tintColor` + +Changes the color of all non-transparent pixels to the `tintColor`. + +| Type | +| ------------------ | +| [color](colors.md) | + +--- + +### `width` + +Width of the image component. + +| Type | +| ------ | +| number | + ## Methods ### `abortPrefetch()`
Android
diff --git a/docs/intro-react-native-components.md b/docs/intro-react-native-components.md index 00d22878aad..54eb7f69311 100644 --- a/docs/intro-react-native-components.md +++ b/docs/intro-react-native-components.md @@ -1,7 +1,7 @@ --- id: intro-react-native-components -title: Core Components and Fabric Components -description: 'React Native lets you compose app interfaces using Fabric Components. Conveniently, it comes with a set of these components for you to get started with right now—the Core Components!' +title: Core Components and Native Components +description: 'React Native lets you compose app interfaces using Native Components. Conveniently, it comes with a set of these components for you to get started with right now—the Core Components!' --- import ThemedImage from '@theme/ThemedImage'; @@ -17,17 +17,17 @@ In Android and iOS development, a **view** is the basic building block of UI: a
Just a sampling of the many views used in Android and iOS apps.
-## Fabric Components +## Native Components -In Android development, you write views in Kotlin or Java; in iOS development, you use Swift or Objective-C. With React Native, you can invoke these views with JavaScript using React components. At runtime, React Native creates the corresponding Android and iOS views for those components. Because React Native components are backed by the same views as Android and iOS, React Native apps look, feel, and perform like any other apps. We call these platform-backed components **Fabric Components.** [_Fabric_](architecture/fabric-renderer) is the name of the React Native renderer, therefore components that are rendered via Fabric are called Fabric Components. +In Android development, you write views in Kotlin or Java; in iOS development, you use Swift or Objective-C. With React Native, you can invoke these views with JavaScript using React components. At runtime, React Native creates the corresponding Android and iOS views for those components. Because React Native components are backed by the same views as Android and iOS, React Native apps look, feel, and perform like any other apps. We call these platform-backed components **Native Components.** -React Native comes with a set of essential, ready-to-use Fabric Components you can use to start building your app today. These are React Native's **Core Components**. +React Native comes with a set of essential, ready-to-use Native Components you can use to start building your app today. These are React Native's **Core Components**. -React Native also lets you build your own [Fabric Components](the-new-architecture/pillars-fabric-components) to suit your app’s unique needs. We also have a thriving ecosystem of these **community-contributed components.** Check out [Native Directory](https://reactnative.directory) to find what the community has been creating. +React Native also lets you build your own Native Components for [Android](native-components-android.md) and [iOS](native-components-ios.md) to suit your app’s unique needs. We also have a thriving ecosystem of these **community-contributed components.** Check out [Native Directory](https://reactnative.directory) to find what the community has been creating. ## Core Components -React Native has many Core Components for everything form controls to activity indicators. You can find them all [documented in the API section](components-and-apis). You will mostly work with the following Core Components: +React Native has many Core Components for everything from controls to activity indicators. You can find them all [documented in the API section](components-and-apis). You will mostly work with the following Core Components: | React Native UI Component | Android View | iOS View | Web Analog | Description | | ------------------------- | -------------- | ---------------- | ----------------------- | ----------------------------------------------------------------------------------------------------- | diff --git a/docs/introduction.md b/docs/introduction.md index 1e4c9abbdbe..f77b91adf9b 100644 --- a/docs/introduction.md +++ b/docs/introduction.md @@ -8,7 +8,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con

- Welcome to the very start of your React Native journey! If you're looking for environment setup instructions, they've moved to their own section. Continue reading for an introduction to the documentation, Fabric Components, React, and more! + Welcome to the very start of your React Native journey! If you're looking for environment setup instructions, they've moved to their own section. Continue reading for an introduction to the documentation, Native Components, React, and more!

@@ -136,4 +136,4 @@ Menu paths are written in bold and use carets to navigate submenus. Example: **A --- -Now that you know how this guide works, it's time to get to know the foundation of React Native: [Fabric Components](intro-react-native-components.md). +Now that you know how this guide works, it's time to get to know the foundation of React Native: [Native Components](intro-react-native-components.md). diff --git a/docs/layout-props.md b/docs/layout-props.md index 3f92f1af490..c39be8674cb 100644 --- a/docs/layout-props.md +++ b/docs/layout-props.md @@ -60,8 +60,8 @@ const App = () => { {squares.map(elem => elem)} - - + +