From 102d627e4272060c1097edf78467541b4b3323db Mon Sep 17 00:00:00 2001 From: Hichem Fantar Date: Sun, 5 Jan 2025 01:42:27 +0100 Subject: [PATCH 1/3] feat: Add lazy loading to markdown images for performance improvements --- README.md | 2 +- docs/_getting-started-linux-android.md | 2 +- docs/_getting-started-macos-android.md | 2 +- docs/_getting-started-macos-ios.md | 2 +- docs/_getting-started-windows-android.md | 2 +- docs/_integration-with-existing-apps-ios.md | 2 +- .../_integration-with-existing-apps-kotlin.md | 2 +- docs/datepickerios.md | 4 ++-- docs/fabric-native-components-ios.md | 12 +++++----- docs/fabric-native-components.md | 2 +- docs/get-started-without-a-framework.md | 4 ++-- docs/hermes.md | 2 +- docs/intro-react-native-components.md | 2 +- docs/introduction.md | 2 +- docs/legacy/native-modules-android.md | 8 +++---- docs/legacy/native-modules-ios.md | 6 ++--- docs/pressable.md | 4 ++-- docs/security.md | 4 ++-- docs/testing-overview.md | 12 +++++----- .../create-module-library.md | 2 +- docs/the-new-architecture/pure-cxx-modules.md | 4 ++-- docs/turbo-native-modules-ios.md | 12 +++++----- plugins/remark-snackplayer/README.md | 2 +- website/architecture/landing-page.md | 12 +++++----- website/architecture/threading-model.md | 14 +++++------ ...t-to-left-support-for-react-native-apps.md | 24 +++++++++---------- ...s-app-loading-animation-in-react-native.md | 18 +++++++------- ...g-input-accessory-view-for-react-native.md | 10 ++++---- website/blog/2018-04-09-build-com-app.md | 2 +- ...19-05-01-react-native-at-f8-and-podcast.md | 6 ++--- .../blog/2019-11-18-react-native-doctor.md | 2 +- .../blog/2021-08-26-many-platform-vision.md | 8 +++---- ...1-08-30-react-native-is-hiring-managers.md | 4 ++-- ...ring-your-app-for-iOS-15-and-android-12.md | 2 +- website/blog/2021-10-01-version-066.md | 2 +- ...-native-library-to-the-new-architecture.md | 2 +- .../blog/2022-07-08-hermes-as-the-default.md | 12 +++++----- website/blog/2024-04-22-release-0.74.md | 2 +- ...024-10-23-release-0.76-new-architecture.md | 2 +- ...2024-10-23-the-new-architecture-is-here.md | 12 +++++----- .../_markdown-GH-release-notes-prerelease.mdx | 2 +- .../contributing/managing-pull-requests.md | 4 ++-- .../_getting-started-linux-android.md | 2 +- .../_getting-started-macos-android.md | 2 +- .../_getting-started-macos-ios.md | 2 +- .../_getting-started-windows-android.md | 2 +- .../version-0.70/datepickerios.md | 4 ++-- .../version-0.70/getting-started.md | 2 +- website/versioned_docs/version-0.70/hermes.md | 14 +++++------ .../intro-react-native-components.md | 2 +- .../version-0.70/introduction.md | 2 +- .../version-0.70/native-modules-android.md | 8 +++---- .../version-0.70/native-modules-ios.md | 6 ++--- .../versioned_docs/version-0.70/pressable.md | 4 ++-- .../version-0.70/profile-hermes.md | 8 +++---- .../versioned_docs/version-0.70/security.md | 4 ++-- .../version-0.70/testing-overview.md | 12 +++++----- .../the-new-architecture/landing-page.md | 12 +++++----- .../_getting-started-linux-android.md | 2 +- .../_getting-started-macos-android.md | 2 +- .../_getting-started-macos-ios.md | 2 +- .../_getting-started-windows-android.md | 2 +- .../version-0.71/datepickerios.md | 4 ++-- .../version-0.71/getting-started.md | 2 +- website/versioned_docs/version-0.71/hermes.md | 14 +++++------ .../intro-react-native-components.md | 2 +- .../version-0.71/introduction.md | 2 +- .../version-0.71/native-modules-android.md | 8 +++---- .../version-0.71/native-modules-ios.md | 6 ++--- .../versioned_docs/version-0.71/pressable.md | 4 ++-- .../version-0.71/profile-hermes.md | 8 +++---- .../versioned_docs/version-0.71/security.md | 4 ++-- .../version-0.71/testing-overview.md | 12 +++++----- .../the-new-architecture/landing-page.md | 12 +++++----- .../_getting-started-linux-android.md | 2 +- .../_getting-started-macos-android.md | 2 +- .../_getting-started-macos-ios.md | 2 +- .../_getting-started-windows-android.md | 2 +- .../version-0.72/datepickerios.md | 4 ++-- .../version-0.72/getting-started.md | 2 +- website/versioned_docs/version-0.72/hermes.md | 6 ++--- .../intro-react-native-components.md | 2 +- .../version-0.72/introduction.md | 2 +- .../version-0.72/native-modules-android.md | 8 +++---- .../version-0.72/native-modules-ios.md | 6 ++--- .../versioned_docs/version-0.72/pressable.md | 4 ++-- .../version-0.72/profile-hermes.md | 8 +++---- .../versioned_docs/version-0.72/security.md | 4 ++-- .../version-0.72/testing-overview.md | 12 +++++----- .../the-new-architecture/landing-page.md | 12 +++++----- .../_getting-started-linux-android.md | 2 +- .../_getting-started-macos-android.md | 2 +- .../_getting-started-macos-ios.md | 2 +- .../_getting-started-windows-android.md | 2 +- .../version-0.73/datepickerios.md | 4 ++-- .../version-0.73/getting-started.md | 2 +- website/versioned_docs/version-0.73/hermes.md | 6 ++--- .../intro-react-native-components.md | 2 +- .../version-0.73/introduction.md | 2 +- .../version-0.73/native-modules-android.md | 8 +++---- .../version-0.73/native-modules-ios.md | 6 ++--- .../versioned_docs/version-0.73/pressable.md | 4 ++-- .../version-0.73/profile-hermes.md | 8 +++---- .../versioned_docs/version-0.73/security.md | 4 ++-- .../version-0.73/testing-overview.md | 12 +++++----- .../the-new-architecture/landing-page.md | 12 +++++----- .../_getting-started-linux-android.md | 2 +- .../_getting-started-macos-android.md | 2 +- .../_getting-started-macos-ios.md | 2 +- .../_getting-started-windows-android.md | 2 +- .../version-0.74/datepickerios.md | 4 ++-- .../get-started-without-a-framework.md | 2 +- website/versioned_docs/version-0.74/hermes.md | 6 ++--- .../intro-react-native-components.md | 2 +- .../version-0.74/introduction.md | 2 +- .../version-0.74/native-modules-android.md | 8 +++---- .../version-0.74/native-modules-ios.md | 6 ++--- .../versioned_docs/version-0.74/pressable.md | 4 ++-- .../version-0.74/profile-hermes.md | 8 +++---- .../versioned_docs/version-0.74/security.md | 4 ++-- .../version-0.74/testing-overview.md | 12 +++++----- .../the-new-architecture/landing-page.md | 12 +++++----- .../_getting-started-linux-android.md | 2 +- .../_getting-started-macos-android.md | 2 +- .../_getting-started-macos-ios.md | 2 +- .../_getting-started-windows-android.md | 2 +- .../version-0.75/datepickerios.md | 4 ++-- .../get-started-without-a-framework.md | 2 +- website/versioned_docs/version-0.75/hermes.md | 6 ++--- .../intro-react-native-components.md | 2 +- .../version-0.75/introduction.md | 2 +- .../version-0.75/native-modules-android.md | 8 +++---- .../version-0.75/native-modules-ios.md | 6 ++--- .../versioned_docs/version-0.75/pressable.md | 4 ++-- .../version-0.75/profile-hermes.md | 8 +++---- .../versioned_docs/version-0.75/security.md | 4 ++-- .../version-0.75/testing-overview.md | 12 +++++----- .../the-new-architecture/landing-page.md | 12 +++++----- .../_getting-started-linux-android.md | 2 +- .../_getting-started-macos-android.md | 2 +- .../_getting-started-macos-ios.md | 2 +- .../_getting-started-windows-android.md | 2 +- .../_integration-with-existing-apps-ios.md | 2 +- .../_integration-with-existing-apps-kotlin.md | 2 +- .../version-0.76/datepickerios.md | 4 ++-- .../fabric-native-components-ios.md | 12 +++++----- .../version-0.76/fabric-native-components.md | 2 +- .../get-started-without-a-framework.md | 2 +- website/versioned_docs/version-0.76/hermes.md | 2 +- .../intro-react-native-components.md | 2 +- .../version-0.76/introduction.md | 2 +- .../legacy/native-modules-android.md | 8 +++---- .../version-0.76/legacy/native-modules-ios.md | 6 ++--- .../versioned_docs/version-0.76/pressable.md | 4 ++-- .../versioned_docs/version-0.76/security.md | 4 ++-- .../version-0.76/testing-overview.md | 12 +++++----- .../create-module-library.md | 2 +- .../the-new-architecture/pure-cxx-modules.md | 4 ++-- .../version-0.76/turbo-native-modules-ios.md | 12 +++++----- 159 files changed, 405 insertions(+), 405 deletions(-) diff --git a/README.md b/README.md index a7ded7daa88..b59c2e945f3 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# [reactnative.dev](https://reactnative.dev/) · [![CC BY 4.0 license](https://img.shields.io/badge/license-CC%20BY%204.0-blue.svg)](LICENSE-docs) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](CONTRIBUTING.md) Follow @reactnative +# [reactnative.dev](https://reactnative.dev/) · [![CC BY 4.0 license](https://img.shields.io/badge/license-CC%20BY%204.0-blue.svg)](LICENSE-docs) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](CONTRIBUTING.md) Follow @reactnative This repo contains the website configuration and documentation powering the [React Native website](https://reactnative.dev/). diff --git a/docs/_getting-started-linux-android.md b/docs/_getting-started-linux-android.md index 410a33de479..8bafaf84928 100644 --- a/docs/_getting-started-linux-android.md +++ b/docs/_getting-started-linux-android.md @@ -97,7 +97,7 @@ Click "Next" then "Finish" to create your AVD. At this point you should be able Congratulations! You successfully set up your development environment. -
+

Now what?

diff --git a/docs/_getting-started-macos-android.md b/docs/_getting-started-macos-android.md index 16d45441ac7..7a9629d3ce3 100644 --- a/docs/_getting-started-macos-android.md +++ b/docs/_getting-started-macos-android.md @@ -128,7 +128,7 @@ Click "Next" then "Finish" to create your AVD. At this point you should be able Congratulations! You successfully set up your development environment. -
+

Now what?

diff --git a/docs/_getting-started-macos-ios.md b/docs/_getting-started-macos-ios.md index 6b366fb64f4..e8c6e693c6b 100644 --- a/docs/_getting-started-macos-ios.md +++ b/docs/_getting-started-macos-ios.md @@ -65,7 +65,7 @@ You might also want to ensure that all "shell script build phase" of your Xcode Congratulations! You successfully set up your development environment. -
+

Now what?

diff --git a/docs/_getting-started-windows-android.md b/docs/_getting-started-windows-android.md index 0ded094e8fc..39f2b51b850 100644 --- a/docs/_getting-started-windows-android.md +++ b/docs/_getting-started-windows-android.md @@ -128,7 +128,7 @@ Click "Next" then "Finish" to create your AVD. At this point you should be able Congratulations! You successfully set up your development environment. -
+

Now what?

