From 9ce8c5bc77bcff767b4780268c9e6fecfd73139f Mon Sep 17 00:00:00 2001 From: sunnylqm Date: Mon, 7 Nov 2022 15:24:33 +0800 Subject: [PATCH] Squashed commit of the following: MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit commit 00c2808a71cee840d16b12d0f1406a3c87a0facf Author: Hyungu Kang | Airen Date: Sun Nov 6 21:14:16 2022 +0900 Added lineBreakStrategyIOS to Text and TextInput (#2566) Co-authored-by: Bartosz Kaszubowski commit ab32e2dea93e04577cea66bac6ea61966348eeb4 Author: Robbie Plankenhorn Date: Sun Nov 6 02:38:15 2022 -0600 Speeding up Build: Fixing symbolic links (#3329) commit 8e222896ea2158029b84408d3716c4c8ed7ddb67 Author: Eric Edouard Amilhat Date: Sat Nov 5 08:44:59 2022 +0100 View Style Props: Add borderCurve prop (#2785) commit c9440215742146c092573c8f6be5779afec20891 Author: Robbie Date: Sat Nov 5 07:41:43 2022 +0000 Alert: Add "isPreferred" to AlertButtonStyle (#2839) commit f279c065587fbee364709168975b7b3496675d47 Author: Gabriel Donadel Dall'Agnol Date: Sat Nov 5 04:18:08 2022 -0300 Add missing aria props to Accessibility docs (#3396) commit 00646cd845c7ba296159c4d392ffe3b54eb92f28 Author: Gabriel Donadel Dall'Agnol Date: Fri Nov 4 21:20:18 2022 -0300 feat: Update fontVariant supported types docs (#3378) commit 96f429765133de969e3aafdf4142d132c0b29e06 Author: khali70 <59835449+khali70@users.noreply.github.com> Date: Sat Nov 5 02:16:15 2022 +0200 update to microsoft-openjdk11 (#3386) commit cdd9399f16571b6a9669226fec27fd7734ed4848 Author: Gabriel Donadel Dall'Agnol Date: Fri Nov 4 05:38:35 2022 -0300 Fix documentation typos (#3395) commit ea4f803121f7852f2de83a417aa8401726eca216 Author: Alex Hunt Date: Wed Nov 2 21:07:20 2022 +0000 Tweak homepage text to more broadly refer to platforms (#3391) commit 1636d5e07eb5a037f2d1d83f530f3532af8795a9 Author: Rafael Ricardo Vieceli <2790845+rvieceli@users.noreply.github.com> Date: Tue Nov 1 12:31:44 2022 +0100 Replaced editUrl branch name with main (#3389) commit b47dc1df6fca663fe6abd74f311e07e14c02b157 Author: David Narbutovich <4661784+retyui@users.noreply.github.com> Date: Mon Oct 31 11:35:57 2022 +0100 Recommend to use `es2019` and use community driven TS config `@tsconfig/react-native` (#3342) commit fd87e46a2cc9e9d3ba514f44f65e6aff1f072837 Author: Peter Cho Date: Fri Oct 28 17:54:38 2022 -0400 Build from Source: add missing paren in publishing (#3387) commit d4fcb9375f3ed40aa4c54028f912f55bd6c91431 Author: Héctor Ramos <165856+hramos@users.noreply.github.com> Date: Thu Oct 27 19:38:17 2022 -0700 The Hermes docs in next, also apply to 0.70. (#3380) commit 0339cae6d8ad78fc56ffc4513b75fa6613ef2466 Author: Héctor Ramos <165856+hramos@users.noreply.github.com> Date: Tue Oct 25 09:42:20 2022 -0700 Add updated instructions on using Hermes (#3376) * Add updated instructions on using Hermes * lint commit df492cefb920a0375f2bb982951229380a73ad88 Author: Telmen Date: Wed Oct 19 19:20:52 2022 +0800 Fix typo in New Architecture Intro (#3374) Co-authored-by: Bartosz Kaszubowski commit 262ff68833ac34982e64d174c997f0d194eb7e10 Author: mjh <61671361+mjh316@users.noreply.github.com> Date: Wed Oct 19 01:39:56 2022 -0700 Fixed typo in headless-js-android.md (#3377) commit e4d09821bdfcf1264e25afb3d3407f4a100f3228 Author: Lorenzo Sciandra Date: Tue Oct 18 16:50:27 2022 +0100 chore(release): Update release testing section for new E2E testing script (#3368) * remove E2E section until we'll re-add it post E2E setup * remove mention of the E2E script * rework the release testing page * add mention of where to find the info to turn on new arch * typo * re-add section commit 20908b3563daec70ac964ed9d11482f4f198eab1 Author: Nicola Corti Date: Sun Oct 16 16:45:48 2022 +0100 New Architecture - Remove the extra steps required to copy .so files (#3356) commit ae47850fc526af4edaa03e27a7ba9479643a9130 Author: Riccardo Date: Sun Oct 16 16:45:12 2022 +0100 fix: improve TM explanation (#3364) commit f042dca61acf8b5c06157752e787f6c6a704caf3 Author: Bartosz Kaszubowski Date: Wed Oct 12 20:50:17 2022 +0200 add back missing docs vote component (#3371) commit 6dc2805e4d93a6e47ae1a70f2aaab1303d47d77f Author: Luis Medina Date: Wed Oct 12 03:19:27 2022 -0500 docs: update running on simulator iOS (#3346) commit 3add39c3f258868673a5740a873b7559bd2434dc Author: Karl Horky Date: Wed Oct 12 10:16:55 2022 +0200 Getting Started: list zsh before bash in macOS guide (#3358) Co-authored-by: Nicola Corti commit f6be947a820080785db66904f961cdecd6051aa5 Author: Chukwu Smart Date: Wed Oct 12 09:14:23 2022 +0100 ScrollView: rephrase onContentSizeChange description (#3357) Co-authored-by: Nicola Corti commit 37d85ba6a1b4f061f7c0767c6a35cb62ad27c61c Author: Gabriel Donadel Dall'Agnol Date: Wed Oct 12 05:11:14 2022 -0300 Layout Props: Update aspectRatio supported types (#3363) commit e00c9b0f5d3e207422c10b609a1e00b2893ee78e Author: Jesse Katsumata Date: Wed Oct 12 17:07:36 2022 +0900 Getting Started: fix Android version label in older docs (#3367) commit 03d88486b5136e2bdf62d78ce6ff68254216e7cc Author: Timothy Yung Date: Tue Oct 11 15:15:08 2022 -0700 Fix headers on *.ts files (#3370) commit e5ba872c47bdd8ca58d3e4360ac3ce1c4591821c Author: Timothy Yung Date: Tue Oct 11 15:07:00 2022 -0700 Missing header in `docusaurus.config.js` (#3369) commit f0d9c4a13e1da72b544b569334bd63bb48fb7363 Author: Jesse Katsumata Date: Sat Oct 8 05:45:16 2022 +0900 Communities: remove duplicate header (#3365) commit a6e74190571efadcdbe1437cce85eaedbce4e503 Author: Gabriel Donadel Dall'Agnol Date: Thu Oct 6 06:45:52 2022 -0300 feat: Add verticalAlign to Text Style Props docs (#3361) commit 911a2825d06caa081a080c9160b9dc3defc37e27 Author: Nicola Corti Date: Wed Oct 5 11:15:01 2022 +0100 Finalize the Kotlinization (#3360) * Finalize the Kotlinization * Remove extra imports commit 3c124e068c87462b7396ba75112e314dd89c5cab Author: Asaf Korem <55082339+asafkorem@users.noreply.github.com> Date: Tue Oct 4 21:03:42 2022 +0300 Showcase: add Wix's apps section. (#3349) commit 2e4eb04c4cf8cc08891c9d03f20cd9a5c43bb7ae Author: Kryštof Woldřich <31292499+krystofwoldrich@users.noreply.github.com> Date: Tue Oct 4 13:09:33 2022 +0200 Fix codegen iOS scripts paths (#3359) commit 4c3603bdb3b3d79cc06d0c61d314271529272b3c Author: Ismael Moreira Date: Mon Oct 3 14:09:54 2022 -0300 Update pillars-turbomodule.md (#3355) commit 4b1aeff450c5beac1d56f3e53c3a4bc33ce2e502 Author: Oskar Kwaśniewski Date: Mon Oct 3 15:58:05 2022 +0200 fix: remove isTurboModuleEnabled check from docs (#3337) * fix: remove isTurboModuleEnabled check * fix: remove unnecessary back ticks Co-authored-by: Riccardo Co-authored-by: Riccardo commit 9987b073834c441376411803327ca98b5830a847 Author: Timothy Yung Date: Fri Sep 30 08:43:45 2022 -0700 Fix more copyright header issues (#3353) commit 84397da4472126692672d80a28e3b2d83b984e25 Author: Timothy Yung Date: Fri Sep 30 08:43:28 2022 -0700 Update to Contributor Covenant (#3354) commit 6e981dd26610f352d4511cd81ead09f6926124df Author: Lorenzo Sciandra Date: Fri Sep 30 11:57:11 2022 +0100 rework the community section of the website (#3338) Co-authored-by: Luna commit b943d450e1fcc915ff50f3363e5d9fb15a1e3c20 Author: Timothy Yung Date: Fri Sep 30 00:49:39 2022 -0700 Apply updated copyright to `*.js` files (#3352) commit 006f5730485614459db8f25f7f5e79191848360b Author: Timothy Yung Date: Fri Sep 30 00:48:43 2022 -0700 Address Security Vulnerabilities in Dependencies (#3351) commit d6fe39d70c90e973d30b3f1512a77581a8657810 Author: Arati Chilad <58401542+arati-1@users.noreply.github.com> Date: Wed Sep 28 03:43:38 2022 -0700 Checks for the documentation (#3348) commit 3d1ea2c37dd05fac159b8864d1a3f977241b54d1 Author: Lorenzo Sciandra Date: Tue Sep 27 17:27:34 2022 +0100 add NFL to the showcase (#3347) commit ff9886c119e1d5686240cee250c2245a773d1a73 Author: Pavlos Vinieratos Date: Mon Sep 26 12:44:01 2022 +0300 Update showcase link for Artsy (#3340) commit 905824ad1327dda42dc217542317f3199830bffe Author: Joshua Yoes <37849890+joshuayoes@users.noreply.github.com> Date: Mon Sep 26 01:17:31 2022 -0700 fix(native-modules-android.md): rename createCalendarEventCallback (#3345) commit 400d50908f248f3feb22cd258f3c05b306962c68 Author: Damoness Date: Mon Sep 26 15:54:57 2022 +0800 Layout Props: clean warning in example (#3344) commit 86139c5e5a906629f3ffc863987bcd0e5e903c52 Author: David Narbutovich <4661784+retyui@users.noreply.github.com> Date: Sun Sep 25 21:14:53 2022 +0400 Document ability to pass Element via ItemSeparatorComponent (#3343) commit c9448b07cd424faacbb24d2083853400bc481145 Author: Daksh Bhardwaj Date: Fri Sep 23 14:33:41 2022 +0530 add documentation for `aria-valuemax` `aria-valuemin` `aria-valuenow` `aria-valuetext` (#3318) commit 54f9a7dbc8971c3287c517f96b3f74ae9990c065 Author: Connor Tumbleson Date: Fri Sep 23 03:02:12 2022 -0400 Add Source Maps Page (#3293) Co-authored-by: Bartosz Kaszubowski Co-authored-by: Dmytro Rykun commit 69f723bd2c816f13b0559da87e4278ec34fcfc0a Author: Daksh Bhardwaj Date: Fri Sep 23 12:29:47 2022 +0530 Text: add documentation for `userSelect` prop (#3311) commit 4260478fa856a72d7c141bf133f05f1161b760cf Author: Daksh Bhardwaj Date: Fri Sep 23 12:25:51 2022 +0530 add documentation for `aria-modal` prop (#3320) commit 94c5e800b4eb042f5b93c85ff151d9e123891a83 Author: Oskar Kwaśniewski Date: Thu Sep 22 14:46:19 2022 +0200 fix: remove isFabricEnabled check from docs (#3336) * fix: remove isFabricEnabled check * fix: language lint commit b55bdc6f3b003e8403fa58d18f70e101ed0e2d05 Author: Dhruv Tailor <32268377+dhruvtailor7@users.noreply.github.com> Date: Thu Sep 22 18:15:06 2022 +0530 Add new props to Image docs (#3310) commit 357254c6b5b754674a0b93e663f2c67c958179ac Author: Lorenzo Sciandra Date: Thu Sep 22 11:32:05 2022 +0100 chore: clean up new arch docs (#3332) * tweaks * revert change commit 12dc7125d050cc5362a6b75cafebd42dc7578bd3 Author: Akshansh Thakur Date: Wed Sep 21 23:18:21 2022 +0530 Updated button.md to reference Pressable (#3237) commit 875448365a47e9d99a623a54b8e5bc9c6e9b5c37 Author: Gabriel Donadel Dall'Agnol Date: Wed Sep 21 09:47:51 2022 -0300 Add id prop to Text, TouchableWithoutFeedback and View docs (#3285) commit 91ce6bc1535fd5ad5c524150c185cc0d3e3709dd Author: Riccardo Date: Wed Sep 21 12:52:34 2022 +0100 fix: Improve wording for iOS getting started (#3334) commit b5f5b5a31ce666a85fb6383db0b33e17c12e7fcf Author: Gabriel Donadel Dall'Agnol Date: Wed Sep 21 08:23:41 2022 -0300 Update colors docs regarding expanded support for CSS Colors (#3306) commit 4e386d6a794568dd6de0a8fc143db6bc34d24ec9 Author: Nicola Corti Date: Wed Sep 21 11:41:31 2022 +0100 Update docs with AGP 7.3.x setup (#3333) commit 72c8bd5f749ec7d3256af651a7ea1ed3ebd5a9c1 Author: Lorenzo Sciandra Date: Tue Sep 20 18:34:32 2022 +0100 Modify the top navbar to be less full (#3177) * modify navbar * rename * reorder and rename * reorder the navbar * change size to match the other elements * change style to match the other elements * tweak the footer to reflect the new header * fix link * fix the other link * small CSS tweaks * small naming tweak Co-authored-by: Bartosz Kaszubowski commit 7202412aec9f52de63926ce73c473676ec6f8ceb Author: Bartosz Kaszubowski Date: Tue Sep 20 00:35:29 2022 +0200 fix incorrect link to re-enable prod deploy (#3330) commit 5dd8fcd914f187bfe686f5dabc59326efae0a900 Author: Lorenzo Sciandra Date: Fri Sep 16 18:27:40 2022 +0100 showcase: update entries (#3328) commit 8c65a420c02b9c77f57aaa649a27eda941b5a290 Author: Lorenzo Sciandra Date: Fri Sep 16 11:19:11 2022 +0100 minor tweaks to the wording for the versions page (#3327) commit 7bb5d882995a8a0bd9553bdea8ff2ca4c26ac2d9 Author: Nicola Corti Date: Fri Sep 16 12:00:23 2022 +0300 [0.71.0] Update the New Architecture guide with the changes for the New Template on Android (#3324) Co-authored-by: Riccardo commit 5462afb4e7dcb6ef14272a34418c0e62aa47e0f7 Author: Sunny Luo Date: Fri Sep 16 16:04:34 2022 +0800 fix _getting-started-macos-ios.md info format (#3326) commit a917b04e8a154bdf99c0cf148feda9f9b1c2c867 Author: Nicola Corti Date: Thu Sep 15 14:54:20 2022 +0300 Fix broken links to Appendix (#3319) commit 1285a79f393a83f208f9b47243c6ee01aa6cc5c3 Author: Riccardo Date: Thu Sep 15 11:21:03 2022 +0200 [Fix] Improve Getting started with iOS (#3323) commit 791d9d12898851b7e4030ba80f2b28995067332c Author: Riccardo Date: Wed Sep 14 10:39:08 2022 +0200 [FEAT] Add doc to simplify podspecs for Native Modules and Native Components (#3321) * [FEAT] Add doc to simplify podspecs for Native Modules and Native Components * fix: apply suggested changes I Co-authored-by: Arati Chilad <58401542+arati-1@users.noreply.github.com> * fix: apply suggested changes II Co-authored-by: Arati Chilad <58401542+arati-1@users.noreply.github.com> * fix: apply suggested changes III Co-authored-by: Arati Chilad <58401542+arati-1@users.noreply.github.com> * fix: apply suggested changes IV Co-authored-by: Arati Chilad <58401542+arati-1@users.noreply.github.com> * fix: apply suggested changes V Co-authored-by: Arati Chilad <58401542+arati-1@users.noreply.github.com> * fix: apply suggested changes VI Co-authored-by: Arati Chilad <58401542+arati-1@users.noreply.github.com> Co-authored-by: Arati Chilad <58401542+arati-1@users.noreply.github.com> commit 046801154da4c379605d1966c704371373eee7fb Author: JiashengWu Date: Wed Sep 14 00:19:07 2022 -0700 Fix title case in testing-overview.md (#3322) commit 38cd75a4064debf2da7186d3e328928f83bbe63b Author: Nicola Corti Date: Tue Sep 13 19:24:25 2022 +0100 Remove unnecessary box from Legacy Native Modules/Components (#3313) commit bbd36d157cedab6517a62c4bfdd1cdf94b8aa432 Author: Nicola Corti Date: Fri Sep 9 21:18:24 2022 +0100 [0.70] Clarify New Architecture Terminology (#3315) commit c084b5a413a1f2345ae5289b7901eb91773b0279 Author: Nicola Corti Date: Fri Sep 9 21:18:04 2022 +0100 Clarify New Architecture Terminology - Take 2 (#3316) commit 63d00e7b4e91545c16fe8c505f9ed9b24ac82b73 Author: Ricky Date: Fri Sep 9 15:13:35 2022 -0400 Revert "Clarify New Architecture Terminology (#3308)" (#3314) This reverts commit 54d266b7842e1dda86b5877466f6a61fcf5bf043. commit 54d266b7842e1dda86b5877466f6a61fcf5bf043 Author: Nicola Corti Date: Fri Sep 9 15:08:43 2022 +0100 Clarify New Architecture Terminology (#3308) commit 42e0266b0c8b93c883b0253ae0f4c1fe825630e9 Author: Riccardo Date: Fri Sep 9 12:21:24 2022 +0100 fix: Address missing feedback from prev PR (#3312) commit 4a3b02c823728041b4b3d981e2bfb1f21c7fbc81 Author: Riccardo Date: Fri Sep 9 12:03:13 2022 +0100 [New Architecture][iOS][0.71.0] Update the App Migration section (#3268) commit 7c1091c6e37f60fc9d83d2da67cdb80a5934ba92 Author: Arati Chilad <58401542+arati-1@users.noreply.github.com> Date: Thu Sep 8 09:19:13 2022 -0700 The New Architecture section editorial review (#3288) * [Do Not Merge] Refactoring The New Architecture (#3029) * [Guide - The New Architecture] What Backward Compatibility Is (#3038) * Guide to creating a New Architecture app from template (#3056) * Start new template guide This is a first iteration. I want to get feedback on a few aspects, so starting from here as a baseline. * Update title * Use tabs for target OS Set up matching the style of "Getting Started", except I kept the headers inside the tabs for now as it makes for a useful right-hand TOC. * Capitalize New Architecture, simplify * Preliminary section for Hermes Add section for recommending enabling Hermes. Not sure of contents yet, and still have to test. * Reword to emphasize importance of Hermes usage * Show new arch in use * Add build speed article link * Add pro tip for pod install alias * Restructure, repeat less Favor linking to original setup guide instead of repeating content. * Note about Expo * Include command on uninstalling global CLI * How to learn more * Remove headers in tabs They don't work correctly with the righthand TOC. * Make header more clear * Use quote block less often There was way too much yellow. * Opt for instructions using XCode Because `xcodebuild clean` already failed me once when XCode GUI clean worked. * Fix lint issue * Improve wording * Use product name * Fix line wraps * Reword based on feedback * Note use of bundle install * Pod removal instructions Also standardize on using yarn scripts from template for commands, it's a little confusing to see the mix of `npx` and `yarn` once we start referring to `yarn pod-install` * Convert quotes to admonitions * Convert Note: to admonitions * Feedback: Change admonitions to caution * PR feedback * New Architecture landing page (#3072) * First draft of landing page * Add migration and backwards compatibility links * lint fix * Restructure slightly, leaning more on context from Why a New Architecture * Don't need md in links * Suggested rewording * Rephrase pillar summaries * [Guide - The New Architecture] Why A New Architecture (#3043) * [Guide - The New Architecture] Pillars (#3046) * [Guide - The New Architecture] TurboModules as Native Modules (#3039) * [Guide - The New Architecture] Fabric Components as Native Components (#3040) * [FEAT][TNA] Fabric Component Guide (#3132) * [Feat] Add intro for Fabric Components * feat: add guide to create a Fabric Component * Add page on codegen (#3155) * [FEAT] TurboModules guide (#3168) * [Feat] Add intro for Fabric Components * feat: add guide to create a Fabric Component * Beginning of guide/folder structure * WIP JS Spec * specification section * Configuration * native code intro * Must be named Spec * Best stab at iOS native code, but I don't know how to describe what's going on in the code very well. Extrapolated what I could. * Android instructions iOS isn't working for me. Builds, but can't load module. Writing up Android auto-linking next because the steps I tested did work. * Include linking instructions from RNNArch repo * Add example JavaScript * native modules link * Address quick feedback items * Remove, fix for rebased branch * fix TM parameter on Android * Revert to 'Codegen' casing * Revert folly version change 2021.07.22 is for current version on main * fix typo * getTurboModule explainer * Sentence edits - Fix acronym bolding - Change wording to "recommended" because "standard" has other connotations of possibly being required - Parentheses unnecessary, distracting * Remove TODO for now Getting inconsistent results here, not sure if this is wrong or not; removing TODO for now so it doesn't block anything * ABI rephrase, more in line with new Fabric guide wording * Explain shared C++ code more * feat: add guide to create a Fabric Component * feat: add guide to create a Fabric Component * package.json description * Lint fixes * fix: Move JS constants to reduce changes * fix: Remove newline * feat: add required step for Android Codegen * fix: use the proper links Co-authored-by: Riccardo Cipolleschi * wip: migration guide review (#3200) * Fix for some typos and other editorial related changes * Update docs/the-new-architecture/pillars-fabric-components.md correcting the article Co-authored-by: Riccardo * Update pillars-fabric-components.md Co-authored-by: Riccardo Co-authored-by: Lizzi Lindboe Co-authored-by: Riccardo commit 9e6e3116966e2b9ba6208bfd8ff2bb19ccff1983 Author: Nicola Corti Date: Thu Sep 8 12:55:43 2022 +0100 Follow-up on CMake clarification for 0.70 (#3309) commit 000d5811452c859d49e528236abf3ad6bda30333 Author: Nicola Corti Date: Thu Sep 8 09:49:49 2022 +0100 Update New Architecture instructions to use CMake instead of Android.mk (#3304) commit d9d4adb410e689f6e56167cd2c25765fc884a1b4 Author: Vojtech Novak Date: Wed Sep 7 09:08:34 2022 +0200 docs: fix path in script example (#3302) commit 10f26e9e84514838f35faf80f29a209a5f47371d Author: Ricky Date: Tue Sep 6 13:00:59 2022 -0400 Revert renaming native components (#3301) commit b4320925c492915510ee35179f711bba4e85c726 Author: Daksh Bhardwaj Date: Tue Sep 6 19:31:59 2022 +0530 TextInput: Add enterKeyHint prop (#3299) commit f57ac2d6b11b098800c19cdf3b41449b3de90784 Author: Gabriel Donadel Dall'Agnol Date: Tue Sep 6 09:36:40 2022 -0300 Image: Add tintColor prop (#3292) Co-authored-by: Bartosz Kaszubowski commit 7d7f4831fd33c0f889f60cc05c6862171f136056 Author: Gabriel Donadel Dall'Agnol Date: Tue Sep 6 09:35:28 2022 -0300 View: Add tabIndex prop (#3286) Co-authored-by: Bartosz Kaszubowski commit 9422060674dc1347df8494e882ebba358d48db9a Author: fabriziobertoglio1987 Date: Tue Sep 6 17:29:42 2022 +0800 adding accessibilityRole 'grid' to documentation (#3224) commit 0de9633e56b3079af82ffd2a000ac4a88ab66c34 Author: EvertEt Date: Tue Sep 6 11:22:19 2022 +0200 Flexbox: correct example description (#3284) commit 04250d6c0a173edccd5decf93c56f22678a0deee Author: Gabriel Donadel Dall'Agnol Date: Tue Sep 6 06:18:34 2022 -0300 TextInput: Add inputMode prop (#3289) commit 9a4ad7aaa04706a61ea128d6bfe4448132f8336b Author: Gabriel Donadel Dall'Agnol Date: Tue Sep 6 06:08:25 2022 -0300 TextInput: Add rows prop (#3280) commit 51a75437cd08bbe34d07cf2be10be70842dcd331 Author: Gabriel Donadel Dall'Agnol Date: Tue Sep 6 06:04:49 2022 -0300 AccessibilityInfo: add prefersCrossFadeTransitions to docs (#3279) commit 010d7cd5dcb9796024100ea9215e0baf7bb8ccd9 Author: Gabriel Donadel Dall'Agnol Date: Tue Sep 6 06:02:01 2022 -0300 TextInput: Add readOnly prop (#3278) --- .alexrc.js | 2 +- .eslintrc.json | 4 +- .github/ISSUE_TEMPLATE/config.yml | 13 + CODE_OF_CONDUCT.md | 180 ++--- LICENSE | 2 +- docs/_getting-started-macos-android.md | 6 +- docs/_getting-started-macos-ios.md | 52 +- docs/_getting-started-windows-android.md | 4 +- docs/accessibility.md | 106 +++ docs/accessibilityinfo.md | 12 +- docs/alert.md | 13 +- docs/build-speed.md | 14 +- docs/colors.md | 13 + docs/flatlist.md | 8 +- docs/flexbox.md | 2 +- docs/headless-js-android.md | 6 +- docs/hermes.md | 162 ++-- docs/image.md | 83 +- docs/intro-react-native-components.md | 14 +- docs/introduction.md | 4 +- docs/layout-props.md | 10 +- docs/more-resources.md | 2 +- docs/native-modules-android.md | 6 +- docs/native-modules-ios.md | 2 - docs/new-architecture-app-intro.md | 516 +++++++++---- docs/new-architecture-app-modules-android.md | 630 --------------- docs/new-architecture-app-modules-ios.md | 173 ----- docs/new-architecture-app-renderer-android.md | 453 ----------- docs/new-architecture-app-renderer-ios.md | 93 --- docs/new-architecture-appendix.md | 17 +- docs/new-architecture-intro.md | 8 +- docs/new-architecture-library-android.md | 15 +- docs/new-architecture-library-intro.md | 78 +- docs/new-architecture-library-ios.md | 40 +- docs/profile-hermes.md | 24 +- docs/react-18-and-react-native.md | 4 +- docs/running-on-simulator-ios.md | 4 +- docs/scrollview.md | 2 +- docs/sectionlist.md | 8 +- docs/sourcemaps.md | 82 ++ docs/testing-overview.md | 2 +- docs/text-style-props.md | 16 +- docs/text.md | 30 + docs/textinput.md | 75 ++ .../_markdown_native_deprecation.mdx | 2 +- ...ackward-compatibility-fabric-components.md | 229 ++++-- .../backward-compatibility-turbomodules.md | 244 ++++-- .../backward-compatibility.md | 10 +- docs/the-new-architecture/landing-page.md | 16 +- docs/the-new-architecture/pillars-codegen.md | 73 +- .../pillars-fabric-components.md | 282 +++++-- .../pillars-turbomodule.md | 262 +++++-- docs/the-new-architecture/pillars.md | 21 +- docs/the-new-architecture/use-app-template.md | 32 +- docs/the-new-architecture/why.md | 30 +- docs/touchablewithoutfeedback.md | 50 ++ docs/typescript.md | 24 +- docs/view-style-props.md | 10 + docs/view.md | 75 ++ docs/virtualizedlist.md | 8 +- package.json | 4 +- plugins/remark-snackplayer/src/index.js | 8 + plugins/remark-snackplayer/tests/index.js | 7 + sync-api-docs/extractDocsFromRN.js | 2 +- sync-api-docs/generateMarkdown.js | 2 +- sync-api-docs/magic.js | 2 +- sync-api-docs/methodFormatter.js | 2 +- sync-api-docs/preprocessGeneratedApiDocs.js | 2 +- sync-api-docs/propFormatter.js | 2 +- sync-api-docs/sync-api-docs.js | 2 +- sync-api-docs/utils.js | 2 +- website/community/communities.md | 31 + website/community/overview.md | 14 + website/community/staying-updated.md | 60 ++ website/community/support.md | 27 + .../contributing/how-to-build-from-source.md | 2 +- .../contributing/how-to-contribute-code.md | 14 +- website/contributing/how-to-file-an-issue.md | 2 +- .../how-to-run-and-write-tests.md | 11 +- website/contributing/release-testing.md | 112 +-- website/core/DocsRating.js | 7 + website/core/PrismTheme.js | 7 + website/core/TableRowWithCodeBlock.js | 7 + website/core/TabsConstants.js | 7 + website/docusaurus.config.js | 113 ++- website/image-check.js | 2 +- website/showcase.json | 128 +++- website/sidebars.json | 15 +- website/sidebarsCommunity.json | 11 + website/snackPlayerInitializer.js | 2 +- website/src/css/_shared.scss | 7 + website/src/css/customTheme.scss | 78 +- website/src/css/index.scss | 7 + website/src/css/showcase.scss | 7 + website/src/css/versions.scss | 7 + .../pages/animations/_dissectionAnimation.js | 7 + .../src/pages/animations/_headerAnimation.js | 7 + website/src/pages/help.md | 53 -- website/src/pages/index.js | 11 +- website/src/pages/showcase.js | 23 +- website/src/pages/versions.js | 15 +- .../src/theme/BlogSidebar/Desktop/index.d.ts | 6 + .../src/theme/BlogSidebar/Desktop/index.js | 7 + .../BlogSidebar/Desktop/styles.module.css | 7 + .../src/theme/BlogSidebar/Mobile/index.d.ts | 6 + website/src/theme/BlogSidebar/Mobile/index.js | 7 + .../BlogSidebar/Mobile/styles.module.css | 7 + website/src/theme/DocItem/Footer/index.js | 75 ++ .../theme/DocItem/Footer/styles.module.css | 11 + website/src/theme/DocItemFooter/index.js | 18 - website/src/theme/Icon/ExternalLink/index.js | 7 + .../theme/Icon/ExternalLink/styles.module.css | 7 + .../DocsVersionDropdownNavbarItem.js | 3 +- website/static/_redirects | 9 + website/static/img/showcase/bolt.png | Bin 0 -> 137267 bytes website/static/img/showcase/dave.png | Bin 0 -> 142770 bytes website/static/img/showcase/dine.webp | Bin 0 -> 5918 bytes website/static/img/showcase/fit.webp | Bin 0 -> 3112 bytes website/static/img/showcase/klarna.jpg | Bin 0 -> 9842 bytes website/static/img/showcase/mattermost.webp | Bin 0 -> 20760 bytes website/static/img/showcase/nfl.webp | Bin 0 -> 20302 bytes website/static/img/showcase/openvpn.png | Bin 0 -> 24551 bytes website/static/img/showcase/owner.webp | Bin 0 -> 5066 bytes website/static/img/showcase/playstation.png | Bin 0 -> 33010 bytes website/static/img/showcase/puma.png | Bin 0 -> 9455 bytes .../static/img/showcase/wix_logo_darkbg.svg | 22 + .../static/img/showcase/wix_logo_lightbg.svg | 22 + website/static/img/showcase/wordpress.png | Bin 0 -> 99297 bytes website/static/manifest.json | 2 +- .../_getting-started-windows-android.md | 2 +- .../_getting-started-windows-android.md | 2 +- .../_getting-started-windows-android.md | 2 +- .../version-0.62/more-resources.md | 2 +- .../_getting-started-windows-android.md | 2 +- .../version-0.63/more-resources.md | 2 +- .../_getting-started-windows-android.md | 2 +- website/versioned_docs/version-0.64/image.md | 2 +- .../version-0.64/more-resources.md | 2 +- .../_getting-started-linux-android.md | 2 +- .../_getting-started-macos-android.md | 2 +- .../_getting-started-windows-android.md | 4 +- website/versioned_docs/version-0.65/image.md | 2 +- .../version-0.65/more-resources.md | 2 +- .../_getting-started-linux-android.md | 2 +- .../_getting-started-macos-android.md | 2 +- .../_getting-started-windows-android.md | 4 +- website/versioned_docs/version-0.66/image.md | 2 +- .../version-0.66/more-resources.md | 2 +- .../_getting-started-windows-android.md | 4 +- website/versioned_docs/version-0.67/image.md | 2 +- .../version-0.67/more-resources.md | 2 +- .../_getting-started-windows-android.md | 2 +- .../version-0.68/build-speed.md | 2 +- website/versioned_docs/version-0.68/image.md | 2 +- .../version-0.68/more-resources.md | 2 +- .../_getting-started-windows-android.md | 2 +- .../version-0.69/build-speed.md | 2 +- website/versioned_docs/version-0.69/button.md | 2 +- website/versioned_docs/version-0.69/image.md | 2 +- .../version-0.69/more-resources.md | 2 +- .../version-0.69/react-18-and-react-native.md | 2 +- .../versioned_docs/version-0.69/typescript.md | 23 +- .../_getting-started-macos-ios.md | 46 +- .../_getting-started-windows-android.md | 2 +- .../version-0.70/build-speed.md | 2 +- .../versioned_docs/version-0.70/flatlist.md | 8 +- .../version-0.70/headless-js-android.md | 6 +- website/versioned_docs/version-0.70/hermes.md | 162 ++-- website/versioned_docs/version-0.70/image.md | 2 +- .../intro-react-native-components.md | 14 +- .../version-0.70/introduction.md | 4 +- .../version-0.70/more-resources.md | 2 +- .../version-0.70/native-modules-android.md | 2 - .../version-0.70/native-modules-ios.md | 2 - .../new-architecture-app-intro.md | 10 +- .../new-architecture-app-modules-android.md | 104 +-- .../new-architecture-app-modules-ios.md | 10 +- .../new-architecture-app-renderer-android.md | 10 +- .../version-0.70/new-architecture-appendix.md | 17 +- .../version-0.70/new-architecture-intro.md | 4 +- .../new-architecture-library-android.md | 1 + .../new-architecture-library-intro.md | 6 +- .../new-architecture-library-ios.md | 2 +- .../version-0.70/react-18-and-react-native.md | 4 +- .../version-0.70/sectionlist.md | 8 +- .../_markdown_native_deprecation.mdx | 2 +- ...ackward-compatibility-fabric-components.md | 74 +- .../backward-compatibility-turbomodules.md | 103 +-- .../backward-compatibility.md | 10 +- .../the-new-architecture/landing-page.md | 6 +- .../the-new-architecture/pillars-codegen.md | 43 +- .../pillars-fabric-components.md | 20 +- .../pillars-turbomodule.md | 66 +- .../the-new-architecture/pillars.md | 19 +- .../the-new-architecture/use-app-template.md | 8 +- .../version-0.70/the-new-architecture/why.md | 2 +- .../versioned_docs/version-0.70/typescript.md | 24 +- .../version-0.70/virtualizedlist.md | 8 +- yarn.lock | 725 ++++++++---------- 199 files changed, 3603 insertions(+), 3431 deletions(-) delete mode 100644 docs/new-architecture-app-modules-android.md delete mode 100644 docs/new-architecture-app-modules-ios.md delete mode 100644 docs/new-architecture-app-renderer-android.md delete mode 100644 docs/new-architecture-app-renderer-ios.md create mode 100644 docs/sourcemaps.md create mode 100644 website/community/communities.md create mode 100644 website/community/overview.md create mode 100644 website/community/staying-updated.md create mode 100644 website/community/support.md create mode 100644 website/sidebarsCommunity.json delete mode 100644 website/src/pages/help.md create mode 100644 website/src/theme/DocItem/Footer/index.js create mode 100644 website/src/theme/DocItem/Footer/styles.module.css delete mode 100644 website/src/theme/DocItemFooter/index.js create mode 100644 website/static/img/showcase/bolt.png create mode 100644 website/static/img/showcase/dave.png create mode 100644 website/static/img/showcase/dine.webp create mode 100644 website/static/img/showcase/fit.webp create mode 100644 website/static/img/showcase/klarna.jpg create mode 100644 website/static/img/showcase/mattermost.webp create mode 100644 website/static/img/showcase/nfl.webp create mode 100644 website/static/img/showcase/openvpn.png create mode 100644 website/static/img/showcase/owner.webp create mode 100644 website/static/img/showcase/playstation.png create mode 100644 website/static/img/showcase/puma.png create mode 100644 website/static/img/showcase/wix_logo_darkbg.svg create mode 100644 website/static/img/showcase/wix_logo_lightbg.svg create mode 100644 website/static/img/showcase/wordpress.png 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 3ba13e0cec6..87bd9df2ea2 100644 --- a/.github/ISSUE_TEMPLATE/config.yml +++ b/.github/ISSUE_TEMPLATE/config.yml @@ -1 +1,14 @@ blank_issues_enabled: false +contact_links: + - name: ⚛️ React Native Issue + url: https://github.com/facebook/react-native/issues + about: Please report bugs or issues in the React Native repository. + - name: ⤴️ Upgrade Issue + 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/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 + about: Discuss the future of React Native in the React Native community's discussions and proposals repository. 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)} - - + +