diff --git a/docs/_integration-with-existing-apps-ios.md b/docs/_integration-with-existing-apps-ios.md index dc59c8888ca..df656b6fbeb 100644 --- a/docs/_integration-with-existing-apps-ios.md +++ b/docs/_integration-with-existing-apps-ios.md @@ -575,7 +575,7 @@ Now build and run your iOS app as normal. Once you reach your React-powered Activity inside the app, it should load the JavaScript code from the development server and display: -
+
### Creating a release build in Xcode diff --git a/docs/_integration-with-existing-apps-kotlin.md b/docs/_integration-with-existing-apps-kotlin.md index 0feda99ba54..dc75db5edf9 100644 --- a/docs/_integration-with-existing-apps-kotlin.md +++ b/docs/_integration-with-existing-apps-kotlin.md @@ -482,7 +482,7 @@ Now build and run your Android app as normal. Once you reach your React-powered Activity inside the app, it should load the JavaScript code from the development server and display: -
+
### Creating a release build in Android Studio diff --git a/docs/datepickerios.md b/docs/datepickerios.md index 4b9c9840c24..82af1a1d779 100644 --- a/docs/datepickerios.md +++ b/docs/datepickerios.md @@ -87,7 +87,7 @@ Restricts the range of possible date/time values. Example with `maximumDate` set to December 31, 2017: -
+
--- @@ -115,7 +115,7 @@ The interval at which minutes can be selected. Example with `minuteInterval` set to `10`: -
+
--- diff --git a/docs/fabric-native-components-ios.md b/docs/fabric-native-components-ios.md index b99a885956e..0dbddf6ffc8 100644 --- a/docs/fabric-native-components-ios.md +++ b/docs/fabric-native-components-ios.md @@ -38,19 +38,19 @@ cd ios open Demo.xcworkspace ``` -Open Xcode Workspace +Open Xcode Workspace 2. Right click on app and select New Group, call the new group `WebView`. -Right click on app and select New Group +Right click on app and select New Group 3. In the `WebView` group, create New→File from Template. -Create a new file using the Cocoa Touch Classs template +Create a new file using the Cocoa Touch Classs template 4. Use the Objective-C File template, and name it RCTWebView. -Create an Objective-C RCTWebView class +Create an Objective-C RCTWebView class 5. Repeat step 4 and create a header file named `RCTWebView.h`. @@ -215,13 +215,13 @@ To link the WebKit framework in your app, follow these steps: 3. Select the General tab 4. Scroll down until you find the _"Frameworks, Libraries, and Embedded Contents"_ section, and press the `+` button -Add webkit framework to your app 1 +Add webkit framework to your app 1 5. In the search bar, filter for WebKit 6. Select the WebKit framework 7. Click on Add. -Add webkit framework to your app 2 +Add webkit framework to your app 2 :::warning We are aware of a couple of issues with iOS that would create some problem when building the app with a custom iOS component. diff --git a/docs/fabric-native-components.md b/docs/fabric-native-components.md index 20a9f672025..d209ddf8c7e 100644 --- a/docs/fabric-native-components.md +++ b/docs/fabric-native-components.md @@ -224,4 +224,4 @@ yarn run ios | Android | iOS | | :-------------------------------------------------------------------------------: | :--------------------------------------------------------------------------: | -| | | +| | | diff --git a/docs/get-started-without-a-framework.md b/docs/get-started-without-a-framework.md index 450fe5e0cb6..e1a6b8a9e0a 100644 --- a/docs/get-started-without-a-framework.md +++ b/docs/get-started-without-a-framework.md @@ -108,11 +108,11 @@ Now that you have successfully run the app, let's modify it. - Open `App.tsx` in your text editor of choice and edit some lines. - Press the R key twice or select `Reload` from the Dev Menu (Ctrl + M) to see your changes! -### That's it! +### That's it Congratulations! You've successfully run and modified your first barebone React Native app. -
+
### Now what? diff --git a/docs/hermes.md b/docs/hermes.md index 147c998cd63..b9615c0f613 100644 --- a/docs/hermes.md +++ b/docs/hermes.md @@ -6,7 +6,7 @@ title: Using Hermes import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; - + [Hermes](https://hermesengine.dev) is an open-source JavaScript engine optimized for React Native. For many apps, using Hermes will result in improved start-up time, decreased memory usage, and smaller app size when compared to JavaScriptCore. diff --git a/docs/intro-react-native-components.md b/docs/intro-react-native-components.md index 8d031e48b02..571134af1ee 100644 --- a/docs/intro-react-native-components.md +++ b/docs/intro-react-native-components.md @@ -13,7 +13,7 @@ React Native is an open source framework for building Android and iOS applicatio In Android and iOS development, a **view** is the basic building block of UI: a small rectangular element on the screen which can be used to display text, images, or respond to user input. Even the smallest visual elements of an app, like a line of text or a button, are kinds of views. Some kinds of views can contain other views. It’s views all the way down!
- Diagram of Android and iOS app showing them both built on top of atomic elements called views. + Diagram of Android and iOS app showing them both built on top of atomic elements called views.
Just a sampling of the many views used in Android and iOS apps.
diff --git a/docs/introduction.md b/docs/introduction.md index cd807674a16..d590abb7a21 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 getting started instructions, they've moved to their own section. Continue reading for an introduction to the documentation, Native Components, React, and more! - +
Many different kinds of people use React Native: from advanced iOS developers to React beginners, to people getting started programming for the first time in their career. These docs were written for all learners, no matter their experience level or background. diff --git a/docs/legacy/native-modules-android.md b/docs/legacy/native-modules-android.md index 19126bbe58e..f01e1cd807e 100644 --- a/docs/legacy/native-modules-android.md +++ b/docs/legacy/native-modules-android.md @@ -19,7 +19,7 @@ In the following guide you will create a native module, `CalendarModule`, that w To get started, open up the Android project within your React Native application in Android Studio. You can find your Android project here within a React Native app:
- Image of opening up an Android project within a React Native app inside of Android Studio. + Image of opening up an Android project within a React Native app inside of Android Studio.
Image of where you can find your Android project
@@ -32,7 +32,7 @@ We also recommend enabling [Gradle Daemon](https://docs.gradle.org/2.9/userguide The first step is to create the (`CalendarModule.java` or `CalendarModule.kt`) Java/Kotlin file inside `android/app/src/main/java/com/your-app-name/` folder (the folder is the same for both Kotlin and Java). This Java/Kotlin file will contain your native module Java/Kotlin class.
- Image of adding a class called CalendarModule.java within the Android Studio. + Image of adding a class called CalendarModule.java within the Android Studio.
Image of how to add the CalendarModuleClass
@@ -379,7 +379,7 @@ As you work through these guides and iterate on your native module, you will nee You should now be able to invoke your `createCalendarEvent()` method on your native module in the app. In our example this occurs by pressing the `NewModuleButton`. You can confirm this by viewing the log you set up in your `createCalendarEvent()` method. You can follow [these steps](https://developer.android.com/studio/debug/am-logcat.html) to view ADB logs in your app. You should then be able to search for your `Log.d` message (in our example “Create event called with name: testName and location: testLocation”) and see your message logged each time you invoke your native module method.
- Image of logs. + Image of logs.
Image of ADB logs in Android Studio
@@ -790,7 +790,7 @@ promise.reject("Create Event error", "Error parsing date", e) Error message in React Native App when promise is rejected:
- Image of error message in React Native app. + Image of error message in React Native app.
Image of error message
diff --git a/docs/legacy/native-modules-ios.md b/docs/legacy/native-modules-ios.md index 62459527773..f91be05a851 100644 --- a/docs/legacy/native-modules-ios.md +++ b/docs/legacy/native-modules-ios.md @@ -19,7 +19,7 @@ In the following guide you will create a native module, `CalendarModule`, that w To get started, open up the iOS project within your React Native application in Xcode. You can find your iOS project here within a React Native app:
- Image of opening up an iOS project within a React Native app inside of xCode. + Image of opening up an iOS project within a React Native app inside of xCode.
Image of where you can find your iOS project
@@ -30,7 +30,7 @@ We recommend using Xcode to write your native code. Xcode is built for iOS devel The first step is to create our main custom native module header and implementation files. Create a new file called `RCTCalendarModule.h`
- Image of creating a class called RCTCalendarModule.h. + Image of creating a class called RCTCalendarModule.h.
Image of creating a custom native module file within the same folder as AppDelegate
@@ -207,7 +207,7 @@ As you work through these guides and iterate on your native module, you will nee You should now be able to invoke your `createCalendarEvent()` method on your native module in JavaScript. Since you are using `RCTLog` in the function, you can confirm your native method is being invoked by [enabling debug mode in your app](https://reactnative.dev/docs/debugging#chrome-developer-tools) and looking at the JS console in Chrome or the mobile app debugger Flipper. You should see your `RCTLogInfo(@"Pretending to create an event %@ at %@", name, location);` message each time you invoke the native module method.
- Image of logs. + Image of logs.
Image of iOS logs in Flipper
diff --git a/docs/pressable.md b/docs/pressable.md index 48b24e9fa13..fc6bc8b3d0a 100644 --- a/docs/pressable.md +++ b/docs/pressable.md @@ -23,7 +23,7 @@ After pressing [`onPressIn`](#onpressin), one of two things will happen: 1. The person will remove their finger, triggering [`onPressOut`](#onpressout) followed by [`onPress`](#onpress). 2. If the person leaves their finger longer than 500 milliseconds before removing it, [`onLongPress`](#onlongpress) is triggered. ([`onPressOut`](#onpressout) will still fire when they remove their finger.) -Diagram of the onPress events in sequence. +Diagram of the onPress events in sequence. Fingers are not the most precise instruments, and it is common for users to accidentally activate the wrong element or miss the activation area. To help, `Pressable` has an optional `HitRect` you can use to define how far a touch can register away from the wrapped element. Presses can start anywhere within a `HitRect`. @@ -32,7 +32,7 @@ Fingers are not the most precise instruments, and it is common for users to acci > The touch area never extends past the parent view bounds and the Z-index of sibling views always takes precedence if a touch hits two overlapping views.
- Diagram of HitRect and PressRect and how they work. + Diagram of HitRect and PressRect and how they work.
You can set HitRect with hitSlop and set PressRect with pressRetentionOffset.
diff --git a/docs/security.md b/docs/security.md index 1af4b74f3e3..23bf92fe729 100644 --- a/docs/security.md +++ b/docs/security.md @@ -7,7 +7,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con Security is often overlooked when building apps. It is true that it is impossible to build software that is completely impenetrable—we’ve yet to invent a completely impenetrable lock (bank vaults do, after all, still get broken into). However, the probability of falling victim to a malicious attack or being exposed for a security vulnerability is inversely proportional to the effort you’re willing to put in to protecting your application against any such eventuality. Although an ordinary padlock is pickable, it is still much harder to get past than a cabinet hook! - + In this guide, you will learn about best practices for storing sensitive information, authentication, network security, and tools that will help you secure your app. This is not a preflight checklist—it is a catalogue of options, each of which will help further protect your app and users. @@ -68,7 +68,7 @@ In order to use iOS Keychain services or Android Secure Shared Preferences, you ## Authentication and Deep Linking - + Mobile apps have a unique vulnerability that is non-existent in the web: **deep linking**. Deep linking is a way of sending data directly to a native application from an outside source. A deep link looks like `app://` where `app` is your app scheme and anything following the // could be used internally to handle the request. diff --git a/docs/testing-overview.md b/docs/testing-overview.md index 5714c365ff6..dc812bb19ee 100644 --- a/docs/testing-overview.md +++ b/docs/testing-overview.md @@ -10,7 +10,7 @@ As your codebase expands, small errors and edge cases you don’t expect can cas In this guide, we will cover different, automated ways to ensure your app works as expected, ranging from static analysis to end-to-end tests. -Testing is a cycle of fixing, testing, and either passing to release or failing back into testing. +Testing is a cycle of fixing, testing, and either passing to release or failing back into testing. ## Why Test @@ -81,7 +81,7 @@ When the object being tested has any dependencies, you’ll often need to mock t The great thing about unit tests is that they are quick to write and run. Therefore, as you work, you get fast feedback about whether your tests are passing. Jest even has an option to continuously run tests that are related to code you’re editing: [Watch mode](https://jestjs.io/docs/en/cli#watch). - + ### Mocking @@ -112,7 +112,7 @@ In integration testing, real individual units are combined (same as in your app) > - Makes a network call to other application (such as the weather service API) > - Does any kind of file or database I/O - + ## Component Tests @@ -132,7 +132,7 @@ There are several libraries that can help you testing these: > Component tests are only JavaScript tests running in Node.js environment. They do _not_ take into account any iOS, Android, or other platform code which is backing the React Native components. It follows that they cannot give you a 100% confidence that everything works for the user. If there is a bug in the iOS or Android code, they will not find it. - + ### Testing User Interactions @@ -233,7 +233,7 @@ Snapshots themselves do not ensure that your component render logic is correct, We recommend that you only use small snapshots (see [`no-large-snapshots` rule](https://github.com/jest-community/eslint-plugin-jest/blob/master/docs/rules/no-large-snapshots.md)). If you want to test a _change_ between two React component states, use [`snapshot-diff`](https://github.com/jest-community/snapshot-diff). When in doubt, prefer explicit expectations as described in the previous paragraph. - + ## End-to-End Tests @@ -253,7 +253,7 @@ Try to cover the vital parts of your app with E2E tests: authentication flow, co There are several E2E testing tools available: in the React Native community, [Detox](https://github.com/wix/detox/) is a popular framework because it’s tailored for React Native apps. Another popular library in the space of iOS and Android apps is [Appium](https://appium.io/) or [Maestro](https://maestro.mobile.dev/). - + ## Summary diff --git a/docs/the-new-architecture/create-module-library.md b/docs/the-new-architecture/create-module-library.md index dfcfadf0408..4a313b434be 100644 --- a/docs/the-new-architecture/create-module-library.md +++ b/docs/the-new-architecture/create-module-library.md @@ -38,7 +38,7 @@ npx create-react-native-library@latest Once the interactive prompt is done, the tool creates a folder whose structure looks like this in Visual Studio Code: -Folder structure after initializing a new library. +Folder structure after initializing a new library. Feel free to explore the code that has been created for you. However, the most important parts: diff --git a/docs/the-new-architecture/pure-cxx-modules.md b/docs/the-new-architecture/pure-cxx-modules.md index dfef66f7293..1518e82e48f 100644 --- a/docs/the-new-architecture/pure-cxx-modules.md +++ b/docs/the-new-architecture/pure-cxx-modules.md @@ -292,7 +292,7 @@ To make sure that the iOS app can effectively build the C++ Turbo Native Module, 2. Add the `shared` folder to our iOS project. 3. Register the C++ Turbo Native Module in the application. -#### 1. Install Pods and Run Codegen. +#### 1. Install Pods and Run Codegen The first step we need to run is the usual steps we run every time we have to prepare our iOS application. CocoaPods is the tool we use to setup and install React Native dependencies and, as part of the process, it will also run Codegen for us. @@ -447,4 +447,4 @@ Congratulations, you wrote your first C++ Turbo Native Module! |
Android
|
iOS
| | ---------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- | -|
Android Video
|
iOS video
| +|
Android Video
|
iOS video
| diff --git a/docs/turbo-native-modules-ios.md b/docs/turbo-native-modules-ios.md index 145b58c709f..77cd1976abb 100644 --- a/docs/turbo-native-modules-ios.md +++ b/docs/turbo-native-modules-ios.md @@ -18,27 +18,27 @@ cd ios open TurboModuleExample.xcworkspace ``` -Open Xcode Workspace +Open Xcode Workspace 2. Right click on app and select New Group, call the new group `NativeLocalStorage`. -Right click on app and select New Group +Right click on app and select New Group 3. In the `NativeLocalStorage` group, create New→File from Template. -Create a new file using the Cocoa Touch Class template +Create a new file using the Cocoa Touch Class template 4. Use the Cocoa Touch Class. -Use the Cocoa Touch Class template +Use the Cocoa Touch Class template 5. Name the Cocoa Touch Class RCTNativeLocalStorage with the Objective-C language. -Create an Objective-C RCTNativeLocalStorage class +Create an Objective-C RCTNativeLocalStorage class 6. Rename RCTNativeLocalStorage.m → RCTNativeLocalStorage.mm making it an Objective-C++ file. -Convert to and Objective-C++ file +Convert to and Objective-C++ file ## Implement localStorage with NSUserDefaults diff --git a/plugins/remark-snackplayer/README.md b/plugins/remark-snackplayer/README.md index 76aaf9de8c9..cf91a4e6f67 100644 --- a/plugins/remark-snackplayer/README.md +++ b/plugins/remark-snackplayer/README.md @@ -27,7 +27,7 @@ export default YourApp; The above code snippet would look like this: -Screenshot 2020-10-03 at 1 11 19 AM +Screenshot 2020-10-03 at 1 11 19 AM ### Parameters diff --git a/website/architecture/landing-page.md b/website/architecture/landing-page.md index 2cb2231740a..44d8077492b 100644 --- a/website/architecture/landing-page.md +++ b/website/architecture/landing-page.md @@ -81,11 +81,11 @@ function ViewWithTooltip() {
- A view that is moving to the corners of the viewport and center with a tooltip rendered either above or below it. The tooltip is rendered after a short delay after the view moves + A view that is moving to the corners of the viewport and center with a tooltip rendered either above or below it. The tooltip is rendered after a short delay after the view moves
Asynchronous measurement and render of the ToolTip. [See code](https://gist.github.com/lunaleaps/eabd653d9864082ac1d3772dac217ab9).
- A view that is moving to the corners of the viewport and center with a tooltip rendered either above or below it. The view and tooltip move in unison. + A view that is moving to the corners of the viewport and center with a tooltip rendered either above or below it. The view and tooltip move in unison.
Synchronous measurement and render of the ToolTip. [See code](https://gist.github.com/lunaleaps/148756563999c83220887757f2e549a3).
@@ -109,11 +109,11 @@ In comparing the renderers for the [same code](https://gist.github.com/lunaleaps
- A video demonstrating an app rendering many views according to a slider input. The slider value is adjusted from 0 to 1000 and the UI slowly catches up to rendering 1000 views. + A video demonstrating an app rendering many views according to a slider input. The slider value is adjusted from 0 to 1000 and the UI slowly catches up to rendering 1000 views.
Rendering frequent state updates with legacy renderer.
- A video demonstrating an app rendering many views according to a slider input. The slider value is adjusted from 0 to 1000 and the UI resolves to 1000 views faster than the previous example, without as many intermediate states. + A video demonstrating an app rendering many views according to a slider input. The slider value is adjusted from 0 to 1000 and the UI resolves to 1000 views faster than the previous example, without as many intermediate states.
Rendering frequent state updates with React 18 renderer.
@@ -171,11 +171,11 @@ You'll notice that with the frequent updates in a transition, React renders fewe
- A video demonstrating an app rendering many views (tiles) according to a slider input. The views are rendered in batches as the slider is quickly adjusted from 0 to 1000. There are less batch renders in comparison to the next video. + A video demonstrating an app rendering many views (tiles) according to a slider input. The views are rendered in batches as the slider is quickly adjusted from 0 to 1000. There are less batch renders in comparison to the next video.
Rendering tiles with transitions to interrupt in-progress renders of stale state. [See code](https://gist.github.com/lunaleaps/eac391bf3fe4c85953cefeb74031bab0/revisions).
- A video demonstrating an app rendering many views (tiles) according to a slider input. The views are rendered in batches as the slider is quickly adjusted from 0 to 1000. + A video demonstrating an app rendering many views (tiles) according to a slider input. The views are rendered in batches as the slider is quickly adjusted from 0 to 1000.
Rendering tiles without marking it as a transition. [See code](https://gist.github.com/lunaleaps/eac391bf3fe4c85953cefeb74031bab0/revisions).
diff --git a/website/architecture/threading-model.md b/website/architecture/threading-model.md index dd08dcdcde2..80ece6e8538 100644 --- a/website/architecture/threading-model.md +++ b/website/architecture/threading-model.md @@ -7,7 +7,7 @@ import FabricWarning from './\_fabric-warning.mdx'; -#### The React Native renderer distributes the work of the [render pipeline](render-pipeline) across multiple threads. +#### The React Native renderer distributes the work of the [render pipeline](render-pipeline) across multiple threads Here we define the threading model and provide some examples to illustrate thread usage of the render pipeline. @@ -21,7 +21,7 @@ The renderer uses two different threads: Let’s review the supported scenarios of execution for each phase:
- Threading model symbols + Threading model symbols
## Render Scenarios @@ -31,7 +31,7 @@ Let’s review the supported scenarios of execution for each phase: This is the most common scenario where most of the render pipeline happens on JavaScript thread.
- Threading model use case one + Threading model use case one
--- @@ -41,7 +41,7 @@ This is the most common scenario where most of the render pipeline happens on Ja When there is a high priority event on the UI Thread, the renderer is able to execute all the render pipeline synchronously on the UI thread.
- Threading model use case two + Threading model use case two
--- @@ -51,7 +51,7 @@ When there is a high priority event on the UI Thread, the renderer is able to ex This scenario shows the interruption of the render phase by a low priority event in the UI thread. React and the React Native renderer are able to interrupt the render phase and merge its state with a low priority event that is executed on the UI thread. In this case the render process continues executing in the JS thread.
- Threading model use case three + Threading model use case three
--- @@ -61,7 +61,7 @@ This scenario shows the interruption of the render phase by a low priority event The render phase is interruptible. This scenario shows the interruption of the render phase by a high priority event in the UI thread. React and the renderer are able to interrupt the render phase and merge its state with a high priority event that was executed on the UI thread. The render phase executes synchronously on the UI thread.
- Threading model use case four + Threading model use case four
--- @@ -71,5 +71,5 @@ The render phase is interruptible. This scenario shows the interruption of the r Update originating on UI thread and skips rendering phase. See [React Native Renderer State Updates](render-pipeline#react-native-renderer-state-updates) for more details.
- Threading model use case six + Threading model use case six
diff --git a/website/blog/2016-08-19-right-to-left-support-for-react-native-apps.md b/website/blog/2016-08-19-right-to-left-support-for-react-native-apps.md index 5e4eaa7685f..eab07dfbf13 100644 --- a/website/blog/2016-08-19-right-to-left-support-for-react-native-apps.md +++ b/website/blog/2016-08-19-right-to-left-support-for-react-native-apps.md @@ -16,8 +16,8 @@ This involved changing [css-layout](https://github.com/facebook/css-layout), the To battle test the RTL support in production, the latest version of the **Facebook Ads Manager** app (the first cross-platform 100% RN app) is now available in Arabic and Hebrew with RTL layouts for both [iOS](https://itunes.apple.com/app/id964397083) and [Android](https://play.google.com/store/apps/details?id=com.facebook.adsmanager). Here is how it looks like in those RTL languages: <> - - + + ## Overview Changes in RN for RTL support @@ -75,11 +75,11 @@ In general, most components are already RTL-ready, for example: - Left-to-Right Layout - + - Right-to-Left Layout - + However, there are several cases to be aware of, for which you will need the [`I18nManager`](https://github.com/facebook/react-native/blob/f0fb228ec76ed49e6ed6d786d888e8113b8959a2/Libraries/Utilities/I18nManager.js). In [`I18nManager`](https://github.com/facebook/react-native/blob/f0fb228ec76ed49e6ed6d786d888e8113b8959a2/Libraries/Utilities/I18nManager.js), there is a constant `isRTL` to tell if layout of app is RTL or not, so that you can make the necessary changes according to the layout. @@ -89,11 +89,11 @@ If your component has icons or images, they will be displayed the same way in LT - Left-to-Right Layout - + - Right-to-Left Layout - + Here are two ways to flip the icon according to the direction: @@ -123,8 +123,8 @@ In Android and iOS development, when you change to RTL layout, the gestures and A good example to illustrate gesture RTL support is [`SwipeableRow`](https://github.com/facebook/react-native/blob/38a6eec0db85a5204e85a9a92b4dee2db9641671/Libraries/Experimental/SwipeableRow/SwipeableRow.js).

- - + +

##### Gestures Example @@ -163,7 +163,7 @@ _animateBounceBack(duration: number): void { Even after the initial RTL-compatible app release, you will likely need to iterate on new features. To improve development efficiency, [`I18nManager`](https://github.com/facebook/react-native/blob/f0fb228ec76ed49e6ed6d786d888e8113b8959a2/Libraries/Utilities/I18nManager.js) provides the `forceRTL()` function for faster RTL testing without changing the test device language. You might want to provide a simple switch for this in your app. Here's an example from the RTL example in the RNTester:

- +

```js @@ -202,15 +202,15 @@ The RTL support should cover most of the UX in your app; however, there are some - In iOS, the default text alignment depends on the active language bundle, they are consistently on one side. In Android, the default text alignment depends on the language of the text content, i.e. English will be left-aligned and Arabic will be right-aligned. - In theory, this should be made consistent across platform, but some people may prefer one behavior to another when using an app. More user experience research may be needed to find out the best practice for text alignment. -* There is no "true" left/right +- There is no "true" left/right As discussed before, we map the `left`/`right` styles from the JS side to `start`/`end`, all `left` in code for RTL layout becomes "right" on screen, and `right` in code becomes "left" on screen. This is convenient because you don't need to change your product code too much, but it means there is no way to specify "true left" or "true right" in the code. In the future, allowing a component to control its direction regardless of the language may be necessary. -* Make RTL support for gestures and animations more developer friendly +- Make RTL support for gestures and animations more developer friendly Currently, there is still some programming effort required to make gestures and animations RTL compatible. In the future, it would be ideal to find a way to make gestures and animations RTL support more developer friendly. -## Try it Out! +## Try it Out Check out the [`RTLExample`](https://github.com/facebook/react-native/blob/master/packages/rn-tester/js/examples/RTL/RTLExample.js) in the `RNTester` to understand more about RTL support, and let us know how it works for you! diff --git a/website/blog/2018-01-18-implementing-twitters-app-loading-animation-in-react-native.md b/website/blog/2018-01-18-implementing-twitters-app-loading-animation-in-react-native.md index f4468727dd9..2917ef09fd8 100644 --- a/website/blog/2018-01-18-implementing-twitters-app-loading-animation-in-react-native.md +++ b/website/blog/2018-01-18-implementing-twitters-app-loading-animation-in-react-native.md @@ -6,7 +6,7 @@ tags: [engineering] Twitter’s iOS app has a loading animation I quite enjoy. - + Once the app is ready, the Twitter logo delightfully expands, revealing the app. @@ -16,7 +16,7 @@ I wanted to figure out how to recreate this loading animation with React Native. To understand _how_ to build it, I first had to understand the difference pieces of the loading animation. The easiest way to see the subtlety is to slow it down. - + There are a few major pieces in this that we will need to figure out how to build. @@ -36,14 +36,14 @@ Luckily for you, dear reader, you don’t have to go through the same frustratio Before we get to code, it is important to understand how to break this down. To help visualize this effect, I recreated it in [CodePen](https://codepen.io/TheSavior/pen/NXNoJM) (embedded in a few paragraphs) so you can interactively see the different layers. - + There are three main layers to this effect. The first is the blue background layer. Even though this seems to appear on top of the app, it is actually in the back. We then have a plain white layer. And then lastly, in the very front, is our app.
- + The main trick to this animation is using the Twitter logo as a `mask` and masking both the app, and the white layer. I won’t go too deep on the details of masking, there are [plenty](https://www.html5rocks.com/en/tutorials/masking/adobe/) of [resources](https://designshack.net/articles/graphics/a-complete-beginners-guide-to-masking-in-photoshop/) [online](https://www.sketchapp.com/docs/shapes/masking/) for that. @@ -112,7 +112,7 @@ What we want to do is render our blue layer, and then on top render our masked a This will give us the layers we see below. - + ## Now for the Animated part @@ -169,7 +169,7 @@ The app should stay opaque for a while, at least through the Twitter logo gettin The app scale starts at 1.1 and scales down to its regular scale by the end of the animation. -## And now, in code. +## And now, in code What we essentially did above is map the values from the animation progress percentage to the values for the individual pieces. We do that with Animated using `.interpolate`. We create 3 different style objects, one for each piece of the animation, using interpolated values based off of `this.state.loadingProgress`. @@ -241,7 +241,7 @@ return ( ); ``` - + Yay! We now have the animation pieces looking like we want. Now we just have to clean up our blue and white layers which will never be seen again. @@ -272,13 +272,13 @@ const fullScreenWhiteLayer = this.state.animationDone ? null : ( Voila! Our animation now works and we clean up our unused layers once the animation is done. We have built the Twitter app loading animation! -## But wait, mine doesn’t work! +## But wait, mine doesn’t work Don’t fret, dear reader. I too hate when guides only give you chunks of the code and don’t give you the completed source. This component has been published to npm and is on GitHub as [react-native-mask-loader](https://github.com/TheSavior/react-native-mask-loader). To try this out on your phone, it is [available on Expo](https://expo.io/@eliwhite/react-native-mask-loader-example) here: - + ## More Reading / Extra Credit diff --git a/website/blog/2018-03-22-building-input-accessory-view-for-react-native.md b/website/blog/2018-03-22-building-input-accessory-view-for-react-native.md index 33194f0617f..e0c177e0af8 100644 --- a/website/blog/2018-03-22-building-input-accessory-view-for-react-native.md +++ b/website/blog/2018-03-22-building-input-accessory-view-for-react-native.md @@ -12,7 +12,7 @@ tags: [engineering] Three years ago, a GitHub issue was opened to support input accessory view from React Native. - + In the ensuing years, there have been countless '+1s', various workarounds, and zero concrete changes to RN on this issue - until today. Starting with iOS, [we're exposing an API](/docs/inputaccessoryview) for accessing the native input accessory view and we are excited to share how we built it. @@ -22,7 +22,7 @@ What exactly is an input accessory view? Reading [Apple's developer documentatio There are two common use cases for anchoring a view to the top of the keyboard. The first is creating a keyboard toolbar, like the Facebook composer background picker. - + In this scenario, the keyboard is focused on a text input field, and the input accessory view is used to provide additional keyboard functionality. This functionality is contextual to the type of input field. In a mapping application it could be address suggestions, or in a text editor, it could be rich text formatting tools. @@ -32,7 +32,7 @@ The Objective-C UIResponder who owns the `` in this scenario The second common scenario is sticky text inputs: - + Here, the text input is actually part of the input accessory view itself. This is commonly used in messaging applications, where a message can be composed while scrolling through a thread of previous messages. @@ -65,13 +65,13 @@ Of course not everything was smooth sailing while building this API. Here are a An initial idea for building this API involved listening to `NSNotificationCenter` for UIKeyboardWill(Show/Hide/ChangeFrame) events. This pattern is used in some open-sourced libraries, and internally in some parts of the Facebook app. Unfortunately, `UIKeyboardDidChangeFrame` events were not being called in time to update the `` frame on swipes. Also, changes in keyboard height are not captured by these events. This creates a class of bugs that manifest like this: - + On iPhone X, text and emoji keyboard are different heights. Most applications using keyboard events to manipulate text input frames had to fix the above bug. Our solution was to commit to using the `.inputAccessoryView` property, which meant that the responder infrastructure handles frame updates like this.
-Another tricky bug we encountered was avoiding the home pill on iPhone X. You may be thinking, “Apple developed [safeAreaLayoutGuide](https://developer.apple.com/documentation/uikit/uiview/2891102-safearealayoutguide?language=objc) for this very reason, this is trivial!”. We were just as naive. The first issue is that the native `` implementation has no window to anchor to until the moment it is about to appear. That's alright, we can override `-(BOOL)becomeFirstResponder` and enforce layout constraints there. Adhering to these constraints bumps the accessory view up, but another bug arises: +Another tricky bug we encountered was avoiding the home pill on iPhone X. You may be thinking, “Apple developed [safeAreaLayoutGuide](https://developer.apple.com/documentation/uikit/uiview/2891102-safearealayoutguide?language=objc) for this very reason, this is trivial!”. We were just as naive. The first issue is that the native `` implementation has no window to anchor to until the moment it is about to appear. That's alright, we can override `-(BOOL)becomeFirstResponder` and enforce layout constraints there. Adhering to these constraints bumps the accessory view up, but another bug arises: The input accessory view successfully avoids the home pill, but now content behind the unsafe area is visible. The solution lies in this [radar](https://www.openradar.me/34411433). I wrapped the native `` hierarchy in a container which doesn't conform to the `safeAreaLayoutGuide` constraints. The native container covers the content in the unsafe area, while the `` stays within the safe area boundaries. diff --git a/website/blog/2018-04-09-build-com-app.md b/website/blog/2018-04-09-build-com-app.md index 546d30053bb..0a42e474aa3 100644 --- a/website/blog/2018-04-09-build-com-app.md +++ b/website/blog/2018-04-09-build-com-app.md @@ -13,7 +13,7 @@ tags: [showcase] You can check out the app at [https://www.build.com/app](https://www.build.com/app).

- +

## Features diff --git a/website/blog/2019-05-01-react-native-at-f8-and-podcast.md b/website/blog/2019-05-01-react-native-at-f8-and-podcast.md index 12696478a02..76a659db797 100644 --- a/website/blog/2019-05-01-react-native-at-f8-and-podcast.md +++ b/website/blog/2019-05-01-react-native-at-f8-and-podcast.md @@ -9,13 +9,13 @@ This week, [Eli White](https://twitter.com/Eli_White) gave a talk at [F8 2019](h Check out the video on [Facebook's developer website](https://developers.facebook.com/videos/2019/mobile-innovation-with-react-native-componentkit-and-litho/): - F8 Talk about React Native -#### Highlights from the talk: +#### Highlights from the talk - We spent 2017 and 2018 focused on React Native's largest product, Facebook's Marketplace. We collaborated with the Marketplace team to improve quality and add delight to the product. At this point, Marketplace is one of the highest quality products in the Facebook app both on Android and iOS. - Marketplace's performance was a big challenge as well, especially on mid-end Android devices. We cut startup time by more than 50% over the last year with more improvements on the way! The biggest improvements are being built into React Native and will be coming to the community later this year. @@ -26,7 +26,7 @@ Check out the video on [Facebook's developer website](https://developers.faceboo Eli's talk concludes by talking about our recent open source work. We gave [an update on our progress in March](/blog/2019/03/01/react-native-open-source-update) and recently [Nader Dabit](https://twitter.com/dabit3) and [Gant Laborde](https://twitter.com/GantLaborde) invited Christoph for a chat on their podcast, [React Native Radio](https://devchat.tv/react-native-radio/react-native-open-source-the-react-native-community-feat-christoph-nakazawa/), to chat about React Native in open source. -#### Highlights from the podcast: +#### Highlights from the podcast - We talked about how the React Native team at Facebook thinks about open source and how we are building a sustainable community that scales for a project of React Native's [size](https://octoverse.github.com/projects#repositories). - We are on track to remove multiple modules as part of the [Lean Core](https://github.com/facebook/react-native/issues/23313) effort. Many modules like WebView and the React Native CLI have received more than 100 Pull Requests since they were extracted. diff --git a/website/blog/2019-11-18-react-native-doctor.md b/website/blog/2019-11-18-react-native-doctor.md index 34a71350161..7e88be61cec 100644 --- a/website/blog/2019-11-18-react-native-doctor.md +++ b/website/blog/2019-11-18-react-native-doctor.md @@ -25,7 +25,7 @@ Here it is in action: The `doctor` command currently supports most of the software and libraries that React Native relies on, such as CocoaPods, Xcode and Android SDK. With `doctor` we'll find issues with your development environment and give you the option to automatically fix them. If `doctor` is not able to fix an issue, it will display a message and a helpful link explaining how to fix it manually as the following:

- Doctor command with a link to help on Android SDK's installation + Doctor command with a link to help on Android SDK's installation

## Try it now diff --git a/website/blog/2021-08-26-many-platform-vision.md b/website/blog/2021-08-26-many-platform-vision.md index badb59e136d..7a60d8e9063 100644 --- a/website/blog/2021-08-26-many-platform-vision.md +++ b/website/blog/2021-08-26-many-platform-vision.md @@ -25,7 +25,7 @@ We believe that React Native enables developers to meet users’ expectations wh Specific device hardware or user expectations impose unique constraints and requirements. As an example, memory is typically more constrained on Android and VR headsets than on iOS, macOS, and Windows. As another example, users expect mobile apps to start up almost instantaneously, but they are less frustrated when desktop apps take longer to start up. **We have found that by approaching these problems with React Native, we can more easily borrow lessons learned and code written for one platform, and apply them to other platforms.**
- Screenshot of Facebook Dating on mobile + Screenshot of Facebook Dating on mobile
React Native and Relay power over 1000 Facebook surfaces on Android and iOS.
@@ -52,7 +52,7 @@ In addition to domain-specific engineers and meetups and conferences, each platf **We believe that competition leads to better outcomes for everyone in the long run.** By studying what makes other players on each platform great, we can learn lessons that may apply to other platforms. For example, the race to simplify complex websites influenced the development of React and gave React Native a head start to offer a declarative framework for mobile apps. The demand for faster iteration cycles and build times for the web also led to the development of Fast Refresh which significantly benefited React Native. Similarly, performance optimizations in our internal mobile frameworks — especially around data fetching and parallelization — challenged us to improve React Native in a way that has also influenced React when we built the new [Facebook.com](https://facebook.com/) website.
- Screenshot of the Facebook.com website + Screenshot of the Facebook.com website
React and Relay powers the Facebook.com website.
@@ -67,7 +67,7 @@ React and React Native are at a turning point. React has [started the road to a Building for desktop has been very exciting for us. We have taken what we know about building mobile experiences and applied them to desktop with eyes wide open. We’ve expanded our horizons with multiple child windows, menu bars, system trays, and more. As we continue collaborating on new desktop Messenger features, we expect to find opportunities that influence how we build on web and mobile. If you want to stay up to date, our desktop collaboration work is taking place [on GitHub](https://github.com/microsoft/react-native-windows).
- Screenshot of the Messenger app on macOS + Screenshot of the Messenger app on macOS
React Native powers Video Calling in Messenger for Windows and macOS.
@@ -80,7 +80,7 @@ Similar to how we approach React Native for mobile, we will be validating our te Although most of the development for VR will still be internal, we hope to share more as soon as we can. We also anticipate that improvements to React Native for VR will surface in open source. For example, we anticipate that projects to reduce memory usage for VR use cases will also reduce memory usage for React Native on mobile and desktop experiences.
- Screenshot of Oculus Home in virtual reality + Screenshot of Oculus Home in virtual reality
React and Relay power the Oculus Home and many other virtual reality experiences.
diff --git a/website/blog/2021-08-30-react-native-is-hiring-managers.md b/website/blog/2021-08-30-react-native-is-hiring-managers.md index 513d74265ae..812fea5b65d 100644 --- a/website/blog/2021-08-30-react-native-is-hiring-managers.md +++ b/website/blog/2021-08-30-react-native-is-hiring-managers.md @@ -11,14 +11,14 @@ As [part of our plans beginning earlier this year](https://reactnative.dev/blog/
- Screenshot of the Messenger app on macOS + Screenshot of the Messenger app on macOS
React Native powers Video Calling in Messenger for Windows and macOS.
- Screenshot of Oculus Home in virtual reality + Screenshot of Oculus Home in virtual reality
React and Relay power the Oculus Home and many other virtual reality experiences.
diff --git a/website/blog/2021-09-01-preparing-your-app-for-iOS-15-and-android-12.md b/website/blog/2021-09-01-preparing-your-app-for-iOS-15-and-android-12.md index 4cf9d66b080..39c38b3fe4b 100644 --- a/website/blog/2021-09-01-preparing-your-app-for-iOS-15-and-android-12.md +++ b/website/blog/2021-09-01-preparing-your-app-for-iOS-15-and-android-12.md @@ -21,7 +21,7 @@ The release date of iOS 15 hasn’t been announced yet, but based on previous iO The way to disable _QuickType_ bar in _[TextInput](/docs/textinput)_ has changed. _QuickType_ bar is the bar above keyboard with three suggested words. In case your UI needs to have the bar hidden, setting [autoCorrect](/docs/textinput#autocorrect) to `false` no longer disables _QuickType_ bar in iOS 15 like earlier versions. In order to hide the _QuickType_ bar, you need to also set [spellCheck](/docs/textinput#spellcheck-ios) to `false`. This will disable spell check, the red underlines, in your _TextInput_. Disabling QuickType bar with spell check enabled is no longer an option.
- Screenshot of QuickType bar + Screenshot of QuickType bar
QuickType bar with three suggested words
diff --git a/website/blog/2021-10-01-version-066.md b/website/blog/2021-10-01-version-066.md index 3b25b550877..6c4b11298a0 100644 --- a/website/blog/2021-10-01-version-066.md +++ b/website/blog/2021-10-01-version-066.md @@ -62,7 +62,7 @@ The process for migrating your project to a React Native nightly release is very #### Using Commitly Releases (Commitlies)
- Screenshot of CircleCI artifact panel to find tarball + Screenshot of CircleCI artifact panel to find tarball
Find the "build_npm_package-1" job related to a commit and head to the "Artifacts" panel to download the tarball for the commitly.
diff --git a/website/blog/2022-06-16-resources-migrating-your-react-native-library-to-the-new-architecture.md b/website/blog/2022-06-16-resources-migrating-your-react-native-library-to-the-new-architecture.md index 9e4bc6e78b4..edc4176a54c 100644 --- a/website/blog/2022-06-16-resources-migrating-your-react-native-library-to-the-new-architecture.md +++ b/website/blog/2022-06-16-resources-migrating-your-react-native-library-to-the-new-architecture.md @@ -40,7 +40,7 @@ For developers who may want to follow along in code, we’ve prepared two exampl [This repo](https://github.com/react-native-community/RNNewArchitectureApp) was created to demonstrate how to migrate an app, the native modules and the native components from the legacy architecture on the React Native version 0.67 to the New Architecture and the most recent version of React Native. Each commit corresponds to an isolated migration step.
- Example steps to migrate an app + Example steps to migrate an app
Commit list for a migration in the RNNewArchitectureApp repository
diff --git a/website/blog/2022-07-08-hermes-as-the-default.md b/website/blog/2022-07-08-hermes-as-the-default.md index 5a09cb5072d..66afc557db1 100644 --- a/website/blog/2022-07-08-hermes-as-the-default.md +++ b/website/blog/2022-07-08-hermes-as-the-default.md @@ -29,13 +29,13 @@ We measured three different metrics important to app developers: TTI, binary siz All the android tests were performed on a Samsung Galaxy S20.
- Android Benchmarking Data + Android Benchmarking Data
### TTI Video
- Android TTI Video + Android TTI Video
## iOS Benchmarking Data @@ -43,19 +43,19 @@ All the android tests were performed on a Samsung Galaxy S20. All the iOS tests were performed on an iPhone 12 Pro.
- iOS Benchmarking Data + iOS Benchmarking Data
### TTI Video
- iOS TTI Video + iOS TTI Video
-### Slowed Down TTI Video, to better show the difference in startup time. +### Slowed Down TTI Video, to better show the difference in startup time
- iOS Slowed Down TTI Video + iOS Slowed Down TTI Video
## React Native/Hermes Integration diff --git a/website/blog/2024-04-22-release-0.74.md b/website/blog/2024-04-22-release-0.74.md index c7d26117822..82fc597cb59 100644 --- a/website/blog/2024-04-22-release-0.74.md +++ b/website/blog/2024-04-22-release-0.74.md @@ -98,7 +98,7 @@ React Native [previously flipped](https://yogalayout.dev/blog/announcing-yoga-3. Yoga 3.0 brings support for [`alignContent: 'space-evenly'`](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content#space-evenly). `space-evenly` distributes the lines in a multi-line flex container using evenly spaced gaps, placed between line and container edges.
- Visual reference for alignContent behaviors + Visual reference for alignContent behaviors
Source: [World Wide Web Consortium](https://www.w3.org/TR/css-align-3/#distribution-values)
diff --git a/website/blog/2024-10-23-release-0.76-new-architecture.md b/website/blog/2024-10-23-release-0.76-new-architecture.md index 4cbfbb3f70b..b7119a7625f 100644 --- a/website/blog/2024-10-23-release-0.76-new-architecture.md +++ b/website/blog/2024-10-23-release-0.76-new-architecture.md @@ -102,7 +102,7 @@ The [previous shadow functionality](https://reactnative.dev/docs/shadow-props) h `filter` adds certain graphical filters to an element. There are a mix of color filters that let you modify things like brightness, saturation, and hue as well as non-color filters that let you add blurs and shadows. Check out the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/filter) for a full overview of each individual filter function, along with a fiddle to try them out for yourself. Below is a hot dog image with various filters applied to it.
- Filters demonstration + Filters demonstration
From left to right: no filter, saturate filter, blur filter, invert filter
diff --git a/website/blog/2024-10-23-the-new-architecture-is-here.md b/website/blog/2024-10-23-the-new-architecture-is-here.md index a9dcb10399a..229e2de594c 100644 --- a/website/blog/2024-10-23-the-new-architecture-is-here.md +++ b/website/blog/2024-10-23-the-new-architecture-is-here.md @@ -231,11 +231,11 @@ Here's a comparison of the old architecture without transitions and the new arch
- A video demonstrating an app rendering many views (tiles) according to a slider input. The views are rendered in batches as the slider is quickly adjusted from 0 to 1000. + A video demonstrating an app rendering many views (tiles) according to a slider input. The views are rendered in batches as the slider is quickly adjusted from 0 to 1000.
Before: rendering tiles without marking it as a transition.
- A video demonstrating an app rendering many views (tiles) according to a slider input. The views are rendered in batches as the slider is quickly adjusted from 0 to 1000. There are less batch renders in comparison to the next video. + A video demonstrating an app rendering many views (tiles) according to a slider input. The views are rendered in batches as the slider is quickly adjusted from 0 to 1000. There are less batch renders in comparison to the next video.
After: rendering tiles with transitions to interrupt in-progress renders of stale state.
@@ -250,11 +250,11 @@ Automatic batching allows React to batch together more state updates when render
- A video demonstrating an app rendering many views according to a slider input. The slider value is adjusted from 0 to 1000 and the UI slowly catches up to rendering 1000 views. + A video demonstrating an app rendering many views according to a slider input. The slider value is adjusted from 0 to 1000 and the UI slowly catches up to rendering 1000 views.
Before: rendering frequent state updates with legacy renderer.
- A video demonstrating an app rendering many views according to a slider input. The slider value is adjusted from 0 to 1000 and the UI resolves to 1000 views faster than the previous example, without as many intermediate states. + A video demonstrating an app rendering many views according to a slider input. The slider value is adjusted from 0 to 1000 and the UI resolves to 1000 views faster than the previous example, without as many intermediate states.
After: rendering frequent state updates with automatic batching.
@@ -304,11 +304,11 @@ This change allows you to read layout information synchronously and update the U
- A view that is moving to the corners of the viewport and center with a tooltip rendered either above or below it. The tooltip is rendered after a short delay after the view moves + A view that is moving to the corners of the viewport and center with a tooltip rendered either above or below it. The tooltip is rendered after a short delay after the view moves
In the old architecture, layout was read asynchronously in `onLayout`, causing the position of the tooltip to be delayed.
- A view that is moving to the corners of the viewport and center with a tooltip rendered either above or below it. The view and tooltip move in unison. + A view that is moving to the corners of the viewport and center with a tooltip rendered either above or below it. The view and tooltip move in unison.
In the New Architecture, layout can be read in `useLayoutEffect` synchronously, updating the tooltip position before displaying.
diff --git a/website/contributing/_markdown-GH-release-notes-prerelease.mdx b/website/contributing/_markdown-GH-release-notes-prerelease.mdx index 9e8501b2447..802ee2c6599 100644 --- a/website/contributing/_markdown-GH-release-notes-prerelease.mdx +++ b/website/contributing/_markdown-GH-release-notes-prerelease.mdx @@ -29,7 +29,7 @@ Let us know how it went by posting a comment in the [working group discussion](h ```
- Creating a GitHub Release - +
Screenshot of the custom browser extension. The button "Import to fbsource" is used to import a Pull Request internally.
diff --git a/website/versioned_docs/version-0.70/_getting-started-linux-android.md b/website/versioned_docs/version-0.70/_getting-started-linux-android.md index c822feda599..b08340d38fd 100644 --- a/website/versioned_docs/version-0.70/_getting-started-linux-android.md +++ b/website/versioned_docs/version-0.70/_getting-started-linux-android.md @@ -168,7 +168,7 @@ Now that you have successfully run the app, let's modify it. Congratulations! You've successfully run and modified your first React Native app. -
+

Now what?

diff --git a/website/versioned_docs/version-0.70/_getting-started-macos-android.md b/website/versioned_docs/version-0.70/_getting-started-macos-android.md index a3bcd15727b..a1255ec5822 100644 --- a/website/versioned_docs/version-0.70/_getting-started-macos-android.md +++ b/website/versioned_docs/version-0.70/_getting-started-macos-android.md @@ -186,7 +186,7 @@ Now that you have successfully run the app, let's modify it. Congratulations! You've successfully run and modified your first React Native app. -
+

Now what?

diff --git a/website/versioned_docs/version-0.70/_getting-started-macos-ios.md b/website/versioned_docs/version-0.70/_getting-started-macos-ios.md index d90ddcae1cd..7fb39cb66d1 100644 --- a/website/versioned_docs/version-0.70/_getting-started-macos-ios.md +++ b/website/versioned_docs/version-0.70/_getting-started-macos-ios.md @@ -167,7 +167,7 @@ Now that you have successfully run the app, let's modify it. Congratulations! You've successfully run and modified your first React Native app. -
+
## Now what? diff --git a/website/versioned_docs/version-0.70/_getting-started-windows-android.md b/website/versioned_docs/version-0.70/_getting-started-windows-android.md index dd27f78ad22..882b101f210 100644 --- a/website/versioned_docs/version-0.70/_getting-started-windows-android.md +++ b/website/versioned_docs/version-0.70/_getting-started-windows-android.md @@ -201,7 +201,7 @@ Now that you have successfully run the app, let's modify it. Congratulations! You've successfully run and modified your first React Native app. -
+

Now what?

diff --git a/website/versioned_docs/version-0.70/datepickerios.md b/website/versioned_docs/version-0.70/datepickerios.md index cb67cbb99cd..1137a9bd836 100644 --- a/website/versioned_docs/version-0.70/datepickerios.md +++ b/website/versioned_docs/version-0.70/datepickerios.md @@ -138,7 +138,7 @@ Restricts the range of possible date/time values. Example with `maximumDate` set to December 31, 2017: -
+
--- @@ -166,7 +166,7 @@ The interval at which minutes can be selected. Example with `minuteInterval` set to `10`: -
+
--- diff --git a/website/versioned_docs/version-0.70/getting-started.md b/website/versioned_docs/version-0.70/getting-started.md index 8a59846d1ca..9c686e57d36 100644 --- a/website/versioned_docs/version-0.70/getting-started.md +++ b/website/versioned_docs/version-0.70/getting-started.md @@ -56,7 +56,7 @@ Now that you have successfully run the app, let's modify it. Open `App.js` in yo Congratulations! You've successfully run and modified your first React Native app. -
+

Now what?

diff --git a/website/versioned_docs/version-0.70/hermes.md b/website/versioned_docs/version-0.70/hermes.md index 8942cbe1dc4..cc842ce4061 100644 --- a/website/versioned_docs/version-0.70/hermes.md +++ b/website/versioned_docs/version-0.70/hermes.md @@ -4,7 +4,7 @@ title: Using Hermes --- - + [Hermes](https://hermesengine.dev) is an open-source JavaScript engine optimized for React Native. For many apps, using Hermes will result in improved start-up time, decreased memory usage, and smaller app size when compared to JavaScriptCore. @@ -40,13 +40,13 @@ Confirm that you are using the `.hbc` file and also benchmark the before/after a 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 +npx react-native run-android --variant release ``` or for iOS: ```shell -$ npx react-native run-ios --configuration Release +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. @@ -125,13 +125,13 @@ Also, if you're using ProGuard, you will need to add these rules in `proguard-ru Next, if you've already built your app at least once, clean the build: ```shell -$ cd android && ./gradlew clean +cd android && ./gradlew clean ``` That's it! You should now be able to develop and deploy your app as usual: ```shell -$ npx react-native run-android +npx react-native run-android ``` :::note Note about Android App Bundles @@ -159,13 +159,13 @@ as `true` or `false` you can enable/disable Hermes as you wish. Once you've configured it, you can install the Hermes pods with: ```shell -$ cd ios && pod install +cd ios && pod install ``` That's it! You should now be able to develop and deploy your app as usual: ```shell -$ npx react-native run-ios +npx react-native run-ios ``` ## Switching back to JavaScriptCore diff --git a/website/versioned_docs/version-0.70/intro-react-native-components.md b/website/versioned_docs/version-0.70/intro-react-native-components.md index 54eb7f69311..6062e0eb653 100644 --- a/website/versioned_docs/version-0.70/intro-react-native-components.md +++ b/website/versioned_docs/version-0.70/intro-react-native-components.md @@ -13,7 +13,7 @@ React Native is an open source framework for building Android and iOS applicatio In Android and iOS development, a **view** is the basic building block of UI: a small rectangular element on the screen which can be used to display text, images, or respond to user input. Even the smallest visual elements of an app, like a line of text or a button, are kinds of views. Some kinds of views can contain other views. It’s views all the way down!
- Diagram of Android and iOS app showing them both built on top of atomic elements called views. + Diagram of Android and iOS app showing them both built on top of atomic elements called views.
Just a sampling of the many views used in Android and iOS apps.
diff --git a/website/versioned_docs/version-0.70/introduction.md b/website/versioned_docs/version-0.70/introduction.md index b4955fc3562..33068fe3f92 100644 --- a/website/versioned_docs/version-0.70/introduction.md +++ b/website/versioned_docs/version-0.70/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, Native Components, React, and more! - +
Many different kinds of people use React Native: from advanced iOS developers to React beginners, to people getting started programming for the first time in their career. These docs were written for all learners, no matter their experience level or background. diff --git a/website/versioned_docs/version-0.70/native-modules-android.md b/website/versioned_docs/version-0.70/native-modules-android.md index 70fa7c57c87..b09a9964302 100644 --- a/website/versioned_docs/version-0.70/native-modules-android.md +++ b/website/versioned_docs/version-0.70/native-modules-android.md @@ -19,7 +19,7 @@ In the following guide you will create a native module, `CalendarModule`, that w To get started, open up the Android project within your React Native application in Android Studio. You can find your Android project here within a React Native app:
- Image of opening up an Android project within a React Native app inside of Android Studio. + Image of opening up an Android project within a React Native app inside of Android Studio.
Image of where you can find your Android project
@@ -32,7 +32,7 @@ We also recommend enabling [Gradle Daemon](https://docs.gradle.org/2.9/userguide The first step is to create the (`CalendarModule.java` or `CalendarModule.kt`) Java/Kotlin file inside `android/app/src/main/java/com/your-app-name/` folder (the folder is the same for both Kotlin and Java). This Java/Kotlin file will contain your native module Java/Kotlin class.
- Image of adding a class called CalendarModule.java within the Android Studio. + Image of adding a class called CalendarModule.java within the Android Studio.
Image of how to add the CalendarModuleClass
@@ -366,7 +366,7 @@ As you work through these guides and iterate on your native module, you will nee You should now be able to invoke your `createCalendarEvent()` method on your native module in the app. In our example this occurs by pressing the `NewModuleButton`. You can confirm this by viewing the log you set up in your `createCalendarEvent()` method. You can follow [these steps](https://developer.android.com/studio/debug/am-logcat.html) to view ADB logs in your app. You should then be able to search for your `Log.d` message (in our example “Create event called with name: testName and location: testLocation”) and see your message logged each time you invoke your native module method.
- Image of logs. + Image of logs.
Image of ADB logs in Android Studio
@@ -777,7 +777,7 @@ promise.reject("Create Event error", "Error parsing date", e) Error message in React Native App when promise is rejected:
- Image of error message in React Native app. + Image of error message in React Native app.
Image of error message
diff --git a/website/versioned_docs/version-0.70/native-modules-ios.md b/website/versioned_docs/version-0.70/native-modules-ios.md index b5499d1a7b3..22a38c3ff8d 100644 --- a/website/versioned_docs/version-0.70/native-modules-ios.md +++ b/website/versioned_docs/version-0.70/native-modules-ios.md @@ -18,7 +18,7 @@ In the following guide you will create a native module, `CalendarModule`, that w To get started, open up the iOS project within your React Native application in Xcode. You can find your iOS project here within a React Native app:
- Image of opening up an iOS project within a React Native app inside of xCode. + Image of opening up an iOS project within a React Native app inside of xCode.
Image of where you can find your iOS project
@@ -29,7 +29,7 @@ We recommend using Xcode to write your native code. Xcode is built for iOS devel The first step is to create our main custom native module header and implementation files. Create a new file called `RCTCalendarModule.h`
- Image of creating a class called RCTCalendarModule.h. + Image of creating a class called RCTCalendarModule.h.
Image of creating a custom native module file within the same folder as AppDelegate
@@ -193,7 +193,7 @@ As you work through these guides and iterate on your native module, you will nee You should now be able to invoke your `createCalendarEvent()` method on your native module in JavaScript. Since you are using `RCTLog` in the function, you can confirm your native method is being invoked by [enabling debug mode in your app](https://reactnative.dev/docs/debugging#chrome-developer-tools) and looking at the JS console in Chrome or the mobile app debugger Flipper. You should see your `RCTLogInfo(@"Pretending to create an event %@ at %@", name, location);` message each time you invoke the native module method.
- Image of logs. + Image of logs.
Image of iOS logs in Flipper
diff --git a/website/versioned_docs/version-0.70/pressable.md b/website/versioned_docs/version-0.70/pressable.md index ac4f289e9e6..a4a781dced9 100644 --- a/website/versioned_docs/version-0.70/pressable.md +++ b/website/versioned_docs/version-0.70/pressable.md @@ -23,7 +23,7 @@ After pressing [`onPressIn`](#onpressin), one of two things will happen: 1. The person will remove their finger, triggering [`onPressOut`](#onpressout) followed by [`onPress`](#onpress). 2. If the person leaves their finger longer than 500 milliseconds before removing it, [`onLongPress`](#onlongpress) is triggered. ([`onPressOut`](#onpressout) will still fire when they remove their finger.) -Diagram of the onPress events in sequence. +Diagram of the onPress events in sequence. Fingers are not the most precise instruments, and it is common for users to accidentally activate the wrong element or miss the activation area. To help, `Pressable` has an optional `HitRect` you can use to define how far a touch can register away from the wrapped element. Presses can start anywhere within a `HitRect`. @@ -32,7 +32,7 @@ Fingers are not the most precise instruments, and it is common for users to acci > The touch area never extends past the parent view bounds and the Z-index of sibling views always takes precedence if a touch hits two overlapping views.
- Diagram of HitRect and PressRect and how they work. + Diagram of HitRect and PressRect and how they work.
You can set HitRect with hitSlop and set PressRect with pressRetentionOffset.
diff --git a/website/versioned_docs/version-0.70/profile-hermes.md b/website/versioned_docs/version-0.70/profile-hermes.md index b5d51cdbd91..140bda2e3d3 100644 --- a/website/versioned_docs/version-0.70/profile-hermes.md +++ b/website/versioned_docs/version-0.70/profile-hermes.md @@ -30,7 +30,7 @@ To record a sampling profiler from the Developer Menu: A toast will show the location where the sampling profiler has been saved, usually in `/data/user/0/com.appName/cache/*.cpuprofile` -Toast Notification of Profile saving +Toast Notification of Profile saving ## Execute command from CLI @@ -93,7 +93,7 @@ To open the profile in Chrome DevTools: 2. Select the **Performance** tab. 3. Right click and choose **Load profile...** -Loading a performance profile on Chrome DevTools +Loading a performance profile on Chrome DevTools ## How does the Hermes Profile Transformer work? @@ -152,8 +152,8 @@ The `samples` and the `stackFrames` in tandem can then be used to generate all t 1. Start Nodes/Events: Nodes absent in the previous sample's function call stack but present in the current sample's. 2. End Nodes/Events: Nodes present in the previous sample's function call stack but absent in the current sample's. -CallStack Terms Explained +CallStack Terms Explained You can now construct a `flamechart` of function calls as you have all the function information including its start and end timestamps. -The `hermes-profile-transformer` can convert any profile generated using Hermes into a format that can be directly displayed in Chrome DevTools. More information about this can be found on [ `@react-native-community/hermes-profile-transformer` ](https://github.com/react-native-community/hermes-profile-transformer) +The `hermes-profile-transformer` can convert any profile generated using Hermes into a format that can be directly displayed in Chrome DevTools. More information about this can be found on [`@react-native-community/hermes-profile-transformer`](https://github.com/react-native-community/hermes-profile-transformer) diff --git a/website/versioned_docs/version-0.70/security.md b/website/versioned_docs/version-0.70/security.md index 632fe2e591f..125011453ca 100644 --- a/website/versioned_docs/version-0.70/security.md +++ b/website/versioned_docs/version-0.70/security.md @@ -7,7 +7,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con Security is often overlooked when building apps. It is true that it is impossible to build software that is completely impenetrable—we’ve yet to invent a completely impenetrable lock (bank vaults do, after all, still get broken into). However, the probability of falling victim to a malicious attack or being exposed for a security vulnerability is inversely proportional to the effort you’re willing to put in to protecting your application against any such eventuality. Although an ordinary padlock is pickable, it is still much harder to get past than a cabinet hook! - + In this guide, you will learn about best practices for storing sensitive information, authentication, network security, and tools that will help you secure your app. This is not a preflight checklist—it is a catalogue of options, each of which will help further protect your app and users. @@ -71,7 +71,7 @@ In order to use iOS Keychain services or Android Secure Shared Preferences, you ## Authentication and Deep Linking - + Mobile apps have a unique vulnerability that is non-existent in the web: **deep linking**. Deep linking is a way of sending data directly to a native application from an outside source. A deep link looks like `app://` where `app` is your app scheme and anything following the // could be used internally to handle the request. diff --git a/website/versioned_docs/version-0.70/testing-overview.md b/website/versioned_docs/version-0.70/testing-overview.md index 9bb25763527..1201397187c 100644 --- a/website/versioned_docs/version-0.70/testing-overview.md +++ b/website/versioned_docs/version-0.70/testing-overview.md @@ -10,7 +10,7 @@ As your codebase expands, small errors and edge cases you don’t expect can cas In this guide, we will cover different, automated ways to ensure your app works as expected, ranging from static analysis to end-to-end tests. -Testing is a cycle of fixing, testing, and either passing to release or failing back into testing. +Testing is a cycle of fixing, testing, and either passing to release or failing back into testing. ## Why Test @@ -81,7 +81,7 @@ When the object being tested has any dependencies, you’ll often need to mock t The great thing about unit tests is that they are quick to write and run. Therefore, as you work, you get fast feedback about whether your tests are passing. Jest even has an option to continuously run tests that are related to code you’re editing: [Watch mode](https://jestjs.io/docs/en/cli#watch). - + ### Mocking @@ -112,7 +112,7 @@ In integration testing, real individual units are combined (same as in your app) > - Makes a network call to other application (such as the weather service API) > - Does any kind of file or database I/O - + ## Component Tests @@ -132,7 +132,7 @@ There are several libraries that can help you testing these: > Component tests are only JavaScript tests running in Node.js environment. They do _not_ take into account any iOS, Android, or other platform code which is backing the React Native components. It follows that they cannot give you a 100% confidence that everything works for the user. If there is a bug in the iOS or Android code, they will not find it. - + ### Testing User Interactions @@ -233,7 +233,7 @@ Snapshots themselves do not ensure that your component render logic is correct, We recommend that you only use small snapshots (see [`no-large-snapshots` rule](https://github.com/jest-community/eslint-plugin-jest/blob/master/docs/rules/no-large-snapshots.md)). If you want to test a _change_ between two React component states, use [`snapshot-diff`](https://github.com/jest-community/snapshot-diff). When in doubt, prefer explicit expectations as described in the previous paragraph. - + ## End-to-End Tests @@ -253,7 +253,7 @@ Try to cover the vital parts of your app with E2E tests: authentication flow, co There are several E2E testing tools available: in the React Native community, [Detox](https://github.com/wix/detox/) is a popular framework because it’s tailored for React Native apps. Another popular library in the space of iOS and Android apps is [Appium](http://appium.io/). - + ## Summary diff --git a/website/versioned_docs/version-0.70/the-new-architecture/landing-page.md b/website/versioned_docs/version-0.70/the-new-architecture/landing-page.md index 6ae1cd3097b..e677699f4ca 100644 --- a/website/versioned_docs/version-0.70/the-new-architecture/landing-page.md +++ b/website/versioned_docs/version-0.70/the-new-architecture/landing-page.md @@ -85,11 +85,11 @@ function ViewWithTooltip() {
- A view that is moving to the corners of the viewport and center with a tooltip rendered either above or below it. The tooltip is rendered after a short delay after the view moves + A view that is moving to the corners of the viewport and center with a tooltip rendered either above or below it. The tooltip is rendered after a short delay after the view moves
Asynchronous measurement and render of the ToolTip. [See code](https://gist.github.com/lunaleaps/eabd653d9864082ac1d3772dac217ab9).
- A view that is moving to the corners of the viewport and center with a tooltip rendered either above or below it. The view and tooltip move in unison. + A view that is moving to the corners of the viewport and center with a tooltip rendered either above or below it. The view and tooltip move in unison.
Synchronous measurement and render of the ToolTip. [See code](https://gist.github.com/lunaleaps/148756563999c83220887757f2e549a3).
@@ -113,11 +113,11 @@ In comparing the renderers for the [same code](https://gist.github.com/lunaleaps
- A video demonstrating an app rendering many views according to a slider input. The slider value is adjusted from 0 to 1000 and the UI slowly catches up to rendering 1000 views. + A video demonstrating an app rendering many views according to a slider input. The slider value is adjusted from 0 to 1000 and the UI slowly catches up to rendering 1000 views.
Rendering frequent state updates with legacy renderer.
- A video demonstrating an app rendering many views according to a slider input. The slider value is adjusted from 0 to 1000 and the UI resolves to 1000 views faster than the previous example, without as many intermediate states. + A video demonstrating an app rendering many views according to a slider input. The slider value is adjusted from 0 to 1000 and the UI resolves to 1000 views faster than the previous example, without as many intermediate states.
Rendering frequent state updates with React 18 renderer.
@@ -175,11 +175,11 @@ You'll notice that with the frequent updates in a transition, React renders fewe
- A video demonstrating an app rendering many views (tiles) according to a slider input. The views are rendered in batches as the slider is quickly adjusted from 0 to 1000. There are less batch renders in comparison to the next video. + A video demonstrating an app rendering many views (tiles) according to a slider input. The views are rendered in batches as the slider is quickly adjusted from 0 to 1000. There are less batch renders in comparison to the next video.
Rendering tiles with transitions to interrupt in-progress renders of stale state. [See code](https://gist.github.com/lunaleaps/eac391bf3fe4c85953cefeb74031bab0/revisions).
- A video demonstrating an app rendering many views (tiles) according to a slider input. The views are rendered in batches as the slider is quickly adjusted from 0 to 1000. + A video demonstrating an app rendering many views (tiles) according to a slider input. The views are rendered in batches as the slider is quickly adjusted from 0 to 1000.
Rendering tiles without marking it as a transition. [See code](https://gist.github.com/lunaleaps/eac391bf3fe4c85953cefeb74031bab0/revisions).
diff --git a/website/versioned_docs/version-0.71/_getting-started-linux-android.md b/website/versioned_docs/version-0.71/_getting-started-linux-android.md index a6e01109488..3c55a58f0c7 100644 --- a/website/versioned_docs/version-0.71/_getting-started-linux-android.md +++ b/website/versioned_docs/version-0.71/_getting-started-linux-android.md @@ -164,7 +164,7 @@ Now that you have successfully run the app, let's modify it. Congratulations! You've successfully run and modified your first React Native app. -
+

Now what?

diff --git a/website/versioned_docs/version-0.71/_getting-started-macos-android.md b/website/versioned_docs/version-0.71/_getting-started-macos-android.md index 58fcb43675e..3b849c20f8f 100644 --- a/website/versioned_docs/version-0.71/_getting-started-macos-android.md +++ b/website/versioned_docs/version-0.71/_getting-started-macos-android.md @@ -180,7 +180,7 @@ Now that you have successfully run the app, let's modify it. Congratulations! You've successfully run and modified your first React Native app. -
+

Now what?

diff --git a/website/versioned_docs/version-0.71/_getting-started-macos-ios.md b/website/versioned_docs/version-0.71/_getting-started-macos-ios.md index 4f40c5d6e07..2f564183f27 100644 --- a/website/versioned_docs/version-0.71/_getting-started-macos-ios.md +++ b/website/versioned_docs/version-0.71/_getting-started-macos-ios.md @@ -169,7 +169,7 @@ Now that you have successfully run the app, let's modify it. Congratulations! You've successfully run and modified your first React Native app. -
+
## Now what? diff --git a/website/versioned_docs/version-0.71/_getting-started-windows-android.md b/website/versioned_docs/version-0.71/_getting-started-windows-android.md index 894c46df890..a3e14f47f32 100644 --- a/website/versioned_docs/version-0.71/_getting-started-windows-android.md +++ b/website/versioned_docs/version-0.71/_getting-started-windows-android.md @@ -197,7 +197,7 @@ Now that you have successfully run the app, let's modify it. Congratulations! You've successfully run and modified your first React Native app. -
+

Now what?

diff --git a/website/versioned_docs/version-0.71/datepickerios.md b/website/versioned_docs/version-0.71/datepickerios.md index d236ffc01f6..7b71ef9ac49 100644 --- a/website/versioned_docs/version-0.71/datepickerios.md +++ b/website/versioned_docs/version-0.71/datepickerios.md @@ -127,7 +127,7 @@ Restricts the range of possible date/time values. Example with `maximumDate` set to December 31, 2017: -
+
--- @@ -155,7 +155,7 @@ The interval at which minutes can be selected. Example with `minuteInterval` set to `10`: -
+
--- diff --git a/website/versioned_docs/version-0.71/getting-started.md b/website/versioned_docs/version-0.71/getting-started.md index 07fad84c79a..28d26cafaae 100644 --- a/website/versioned_docs/version-0.71/getting-started.md +++ b/website/versioned_docs/version-0.71/getting-started.md @@ -56,7 +56,7 @@ Now that you have successfully run the app, let's modify it. Open `App.js` in yo Congratulations! You've successfully run and modified your first React Native app. -
+

Now what?

diff --git a/website/versioned_docs/version-0.71/hermes.md b/website/versioned_docs/version-0.71/hermes.md index 07d7c11c6ae..82893fc8a2e 100644 --- a/website/versioned_docs/version-0.71/hermes.md +++ b/website/versioned_docs/version-0.71/hermes.md @@ -4,7 +4,7 @@ title: Using Hermes --- - + [Hermes](https://hermesengine.dev) is an open-source JavaScript engine optimized for React Native. For many apps, using Hermes will result in improved start-up time, decreased memory usage, and smaller app size when compared to JavaScriptCore. @@ -40,13 +40,13 @@ Confirm that you are using the `.hbc` file and also benchmark the before/after a 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 --mode release +npx react-native run-android --mode release ``` or for iOS: ```shell -$ npx react-native run-ios --mode Release +npx react-native run-ios --mode Release ``` This will compile JavaScript to bytecode during build time which will improve your app's startup speed on device. @@ -115,13 +115,13 @@ Also, if you're using ProGuard, you will need to add these rules in `proguard-ru Next, if you've already built your app at least once, clean the build: ```shell -$ cd android && ./gradlew clean +cd android && ./gradlew clean ``` That's it! You should now be able to develop and deploy your app as usual: ```shell -$ npx react-native run-android +npx react-native run-android ``` ### iOS @@ -145,13 +145,13 @@ as `true` or `false` you can enable/disable Hermes as you wish. Once you've configured it, you can install the Hermes pods with: ```shell -$ cd ios && pod install +cd ios && pod install ``` That's it! You should now be able to develop and deploy your app as usual: ```shell -$ npx react-native run-ios +npx react-native run-ios ``` ## Switching back to JavaScriptCore diff --git a/website/versioned_docs/version-0.71/intro-react-native-components.md b/website/versioned_docs/version-0.71/intro-react-native-components.md index 62bdcc4ec55..43b9556f059 100644 --- a/website/versioned_docs/version-0.71/intro-react-native-components.md +++ b/website/versioned_docs/version-0.71/intro-react-native-components.md @@ -13,7 +13,7 @@ React Native is an open source framework for building Android and iOS applicatio In Android and iOS development, a **view** is the basic building block of UI: a small rectangular element on the screen which can be used to display text, images, or respond to user input. Even the smallest visual elements of an app, like a line of text or a button, are kinds of views. Some kinds of views can contain other views. It’s views all the way down!
- Diagram of Android and iOS app showing them both built on top of atomic elements called views. + Diagram of Android and iOS app showing them both built on top of atomic elements called views.
Just a sampling of the many views used in Android and iOS apps.
diff --git a/website/versioned_docs/version-0.71/introduction.md b/website/versioned_docs/version-0.71/introduction.md index cb523851453..4b669164249 100644 --- a/website/versioned_docs/version-0.71/introduction.md +++ b/website/versioned_docs/version-0.71/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, Native Components, React, and more! - +
Many different kinds of people use React Native: from advanced iOS developers to React beginners, to people getting started programming for the first time in their career. These docs were written for all learners, no matter their experience level or background. diff --git a/website/versioned_docs/version-0.71/native-modules-android.md b/website/versioned_docs/version-0.71/native-modules-android.md index 778da352a9b..6a227d83bdf 100644 --- a/website/versioned_docs/version-0.71/native-modules-android.md +++ b/website/versioned_docs/version-0.71/native-modules-android.md @@ -19,7 +19,7 @@ In the following guide you will create a native module, `CalendarModule`, that w To get started, open up the Android project within your React Native application in Android Studio. You can find your Android project here within a React Native app:
- Image of opening up an Android project within a React Native app inside of Android Studio. + Image of opening up an Android project within a React Native app inside of Android Studio.
Image of where you can find your Android project
@@ -32,7 +32,7 @@ We also recommend enabling [Gradle Daemon](https://docs.gradle.org/2.9/userguide The first step is to create the (`CalendarModule.java` or `CalendarModule.kt`) Java/Kotlin file inside `android/app/src/main/java/com/your-app-name/` folder (the folder is the same for both Kotlin and Java). This Java/Kotlin file will contain your native module Java/Kotlin class.
- Image of adding a class called CalendarModule.java within the Android Studio. + Image of adding a class called CalendarModule.java within the Android Studio.
Image of how to add the CalendarModuleClass
@@ -366,7 +366,7 @@ As you work through these guides and iterate on your native module, you will nee You should now be able to invoke your `createCalendarEvent()` method on your native module in the app. In our example this occurs by pressing the `NewModuleButton`. You can confirm this by viewing the log you set up in your `createCalendarEvent()` method. You can follow [these steps](https://developer.android.com/studio/debug/am-logcat.html) to view ADB logs in your app. You should then be able to search for your `Log.d` message (in our example “Create event called with name: testName and location: testLocation”) and see your message logged each time you invoke your native module method.
- Image of logs. + Image of logs.
Image of ADB logs in Android Studio
@@ -777,7 +777,7 @@ promise.reject("Create Event error", "Error parsing date", e) Error message in React Native App when promise is rejected:
- Image of error message in React Native app. + Image of error message in React Native app.
Image of error message
diff --git a/website/versioned_docs/version-0.71/native-modules-ios.md b/website/versioned_docs/version-0.71/native-modules-ios.md index 398f747f96c..5250ec8424b 100644 --- a/website/versioned_docs/version-0.71/native-modules-ios.md +++ b/website/versioned_docs/version-0.71/native-modules-ios.md @@ -18,7 +18,7 @@ In the following guide you will create a native module, `CalendarModule`, that w To get started, open up the iOS project within your React Native application in Xcode. You can find your iOS project here within a React Native app:
- Image of opening up an iOS project within a React Native app inside of xCode. + Image of opening up an iOS project within a React Native app inside of xCode.
Image of where you can find your iOS project
@@ -29,7 +29,7 @@ We recommend using Xcode to write your native code. Xcode is built for iOS devel The first step is to create our main custom native module header and implementation files. Create a new file called `RCTCalendarModule.h`
- Image of creating a class called RCTCalendarModule.h. + Image of creating a class called RCTCalendarModule.h.
Image of creating a custom native module file within the same folder as AppDelegate
@@ -193,7 +193,7 @@ As you work through these guides and iterate on your native module, you will nee You should now be able to invoke your `createCalendarEvent()` method on your native module in JavaScript. Since you are using `RCTLog` in the function, you can confirm your native method is being invoked by [enabling debug mode in your app](https://reactnative.dev/docs/debugging#chrome-developer-tools) and looking at the JS console in Chrome or the mobile app debugger Flipper. You should see your `RCTLogInfo(@"Pretending to create an event %@ at %@", name, location);` message each time you invoke the native module method.
- Image of logs. + Image of logs.
Image of iOS logs in Flipper
diff --git a/website/versioned_docs/version-0.71/pressable.md b/website/versioned_docs/version-0.71/pressable.md index db0033ed717..470ed27bd76 100644 --- a/website/versioned_docs/version-0.71/pressable.md +++ b/website/versioned_docs/version-0.71/pressable.md @@ -23,7 +23,7 @@ After pressing [`onPressIn`](#onpressin), one of two things will happen: 1. The person will remove their finger, triggering [`onPressOut`](#onpressout) followed by [`onPress`](#onpress). 2. If the person leaves their finger longer than 500 milliseconds before removing it, [`onLongPress`](#onlongpress) is triggered. ([`onPressOut`](#onpressout) will still fire when they remove their finger.) -Diagram of the onPress events in sequence. +Diagram of the onPress events in sequence. Fingers are not the most precise instruments, and it is common for users to accidentally activate the wrong element or miss the activation area. To help, `Pressable` has an optional `HitRect` you can use to define how far a touch can register away from the wrapped element. Presses can start anywhere within a `HitRect`. @@ -32,7 +32,7 @@ Fingers are not the most precise instruments, and it is common for users to acci > The touch area never extends past the parent view bounds and the Z-index of sibling views always takes precedence if a touch hits two overlapping views.
- Diagram of HitRect and PressRect and how they work. + Diagram of HitRect and PressRect and how they work.
You can set HitRect with hitSlop and set PressRect with pressRetentionOffset.
diff --git a/website/versioned_docs/version-0.71/profile-hermes.md b/website/versioned_docs/version-0.71/profile-hermes.md index 9a5ec60b011..16a2525e6f7 100644 --- a/website/versioned_docs/version-0.71/profile-hermes.md +++ b/website/versioned_docs/version-0.71/profile-hermes.md @@ -30,7 +30,7 @@ To record a sampling profiler from the Developer Menu: A toast will show the location where the sampling profiler has been saved, usually in `/data/user/0/com.appName/cache/*.cpuprofile` -Toast Notification of Profile saving +Toast Notification of Profile saving ## Execute command from CLI @@ -71,7 +71,7 @@ To open the profile in Chrome DevTools: 2. Select the **Performance** tab. 3. Right click and choose **Load profile...** -Loading a performance profile on Chrome DevTools +Loading a performance profile on Chrome DevTools ## How does the Hermes Profile Transformer work? @@ -130,8 +130,8 @@ The `samples` and the `stackFrames` in tandem can then be used to generate all t 1. Start Nodes/Events: Nodes absent in the previous sample's function call stack but present in the current sample's. 2. End Nodes/Events: Nodes present in the previous sample's function call stack but absent in the current sample's. -CallStack Terms Explained +CallStack Terms Explained You can now construct a `flamechart` of function calls as you have all the function information including its start and end timestamps. -The `hermes-profile-transformer` can convert any profile generated using Hermes into a format that can be directly displayed in Chrome DevTools. More information about this can be found on [ `@react-native-community/hermes-profile-transformer` ](https://github.com/react-native-community/hermes-profile-transformer) +The `hermes-profile-transformer` can convert any profile generated using Hermes into a format that can be directly displayed in Chrome DevTools. More information about this can be found on [`@react-native-community/hermes-profile-transformer`](https://github.com/react-native-community/hermes-profile-transformer) diff --git a/website/versioned_docs/version-0.71/security.md b/website/versioned_docs/version-0.71/security.md index 632fe2e591f..125011453ca 100644 --- a/website/versioned_docs/version-0.71/security.md +++ b/website/versioned_docs/version-0.71/security.md @@ -7,7 +7,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con Security is often overlooked when building apps. It is true that it is impossible to build software that is completely impenetrable—we’ve yet to invent a completely impenetrable lock (bank vaults do, after all, still get broken into). However, the probability of falling victim to a malicious attack or being exposed for a security vulnerability is inversely proportional to the effort you’re willing to put in to protecting your application against any such eventuality. Although an ordinary padlock is pickable, it is still much harder to get past than a cabinet hook! - + In this guide, you will learn about best practices for storing sensitive information, authentication, network security, and tools that will help you secure your app. This is not a preflight checklist—it is a catalogue of options, each of which will help further protect your app and users. @@ -71,7 +71,7 @@ In order to use iOS Keychain services or Android Secure Shared Preferences, you ## Authentication and Deep Linking - + Mobile apps have a unique vulnerability that is non-existent in the web: **deep linking**. Deep linking is a way of sending data directly to a native application from an outside source. A deep link looks like `app://` where `app` is your app scheme and anything following the // could be used internally to handle the request. diff --git a/website/versioned_docs/version-0.71/testing-overview.md b/website/versioned_docs/version-0.71/testing-overview.md index 7b38f03652d..721d0bb8361 100644 --- a/website/versioned_docs/version-0.71/testing-overview.md +++ b/website/versioned_docs/version-0.71/testing-overview.md @@ -10,7 +10,7 @@ As your codebase expands, small errors and edge cases you don’t expect can cas In this guide, we will cover different, automated ways to ensure your app works as expected, ranging from static analysis to end-to-end tests. -Testing is a cycle of fixing, testing, and either passing to release or failing back into testing. +Testing is a cycle of fixing, testing, and either passing to release or failing back into testing. ## Why Test @@ -81,7 +81,7 @@ When the object being tested has any dependencies, you’ll often need to mock t The great thing about unit tests is that they are quick to write and run. Therefore, as you work, you get fast feedback about whether your tests are passing. Jest even has an option to continuously run tests that are related to code you’re editing: [Watch mode](https://jestjs.io/docs/en/cli#watch). - + ### Mocking @@ -112,7 +112,7 @@ In integration testing, real individual units are combined (same as in your app) > - Makes a network call to other application (such as the weather service API) > - Does any kind of file or database I/O - + ## Component Tests @@ -132,7 +132,7 @@ There are several libraries that can help you testing these: > Component tests are only JavaScript tests running in Node.js environment. They do _not_ take into account any iOS, Android, or other platform code which is backing the React Native components. It follows that they cannot give you a 100% confidence that everything works for the user. If there is a bug in the iOS or Android code, they will not find it. - + ### Testing User Interactions @@ -233,7 +233,7 @@ Snapshots themselves do not ensure that your component render logic is correct, We recommend that you only use small snapshots (see [`no-large-snapshots` rule](https://github.com/jest-community/eslint-plugin-jest/blob/master/docs/rules/no-large-snapshots.md)). If you want to test a _change_ between two React component states, use [`snapshot-diff`](https://github.com/jest-community/snapshot-diff). When in doubt, prefer explicit expectations as described in the previous paragraph. - + ## End-to-End Tests @@ -253,7 +253,7 @@ Try to cover the vital parts of your app with E2E tests: authentication flow, co There are several E2E testing tools available: in the React Native community, [Detox](https://github.com/wix/detox/) is a popular framework because it’s tailored for React Native apps. Another popular library in the space of iOS and Android apps is [Appium](http://appium.io/). - + ## Summary diff --git a/website/versioned_docs/version-0.71/the-new-architecture/landing-page.md b/website/versioned_docs/version-0.71/the-new-architecture/landing-page.md index 6ae1cd3097b..e677699f4ca 100644 --- a/website/versioned_docs/version-0.71/the-new-architecture/landing-page.md +++ b/website/versioned_docs/version-0.71/the-new-architecture/landing-page.md @@ -85,11 +85,11 @@ function ViewWithTooltip() {
- A view that is moving to the corners of the viewport and center with a tooltip rendered either above or below it. The tooltip is rendered after a short delay after the view moves + A view that is moving to the corners of the viewport and center with a tooltip rendered either above or below it. The tooltip is rendered after a short delay after the view moves
Asynchronous measurement and render of the ToolTip. [See code](https://gist.github.com/lunaleaps/eabd653d9864082ac1d3772dac217ab9).
- A view that is moving to the corners of the viewport and center with a tooltip rendered either above or below it. The view and tooltip move in unison. + A view that is moving to the corners of the viewport and center with a tooltip rendered either above or below it. The view and tooltip move in unison.
Synchronous measurement and render of the ToolTip. [See code](https://gist.github.com/lunaleaps/148756563999c83220887757f2e549a3).
@@ -113,11 +113,11 @@ In comparing the renderers for the [same code](https://gist.github.com/lunaleaps
- A video demonstrating an app rendering many views according to a slider input. The slider value is adjusted from 0 to 1000 and the UI slowly catches up to rendering 1000 views. + A video demonstrating an app rendering many views according to a slider input. The slider value is adjusted from 0 to 1000 and the UI slowly catches up to rendering 1000 views.
Rendering frequent state updates with legacy renderer.
- A video demonstrating an app rendering many views according to a slider input. The slider value is adjusted from 0 to 1000 and the UI resolves to 1000 views faster than the previous example, without as many intermediate states. + A video demonstrating an app rendering many views according to a slider input. The slider value is adjusted from 0 to 1000 and the UI resolves to 1000 views faster than the previous example, without as many intermediate states.
Rendering frequent state updates with React 18 renderer.
@@ -175,11 +175,11 @@ You'll notice that with the frequent updates in a transition, React renders fewe
- A video demonstrating an app rendering many views (tiles) according to a slider input. The views are rendered in batches as the slider is quickly adjusted from 0 to 1000. There are less batch renders in comparison to the next video. + A video demonstrating an app rendering many views (tiles) according to a slider input. The views are rendered in batches as the slider is quickly adjusted from 0 to 1000. There are less batch renders in comparison to the next video.
Rendering tiles with transitions to interrupt in-progress renders of stale state. [See code](https://gist.github.com/lunaleaps/eac391bf3fe4c85953cefeb74031bab0/revisions).
- A video demonstrating an app rendering many views (tiles) according to a slider input. The views are rendered in batches as the slider is quickly adjusted from 0 to 1000. + A video demonstrating an app rendering many views (tiles) according to a slider input. The views are rendered in batches as the slider is quickly adjusted from 0 to 1000.
Rendering tiles without marking it as a transition. [See code](https://gist.github.com/lunaleaps/eac391bf3fe4c85953cefeb74031bab0/revisions).
diff --git a/website/versioned_docs/version-0.72/_getting-started-linux-android.md b/website/versioned_docs/version-0.72/_getting-started-linux-android.md index 24ac158497c..1b6095276dc 100644 --- a/website/versioned_docs/version-0.72/_getting-started-linux-android.md +++ b/website/versioned_docs/version-0.72/_getting-started-linux-android.md @@ -187,7 +187,7 @@ Now that you have successfully run the app, let's modify it. Congratulations! You've successfully run and modified your first React Native app. -
+

Now what?

diff --git a/website/versioned_docs/version-0.72/_getting-started-macos-android.md b/website/versioned_docs/version-0.72/_getting-started-macos-android.md index b261ba252a0..69681592432 100644 --- a/website/versioned_docs/version-0.72/_getting-started-macos-android.md +++ b/website/versioned_docs/version-0.72/_getting-started-macos-android.md @@ -201,7 +201,7 @@ Now that you have successfully run the app, let's modify it. Congratulations! You've successfully run and modified your first React Native app. -
+

Now what?

diff --git a/website/versioned_docs/version-0.72/_getting-started-macos-ios.md b/website/versioned_docs/version-0.72/_getting-started-macos-ios.md index 8d2b9c2031a..d9ebe6587e5 100644 --- a/website/versioned_docs/version-0.72/_getting-started-macos-ios.md +++ b/website/versioned_docs/version-0.72/_getting-started-macos-ios.md @@ -171,7 +171,7 @@ Now that you have successfully run the app, let's modify it. Congratulations! You've successfully run and modified your first React Native app. -
+
## Now what? diff --git a/website/versioned_docs/version-0.72/_getting-started-windows-android.md b/website/versioned_docs/version-0.72/_getting-started-windows-android.md index 99afec44fde..9a8c82bfa1f 100644 --- a/website/versioned_docs/version-0.72/_getting-started-windows-android.md +++ b/website/versioned_docs/version-0.72/_getting-started-windows-android.md @@ -220,7 +220,7 @@ Now that you have successfully run the app, let's modify it. Congratulations! You've successfully run and modified your first React Native app. -
+

Now what?

diff --git a/website/versioned_docs/version-0.72/datepickerios.md b/website/versioned_docs/version-0.72/datepickerios.md index 4b9c9840c24..82af1a1d779 100644 --- a/website/versioned_docs/version-0.72/datepickerios.md +++ b/website/versioned_docs/version-0.72/datepickerios.md @@ -87,7 +87,7 @@ Restricts the range of possible date/time values. Example with `maximumDate` set to December 31, 2017: -
+
--- @@ -115,7 +115,7 @@ The interval at which minutes can be selected. Example with `minuteInterval` set to `10`: -
+
--- diff --git a/website/versioned_docs/version-0.72/getting-started.md b/website/versioned_docs/version-0.72/getting-started.md index 07fad84c79a..28d26cafaae 100644 --- a/website/versioned_docs/version-0.72/getting-started.md +++ b/website/versioned_docs/version-0.72/getting-started.md @@ -56,7 +56,7 @@ Now that you have successfully run the app, let's modify it. Open `App.js` in yo Congratulations! You've successfully run and modified your first React Native app. -
+

Now what?

diff --git a/website/versioned_docs/version-0.72/hermes.md b/website/versioned_docs/version-0.72/hermes.md index a55f6614494..238177fbf16 100644 --- a/website/versioned_docs/version-0.72/hermes.md +++ b/website/versioned_docs/version-0.72/hermes.md @@ -6,7 +6,7 @@ title: Using Hermes import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; - + [Hermes](https://hermesengine.dev) is an open-source JavaScript engine optimized for React Native. For many apps, using Hermes will result in improved start-up time, decreased memory usage, and smaller app size when compared to JavaScriptCore. @@ -154,7 +154,7 @@ Also, if you're using ProGuard, you will need to add these rules in `proguard-ru Next, if you've already built your app at least once, clean the build: ```shell -$ cd android && ./gradlew clean +cd android && ./gradlew clean ``` That's it! You should now be able to develop and deploy your app as usual: @@ -197,7 +197,7 @@ as `true` or `false` you can enable/disable Hermes as you wish. Once you've configured it, you can install the Hermes pods with: ```shell -$ cd ios && pod install +cd ios && pod install ``` That's it! You should now be able to develop and deploy your app as usual: diff --git a/website/versioned_docs/version-0.72/intro-react-native-components.md b/website/versioned_docs/version-0.72/intro-react-native-components.md index 62bdcc4ec55..43b9556f059 100644 --- a/website/versioned_docs/version-0.72/intro-react-native-components.md +++ b/website/versioned_docs/version-0.72/intro-react-native-components.md @@ -13,7 +13,7 @@ React Native is an open source framework for building Android and iOS applicatio In Android and iOS development, a **view** is the basic building block of UI: a small rectangular element on the screen which can be used to display text, images, or respond to user input. Even the smallest visual elements of an app, like a line of text or a button, are kinds of views. Some kinds of views can contain other views. It’s views all the way down!
- Diagram of Android and iOS app showing them both built on top of atomic elements called views. + Diagram of Android and iOS app showing them both built on top of atomic elements called views.
Just a sampling of the many views used in Android and iOS apps.
diff --git a/website/versioned_docs/version-0.72/introduction.md b/website/versioned_docs/version-0.72/introduction.md index 0122df1b2d4..b18689c35f5 100644 --- a/website/versioned_docs/version-0.72/introduction.md +++ b/website/versioned_docs/version-0.72/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, Native Components, React, and more! - +
Many different kinds of people use React Native: from advanced iOS developers to React beginners, to people getting started programming for the first time in their career. These docs were written for all learners, no matter their experience level or background. diff --git a/website/versioned_docs/version-0.72/native-modules-android.md b/website/versioned_docs/version-0.72/native-modules-android.md index 722a05ed130..44f952417e3 100644 --- a/website/versioned_docs/version-0.72/native-modules-android.md +++ b/website/versioned_docs/version-0.72/native-modules-android.md @@ -19,7 +19,7 @@ In the following guide you will create a native module, `CalendarModule`, that w To get started, open up the Android project within your React Native application in Android Studio. You can find your Android project here within a React Native app:
- Image of opening up an Android project within a React Native app inside of Android Studio. + Image of opening up an Android project within a React Native app inside of Android Studio.
Image of where you can find your Android project
@@ -32,7 +32,7 @@ We also recommend enabling [Gradle Daemon](https://docs.gradle.org/2.9/userguide The first step is to create the (`CalendarModule.java` or `CalendarModule.kt`) Java/Kotlin file inside `android/app/src/main/java/com/your-app-name/` folder (the folder is the same for both Kotlin and Java). This Java/Kotlin file will contain your native module Java/Kotlin class.
- Image of adding a class called CalendarModule.java within the Android Studio. + Image of adding a class called CalendarModule.java within the Android Studio.
Image of how to add the CalendarModuleClass
@@ -379,7 +379,7 @@ As you work through these guides and iterate on your native module, you will nee You should now be able to invoke your `createCalendarEvent()` method on your native module in the app. In our example this occurs by pressing the `NewModuleButton`. You can confirm this by viewing the log you set up in your `createCalendarEvent()` method. You can follow [these steps](https://developer.android.com/studio/debug/am-logcat.html) to view ADB logs in your app. You should then be able to search for your `Log.d` message (in our example “Create event called with name: testName and location: testLocation”) and see your message logged each time you invoke your native module method.
- Image of logs. + Image of logs.
Image of ADB logs in Android Studio
@@ -790,7 +790,7 @@ promise.reject("Create Event error", "Error parsing date", e) Error message in React Native App when promise is rejected:
- Image of error message in React Native app. + Image of error message in React Native app.
Image of error message
diff --git a/website/versioned_docs/version-0.72/native-modules-ios.md b/website/versioned_docs/version-0.72/native-modules-ios.md index 4283e41658f..ea00b1cc173 100644 --- a/website/versioned_docs/version-0.72/native-modules-ios.md +++ b/website/versioned_docs/version-0.72/native-modules-ios.md @@ -19,7 +19,7 @@ In the following guide you will create a native module, `CalendarModule`, that w To get started, open up the iOS project within your React Native application in Xcode. You can find your iOS project here within a React Native app:
- Image of opening up an iOS project within a React Native app inside of xCode. + Image of opening up an iOS project within a React Native app inside of xCode.
Image of where you can find your iOS project
@@ -30,7 +30,7 @@ We recommend using Xcode to write your native code. Xcode is built for iOS devel The first step is to create our main custom native module header and implementation files. Create a new file called `RCTCalendarModule.h`
- Image of creating a class called RCTCalendarModule.h. + Image of creating a class called RCTCalendarModule.h.
Image of creating a custom native module file within the same folder as AppDelegate
@@ -207,7 +207,7 @@ As you work through these guides and iterate on your native module, you will nee You should now be able to invoke your `createCalendarEvent()` method on your native module in JavaScript. Since you are using `RCTLog` in the function, you can confirm your native method is being invoked by [enabling debug mode in your app](https://reactnative.dev/docs/debugging#chrome-developer-tools) and looking at the JS console in Chrome or the mobile app debugger Flipper. You should see your `RCTLogInfo(@"Pretending to create an event %@ at %@", name, location);` message each time you invoke the native module method.
- Image of logs. + Image of logs.
Image of iOS logs in Flipper
diff --git a/website/versioned_docs/version-0.72/pressable.md b/website/versioned_docs/version-0.72/pressable.md index 72d3489a5d6..5bb72c0aab2 100644 --- a/website/versioned_docs/version-0.72/pressable.md +++ b/website/versioned_docs/version-0.72/pressable.md @@ -23,7 +23,7 @@ After pressing [`onPressIn`](#onpressin), one of two things will happen: 1. The person will remove their finger, triggering [`onPressOut`](#onpressout) followed by [`onPress`](#onpress). 2. If the person leaves their finger longer than 500 milliseconds before removing it, [`onLongPress`](#onlongpress) is triggered. ([`onPressOut`](#onpressout) will still fire when they remove their finger.) -Diagram of the onPress events in sequence. +Diagram of the onPress events in sequence. Fingers are not the most precise instruments, and it is common for users to accidentally activate the wrong element or miss the activation area. To help, `Pressable` has an optional `HitRect` you can use to define how far a touch can register away from the wrapped element. Presses can start anywhere within a `HitRect`. @@ -32,7 +32,7 @@ Fingers are not the most precise instruments, and it is common for users to acci > The touch area never extends past the parent view bounds and the Z-index of sibling views always takes precedence if a touch hits two overlapping views.
- Diagram of HitRect and PressRect and how they work. + Diagram of HitRect and PressRect and how they work.
You can set HitRect with hitSlop and set PressRect with pressRetentionOffset.
diff --git a/website/versioned_docs/version-0.72/profile-hermes.md b/website/versioned_docs/version-0.72/profile-hermes.md index 6113acb2903..bb081b89da5 100644 --- a/website/versioned_docs/version-0.72/profile-hermes.md +++ b/website/versioned_docs/version-0.72/profile-hermes.md @@ -30,7 +30,7 @@ To record a sampling profiler from the Dev Menu: A toast will show the location where the sampling profiler has been saved, usually in `/data/user/0/com.appName/cache/*.cpuprofile` -Toast Notification of Profile saving +Toast Notification of Profile saving ## Execute command from CLI @@ -71,7 +71,7 @@ To open the profile in Chrome DevTools: 2. Select the **Performance** tab. 3. Right click and choose **Load profile...** -Loading a performance profile on Chrome DevTools +Loading a performance profile on Chrome DevTools ## How does the Hermes Profile Transformer work? @@ -130,8 +130,8 @@ The `samples` and the `stackFrames` in tandem can then be used to generate all t 1. Start Nodes/Events: Nodes absent in the previous sample's function call stack but present in the current sample's. 2. End Nodes/Events: Nodes present in the previous sample's function call stack but absent in the current sample's. -CallStack Terms Explained +CallStack Terms Explained You can now construct a `flamechart` of function calls as you have all the function information including its start and end timestamps. -The `hermes-profile-transformer` can convert any profile generated using Hermes into a format that can be directly displayed in Chrome DevTools. More information about this can be found on [ `@react-native-community/hermes-profile-transformer` ](https://github.com/react-native-community/hermes-profile-transformer) +The `hermes-profile-transformer` can convert any profile generated using Hermes into a format that can be directly displayed in Chrome DevTools. More information about this can be found on [`@react-native-community/hermes-profile-transformer`](https://github.com/react-native-community/hermes-profile-transformer) diff --git a/website/versioned_docs/version-0.72/security.md b/website/versioned_docs/version-0.72/security.md index 632fe2e591f..125011453ca 100644 --- a/website/versioned_docs/version-0.72/security.md +++ b/website/versioned_docs/version-0.72/security.md @@ -7,7 +7,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con Security is often overlooked when building apps. It is true that it is impossible to build software that is completely impenetrable—we’ve yet to invent a completely impenetrable lock (bank vaults do, after all, still get broken into). However, the probability of falling victim to a malicious attack or being exposed for a security vulnerability is inversely proportional to the effort you’re willing to put in to protecting your application against any such eventuality. Although an ordinary padlock is pickable, it is still much harder to get past than a cabinet hook! - + In this guide, you will learn about best practices for storing sensitive information, authentication, network security, and tools that will help you secure your app. This is not a preflight checklist—it is a catalogue of options, each of which will help further protect your app and users. @@ -71,7 +71,7 @@ In order to use iOS Keychain services or Android Secure Shared Preferences, you ## Authentication and Deep Linking - + Mobile apps have a unique vulnerability that is non-existent in the web: **deep linking**. Deep linking is a way of sending data directly to a native application from an outside source. A deep link looks like `app://` where `app` is your app scheme and anything following the // could be used internally to handle the request. diff --git a/website/versioned_docs/version-0.72/testing-overview.md b/website/versioned_docs/version-0.72/testing-overview.md index 63d480f35e1..efa763ae712 100644 --- a/website/versioned_docs/version-0.72/testing-overview.md +++ b/website/versioned_docs/version-0.72/testing-overview.md @@ -10,7 +10,7 @@ As your codebase expands, small errors and edge cases you don’t expect can cas In this guide, we will cover different, automated ways to ensure your app works as expected, ranging from static analysis to end-to-end tests. -Testing is a cycle of fixing, testing, and either passing to release or failing back into testing. +Testing is a cycle of fixing, testing, and either passing to release or failing back into testing. ## Why Test @@ -81,7 +81,7 @@ When the object being tested has any dependencies, you’ll often need to mock t The great thing about unit tests is that they are quick to write and run. Therefore, as you work, you get fast feedback about whether your tests are passing. Jest even has an option to continuously run tests that are related to code you’re editing: [Watch mode](https://jestjs.io/docs/en/cli#watch). - + ### Mocking @@ -112,7 +112,7 @@ In integration testing, real individual units are combined (same as in your app) > - Makes a network call to other application (such as the weather service API) > - Does any kind of file or database I/O - + ## Component Tests @@ -132,7 +132,7 @@ There are several libraries that can help you testing these: > Component tests are only JavaScript tests running in Node.js environment. They do _not_ take into account any iOS, Android, or other platform code which is backing the React Native components. It follows that they cannot give you a 100% confidence that everything works for the user. If there is a bug in the iOS or Android code, they will not find it. - + ### Testing User Interactions @@ -233,7 +233,7 @@ Snapshots themselves do not ensure that your component render logic is correct, We recommend that you only use small snapshots (see [`no-large-snapshots` rule](https://github.com/jest-community/eslint-plugin-jest/blob/master/docs/rules/no-large-snapshots.md)). If you want to test a _change_ between two React component states, use [`snapshot-diff`](https://github.com/jest-community/snapshot-diff). When in doubt, prefer explicit expectations as described in the previous paragraph. - + ## End-to-End Tests @@ -253,7 +253,7 @@ Try to cover the vital parts of your app with E2E tests: authentication flow, co There are several E2E testing tools available: in the React Native community, [Detox](https://github.com/wix/detox/) is a popular framework because it’s tailored for React Native apps. Another popular library in the space of iOS and Android apps is [Appium](http://appium.io/) or [Maestro](https://maestro.mobile.dev/). - + ## Summary diff --git a/website/versioned_docs/version-0.72/the-new-architecture/landing-page.md b/website/versioned_docs/version-0.72/the-new-architecture/landing-page.md index 6ae1cd3097b..e677699f4ca 100644 --- a/website/versioned_docs/version-0.72/the-new-architecture/landing-page.md +++ b/website/versioned_docs/version-0.72/the-new-architecture/landing-page.md @@ -85,11 +85,11 @@ function ViewWithTooltip() {
- A view that is moving to the corners of the viewport and center with a tooltip rendered either above or below it. The tooltip is rendered after a short delay after the view moves + A view that is moving to the corners of the viewport and center with a tooltip rendered either above or below it. The tooltip is rendered after a short delay after the view moves
Asynchronous measurement and render of the ToolTip. [See code](https://gist.github.com/lunaleaps/eabd653d9864082ac1d3772dac217ab9).
- A view that is moving to the corners of the viewport and center with a tooltip rendered either above or below it. The view and tooltip move in unison. + A view that is moving to the corners of the viewport and center with a tooltip rendered either above or below it. The view and tooltip move in unison.
Synchronous measurement and render of the ToolTip. [See code](https://gist.github.com/lunaleaps/148756563999c83220887757f2e549a3).
@@ -113,11 +113,11 @@ In comparing the renderers for the [same code](https://gist.github.com/lunaleaps
- A video demonstrating an app rendering many views according to a slider input. The slider value is adjusted from 0 to 1000 and the UI slowly catches up to rendering 1000 views. + A video demonstrating an app rendering many views according to a slider input. The slider value is adjusted from 0 to 1000 and the UI slowly catches up to rendering 1000 views.
Rendering frequent state updates with legacy renderer.
- A video demonstrating an app rendering many views according to a slider input. The slider value is adjusted from 0 to 1000 and the UI resolves to 1000 views faster than the previous example, without as many intermediate states. + A video demonstrating an app rendering many views according to a slider input. The slider value is adjusted from 0 to 1000 and the UI resolves to 1000 views faster than the previous example, without as many intermediate states.
Rendering frequent state updates with React 18 renderer.
@@ -175,11 +175,11 @@ You'll notice that with the frequent updates in a transition, React renders fewe
- A video demonstrating an app rendering many views (tiles) according to a slider input. The views are rendered in batches as the slider is quickly adjusted from 0 to 1000. There are less batch renders in comparison to the next video. + A video demonstrating an app rendering many views (tiles) according to a slider input. The views are rendered in batches as the slider is quickly adjusted from 0 to 1000. There are less batch renders in comparison to the next video.
Rendering tiles with transitions to interrupt in-progress renders of stale state. [See code](https://gist.github.com/lunaleaps/eac391bf3fe4c85953cefeb74031bab0/revisions).
- A video demonstrating an app rendering many views (tiles) according to a slider input. The views are rendered in batches as the slider is quickly adjusted from 0 to 1000. + A video demonstrating an app rendering many views (tiles) according to a slider input. The views are rendered in batches as the slider is quickly adjusted from 0 to 1000.
Rendering tiles without marking it as a transition. [See code](https://gist.github.com/lunaleaps/eac391bf3fe4c85953cefeb74031bab0/revisions).
diff --git a/website/versioned_docs/version-0.73/_getting-started-linux-android.md b/website/versioned_docs/version-0.73/_getting-started-linux-android.md index 782a7c70c18..bdbbd56a454 100644 --- a/website/versioned_docs/version-0.73/_getting-started-linux-android.md +++ b/website/versioned_docs/version-0.73/_getting-started-linux-android.md @@ -187,7 +187,7 @@ Now that you have successfully run the app, let's modify it. Congratulations! You've successfully run and modified your first React Native app. -
+

Now what?

diff --git a/website/versioned_docs/version-0.73/_getting-started-macos-android.md b/website/versioned_docs/version-0.73/_getting-started-macos-android.md index 9ce6104b2ff..4b13653610e 100644 --- a/website/versioned_docs/version-0.73/_getting-started-macos-android.md +++ b/website/versioned_docs/version-0.73/_getting-started-macos-android.md @@ -201,7 +201,7 @@ Now that you have successfully run the app, let's modify it. Congratulations! You've successfully run and modified your first React Native app. -
+

Now what?

diff --git a/website/versioned_docs/version-0.73/_getting-started-macos-ios.md b/website/versioned_docs/version-0.73/_getting-started-macos-ios.md index f4bc9f7852f..03518e5937c 100644 --- a/website/versioned_docs/version-0.73/_getting-started-macos-ios.md +++ b/website/versioned_docs/version-0.73/_getting-started-macos-ios.md @@ -173,7 +173,7 @@ Now that you have successfully run the app, let's modify it. Congratulations! You've successfully run and modified your first React Native app. -
+
## Now what? diff --git a/website/versioned_docs/version-0.73/_getting-started-windows-android.md b/website/versioned_docs/version-0.73/_getting-started-windows-android.md index 390e9bf406d..e4bebe9e520 100644 --- a/website/versioned_docs/version-0.73/_getting-started-windows-android.md +++ b/website/versioned_docs/version-0.73/_getting-started-windows-android.md @@ -220,7 +220,7 @@ Now that you have successfully run the app, let's modify it. Congratulations! You've successfully run and modified your first React Native app. -
+

Now what?

diff --git a/website/versioned_docs/version-0.73/datepickerios.md b/website/versioned_docs/version-0.73/datepickerios.md index 4b9c9840c24..82af1a1d779 100644 --- a/website/versioned_docs/version-0.73/datepickerios.md +++ b/website/versioned_docs/version-0.73/datepickerios.md @@ -87,7 +87,7 @@ Restricts the range of possible date/time values. Example with `maximumDate` set to December 31, 2017: -
+
--- @@ -115,7 +115,7 @@ The interval at which minutes can be selected. Example with `minuteInterval` set to `10`: -
+
--- diff --git a/website/versioned_docs/version-0.73/getting-started.md b/website/versioned_docs/version-0.73/getting-started.md index 07fad84c79a..28d26cafaae 100644 --- a/website/versioned_docs/version-0.73/getting-started.md +++ b/website/versioned_docs/version-0.73/getting-started.md @@ -56,7 +56,7 @@ Now that you have successfully run the app, let's modify it. Open `App.js` in yo Congratulations! You've successfully run and modified your first React Native app. -
+

Now what?

diff --git a/website/versioned_docs/version-0.73/hermes.md b/website/versioned_docs/version-0.73/hermes.md index 8af6e0ad147..f0c62b33f0c 100644 --- a/website/versioned_docs/version-0.73/hermes.md +++ b/website/versioned_docs/version-0.73/hermes.md @@ -6,7 +6,7 @@ title: Using Hermes import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; - + [Hermes](https://hermesengine.dev) is an open-source JavaScript engine optimized for React Native. For many apps, using Hermes will result in improved start-up time, decreased memory usage, and smaller app size when compared to JavaScriptCore. @@ -154,7 +154,7 @@ Also, if you're using ProGuard, you will need to add these rules in `proguard-ru Next, if you've already built your app at least once, clean the build: ```shell -$ cd android && ./gradlew clean +cd android && ./gradlew clean ``` That's it! You should now be able to develop and deploy your app as usual: @@ -197,7 +197,7 @@ as `true` or `false` you can enable/disable Hermes as you wish. Once you've configured it, you can install the Hermes pods with: ```shell -$ cd ios && pod install +cd ios && pod install ``` That's it! You should now be able to develop and deploy your app as usual: diff --git a/website/versioned_docs/version-0.73/intro-react-native-components.md b/website/versioned_docs/version-0.73/intro-react-native-components.md index 62bdcc4ec55..43b9556f059 100644 --- a/website/versioned_docs/version-0.73/intro-react-native-components.md +++ b/website/versioned_docs/version-0.73/intro-react-native-components.md @@ -13,7 +13,7 @@ React Native is an open source framework for building Android and iOS applicatio In Android and iOS development, a **view** is the basic building block of UI: a small rectangular element on the screen which can be used to display text, images, or respond to user input. Even the smallest visual elements of an app, like a line of text or a button, are kinds of views. Some kinds of views can contain other views. It’s views all the way down!
- Diagram of Android and iOS app showing them both built on top of atomic elements called views. + Diagram of Android and iOS app showing them both built on top of atomic elements called views.
Just a sampling of the many views used in Android and iOS apps.
diff --git a/website/versioned_docs/version-0.73/introduction.md b/website/versioned_docs/version-0.73/introduction.md index 0122df1b2d4..b18689c35f5 100644 --- a/website/versioned_docs/version-0.73/introduction.md +++ b/website/versioned_docs/version-0.73/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, Native Components, React, and more! - +
Many different kinds of people use React Native: from advanced iOS developers to React beginners, to people getting started programming for the first time in their career. These docs were written for all learners, no matter their experience level or background. diff --git a/website/versioned_docs/version-0.73/native-modules-android.md b/website/versioned_docs/version-0.73/native-modules-android.md index 137a7da3761..195d199b42b 100644 --- a/website/versioned_docs/version-0.73/native-modules-android.md +++ b/website/versioned_docs/version-0.73/native-modules-android.md @@ -19,7 +19,7 @@ In the following guide you will create a native module, `CalendarModule`, that w To get started, open up the Android project within your React Native application in Android Studio. You can find your Android project here within a React Native app:
- Image of opening up an Android project within a React Native app inside of Android Studio. + Image of opening up an Android project within a React Native app inside of Android Studio.
Image of where you can find your Android project
@@ -32,7 +32,7 @@ We also recommend enabling [Gradle Daemon](https://docs.gradle.org/2.9/userguide The first step is to create the (`CalendarModule.java` or `CalendarModule.kt`) Java/Kotlin file inside `android/app/src/main/java/com/your-app-name/` folder (the folder is the same for both Kotlin and Java). This Java/Kotlin file will contain your native module Java/Kotlin class.
- Image of adding a class called CalendarModule.java within the Android Studio. + Image of adding a class called CalendarModule.java within the Android Studio.
Image of how to add the CalendarModuleClass
@@ -379,7 +379,7 @@ As you work through these guides and iterate on your native module, you will nee You should now be able to invoke your `createCalendarEvent()` method on your native module in the app. In our example this occurs by pressing the `NewModuleButton`. You can confirm this by viewing the log you set up in your `createCalendarEvent()` method. You can follow [these steps](https://developer.android.com/studio/debug/am-logcat.html) to view ADB logs in your app. You should then be able to search for your `Log.d` message (in our example “Create event called with name: testName and location: testLocation”) and see your message logged each time you invoke your native module method.
- Image of logs. + Image of logs.
Image of ADB logs in Android Studio
@@ -790,7 +790,7 @@ promise.reject("Create Event error", "Error parsing date", e) Error message in React Native App when promise is rejected:
- Image of error message in React Native app. + Image of error message in React Native app.
Image of error message
diff --git a/website/versioned_docs/version-0.73/native-modules-ios.md b/website/versioned_docs/version-0.73/native-modules-ios.md index 4283e41658f..ea00b1cc173 100644 --- a/website/versioned_docs/version-0.73/native-modules-ios.md +++ b/website/versioned_docs/version-0.73/native-modules-ios.md @@ -19,7 +19,7 @@ In the following guide you will create a native module, `CalendarModule`, that w To get started, open up the iOS project within your React Native application in Xcode. You can find your iOS project here within a React Native app:
- Image of opening up an iOS project within a React Native app inside of xCode. + Image of opening up an iOS project within a React Native app inside of xCode.
Image of where you can find your iOS project
@@ -30,7 +30,7 @@ We recommend using Xcode to write your native code. Xcode is built for iOS devel The first step is to create our main custom native module header and implementation files. Create a new file called `RCTCalendarModule.h`
- Image of creating a class called RCTCalendarModule.h. + Image of creating a class called RCTCalendarModule.h.
Image of creating a custom native module file within the same folder as AppDelegate
@@ -207,7 +207,7 @@ As you work through these guides and iterate on your native module, you will nee You should now be able to invoke your `createCalendarEvent()` method on your native module in JavaScript. Since you are using `RCTLog` in the function, you can confirm your native method is being invoked by [enabling debug mode in your app](https://reactnative.dev/docs/debugging#chrome-developer-tools) and looking at the JS console in Chrome or the mobile app debugger Flipper. You should see your `RCTLogInfo(@"Pretending to create an event %@ at %@", name, location);` message each time you invoke the native module method.
- Image of logs. + Image of logs.
Image of iOS logs in Flipper
diff --git a/website/versioned_docs/version-0.73/pressable.md b/website/versioned_docs/version-0.73/pressable.md index 761cc7e2fa7..e5e86818ad7 100644 --- a/website/versioned_docs/version-0.73/pressable.md +++ b/website/versioned_docs/version-0.73/pressable.md @@ -23,7 +23,7 @@ After pressing [`onPressIn`](#onpressin), one of two things will happen: 1. The person will remove their finger, triggering [`onPressOut`](#onpressout) followed by [`onPress`](#onpress). 2. If the person leaves their finger longer than 500 milliseconds before removing it, [`onLongPress`](#onlongpress) is triggered. ([`onPressOut`](#onpressout) will still fire when they remove their finger.) -Diagram of the onPress events in sequence. +Diagram of the onPress events in sequence. Fingers are not the most precise instruments, and it is common for users to accidentally activate the wrong element or miss the activation area. To help, `Pressable` has an optional `HitRect` you can use to define how far a touch can register away from the wrapped element. Presses can start anywhere within a `HitRect`. @@ -32,7 +32,7 @@ Fingers are not the most precise instruments, and it is common for users to acci > The touch area never extends past the parent view bounds and the Z-index of sibling views always takes precedence if a touch hits two overlapping views.
- Diagram of HitRect and PressRect and how they work. + Diagram of HitRect and PressRect and how they work.
You can set HitRect with hitSlop and set PressRect with pressRetentionOffset.
diff --git a/website/versioned_docs/version-0.73/profile-hermes.md b/website/versioned_docs/version-0.73/profile-hermes.md index c8d1698bd13..eb7367a1045 100644 --- a/website/versioned_docs/version-0.73/profile-hermes.md +++ b/website/versioned_docs/version-0.73/profile-hermes.md @@ -30,7 +30,7 @@ To record a sampling profiler from the Dev Menu: A toast will show the location where the sampling profiler has been saved, usually in `/data/user/0/com.appName/cache/*.cpuprofile` -Toast Notification of Profile saving +Toast Notification of Profile saving ## Execute command from CLI @@ -71,7 +71,7 @@ To open the profile in Chrome DevTools: 2. Select the **Performance** tab. 3. Right click and choose **Load profile...** -Loading a performance profile on Chrome DevTools +Loading a performance profile on Chrome DevTools ## How does the Hermes Profile Transformer work? @@ -130,8 +130,8 @@ The `samples` and the `stackFrames` in tandem can then be used to generate all t 1. Start Nodes/Events: Nodes absent in the previous sample's function call stack but present in the current sample's. 2. End Nodes/Events: Nodes present in the previous sample's function call stack but absent in the current sample's. -CallStack Terms Explained +CallStack Terms Explained You can now construct a `flamechart` of function calls as you have all the function information including its start and end timestamps. -The `hermes-profile-transformer` can convert any profile generated using Hermes into a format that can be directly displayed in Chrome DevTools. More information about this can be found on [ `@react-native-community/hermes-profile-transformer` ](https://github.com/react-native-community/hermes-profile-transformer) +The `hermes-profile-transformer` can convert any profile generated using Hermes into a format that can be directly displayed in Chrome DevTools. More information about this can be found on [`@react-native-community/hermes-profile-transformer`](https://github.com/react-native-community/hermes-profile-transformer) diff --git a/website/versioned_docs/version-0.73/security.md b/website/versioned_docs/version-0.73/security.md index 632fe2e591f..125011453ca 100644 --- a/website/versioned_docs/version-0.73/security.md +++ b/website/versioned_docs/version-0.73/security.md @@ -7,7 +7,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con Security is often overlooked when building apps. It is true that it is impossible to build software that is completely impenetrable—we’ve yet to invent a completely impenetrable lock (bank vaults do, after all, still get broken into). However, the probability of falling victim to a malicious attack or being exposed for a security vulnerability is inversely proportional to the effort you’re willing to put in to protecting your application against any such eventuality. Although an ordinary padlock is pickable, it is still much harder to get past than a cabinet hook! - + In this guide, you will learn about best practices for storing sensitive information, authentication, network security, and tools that will help you secure your app. This is not a preflight checklist—it is a catalogue of options, each of which will help further protect your app and users. @@ -71,7 +71,7 @@ In order to use iOS Keychain services or Android Secure Shared Preferences, you ## Authentication and Deep Linking - + Mobile apps have a unique vulnerability that is non-existent in the web: **deep linking**. Deep linking is a way of sending data directly to a native application from an outside source. A deep link looks like `app://` where `app` is your app scheme and anything following the // could be used internally to handle the request. diff --git a/website/versioned_docs/version-0.73/testing-overview.md b/website/versioned_docs/version-0.73/testing-overview.md index 5714c365ff6..dc812bb19ee 100644 --- a/website/versioned_docs/version-0.73/testing-overview.md +++ b/website/versioned_docs/version-0.73/testing-overview.md @@ -10,7 +10,7 @@ As your codebase expands, small errors and edge cases you don’t expect can cas In this guide, we will cover different, automated ways to ensure your app works as expected, ranging from static analysis to end-to-end tests. -Testing is a cycle of fixing, testing, and either passing to release or failing back into testing. +Testing is a cycle of fixing, testing, and either passing to release or failing back into testing. ## Why Test @@ -81,7 +81,7 @@ When the object being tested has any dependencies, you’ll often need to mock t The great thing about unit tests is that they are quick to write and run. Therefore, as you work, you get fast feedback about whether your tests are passing. Jest even has an option to continuously run tests that are related to code you’re editing: [Watch mode](https://jestjs.io/docs/en/cli#watch). - + ### Mocking @@ -112,7 +112,7 @@ In integration testing, real individual units are combined (same as in your app) > - Makes a network call to other application (such as the weather service API) > - Does any kind of file or database I/O - + ## Component Tests @@ -132,7 +132,7 @@ There are several libraries that can help you testing these: > Component tests are only JavaScript tests running in Node.js environment. They do _not_ take into account any iOS, Android, or other platform code which is backing the React Native components. It follows that they cannot give you a 100% confidence that everything works for the user. If there is a bug in the iOS or Android code, they will not find it. - + ### Testing User Interactions @@ -233,7 +233,7 @@ Snapshots themselves do not ensure that your component render logic is correct, We recommend that you only use small snapshots (see [`no-large-snapshots` rule](https://github.com/jest-community/eslint-plugin-jest/blob/master/docs/rules/no-large-snapshots.md)). If you want to test a _change_ between two React component states, use [`snapshot-diff`](https://github.com/jest-community/snapshot-diff). When in doubt, prefer explicit expectations as described in the previous paragraph. - + ## End-to-End Tests @@ -253,7 +253,7 @@ Try to cover the vital parts of your app with E2E tests: authentication flow, co There are several E2E testing tools available: in the React Native community, [Detox](https://github.com/wix/detox/) is a popular framework because it’s tailored for React Native apps. Another popular library in the space of iOS and Android apps is [Appium](https://appium.io/) or [Maestro](https://maestro.mobile.dev/). - + ## Summary diff --git a/website/versioned_docs/version-0.73/the-new-architecture/landing-page.md b/website/versioned_docs/version-0.73/the-new-architecture/landing-page.md index 6ae1cd3097b..e677699f4ca 100644 --- a/website/versioned_docs/version-0.73/the-new-architecture/landing-page.md +++ b/website/versioned_docs/version-0.73/the-new-architecture/landing-page.md @@ -85,11 +85,11 @@ function ViewWithTooltip() {
- A view that is moving to the corners of the viewport and center with a tooltip rendered either above or below it. The tooltip is rendered after a short delay after the view moves + A view that is moving to the corners of the viewport and center with a tooltip rendered either above or below it. The tooltip is rendered after a short delay after the view moves
Asynchronous measurement and render of the ToolTip. [See code](https://gist.github.com/lunaleaps/eabd653d9864082ac1d3772dac217ab9).
- A view that is moving to the corners of the viewport and center with a tooltip rendered either above or below it. The view and tooltip move in unison. + A view that is moving to the corners of the viewport and center with a tooltip rendered either above or below it. The view and tooltip move in unison.
Synchronous measurement and render of the ToolTip. [See code](https://gist.github.com/lunaleaps/148756563999c83220887757f2e549a3).
@@ -113,11 +113,11 @@ In comparing the renderers for the [same code](https://gist.github.com/lunaleaps
- A video demonstrating an app rendering many views according to a slider input. The slider value is adjusted from 0 to 1000 and the UI slowly catches up to rendering 1000 views. + A video demonstrating an app rendering many views according to a slider input. The slider value is adjusted from 0 to 1000 and the UI slowly catches up to rendering 1000 views.
Rendering frequent state updates with legacy renderer.
- A video demonstrating an app rendering many views according to a slider input. The slider value is adjusted from 0 to 1000 and the UI resolves to 1000 views faster than the previous example, without as many intermediate states. + A video demonstrating an app rendering many views according to a slider input. The slider value is adjusted from 0 to 1000 and the UI resolves to 1000 views faster than the previous example, without as many intermediate states.
Rendering frequent state updates with React 18 renderer.
@@ -175,11 +175,11 @@ You'll notice that with the frequent updates in a transition, React renders fewe
- A video demonstrating an app rendering many views (tiles) according to a slider input. The views are rendered in batches as the slider is quickly adjusted from 0 to 1000. There are less batch renders in comparison to the next video. + A video demonstrating an app rendering many views (tiles) according to a slider input. The views are rendered in batches as the slider is quickly adjusted from 0 to 1000. There are less batch renders in comparison to the next video.
Rendering tiles with transitions to interrupt in-progress renders of stale state. [See code](https://gist.github.com/lunaleaps/eac391bf3fe4c85953cefeb74031bab0/revisions).
- A video demonstrating an app rendering many views (tiles) according to a slider input. The views are rendered in batches as the slider is quickly adjusted from 0 to 1000. + A video demonstrating an app rendering many views (tiles) according to a slider input. The views are rendered in batches as the slider is quickly adjusted from 0 to 1000.
Rendering tiles without marking it as a transition. [See code](https://gist.github.com/lunaleaps/eac391bf3fe4c85953cefeb74031bab0/revisions).
diff --git a/website/versioned_docs/version-0.74/_getting-started-linux-android.md b/website/versioned_docs/version-0.74/_getting-started-linux-android.md index a03a28e0608..8333832d5e2 100644 --- a/website/versioned_docs/version-0.74/_getting-started-linux-android.md +++ b/website/versioned_docs/version-0.74/_getting-started-linux-android.md @@ -97,7 +97,7 @@ Click "Next" then "Finish" to create your AVD. At this point you should be able Congratulations! You successfully set up your development environment. -
+

Now what?

diff --git a/website/versioned_docs/version-0.74/_getting-started-macos-android.md b/website/versioned_docs/version-0.74/_getting-started-macos-android.md index bc153b711e3..3e02e91f502 100644 --- a/website/versioned_docs/version-0.74/_getting-started-macos-android.md +++ b/website/versioned_docs/version-0.74/_getting-started-macos-android.md @@ -117,7 +117,7 @@ Click "Next" then "Finish" to create your AVD. At this point you should be able Congratulations! You successfully set up your development environment. -
+

Now what?

diff --git a/website/versioned_docs/version-0.74/_getting-started-macos-ios.md b/website/versioned_docs/version-0.74/_getting-started-macos-ios.md index 892bac694f3..562ef8a6b74 100644 --- a/website/versioned_docs/version-0.74/_getting-started-macos-ios.md +++ b/website/versioned_docs/version-0.74/_getting-started-macos-ios.md @@ -65,7 +65,7 @@ You might also want to ensure that all "shell script build phase" of your Xcode Congratulations! You successfully set up your development environment. -
+

Now what?

diff --git a/website/versioned_docs/version-0.74/_getting-started-windows-android.md b/website/versioned_docs/version-0.74/_getting-started-windows-android.md index 15d61eaa500..43da2517a29 100644 --- a/website/versioned_docs/version-0.74/_getting-started-windows-android.md +++ b/website/versioned_docs/version-0.74/_getting-started-windows-android.md @@ -128,7 +128,7 @@ Click "Next" then "Finish" to create your AVD. At this point you should be able Congratulations! You successfully set up your development environment. -
+

Now what?

diff --git a/website/versioned_docs/version-0.74/datepickerios.md b/website/versioned_docs/version-0.74/datepickerios.md index 4b9c9840c24..82af1a1d779 100644 --- a/website/versioned_docs/version-0.74/datepickerios.md +++ b/website/versioned_docs/version-0.74/datepickerios.md @@ -87,7 +87,7 @@ Restricts the range of possible date/time values. Example with `maximumDate` set to December 31, 2017: -
+
--- @@ -115,7 +115,7 @@ The interval at which minutes can be selected. Example with `minuteInterval` set to `10`: -
+
--- diff --git a/website/versioned_docs/version-0.74/get-started-without-a-framework.md b/website/versioned_docs/version-0.74/get-started-without-a-framework.md index d31d751c131..34fb44cbd58 100644 --- a/website/versioned_docs/version-0.74/get-started-without-a-framework.md +++ b/website/versioned_docs/version-0.74/get-started-without-a-framework.md @@ -112,7 +112,7 @@ Now that you have successfully run the app, let's modify it. Congratulations! You've successfully run and modified your first barebone React Native app. -
+
### Now what? diff --git a/website/versioned_docs/version-0.74/hermes.md b/website/versioned_docs/version-0.74/hermes.md index 2ede3187e32..aa94ce705cc 100644 --- a/website/versioned_docs/version-0.74/hermes.md +++ b/website/versioned_docs/version-0.74/hermes.md @@ -6,7 +6,7 @@ title: Using Hermes import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; - + [Hermes](https://hermesengine.dev) is an open-source JavaScript engine optimized for React Native. For many apps, using Hermes will result in improved start-up time, decreased memory usage, and smaller app size when compared to JavaScriptCore. @@ -154,7 +154,7 @@ Also, if you're using ProGuard, you will need to add these rules in `proguard-ru Next, if you've already built your app at least once, clean the build: ```shell -$ cd android && ./gradlew clean +cd android && ./gradlew clean ``` That's it! You should now be able to develop and deploy your app as usual: @@ -197,7 +197,7 @@ as `true` or `false` you can enable/disable Hermes as you wish. Once you've configured it, you can install the Hermes pods with: ```shell -$ cd ios && pod install +cd ios && pod install ``` That's it! You should now be able to develop and deploy your app as usual: diff --git a/website/versioned_docs/version-0.74/intro-react-native-components.md b/website/versioned_docs/version-0.74/intro-react-native-components.md index 62bdcc4ec55..43b9556f059 100644 --- a/website/versioned_docs/version-0.74/intro-react-native-components.md +++ b/website/versioned_docs/version-0.74/intro-react-native-components.md @@ -13,7 +13,7 @@ React Native is an open source framework for building Android and iOS applicatio In Android and iOS development, a **view** is the basic building block of UI: a small rectangular element on the screen which can be used to display text, images, or respond to user input. Even the smallest visual elements of an app, like a line of text or a button, are kinds of views. Some kinds of views can contain other views. It’s views all the way down!
- Diagram of Android and iOS app showing them both built on top of atomic elements called views. + Diagram of Android and iOS app showing them both built on top of atomic elements called views.
Just a sampling of the many views used in Android and iOS apps.
diff --git a/website/versioned_docs/version-0.74/introduction.md b/website/versioned_docs/version-0.74/introduction.md index cd807674a16..d590abb7a21 100644 --- a/website/versioned_docs/version-0.74/introduction.md +++ b/website/versioned_docs/version-0.74/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 getting started instructions, they've moved to their own section. Continue reading for an introduction to the documentation, Native Components, React, and more! - +
Many different kinds of people use React Native: from advanced iOS developers to React beginners, to people getting started programming for the first time in their career. These docs were written for all learners, no matter their experience level or background. diff --git a/website/versioned_docs/version-0.74/native-modules-android.md b/website/versioned_docs/version-0.74/native-modules-android.md index 137a7da3761..195d199b42b 100644 --- a/website/versioned_docs/version-0.74/native-modules-android.md +++ b/website/versioned_docs/version-0.74/native-modules-android.md @@ -19,7 +19,7 @@ In the following guide you will create a native module, `CalendarModule`, that w To get started, open up the Android project within your React Native application in Android Studio. You can find your Android project here within a React Native app:
- Image of opening up an Android project within a React Native app inside of Android Studio. + Image of opening up an Android project within a React Native app inside of Android Studio.
Image of where you can find your Android project
@@ -32,7 +32,7 @@ We also recommend enabling [Gradle Daemon](https://docs.gradle.org/2.9/userguide The first step is to create the (`CalendarModule.java` or `CalendarModule.kt`) Java/Kotlin file inside `android/app/src/main/java/com/your-app-name/` folder (the folder is the same for both Kotlin and Java). This Java/Kotlin file will contain your native module Java/Kotlin class.
- Image of adding a class called CalendarModule.java within the Android Studio. + Image of adding a class called CalendarModule.java within the Android Studio.
Image of how to add the CalendarModuleClass
@@ -379,7 +379,7 @@ As you work through these guides and iterate on your native module, you will nee You should now be able to invoke your `createCalendarEvent()` method on your native module in the app. In our example this occurs by pressing the `NewModuleButton`. You can confirm this by viewing the log you set up in your `createCalendarEvent()` method. You can follow [these steps](https://developer.android.com/studio/debug/am-logcat.html) to view ADB logs in your app. You should then be able to search for your `Log.d` message (in our example “Create event called with name: testName and location: testLocation”) and see your message logged each time you invoke your native module method.
- Image of logs. + Image of logs.
Image of ADB logs in Android Studio
@@ -790,7 +790,7 @@ promise.reject("Create Event error", "Error parsing date", e) Error message in React Native App when promise is rejected:
- Image of error message in React Native app. + Image of error message in React Native app.
Image of error message
diff --git a/website/versioned_docs/version-0.74/native-modules-ios.md b/website/versioned_docs/version-0.74/native-modules-ios.md index 452e29cd07e..d5765f15ced 100644 --- a/website/versioned_docs/version-0.74/native-modules-ios.md +++ b/website/versioned_docs/version-0.74/native-modules-ios.md @@ -19,7 +19,7 @@ In the following guide you will create a native module, `CalendarModule`, that w To get started, open up the iOS project within your React Native application in Xcode. You can find your iOS project here within a React Native app:
- Image of opening up an iOS project within a React Native app inside of xCode. + Image of opening up an iOS project within a React Native app inside of xCode.
Image of where you can find your iOS project
@@ -30,7 +30,7 @@ We recommend using Xcode to write your native code. Xcode is built for iOS devel The first step is to create our main custom native module header and implementation files. Create a new file called `RCTCalendarModule.h`
- Image of creating a class called RCTCalendarModule.h. + Image of creating a class called RCTCalendarModule.h.
Image of creating a custom native module file within the same folder as AppDelegate
@@ -207,7 +207,7 @@ As you work through these guides and iterate on your native module, you will nee You should now be able to invoke your `createCalendarEvent()` method on your native module in JavaScript. Since you are using `RCTLog` in the function, you can confirm your native method is being invoked by [enabling debug mode in your app](https://reactnative.dev/docs/debugging#chrome-developer-tools) and looking at the JS console in Chrome or the mobile app debugger Flipper. You should see your `RCTLogInfo(@"Pretending to create an event %@ at %@", name, location);` message each time you invoke the native module method.
- Image of logs. + Image of logs.
Image of iOS logs in Flipper
diff --git a/website/versioned_docs/version-0.74/pressable.md b/website/versioned_docs/version-0.74/pressable.md index 72d3489a5d6..5bb72c0aab2 100644 --- a/website/versioned_docs/version-0.74/pressable.md +++ b/website/versioned_docs/version-0.74/pressable.md @@ -23,7 +23,7 @@ After pressing [`onPressIn`](#onpressin), one of two things will happen: 1. The person will remove their finger, triggering [`onPressOut`](#onpressout) followed by [`onPress`](#onpress). 2. If the person leaves their finger longer than 500 milliseconds before removing it, [`onLongPress`](#onlongpress) is triggered. ([`onPressOut`](#onpressout) will still fire when they remove their finger.) -Diagram of the onPress events in sequence. +Diagram of the onPress events in sequence. Fingers are not the most precise instruments, and it is common for users to accidentally activate the wrong element or miss the activation area. To help, `Pressable` has an optional `HitRect` you can use to define how far a touch can register away from the wrapped element. Presses can start anywhere within a `HitRect`. @@ -32,7 +32,7 @@ Fingers are not the most precise instruments, and it is common for users to acci > The touch area never extends past the parent view bounds and the Z-index of sibling views always takes precedence if a touch hits two overlapping views.
- Diagram of HitRect and PressRect and how they work. + Diagram of HitRect and PressRect and how they work.
You can set HitRect with hitSlop and set PressRect with pressRetentionOffset.
diff --git a/website/versioned_docs/version-0.74/profile-hermes.md b/website/versioned_docs/version-0.74/profile-hermes.md index c8d1698bd13..eb7367a1045 100644 --- a/website/versioned_docs/version-0.74/profile-hermes.md +++ b/website/versioned_docs/version-0.74/profile-hermes.md @@ -30,7 +30,7 @@ To record a sampling profiler from the Dev Menu: A toast will show the location where the sampling profiler has been saved, usually in `/data/user/0/com.appName/cache/*.cpuprofile` -Toast Notification of Profile saving +Toast Notification of Profile saving ## Execute command from CLI @@ -71,7 +71,7 @@ To open the profile in Chrome DevTools: 2. Select the **Performance** tab. 3. Right click and choose **Load profile...** -Loading a performance profile on Chrome DevTools +Loading a performance profile on Chrome DevTools ## How does the Hermes Profile Transformer work? @@ -130,8 +130,8 @@ The `samples` and the `stackFrames` in tandem can then be used to generate all t 1. Start Nodes/Events: Nodes absent in the previous sample's function call stack but present in the current sample's. 2. End Nodes/Events: Nodes present in the previous sample's function call stack but absent in the current sample's. -CallStack Terms Explained +CallStack Terms Explained You can now construct a `flamechart` of function calls as you have all the function information including its start and end timestamps. -The `hermes-profile-transformer` can convert any profile generated using Hermes into a format that can be directly displayed in Chrome DevTools. More information about this can be found on [ `@react-native-community/hermes-profile-transformer` ](https://github.com/react-native-community/hermes-profile-transformer) +The `hermes-profile-transformer` can convert any profile generated using Hermes into a format that can be directly displayed in Chrome DevTools. More information about this can be found on [`@react-native-community/hermes-profile-transformer`](https://github.com/react-native-community/hermes-profile-transformer) diff --git a/website/versioned_docs/version-0.74/security.md b/website/versioned_docs/version-0.74/security.md index 1af4b74f3e3..23bf92fe729 100644 --- a/website/versioned_docs/version-0.74/security.md +++ b/website/versioned_docs/version-0.74/security.md @@ -7,7 +7,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con Security is often overlooked when building apps. It is true that it is impossible to build software that is completely impenetrable—we’ve yet to invent a completely impenetrable lock (bank vaults do, after all, still get broken into). However, the probability of falling victim to a malicious attack or being exposed for a security vulnerability is inversely proportional to the effort you’re willing to put in to protecting your application against any such eventuality. Although an ordinary padlock is pickable, it is still much harder to get past than a cabinet hook! - + In this guide, you will learn about best practices for storing sensitive information, authentication, network security, and tools that will help you secure your app. This is not a preflight checklist—it is a catalogue of options, each of which will help further protect your app and users. @@ -68,7 +68,7 @@ In order to use iOS Keychain services or Android Secure Shared Preferences, you ## Authentication and Deep Linking - + Mobile apps have a unique vulnerability that is non-existent in the web: **deep linking**. Deep linking is a way of sending data directly to a native application from an outside source. A deep link looks like `app://` where `app` is your app scheme and anything following the // could be used internally to handle the request. diff --git a/website/versioned_docs/version-0.74/testing-overview.md b/website/versioned_docs/version-0.74/testing-overview.md index 5714c365ff6..dc812bb19ee 100644 --- a/website/versioned_docs/version-0.74/testing-overview.md +++ b/website/versioned_docs/version-0.74/testing-overview.md @@ -10,7 +10,7 @@ As your codebase expands, small errors and edge cases you don’t expect can cas In this guide, we will cover different, automated ways to ensure your app works as expected, ranging from static analysis to end-to-end tests. -Testing is a cycle of fixing, testing, and either passing to release or failing back into testing. +Testing is a cycle of fixing, testing, and either passing to release or failing back into testing. ## Why Test @@ -81,7 +81,7 @@ When the object being tested has any dependencies, you’ll often need to mock t The great thing about unit tests is that they are quick to write and run. Therefore, as you work, you get fast feedback about whether your tests are passing. Jest even has an option to continuously run tests that are related to code you’re editing: [Watch mode](https://jestjs.io/docs/en/cli#watch). - + ### Mocking @@ -112,7 +112,7 @@ In integration testing, real individual units are combined (same as in your app) > - Makes a network call to other application (such as the weather service API) > - Does any kind of file or database I/O - + ## Component Tests @@ -132,7 +132,7 @@ There are several libraries that can help you testing these: > Component tests are only JavaScript tests running in Node.js environment. They do _not_ take into account any iOS, Android, or other platform code which is backing the React Native components. It follows that they cannot give you a 100% confidence that everything works for the user. If there is a bug in the iOS or Android code, they will not find it. - + ### Testing User Interactions @@ -233,7 +233,7 @@ Snapshots themselves do not ensure that your component render logic is correct, We recommend that you only use small snapshots (see [`no-large-snapshots` rule](https://github.com/jest-community/eslint-plugin-jest/blob/master/docs/rules/no-large-snapshots.md)). If you want to test a _change_ between two React component states, use [`snapshot-diff`](https://github.com/jest-community/snapshot-diff). When in doubt, prefer explicit expectations as described in the previous paragraph. - + ## End-to-End Tests @@ -253,7 +253,7 @@ Try to cover the vital parts of your app with E2E tests: authentication flow, co There are several E2E testing tools available: in the React Native community, [Detox](https://github.com/wix/detox/) is a popular framework because it’s tailored for React Native apps. Another popular library in the space of iOS and Android apps is [Appium](https://appium.io/) or [Maestro](https://maestro.mobile.dev/). - + ## Summary diff --git a/website/versioned_docs/version-0.74/the-new-architecture/landing-page.md b/website/versioned_docs/version-0.74/the-new-architecture/landing-page.md index 3fdcf6546f0..f69db713426 100644 --- a/website/versioned_docs/version-0.74/the-new-architecture/landing-page.md +++ b/website/versioned_docs/version-0.74/the-new-architecture/landing-page.md @@ -85,11 +85,11 @@ function ViewWithTooltip() {
- A view that is moving to the corners of the viewport and center with a tooltip rendered either above or below it. The tooltip is rendered after a short delay after the view moves + A view that is moving to the corners of the viewport and center with a tooltip rendered either above or below it. The tooltip is rendered after a short delay after the view moves
Asynchronous measurement and render of the ToolTip. [See code](https://gist.github.com/lunaleaps/eabd653d9864082ac1d3772dac217ab9).
- A view that is moving to the corners of the viewport and center with a tooltip rendered either above or below it. The view and tooltip move in unison. + A view that is moving to the corners of the viewport and center with a tooltip rendered either above or below it. The view and tooltip move in unison.
Synchronous measurement and render of the ToolTip. [See code](https://gist.github.com/lunaleaps/148756563999c83220887757f2e549a3).
@@ -113,11 +113,11 @@ In comparing the renderers for the [same code](https://gist.github.com/lunaleaps
- A video demonstrating an app rendering many views according to a slider input. The slider value is adjusted from 0 to 1000 and the UI slowly catches up to rendering 1000 views. + A video demonstrating an app rendering many views according to a slider input. The slider value is adjusted from 0 to 1000 and the UI slowly catches up to rendering 1000 views.
Rendering frequent state updates with legacy renderer.
- A video demonstrating an app rendering many views according to a slider input. The slider value is adjusted from 0 to 1000 and the UI resolves to 1000 views faster than the previous example, without as many intermediate states. + A video demonstrating an app rendering many views according to a slider input. The slider value is adjusted from 0 to 1000 and the UI resolves to 1000 views faster than the previous example, without as many intermediate states.
Rendering frequent state updates with React 18 renderer.
@@ -175,11 +175,11 @@ You'll notice that with the frequent updates in a transition, React renders fewe
- A video demonstrating an app rendering many views (tiles) according to a slider input. The views are rendered in batches as the slider is quickly adjusted from 0 to 1000. There are less batch renders in comparison to the next video. + A video demonstrating an app rendering many views (tiles) according to a slider input. The views are rendered in batches as the slider is quickly adjusted from 0 to 1000. There are less batch renders in comparison to the next video.
Rendering tiles with transitions to interrupt in-progress renders of stale state. [See code](https://gist.github.com/lunaleaps/eac391bf3fe4c85953cefeb74031bab0/revisions).
- A video demonstrating an app rendering many views (tiles) according to a slider input. The views are rendered in batches as the slider is quickly adjusted from 0 to 1000. + A video demonstrating an app rendering many views (tiles) according to a slider input. The views are rendered in batches as the slider is quickly adjusted from 0 to 1000.
Rendering tiles without marking it as a transition. [See code](https://gist.github.com/lunaleaps/eac391bf3fe4c85953cefeb74031bab0/revisions).
diff --git a/website/versioned_docs/version-0.75/_getting-started-linux-android.md b/website/versioned_docs/version-0.75/_getting-started-linux-android.md index 58cb9de2622..a650c7ff245 100644 --- a/website/versioned_docs/version-0.75/_getting-started-linux-android.md +++ b/website/versioned_docs/version-0.75/_getting-started-linux-android.md @@ -97,7 +97,7 @@ Click "Next" then "Finish" to create your AVD. At this point you should be able Congratulations! You successfully set up your development environment. -
+

Now what?

diff --git a/website/versioned_docs/version-0.75/_getting-started-macos-android.md b/website/versioned_docs/version-0.75/_getting-started-macos-android.md index 5087a84c06f..b1ca5f194f9 100644 --- a/website/versioned_docs/version-0.75/_getting-started-macos-android.md +++ b/website/versioned_docs/version-0.75/_getting-started-macos-android.md @@ -117,7 +117,7 @@ Click "Next" then "Finish" to create your AVD. At this point you should be able Congratulations! You successfully set up your development environment. -
+

Now what?

diff --git a/website/versioned_docs/version-0.75/_getting-started-macos-ios.md b/website/versioned_docs/version-0.75/_getting-started-macos-ios.md index 6b366fb64f4..e8c6e693c6b 100644 --- a/website/versioned_docs/version-0.75/_getting-started-macos-ios.md +++ b/website/versioned_docs/version-0.75/_getting-started-macos-ios.md @@ -65,7 +65,7 @@ You might also want to ensure that all "shell script build phase" of your Xcode Congratulations! You successfully set up your development environment. -
+

Now what?

diff --git a/website/versioned_docs/version-0.75/_getting-started-windows-android.md b/website/versioned_docs/version-0.75/_getting-started-windows-android.md index b5a926ab75a..234196c879d 100644 --- a/website/versioned_docs/version-0.75/_getting-started-windows-android.md +++ b/website/versioned_docs/version-0.75/_getting-started-windows-android.md @@ -128,7 +128,7 @@ Click "Next" then "Finish" to create your AVD. At this point you should be able Congratulations! You successfully set up your development environment. -
+

Now what?

diff --git a/website/versioned_docs/version-0.75/datepickerios.md b/website/versioned_docs/version-0.75/datepickerios.md index 4b9c9840c24..82af1a1d779 100644 --- a/website/versioned_docs/version-0.75/datepickerios.md +++ b/website/versioned_docs/version-0.75/datepickerios.md @@ -87,7 +87,7 @@ Restricts the range of possible date/time values. Example with `maximumDate` set to December 31, 2017: -
+
--- @@ -115,7 +115,7 @@ The interval at which minutes can be selected. Example with `minuteInterval` set to `10`: -
+
--- diff --git a/website/versioned_docs/version-0.75/get-started-without-a-framework.md b/website/versioned_docs/version-0.75/get-started-without-a-framework.md index 450fe5e0cb6..5b10ab5e256 100644 --- a/website/versioned_docs/version-0.75/get-started-without-a-framework.md +++ b/website/versioned_docs/version-0.75/get-started-without-a-framework.md @@ -112,7 +112,7 @@ Now that you have successfully run the app, let's modify it. Congratulations! You've successfully run and modified your first barebone React Native app. -
+
### Now what? diff --git a/website/versioned_docs/version-0.75/hermes.md b/website/versioned_docs/version-0.75/hermes.md index 2ede3187e32..aa94ce705cc 100644 --- a/website/versioned_docs/version-0.75/hermes.md +++ b/website/versioned_docs/version-0.75/hermes.md @@ -6,7 +6,7 @@ title: Using Hermes import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; - + [Hermes](https://hermesengine.dev) is an open-source JavaScript engine optimized for React Native. For many apps, using Hermes will result in improved start-up time, decreased memory usage, and smaller app size when compared to JavaScriptCore. @@ -154,7 +154,7 @@ Also, if you're using ProGuard, you will need to add these rules in `proguard-ru Next, if you've already built your app at least once, clean the build: ```shell -$ cd android && ./gradlew clean +cd android && ./gradlew clean ``` That's it! You should now be able to develop and deploy your app as usual: @@ -197,7 +197,7 @@ as `true` or `false` you can enable/disable Hermes as you wish. Once you've configured it, you can install the Hermes pods with: ```shell -$ cd ios && pod install +cd ios && pod install ``` That's it! You should now be able to develop and deploy your app as usual: diff --git a/website/versioned_docs/version-0.75/intro-react-native-components.md b/website/versioned_docs/version-0.75/intro-react-native-components.md index 62bdcc4ec55..43b9556f059 100644 --- a/website/versioned_docs/version-0.75/intro-react-native-components.md +++ b/website/versioned_docs/version-0.75/intro-react-native-components.md @@ -13,7 +13,7 @@ React Native is an open source framework for building Android and iOS applicatio In Android and iOS development, a **view** is the basic building block of UI: a small rectangular element on the screen which can be used to display text, images, or respond to user input. Even the smallest visual elements of an app, like a line of text or a button, are kinds of views. Some kinds of views can contain other views. It’s views all the way down!
- Diagram of Android and iOS app showing them both built on top of atomic elements called views. + Diagram of Android and iOS app showing them both built on top of atomic elements called views.
Just a sampling of the many views used in Android and iOS apps.
diff --git a/website/versioned_docs/version-0.75/introduction.md b/website/versioned_docs/version-0.75/introduction.md index cd807674a16..d590abb7a21 100644 --- a/website/versioned_docs/version-0.75/introduction.md +++ b/website/versioned_docs/version-0.75/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 getting started instructions, they've moved to their own section. Continue reading for an introduction to the documentation, Native Components, React, and more! - +
Many different kinds of people use React Native: from advanced iOS developers to React beginners, to people getting started programming for the first time in their career. These docs were written for all learners, no matter their experience level or background. diff --git a/website/versioned_docs/version-0.75/native-modules-android.md b/website/versioned_docs/version-0.75/native-modules-android.md index 137a7da3761..195d199b42b 100644 --- a/website/versioned_docs/version-0.75/native-modules-android.md +++ b/website/versioned_docs/version-0.75/native-modules-android.md @@ -19,7 +19,7 @@ In the following guide you will create a native module, `CalendarModule`, that w To get started, open up the Android project within your React Native application in Android Studio. You can find your Android project here within a React Native app:
- Image of opening up an Android project within a React Native app inside of Android Studio. + Image of opening up an Android project within a React Native app inside of Android Studio.
Image of where you can find your Android project
@@ -32,7 +32,7 @@ We also recommend enabling [Gradle Daemon](https://docs.gradle.org/2.9/userguide The first step is to create the (`CalendarModule.java` or `CalendarModule.kt`) Java/Kotlin file inside `android/app/src/main/java/com/your-app-name/` folder (the folder is the same for both Kotlin and Java). This Java/Kotlin file will contain your native module Java/Kotlin class.
- Image of adding a class called CalendarModule.java within the Android Studio. + Image of adding a class called CalendarModule.java within the Android Studio.
Image of how to add the CalendarModuleClass
@@ -379,7 +379,7 @@ As you work through these guides and iterate on your native module, you will nee You should now be able to invoke your `createCalendarEvent()` method on your native module in the app. In our example this occurs by pressing the `NewModuleButton`. You can confirm this by viewing the log you set up in your `createCalendarEvent()` method. You can follow [these steps](https://developer.android.com/studio/debug/am-logcat.html) to view ADB logs in your app. You should then be able to search for your `Log.d` message (in our example “Create event called with name: testName and location: testLocation”) and see your message logged each time you invoke your native module method.
- Image of logs. + Image of logs.
Image of ADB logs in Android Studio
@@ -790,7 +790,7 @@ promise.reject("Create Event error", "Error parsing date", e) Error message in React Native App when promise is rejected:
- Image of error message in React Native app. + Image of error message in React Native app.
Image of error message
diff --git a/website/versioned_docs/version-0.75/native-modules-ios.md b/website/versioned_docs/version-0.75/native-modules-ios.md index 452e29cd07e..d5765f15ced 100644 --- a/website/versioned_docs/version-0.75/native-modules-ios.md +++ b/website/versioned_docs/version-0.75/native-modules-ios.md @@ -19,7 +19,7 @@ In the following guide you will create a native module, `CalendarModule`, that w To get started, open up the iOS project within your React Native application in Xcode. You can find your iOS project here within a React Native app:
- Image of opening up an iOS project within a React Native app inside of xCode. + Image of opening up an iOS project within a React Native app inside of xCode.
Image of where you can find your iOS project
@@ -30,7 +30,7 @@ We recommend using Xcode to write your native code. Xcode is built for iOS devel The first step is to create our main custom native module header and implementation files. Create a new file called `RCTCalendarModule.h`
- Image of creating a class called RCTCalendarModule.h. + Image of creating a class called RCTCalendarModule.h.
Image of creating a custom native module file within the same folder as AppDelegate
@@ -207,7 +207,7 @@ As you work through these guides and iterate on your native module, you will nee You should now be able to invoke your `createCalendarEvent()` method on your native module in JavaScript. Since you are using `RCTLog` in the function, you can confirm your native method is being invoked by [enabling debug mode in your app](https://reactnative.dev/docs/debugging#chrome-developer-tools) and looking at the JS console in Chrome or the mobile app debugger Flipper. You should see your `RCTLogInfo(@"Pretending to create an event %@ at %@", name, location);` message each time you invoke the native module method.
- Image of logs. + Image of logs.
Image of iOS logs in Flipper
diff --git a/website/versioned_docs/version-0.75/pressable.md b/website/versioned_docs/version-0.75/pressable.md index 72d3489a5d6..5bb72c0aab2 100644 --- a/website/versioned_docs/version-0.75/pressable.md +++ b/website/versioned_docs/version-0.75/pressable.md @@ -23,7 +23,7 @@ After pressing [`onPressIn`](#onpressin), one of two things will happen: 1. The person will remove their finger, triggering [`onPressOut`](#onpressout) followed by [`onPress`](#onpress). 2. If the person leaves their finger longer than 500 milliseconds before removing it, [`onLongPress`](#onlongpress) is triggered. ([`onPressOut`](#onpressout) will still fire when they remove their finger.) -Diagram of the onPress events in sequence. +Diagram of the onPress events in sequence. Fingers are not the most precise instruments, and it is common for users to accidentally activate the wrong element or miss the activation area. To help, `Pressable` has an optional `HitRect` you can use to define how far a touch can register away from the wrapped element. Presses can start anywhere within a `HitRect`. @@ -32,7 +32,7 @@ Fingers are not the most precise instruments, and it is common for users to acci > The touch area never extends past the parent view bounds and the Z-index of sibling views always takes precedence if a touch hits two overlapping views.
- Diagram of HitRect and PressRect and how they work. + Diagram of HitRect and PressRect and how they work.
You can set HitRect with hitSlop and set PressRect with pressRetentionOffset.
diff --git a/website/versioned_docs/version-0.75/profile-hermes.md b/website/versioned_docs/version-0.75/profile-hermes.md index c8d1698bd13..eb7367a1045 100644 --- a/website/versioned_docs/version-0.75/profile-hermes.md +++ b/website/versioned_docs/version-0.75/profile-hermes.md @@ -30,7 +30,7 @@ To record a sampling profiler from the Dev Menu: A toast will show the location where the sampling profiler has been saved, usually in `/data/user/0/com.appName/cache/*.cpuprofile` -Toast Notification of Profile saving +Toast Notification of Profile saving ## Execute command from CLI @@ -71,7 +71,7 @@ To open the profile in Chrome DevTools: 2. Select the **Performance** tab. 3. Right click and choose **Load profile...** -Loading a performance profile on Chrome DevTools +Loading a performance profile on Chrome DevTools ## How does the Hermes Profile Transformer work? @@ -130,8 +130,8 @@ The `samples` and the `stackFrames` in tandem can then be used to generate all t 1. Start Nodes/Events: Nodes absent in the previous sample's function call stack but present in the current sample's. 2. End Nodes/Events: Nodes present in the previous sample's function call stack but absent in the current sample's. -CallStack Terms Explained +CallStack Terms Explained You can now construct a `flamechart` of function calls as you have all the function information including its start and end timestamps. -The `hermes-profile-transformer` can convert any profile generated using Hermes into a format that can be directly displayed in Chrome DevTools. More information about this can be found on [ `@react-native-community/hermes-profile-transformer` ](https://github.com/react-native-community/hermes-profile-transformer) +The `hermes-profile-transformer` can convert any profile generated using Hermes into a format that can be directly displayed in Chrome DevTools. More information about this can be found on [`@react-native-community/hermes-profile-transformer`](https://github.com/react-native-community/hermes-profile-transformer) diff --git a/website/versioned_docs/version-0.75/security.md b/website/versioned_docs/version-0.75/security.md index 1af4b74f3e3..23bf92fe729 100644 --- a/website/versioned_docs/version-0.75/security.md +++ b/website/versioned_docs/version-0.75/security.md @@ -7,7 +7,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con Security is often overlooked when building apps. It is true that it is impossible to build software that is completely impenetrable—we’ve yet to invent a completely impenetrable lock (bank vaults do, after all, still get broken into). However, the probability of falling victim to a malicious attack or being exposed for a security vulnerability is inversely proportional to the effort you’re willing to put in to protecting your application against any such eventuality. Although an ordinary padlock is pickable, it is still much harder to get past than a cabinet hook! - + In this guide, you will learn about best practices for storing sensitive information, authentication, network security, and tools that will help you secure your app. This is not a preflight checklist—it is a catalogue of options, each of which will help further protect your app and users. @@ -68,7 +68,7 @@ In order to use iOS Keychain services or Android Secure Shared Preferences, you ## Authentication and Deep Linking - + Mobile apps have a unique vulnerability that is non-existent in the web: **deep linking**. Deep linking is a way of sending data directly to a native application from an outside source. A deep link looks like `app://` where `app` is your app scheme and anything following the // could be used internally to handle the request. diff --git a/website/versioned_docs/version-0.75/testing-overview.md b/website/versioned_docs/version-0.75/testing-overview.md index 5714c365ff6..dc812bb19ee 100644 --- a/website/versioned_docs/version-0.75/testing-overview.md +++ b/website/versioned_docs/version-0.75/testing-overview.md @@ -10,7 +10,7 @@ As your codebase expands, small errors and edge cases you don’t expect can cas In this guide, we will cover different, automated ways to ensure your app works as expected, ranging from static analysis to end-to-end tests. -Testing is a cycle of fixing, testing, and either passing to release or failing back into testing. +Testing is a cycle of fixing, testing, and either passing to release or failing back into testing. ## Why Test @@ -81,7 +81,7 @@ When the object being tested has any dependencies, you’ll often need to mock t The great thing about unit tests is that they are quick to write and run. Therefore, as you work, you get fast feedback about whether your tests are passing. Jest even has an option to continuously run tests that are related to code you’re editing: [Watch mode](https://jestjs.io/docs/en/cli#watch). - + ### Mocking @@ -112,7 +112,7 @@ In integration testing, real individual units are combined (same as in your app) > - Makes a network call to other application (such as the weather service API) > - Does any kind of file or database I/O - + ## Component Tests @@ -132,7 +132,7 @@ There are several libraries that can help you testing these: > Component tests are only JavaScript tests running in Node.js environment. They do _not_ take into account any iOS, Android, or other platform code which is backing the React Native components. It follows that they cannot give you a 100% confidence that everything works for the user. If there is a bug in the iOS or Android code, they will not find it. - + ### Testing User Interactions @@ -233,7 +233,7 @@ Snapshots themselves do not ensure that your component render logic is correct, We recommend that you only use small snapshots (see [`no-large-snapshots` rule](https://github.com/jest-community/eslint-plugin-jest/blob/master/docs/rules/no-large-snapshots.md)). If you want to test a _change_ between two React component states, use [`snapshot-diff`](https://github.com/jest-community/snapshot-diff). When in doubt, prefer explicit expectations as described in the previous paragraph. - + ## End-to-End Tests @@ -253,7 +253,7 @@ Try to cover the vital parts of your app with E2E tests: authentication flow, co There are several E2E testing tools available: in the React Native community, [Detox](https://github.com/wix/detox/) is a popular framework because it’s tailored for React Native apps. Another popular library in the space of iOS and Android apps is [Appium](https://appium.io/) or [Maestro](https://maestro.mobile.dev/). - + ## Summary diff --git a/website/versioned_docs/version-0.75/the-new-architecture/landing-page.md b/website/versioned_docs/version-0.75/the-new-architecture/landing-page.md index 3fdcf6546f0..f69db713426 100644 --- a/website/versioned_docs/version-0.75/the-new-architecture/landing-page.md +++ b/website/versioned_docs/version-0.75/the-new-architecture/landing-page.md @@ -85,11 +85,11 @@ function ViewWithTooltip() {
- A view that is moving to the corners of the viewport and center with a tooltip rendered either above or below it. The tooltip is rendered after a short delay after the view moves + A view that is moving to the corners of the viewport and center with a tooltip rendered either above or below it. The tooltip is rendered after a short delay after the view moves
Asynchronous measurement and render of the ToolTip. [See code](https://gist.github.com/lunaleaps/eabd653d9864082ac1d3772dac217ab9).
- A view that is moving to the corners of the viewport and center with a tooltip rendered either above or below it. The view and tooltip move in unison. + A view that is moving to the corners of the viewport and center with a tooltip rendered either above or below it. The view and tooltip move in unison.
Synchronous measurement and render of the ToolTip. [See code](https://gist.github.com/lunaleaps/148756563999c83220887757f2e549a3).
@@ -113,11 +113,11 @@ In comparing the renderers for the [same code](https://gist.github.com/lunaleaps
- A video demonstrating an app rendering many views according to a slider input. The slider value is adjusted from 0 to 1000 and the UI slowly catches up to rendering 1000 views. + A video demonstrating an app rendering many views according to a slider input. The slider value is adjusted from 0 to 1000 and the UI slowly catches up to rendering 1000 views.
Rendering frequent state updates with legacy renderer.
- A video demonstrating an app rendering many views according to a slider input. The slider value is adjusted from 0 to 1000 and the UI resolves to 1000 views faster than the previous example, without as many intermediate states. + A video demonstrating an app rendering many views according to a slider input. The slider value is adjusted from 0 to 1000 and the UI resolves to 1000 views faster than the previous example, without as many intermediate states.
Rendering frequent state updates with React 18 renderer.
@@ -175,11 +175,11 @@ You'll notice that with the frequent updates in a transition, React renders fewe
- A video demonstrating an app rendering many views (tiles) according to a slider input. The views are rendered in batches as the slider is quickly adjusted from 0 to 1000. There are less batch renders in comparison to the next video. + A video demonstrating an app rendering many views (tiles) according to a slider input. The views are rendered in batches as the slider is quickly adjusted from 0 to 1000. There are less batch renders in comparison to the next video.
Rendering tiles with transitions to interrupt in-progress renders of stale state. [See code](https://gist.github.com/lunaleaps/eac391bf3fe4c85953cefeb74031bab0/revisions).
- A video demonstrating an app rendering many views (tiles) according to a slider input. The views are rendered in batches as the slider is quickly adjusted from 0 to 1000. + A video demonstrating an app rendering many views (tiles) according to a slider input. The views are rendered in batches as the slider is quickly adjusted from 0 to 1000.
Rendering tiles without marking it as a transition. [See code](https://gist.github.com/lunaleaps/eac391bf3fe4c85953cefeb74031bab0/revisions).
diff --git a/website/versioned_docs/version-0.76/_getting-started-linux-android.md b/website/versioned_docs/version-0.76/_getting-started-linux-android.md index 410a33de479..8bafaf84928 100644 --- a/website/versioned_docs/version-0.76/_getting-started-linux-android.md +++ b/website/versioned_docs/version-0.76/_getting-started-linux-android.md @@ -97,7 +97,7 @@ Click "Next" then "Finish" to create your AVD. At this point you should be able Congratulations! You successfully set up your development environment. -
+

Now what?

diff --git a/website/versioned_docs/version-0.76/_getting-started-macos-android.md b/website/versioned_docs/version-0.76/_getting-started-macos-android.md index 16d45441ac7..7a9629d3ce3 100644 --- a/website/versioned_docs/version-0.76/_getting-started-macos-android.md +++ b/website/versioned_docs/version-0.76/_getting-started-macos-android.md @@ -128,7 +128,7 @@ Click "Next" then "Finish" to create your AVD. At this point you should be able Congratulations! You successfully set up your development environment. -
+

Now what?

diff --git a/website/versioned_docs/version-0.76/_getting-started-macos-ios.md b/website/versioned_docs/version-0.76/_getting-started-macos-ios.md index 6b366fb64f4..e8c6e693c6b 100644 --- a/website/versioned_docs/version-0.76/_getting-started-macos-ios.md +++ b/website/versioned_docs/version-0.76/_getting-started-macos-ios.md @@ -65,7 +65,7 @@ You might also want to ensure that all "shell script build phase" of your Xcode Congratulations! You successfully set up your development environment. -
+

Now what?

diff --git a/website/versioned_docs/version-0.76/_getting-started-windows-android.md b/website/versioned_docs/version-0.76/_getting-started-windows-android.md index 0ded094e8fc..39f2b51b850 100644 --- a/website/versioned_docs/version-0.76/_getting-started-windows-android.md +++ b/website/versioned_docs/version-0.76/_getting-started-windows-android.md @@ -128,7 +128,7 @@ Click "Next" then "Finish" to create your AVD. At this point you should be able Congratulations! You successfully set up your development environment. -
+

Now what?

diff --git a/website/versioned_docs/version-0.76/_integration-with-existing-apps-ios.md b/website/versioned_docs/version-0.76/_integration-with-existing-apps-ios.md index 9b421d2653e..8cea47ebe65 100644 --- a/website/versioned_docs/version-0.76/_integration-with-existing-apps-ios.md +++ b/website/versioned_docs/version-0.76/_integration-with-existing-apps-ios.md @@ -574,7 +574,7 @@ Now build and run your iOS app as normal. Once you reach your React-powered Activity inside the app, it should load the JavaScript code from the development server and display: -
+
### Creating a release build in Xcode diff --git a/website/versioned_docs/version-0.76/_integration-with-existing-apps-kotlin.md b/website/versioned_docs/version-0.76/_integration-with-existing-apps-kotlin.md index 0feda99ba54..dc75db5edf9 100644 --- a/website/versioned_docs/version-0.76/_integration-with-existing-apps-kotlin.md +++ b/website/versioned_docs/version-0.76/_integration-with-existing-apps-kotlin.md @@ -482,7 +482,7 @@ Now build and run your Android app as normal. Once you reach your React-powered Activity inside the app, it should load the JavaScript code from the development server and display: -
+
### Creating a release build in Android Studio diff --git a/website/versioned_docs/version-0.76/datepickerios.md b/website/versioned_docs/version-0.76/datepickerios.md index 4b9c9840c24..82af1a1d779 100644 --- a/website/versioned_docs/version-0.76/datepickerios.md +++ b/website/versioned_docs/version-0.76/datepickerios.md @@ -87,7 +87,7 @@ Restricts the range of possible date/time values. Example with `maximumDate` set to December 31, 2017: -
+
--- @@ -115,7 +115,7 @@ The interval at which minutes can be selected. Example with `minuteInterval` set to `10`: -
+
--- diff --git a/website/versioned_docs/version-0.76/fabric-native-components-ios.md b/website/versioned_docs/version-0.76/fabric-native-components-ios.md index 4b1184e2525..988c3f14465 100644 --- a/website/versioned_docs/version-0.76/fabric-native-components-ios.md +++ b/website/versioned_docs/version-0.76/fabric-native-components-ios.md @@ -38,19 +38,19 @@ cd ios open Demo.xcworkspace ``` -Open Xcode Workspace +Open Xcode Workspace 2. Right click on app and select New Group, call the new group `WebView`. -Right click on app and select New Group +Right click on app and select New Group 3. In the `WebView` group, create New→File from Template. -Create a new file using the Cocoa Touch Classs template +Create a new file using the Cocoa Touch Classs template 4. Use the Objective-C File template, and name it RCTWebView. -Create an Objective-C RCTWebView class +Create an Objective-C RCTWebView class 5. Rename RCTWebView.m → RCTWebView.mm making it an Objective-C++ file @@ -252,13 +252,13 @@ To link the WebKit framework in your app, follow these steps: 3. Select the General tab 4. Scroll down until you find the _"Frameworks, Libraries, and Embedded Contents"_ section, and press the `+` button -Add webkit framework to your app 1 +Add webkit framework to your app 1 5. In the search bar, filter for WebKit 6. Select the WebKit framework 7. Click on Add. -Add webkit framework to your app 2 +Add webkit framework to your app 2 :::warning We are aware of a couple of issues with iOS that would create some problem when building the app with a custom iOS component. diff --git a/website/versioned_docs/version-0.76/fabric-native-components.md b/website/versioned_docs/version-0.76/fabric-native-components.md index 8b917ed0c8c..c715ce8e898 100644 --- a/website/versioned_docs/version-0.76/fabric-native-components.md +++ b/website/versioned_docs/version-0.76/fabric-native-components.md @@ -216,4 +216,4 @@ yarn run ios | Android | iOS | | :-------------------------------------------------------------------------------: | :--------------------------------------------------------------------------: | -| | | +| | | diff --git a/website/versioned_docs/version-0.76/get-started-without-a-framework.md b/website/versioned_docs/version-0.76/get-started-without-a-framework.md index 450fe5e0cb6..5b10ab5e256 100644 --- a/website/versioned_docs/version-0.76/get-started-without-a-framework.md +++ b/website/versioned_docs/version-0.76/get-started-without-a-framework.md @@ -112,7 +112,7 @@ Now that you have successfully run the app, let's modify it. Congratulations! You've successfully run and modified your first barebone React Native app. -
+
### Now what? diff --git a/website/versioned_docs/version-0.76/hermes.md b/website/versioned_docs/version-0.76/hermes.md index 147c998cd63..b9615c0f613 100644 --- a/website/versioned_docs/version-0.76/hermes.md +++ b/website/versioned_docs/version-0.76/hermes.md @@ -6,7 +6,7 @@ title: Using Hermes import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; - + [Hermes](https://hermesengine.dev) is an open-source JavaScript engine optimized for React Native. For many apps, using Hermes will result in improved start-up time, decreased memory usage, and smaller app size when compared to JavaScriptCore. diff --git a/website/versioned_docs/version-0.76/intro-react-native-components.md b/website/versioned_docs/version-0.76/intro-react-native-components.md index 8d031e48b02..571134af1ee 100644 --- a/website/versioned_docs/version-0.76/intro-react-native-components.md +++ b/website/versioned_docs/version-0.76/intro-react-native-components.md @@ -13,7 +13,7 @@ React Native is an open source framework for building Android and iOS applicatio In Android and iOS development, a **view** is the basic building block of UI: a small rectangular element on the screen which can be used to display text, images, or respond to user input. Even the smallest visual elements of an app, like a line of text or a button, are kinds of views. Some kinds of views can contain other views. It’s views all the way down!
- Diagram of Android and iOS app showing them both built on top of atomic elements called views. + Diagram of Android and iOS app showing them both built on top of atomic elements called views.
Just a sampling of the many views used in Android and iOS apps.
diff --git a/website/versioned_docs/version-0.76/introduction.md b/website/versioned_docs/version-0.76/introduction.md index cd807674a16..d590abb7a21 100644 --- a/website/versioned_docs/version-0.76/introduction.md +++ b/website/versioned_docs/version-0.76/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 getting started instructions, they've moved to their own section. Continue reading for an introduction to the documentation, Native Components, React, and more! - +
Many different kinds of people use React Native: from advanced iOS developers to React beginners, to people getting started programming for the first time in their career. These docs were written for all learners, no matter their experience level or background. diff --git a/website/versioned_docs/version-0.76/legacy/native-modules-android.md b/website/versioned_docs/version-0.76/legacy/native-modules-android.md index 19126bbe58e..f01e1cd807e 100644 --- a/website/versioned_docs/version-0.76/legacy/native-modules-android.md +++ b/website/versioned_docs/version-0.76/legacy/native-modules-android.md @@ -19,7 +19,7 @@ In the following guide you will create a native module, `CalendarModule`, that w To get started, open up the Android project within your React Native application in Android Studio. You can find your Android project here within a React Native app:
- Image of opening up an Android project within a React Native app inside of Android Studio. + Image of opening up an Android project within a React Native app inside of Android Studio.
Image of where you can find your Android project
@@ -32,7 +32,7 @@ We also recommend enabling [Gradle Daemon](https://docs.gradle.org/2.9/userguide The first step is to create the (`CalendarModule.java` or `CalendarModule.kt`) Java/Kotlin file inside `android/app/src/main/java/com/your-app-name/` folder (the folder is the same for both Kotlin and Java). This Java/Kotlin file will contain your native module Java/Kotlin class.
- Image of adding a class called CalendarModule.java within the Android Studio. + Image of adding a class called CalendarModule.java within the Android Studio.
Image of how to add the CalendarModuleClass
@@ -379,7 +379,7 @@ As you work through these guides and iterate on your native module, you will nee You should now be able to invoke your `createCalendarEvent()` method on your native module in the app. In our example this occurs by pressing the `NewModuleButton`. You can confirm this by viewing the log you set up in your `createCalendarEvent()` method. You can follow [these steps](https://developer.android.com/studio/debug/am-logcat.html) to view ADB logs in your app. You should then be able to search for your `Log.d` message (in our example “Create event called with name: testName and location: testLocation”) and see your message logged each time you invoke your native module method.
- Image of logs. + Image of logs.
Image of ADB logs in Android Studio
@@ -790,7 +790,7 @@ promise.reject("Create Event error", "Error parsing date", e) Error message in React Native App when promise is rejected:
- Image of error message in React Native app. + Image of error message in React Native app.
Image of error message
diff --git a/website/versioned_docs/version-0.76/legacy/native-modules-ios.md b/website/versioned_docs/version-0.76/legacy/native-modules-ios.md index 62459527773..f91be05a851 100644 --- a/website/versioned_docs/version-0.76/legacy/native-modules-ios.md +++ b/website/versioned_docs/version-0.76/legacy/native-modules-ios.md @@ -19,7 +19,7 @@ In the following guide you will create a native module, `CalendarModule`, that w To get started, open up the iOS project within your React Native application in Xcode. You can find your iOS project here within a React Native app:
- Image of opening up an iOS project within a React Native app inside of xCode. + Image of opening up an iOS project within a React Native app inside of xCode.
Image of where you can find your iOS project
@@ -30,7 +30,7 @@ We recommend using Xcode to write your native code. Xcode is built for iOS devel The first step is to create our main custom native module header and implementation files. Create a new file called `RCTCalendarModule.h`
- Image of creating a class called RCTCalendarModule.h. + Image of creating a class called RCTCalendarModule.h.
Image of creating a custom native module file within the same folder as AppDelegate
@@ -207,7 +207,7 @@ As you work through these guides and iterate on your native module, you will nee You should now be able to invoke your `createCalendarEvent()` method on your native module in JavaScript. Since you are using `RCTLog` in the function, you can confirm your native method is being invoked by [enabling debug mode in your app](https://reactnative.dev/docs/debugging#chrome-developer-tools) and looking at the JS console in Chrome or the mobile app debugger Flipper. You should see your `RCTLogInfo(@"Pretending to create an event %@ at %@", name, location);` message each time you invoke the native module method.
- Image of logs. + Image of logs.
Image of iOS logs in Flipper
diff --git a/website/versioned_docs/version-0.76/pressable.md b/website/versioned_docs/version-0.76/pressable.md index 48b24e9fa13..fc6bc8b3d0a 100644 --- a/website/versioned_docs/version-0.76/pressable.md +++ b/website/versioned_docs/version-0.76/pressable.md @@ -23,7 +23,7 @@ After pressing [`onPressIn`](#onpressin), one of two things will happen: 1. The person will remove their finger, triggering [`onPressOut`](#onpressout) followed by [`onPress`](#onpress). 2. If the person leaves their finger longer than 500 milliseconds before removing it, [`onLongPress`](#onlongpress) is triggered. ([`onPressOut`](#onpressout) will still fire when they remove their finger.) -Diagram of the onPress events in sequence. +Diagram of the onPress events in sequence. Fingers are not the most precise instruments, and it is common for users to accidentally activate the wrong element or miss the activation area. To help, `Pressable` has an optional `HitRect` you can use to define how far a touch can register away from the wrapped element. Presses can start anywhere within a `HitRect`. @@ -32,7 +32,7 @@ Fingers are not the most precise instruments, and it is common for users to acci > The touch area never extends past the parent view bounds and the Z-index of sibling views always takes precedence if a touch hits two overlapping views.
- Diagram of HitRect and PressRect and how they work. + Diagram of HitRect and PressRect and how they work.
You can set HitRect with hitSlop and set PressRect with pressRetentionOffset.
diff --git a/website/versioned_docs/version-0.76/security.md b/website/versioned_docs/version-0.76/security.md index 1af4b74f3e3..23bf92fe729 100644 --- a/website/versioned_docs/version-0.76/security.md +++ b/website/versioned_docs/version-0.76/security.md @@ -7,7 +7,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con Security is often overlooked when building apps. It is true that it is impossible to build software that is completely impenetrable—we’ve yet to invent a completely impenetrable lock (bank vaults do, after all, still get broken into). However, the probability of falling victim to a malicious attack or being exposed for a security vulnerability is inversely proportional to the effort you’re willing to put in to protecting your application against any such eventuality. Although an ordinary padlock is pickable, it is still much harder to get past than a cabinet hook! - + In this guide, you will learn about best practices for storing sensitive information, authentication, network security, and tools that will help you secure your app. This is not a preflight checklist—it is a catalogue of options, each of which will help further protect your app and users. @@ -68,7 +68,7 @@ In order to use iOS Keychain services or Android Secure Shared Preferences, you ## Authentication and Deep Linking - + Mobile apps have a unique vulnerability that is non-existent in the web: **deep linking**. Deep linking is a way of sending data directly to a native application from an outside source. A deep link looks like `app://` where `app` is your app scheme and anything following the // could be used internally to handle the request. diff --git a/website/versioned_docs/version-0.76/testing-overview.md b/website/versioned_docs/version-0.76/testing-overview.md index 5714c365ff6..dc812bb19ee 100644 --- a/website/versioned_docs/version-0.76/testing-overview.md +++ b/website/versioned_docs/version-0.76/testing-overview.md @@ -10,7 +10,7 @@ As your codebase expands, small errors and edge cases you don’t expect can cas In this guide, we will cover different, automated ways to ensure your app works as expected, ranging from static analysis to end-to-end tests. -Testing is a cycle of fixing, testing, and either passing to release or failing back into testing. +Testing is a cycle of fixing, testing, and either passing to release or failing back into testing. ## Why Test @@ -81,7 +81,7 @@ When the object being tested has any dependencies, you’ll often need to mock t The great thing about unit tests is that they are quick to write and run. Therefore, as you work, you get fast feedback about whether your tests are passing. Jest even has an option to continuously run tests that are related to code you’re editing: [Watch mode](https://jestjs.io/docs/en/cli#watch). - + ### Mocking @@ -112,7 +112,7 @@ In integration testing, real individual units are combined (same as in your app) > - Makes a network call to other application (such as the weather service API) > - Does any kind of file or database I/O - + ## Component Tests @@ -132,7 +132,7 @@ There are several libraries that can help you testing these: > Component tests are only JavaScript tests running in Node.js environment. They do _not_ take into account any iOS, Android, or other platform code which is backing the React Native components. It follows that they cannot give you a 100% confidence that everything works for the user. If there is a bug in the iOS or Android code, they will not find it. - + ### Testing User Interactions @@ -233,7 +233,7 @@ Snapshots themselves do not ensure that your component render logic is correct, We recommend that you only use small snapshots (see [`no-large-snapshots` rule](https://github.com/jest-community/eslint-plugin-jest/blob/master/docs/rules/no-large-snapshots.md)). If you want to test a _change_ between two React component states, use [`snapshot-diff`](https://github.com/jest-community/snapshot-diff). When in doubt, prefer explicit expectations as described in the previous paragraph. - + ## End-to-End Tests @@ -253,7 +253,7 @@ Try to cover the vital parts of your app with E2E tests: authentication flow, co There are several E2E testing tools available: in the React Native community, [Detox](https://github.com/wix/detox/) is a popular framework because it’s tailored for React Native apps. Another popular library in the space of iOS and Android apps is [Appium](https://appium.io/) or [Maestro](https://maestro.mobile.dev/). - + ## Summary diff --git a/website/versioned_docs/version-0.76/the-new-architecture/create-module-library.md b/website/versioned_docs/version-0.76/the-new-architecture/create-module-library.md index dfcfadf0408..4a313b434be 100644 --- a/website/versioned_docs/version-0.76/the-new-architecture/create-module-library.md +++ b/website/versioned_docs/version-0.76/the-new-architecture/create-module-library.md @@ -38,7 +38,7 @@ npx create-react-native-library@latest Once the interactive prompt is done, the tool creates a folder whose structure looks like this in Visual Studio Code: -Folder structure after initializing a new library. +Folder structure after initializing a new library. Feel free to explore the code that has been created for you. However, the most important parts: diff --git a/website/versioned_docs/version-0.76/the-new-architecture/pure-cxx-modules.md b/website/versioned_docs/version-0.76/the-new-architecture/pure-cxx-modules.md index 3f0e7783f93..2c83b79d313 100644 --- a/website/versioned_docs/version-0.76/the-new-architecture/pure-cxx-modules.md +++ b/website/versioned_docs/version-0.76/the-new-architecture/pure-cxx-modules.md @@ -292,7 +292,7 @@ To make sure that the iOS app can effectively build the C++ Turbo Native Module, 2. Add the `shared` folder to our iOS project. 3. Register the C++ Turbo Native Module in the application. -#### 1. Install Pods and Run Codegen. +#### 1. Install Pods and Run Codegen The first step we need to run is the usual steps we run every time we have to prepare our iOS application. CocoaPods is the tool we use to setup and install React Native dependencies and, as part of the process, it will also run Codegen for us. @@ -447,4 +447,4 @@ Congratulation, you wrote your first C++ Turbo Native Module! |
Android
|
iOS
| | ---------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- | -|
Android Video
|
iOS video
| +|
Android Video
|
iOS video
| diff --git a/website/versioned_docs/version-0.76/turbo-native-modules-ios.md b/website/versioned_docs/version-0.76/turbo-native-modules-ios.md index 145b58c709f..77cd1976abb 100644 --- a/website/versioned_docs/version-0.76/turbo-native-modules-ios.md +++ b/website/versioned_docs/version-0.76/turbo-native-modules-ios.md @@ -18,27 +18,27 @@ cd ios open TurboModuleExample.xcworkspace ``` -Open Xcode Workspace +Open Xcode Workspace 2. Right click on app and select New Group, call the new group `NativeLocalStorage`. -Right click on app and select New Group +Right click on app and select New Group 3. In the `NativeLocalStorage` group, create New→File from Template. -Create a new file using the Cocoa Touch Class template +Create a new file using the Cocoa Touch Class template 4. Use the Cocoa Touch Class. -Use the Cocoa Touch Class template +Use the Cocoa Touch Class template 5. Name the Cocoa Touch Class RCTNativeLocalStorage with the Objective-C language. -Create an Objective-C RCTNativeLocalStorage class +Create an Objective-C RCTNativeLocalStorage class 6. Rename RCTNativeLocalStorage.m → RCTNativeLocalStorage.mm making it an Objective-C++ file. -Convert to and Objective-C++ file +Convert to and Objective-C++ file ## Implement localStorage with NSUserDefaults From 3812f89741ef75196004ff23a000f34294b60c24 Mon Sep 17 00:00:00 2001 From: Hichem Fantar Date: Sun, 5 Jan 2025 01:52:38 +0100 Subject: [PATCH 2/3] style: Fix formatting inconsistencies in documentation and CSS files --- README.md | 4 ++-- docs/fabric-native-components.md | 4 ++-- docs/the-new-architecture/pure-cxx-modules.md | 4 ++-- ...016-08-19-right-to-left-support-for-react-native-apps.md | 1 + .../contributing/_markdown-GH-release-notes-prerelease.mdx | 3 ++- website/contributing/how-to-build-from-source.md | 2 +- website/contributing/how-to-run-and-write-tests.md | 2 +- website/contributing/labeling-github-issues.md | 6 +++--- website/src/theme/Blog/Components/Author/styles.module.css | 3 ++- .../versioned_docs/version-0.76/fabric-native-components.md | 4 ++-- .../version-0.76/the-new-architecture/pure-cxx-modules.md | 4 ++-- 11 files changed, 20 insertions(+), 17 deletions(-) diff --git a/README.md b/README.md index b59c2e945f3..929b3f0ec3f 100644 --- a/README.md +++ b/README.md @@ -143,7 +143,7 @@ The `showcase.json` file contains the list of users that are highlighted in the 1. `git checkout main` from any folder in your local `react-native-website` repository. 1. `git pull origin main` to ensure you have the latest main code. 1. `git checkout -b the-name-of-my-branch` to create a branch. - > replace `the-name-of-my-branch` with a suitable name, such as `update-animations-page` + > replace `the-name-of-my-branch` with a suitable name, such as `update-animations-page` ### Make the change @@ -167,7 +167,7 @@ If possible, test any visual changes in all latest versions of the following bro 1. Run `yarn prettier` and `yarn language:lint` in `./website` directory to ensure your changes are consistent with other files in the repo. 1. `git add -A && git commit -m "My message"` to stage and commit your changes. - > replace `My message` with a commit message, such as `Fixed header logo on Android` + > replace `My message` with a commit message, such as `Fixed header logo on Android` 1. `git push my-fork-name the-name-of-my-branch` 1. Go to the [react-native-website repo](https://github.com/facebook/react-native-website) and you should see recently pushed branches. 1. Follow GitHub's instructions. diff --git a/docs/fabric-native-components.md b/docs/fabric-native-components.md index d209ddf8c7e..886b3a7db48 100644 --- a/docs/fabric-native-components.md +++ b/docs/fabric-native-components.md @@ -222,6 +222,6 @@ yarn run ios -| Android | iOS | -| :-------------------------------------------------------------------------------: | :--------------------------------------------------------------------------: | +| Android | iOS | +| :----------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------: | | | | diff --git a/docs/the-new-architecture/pure-cxx-modules.md b/docs/the-new-architecture/pure-cxx-modules.md index 1518e82e48f..d66d0f47852 100644 --- a/docs/the-new-architecture/pure-cxx-modules.md +++ b/docs/the-new-architecture/pure-cxx-modules.md @@ -445,6 +445,6 @@ This allows you to prepare the input for the specs and gives you more control ov Congratulations, you wrote your first C++ Turbo Native Module! -|
Android
|
iOS
| -| ---------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- | +|
Android
|
iOS
| +| ------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | |
Android Video
|
iOS video
| diff --git a/website/blog/2016-08-19-right-to-left-support-for-react-native-apps.md b/website/blog/2016-08-19-right-to-left-support-for-react-native-apps.md index eab07dfbf13..17b42f0ded9 100644 --- a/website/blog/2016-08-19-right-to-left-support-for-react-native-apps.md +++ b/website/blog/2016-08-19-right-to-left-support-for-react-native-apps.md @@ -199,6 +199,7 @@ When working on a new feature, you can easily toggle this button and reload the The RTL support should cover most of the UX in your app; however, there are some limitations for now: - Text alignment behaviors differ in Android and iOS + - In iOS, the default text alignment depends on the active language bundle, they are consistently on one side. In Android, the default text alignment depends on the language of the text content, i.e. English will be left-aligned and Arabic will be right-aligned. - In theory, this should be made consistent across platform, but some people may prefer one behavior to another when using an app. More user experience research may be needed to find out the best practice for text alignment. diff --git a/website/contributing/_markdown-GH-release-notes-prerelease.mdx b/website/contributing/_markdown-GH-release-notes-prerelease.mdx index 802ee2c6599..397525bbdf8 100644 --- a/website/contributing/_markdown-GH-release-notes-prerelease.mdx +++ b/website/contributing/_markdown-GH-release-notes-prerelease.mdx @@ -29,7 +29,8 @@ Let us know how it went by posting a comment in the [working group discussion](h ```
- Creating a GitHub Release -| Android | iOS | -| :-------------------------------------------------------------------------------: | :--------------------------------------------------------------------------: | +| Android | iOS | +| :----------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------: | | | | diff --git a/website/versioned_docs/version-0.76/the-new-architecture/pure-cxx-modules.md b/website/versioned_docs/version-0.76/the-new-architecture/pure-cxx-modules.md index 2c83b79d313..2020cf454fa 100644 --- a/website/versioned_docs/version-0.76/the-new-architecture/pure-cxx-modules.md +++ b/website/versioned_docs/version-0.76/the-new-architecture/pure-cxx-modules.md @@ -445,6 +445,6 @@ This allow you to prepare the input for the specs and gives you more control ove Congratulation, you wrote your first C++ Turbo Native Module! -|
Android
|
iOS
| -| ---------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- | +|
Android
|
iOS
| +| ------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | |
Android Video
|
iOS video
| From 07492574dd9b599f0ecfa5bbe22e0f0492ac17ed Mon Sep 17 00:00:00 2001 From: Hichem Fantar Date: Sun, 5 Jan 2025 04:55:55 +0100 Subject: [PATCH 3/3] revert --- docs/get-started-without-a-framework.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/get-started-without-a-framework.md b/docs/get-started-without-a-framework.md index e1a6b8a9e0a..5b10ab5e256 100644 --- a/docs/get-started-without-a-framework.md +++ b/docs/get-started-without-a-framework.md @@ -108,7 +108,7 @@ Now that you have successfully run the app, let's modify it. - Open `App.tsx` in your text editor of choice and edit some lines. - Press the R key twice or select `Reload` from the Dev Menu (Ctrl + M) to see your changes! -### That's it +### That's it! Congratulations! You've successfully run and modified your first barebone React Native app.