Skip to content

chore: prepare docs for Docusaurus v3 upgrade - 2nd iteration#3830

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
elicwhite merged 14 commits into from
Sep 1, 2023
Merged

chore: prepare docs for Docusaurus v3 upgrade - 2nd iteration #3830

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
2e5c5bb
Add quotes
slorber Aug 25, 2023
7f63f7d
Fix useless bold chars
slorber Aug 25, 2023
8194d1d
fix useless extra spacing
slorber Aug 25, 2023
ee6f7c0
fix useless extra spacing
slorber Aug 25, 2023
7501fae
avoid remark-directive syntax
slorber Aug 25, 2023
bda8552
fix scrollTo codeblock
slorber Aug 25, 2023
4667a2e
Avoid remark-directive syntax
slorber Aug 25, 2023
56797fd
code blocks, use space instead of tabs
slorber Aug 25, 2023
277a5a8
code blocks, use space instead of tabs
slorber Aug 25, 2023
9b45cc8
code blocks, use space instead of tabs
slorber Aug 25, 2023
4d7f8e9
code blocks, use space instead of tabs
slorber Aug 25, 2023
2311ae8
code blocks, use space instead of tabs
slorber Aug 25, 2023
0a2b794
Use React fragment for 2 consecutive images
slorber Aug 25, 2023
0e545b2
update prismjs
slorber Aug 25, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/native-components-ios.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -286,7 +286,7 @@ RCT_EXPORT_VIEW_PROPERTY(onRegionChange, RCTBubblingEventBlock)

RCT_CUSTOM_VIEW_PROPERTY(region, MKCoordinateRegion, MKMapView)
{
[view setRegion:json ? [RCTConvert MKCoordinateRegion:json] : defaultView.region animated:YES];
[view setRegion:json ? [RCTConvert MKCoordinateRegion:json] : defaultView.region animated:YES];

@slorberslorberAug 25, 2023

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

replace tab with space + reduce indentation for consistency

Avoid this extra spacing when upgrading:

CleanShot 2023-08-25 at 13 07 16@2x

Before: https://reactnative.dev/docs/native-components-ios#events
After: https://deploy-preview-3830--react-native.netlify.app/docs/native-components-ios#events

}

- (UIView *)view
Expand Down
2 changes: 1 addition & 1 deletion docs/profile-hermes.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -71,7 +71,7 @@ To open the profile in Chrome DevTools:
2. Select the **Performance** tab.
3. Right click and choose **Load profile...**

<img src="/docs/assets/openChromeProfile.png" alt="Loading a performance profile on Chrome DevTools" />
<img src="/docs/assets/openChromeProfile.png" alt="Loading a performance profile on Chrome DevTools" />

@slorberslorberAug 25, 2023

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

unwanted extra space change list + image layout

CleanShot 2023-08-25 at 12 46 31@2x

Before: https://reactnative.dev/docs/profile-hermes#open-the-downloaded-profile-in-chrome-devtools
After: https://deploy-preview-3830--react-native.netlify.app/docs/profile-hermes#open-the-downloaded-profile-in-chrome-devtools


## How does the Hermes Profile Transformer work?

Expand Down
6 changes: 3 additions & 3 deletions docs/pushnotificationios.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -402,9 +402,9 @@ See what push permissions are currently enabled.

`callback` will be invoked with a `permissions` object:

- `alert` :boolean
- `badge` :boolean
- `sound` :boolean
- `alert: boolean`
- `badge: boolean`
- `sound: boolean`
Comment on lines -405 to +407

@slorberslorberAug 25, 2023

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

:xyz, ::xyz and :::xyz are "Markdown Directives" and we turn them on by default in Docusaurus v3 to bring admonition support.

This means you should avoid that in your code (unless escaped) otherwise those annotations will magically disappear when upgrading.

CleanShot 2023-08-25 at 12 47 37@2x

I think it's reasonable to make the boolean part of the inline code block

Before: https://reactnative.dev/docs/pushnotificationios#checkpermissions
After: https://deploy-preview-3830--react-native.netlify.app/docs/pushnotificationios#checkpermissions


---

Expand Down
2 changes: 1 addition & 1 deletion docs/scrollview.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -751,7 +751,7 @@ Displays the scroll indicators momentarily.
scrollTo(
options?: {x?: number, y?: number, animated?: boolean} | number,
deprecatedX?: number,
deprecatedAnimated?: boolean,
deprecatedAnimated?: boolean,

@slorberslorberAug 25, 2023

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks like a typo

);
```

Expand Down
2 changes: 1 addition & 1 deletion docs/touchablenativefeedback.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -168,7 +168,7 @@ static SelectableBackground(
): ThemeAttributeBackgroundPropType;
```

Creates an object that represents android theme's default background for selectable elements (?android:attr/selectableItemBackground). `rippleRadius` parameter controls the radius of the ripple effect.
Creates an object that represents android theme's default background for selectable elements (`?android:attr/selectableItemBackground`). `rippleRadius` parameter controls the radius of the ripple effect.

@slorberslorberAug 25, 2023

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Another "Markdown Directive", we want to avoid them, escape them or wrap them in code blocks.

Otherwise the upgrade will lead to:

CleanShot 2023-08-25 at 12 52 23@2x


---

Expand Down
2 changes: 1 addition & 1 deletion website/architecture/render-pipeline.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -160,7 +160,7 @@ React Native renderer leverages structural sharing to minimize the overhead of i

In the above example, React creates the new tree using these operations:

1. CloneNode(**Node 3**, {backgroundColor: 'yellow'}) → **Node 3'**
1. CloneNode(**Node 3**, `{backgroundColor: 'yellow'}`) → **Node 3'**

@slorberslorberAug 25, 2023

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks reasonable to wrap in code block

{ will mess up with MDX 2 and require to be escaped

2. CloneNode(**Node 2**) → **Node 2'**
3. AppendChild(**Node 2'**, **Node 3'**)
4. AppendChild(**Node 2'**, **Node 4**)
Expand Down
9 changes: 5 additions & 4 deletions website/blog/2016-08-19-right-to-left-support-for-react-native-apps.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -15,9 +15,10 @@ 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:

<>
<img src="/blog/assets/rtl-ama-ios-arabic.png" width={280} style={{ margin: 10 }} />

<img src="/blog/assets/rtl-ama-android-hebrew.png" width={280} style={{ margin: 10 }} />
</>
Comment on lines +18 to +21

@slorberslorberAug 25, 2023

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Adding a fragment here permits to avoid having an extra useless \n char when upgrading to MDX v2.

CleanShot 2023-08-25 at 14 51 24@2x

https://twitter.com/badsyntax/status/1695041116893036746

In practice it's not super impactful, but this change will ensure the 2 images look exactly the same before/after the MDX v2 upgrade.


## Overview Changes in RN for RTL support

Expand DownExpand Up@@ -53,15 +54,15 @@ With this update, when you allow RTL layout for your app:

```objc
// in AppDelegate.m
[[RCTI18nUtil sharedInstance] allowRTL:YES];
[[RCTI18nUtil sharedInstance] allowRTL:YES];
```

Android:

```java
// in MainActivity.java
I18nUtil sharedI18nUtilInstance = I18nUtil.getInstance();
sharedI18nUtilInstance.allowRTL(context, true);
I18nUtil sharedI18nUtilInstance = I18nUtil.getInstance();
sharedI18nUtilInstance.allowRTL(context, true);
Comment on lines -56 to +65

@slorberslorberAug 25, 2023

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Replace tabs with spaces for consistency + avoid extra spacing appearing when upgrading:

CleanShot 2023-08-25 at 13 02 33@2x

```

3. For Android, you need add `android:supportsRtl="true"` to the [`<application>`](https://developer.android.com/guide/topics/manifest/application-element.html) element in `AndroidManifest.xml` file.
Expand Down
50 changes: 25 additions & 25 deletions website/blog/2016-12-05-easier-upgrades.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -65,40 +65,40 @@ index e98ebb0..2fb6a11 100644
--- a/ios/MyAwesomeApp/Info.plist
+++ b/ios/MyAwesomeApp/Info.plist
@@ -45,7 +45,7 @@
<dict>
<key>localhost</key>
<dict>
-<key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
+<key>NSExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
</dict>
<dict>
<key>localhost</key>
<dict>
-<key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
+<key>NSExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
</dict>
[...]
```

All we need now is to apply this patch to your source files. While the old `react-native upgrade` process would have prompted you for any small difference, Git is able to merge most of the changes automatically using its 3-way merge algorithm and eventually leave us with familiar conflict delimiters:

```
13B07F951A680F5B00A75B9A /* Release */ = {
isa = XCBuildConfiguration;
buildSettings = {
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
13B07F951A680F5B00A75B9A /* Release */ = {
isa = XCBuildConfiguration;
buildSettings = {
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
<<<<<<< ours
CODE_SIGN_IDENTITY = "iPhone Developer";
FRAMEWORK_SEARCH_PATHS = (
"$(inherited)",
"$(PROJECT_DIR)/HockeySDK.embeddedframework",
"$(PROJECT_DIR)/HockeySDK-iOS/HockeySDK.embeddedframework",
);
CODE_SIGN_IDENTITY = "iPhone Developer";
FRAMEWORK_SEARCH_PATHS = (
"$(inherited)",
"$(PROJECT_DIR)/HockeySDK.embeddedframework",
"$(PROJECT_DIR)/HockeySDK-iOS/HockeySDK.embeddedframework",
);
=======
CURRENT_PROJECT_VERSION = 1;
CURRENT_PROJECT_VERSION = 1;
>>>>>>> theirs
HEADER_SEARCH_PATHS = (
"$(inherited)",
/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
"$(SRCROOT)/../node_modules/react-native/React/**",
"$(SRCROOT)/../node_modules/react-native-code-push/ios/CodePush/**",
);
HEADER_SEARCH_PATHS = (
"$(inherited)",
/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
"$(SRCROOT)/../node_modules/react-native/React/**",
"$(SRCROOT)/../node_modules/react-native-code-push/ios/CodePush/**",
);
```
Comment on lines 68 to 102

@slorberslorberAug 25, 2023

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Replace tabs with space for consistency

Avoid this unwanted extra spacing when upgrading:

CleanShot 2023-08-25 at 13 05 42@2x

Before: https://reactnative.dev/blog/2016/12/05/easier-upgrades#how-does-it-work
After: https://deploy-preview-3830--react-native.netlify.app/blog/2016/12/05/easier-upgrades#how-does-it-work


These conflicts are generally easy to reason about. The delimiter **ours** stands for "your team" whereas **theirs** could be seen as "the React Native team".
Expand Down
2 changes: 1 addition & 1 deletion website/blog/2021-09-01-preparing-your-app-for-iOS-15-and-android-12.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -65,7 +65,7 @@ Android 12 introduces new [overscroll effect](https://developer.android.com/abou

#### Permission Updates

Android 12 allows users of your app to only provide access to the approximate location if you request it with **`ACCESS_FINE_LOCATION`** permission**.** Learn more about it [here](https://developer.android.com/about/versions/12/approximate-location).
Android 12 allows users of your app to only provide access to the approximate location if you request it with **`ACCESS_FINE_LOCATION`** permission. Learn more about it [here](https://developer.android.com/about/versions/12/approximate-location).

@slorberslorberAug 25, 2023

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks like a typo


Check out Google’s [detailed behavior changes](https://developer.android.com/about/versions/12/behavior-changes-all) for all apps running on Android 12.

Expand Down
2 changes: 1 addition & 1 deletion website/versioned_docs/version-0.70/native-components-ios.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -286,7 +286,7 @@ RCT_EXPORT_VIEW_PROPERTY(onRegionChange, RCTBubblingEventBlock)

RCT_CUSTOM_VIEW_PROPERTY(region, MKCoordinateRegion, MKMapView)
{
[view setRegion:json ? [RCTConvert MKCoordinateRegion:json] : defaultView.region animated:YES];
[view setRegion:json ? [RCTConvert MKCoordinateRegion:json] : defaultView.region animated:YES];
}

- (UIView *)view
Expand Down
2 changes: 1 addition & 1 deletion website/versioned_docs/version-0.70/profile-hermes.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -93,7 +93,7 @@ To open the profile in Chrome DevTools:
2. Select the **Performance** tab.
3. Right click and choose **Load profile...**

<img src="/docs/assets/openChromeProfile.png" alt="Loading a performance profile on Chrome DevTools" />
<img src="/docs/assets/openChromeProfile.png" alt="Loading a performance profile on Chrome DevTools" />

## How does the Hermes Profile Transformer work?

Expand Down
6 changes: 3 additions & 3 deletions website/versioned_docs/version-0.70/pushnotificationios.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -386,9 +386,9 @@ See what push permissions are currently enabled.

`callback` will be invoked with a `permissions` object:

- `alert` :boolean
- `badge` :boolean
- `sound` :boolean
- `alert: boolean`
- `badge: boolean`
- `sound: boolean`

---

Expand Down
2 changes: 1 addition & 1 deletion website/versioned_docs/version-0.70/scrollview.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -745,7 +745,7 @@ Displays the scroll indicators momentarily.
scrollTo(
options?: { x?: number, y?: number, animated?: boolean } | number,
deprecatedX?: number,
deprecatedAnimated?: boolean,
deprecatedAnimated?: boolean,
);
```

Expand Down
2 changes: 1 addition & 1 deletion website/versioned_docs/version-0.70/touchablenativefeedback.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -158,7 +158,7 @@ TV next focus up (see documentation for the View component).
static SelectableBackground(rippleRadius: ?number)
```

Creates an object that represents android theme's default background for selectable elements (?android:attr/selectableItemBackground). `rippleRadius` parameter controls the radius of the ripple effect.
Creates an object that represents android theme's default background for selectable elements (`?android:attr/selectableItemBackground`). `rippleRadius` parameter controls the radius of the ripple effect.

---

Expand Down
2 changes: 1 addition & 1 deletion website/versioned_docs/version-0.71/native-components-ios.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -286,7 +286,7 @@ RCT_EXPORT_VIEW_PROPERTY(onRegionChange, RCTBubblingEventBlock)

RCT_CUSTOM_VIEW_PROPERTY(region, MKCoordinateRegion, MKMapView)
{
[view setRegion:json ? [RCTConvert MKCoordinateRegion:json] : defaultView.region animated:YES];
[view setRegion:json ? [RCTConvert MKCoordinateRegion:json] : defaultView.region animated:YES];
}

- (UIView *)view
Expand Down
2 changes: 1 addition & 1 deletion website/versioned_docs/version-0.71/profile-hermes.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -71,7 +71,7 @@ To open the profile in Chrome DevTools:
2. Select the **Performance** tab.
3. Right click and choose **Load profile...**

<img src="/docs/assets/openChromeProfile.png" alt="Loading a performance profile on Chrome DevTools" />
<img src="/docs/assets/openChromeProfile.png" alt="Loading a performance profile on Chrome DevTools" />

## How does the Hermes Profile Transformer work?

Expand Down
6 changes: 3 additions & 3 deletions website/versioned_docs/version-0.71/pushnotificationios.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -402,9 +402,9 @@ See what push permissions are currently enabled.

`callback` will be invoked with a `permissions` object:

- `alert` :boolean
- `badge` :boolean
- `sound` :boolean
- `alert: boolean`
- `badge: boolean`
- `sound: boolean`

---

Expand Down
2 changes: 1 addition & 1 deletion website/versioned_docs/version-0.71/scrollview.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -751,7 +751,7 @@ Displays the scroll indicators momentarily.
scrollTo(
options?: {x?: number, y?: number, animated?: boolean} | number,
deprecatedX?: number,
deprecatedAnimated?: boolean,
deprecatedAnimated?: boolean,
);
```

Expand Down
2 changes: 1 addition & 1 deletion website/versioned_docs/version-0.71/touchablenativefeedback.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -168,7 +168,7 @@ static SelectableBackground(
): ThemeAttributeBackgroundPropType;
```

Creates an object that represents android theme's default background for selectable elements (?android:attr/selectableItemBackground). `rippleRadius` parameter controls the radius of the ripple effect.
Creates an object that represents android theme's default background for selectable elements (`?android:attr/selectableItemBackground`). `rippleRadius` parameter controls the radius of the ripple effect.

---

Expand Down
2 changes: 1 addition & 1 deletion website/versioned_docs/version-0.72/native-components-ios.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -286,7 +286,7 @@ RCT_EXPORT_VIEW_PROPERTY(onRegionChange, RCTBubblingEventBlock)

RCT_CUSTOM_VIEW_PROPERTY(region, MKCoordinateRegion, MKMapView)
{
[view setRegion:json ? [RCTConvert MKCoordinateRegion:json] : defaultView.region animated:YES];
[view setRegion:json ? [RCTConvert MKCoordinateRegion:json] : defaultView.region animated:YES];
}

- (UIView *)view
Expand Down
2 changes: 1 addition & 1 deletion website/versioned_docs/version-0.72/profile-hermes.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -71,7 +71,7 @@ To open the profile in Chrome DevTools:
2. Select the **Performance** tab.
3. Right click and choose **Load profile...**

<img src="/docs/assets/openChromeProfile.png" alt="Loading a performance profile on Chrome DevTools" />
<img src="/docs/assets/openChromeProfile.png" alt="Loading a performance profile on Chrome DevTools" />

## How does the Hermes Profile Transformer work?

Expand Down
6 changes: 3 additions & 3 deletions website/versioned_docs/version-0.72/pushnotificationios.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -402,9 +402,9 @@ See what push permissions are currently enabled.

`callback` will be invoked with a `permissions` object:

- `alert` :boolean
- `badge` :boolean
- `sound` :boolean
- `alert: boolean`
- `badge: boolean`
- `sound: boolean`

---

Expand Down
2 changes: 1 addition & 1 deletion website/versioned_docs/version-0.72/scrollview.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -751,7 +751,7 @@ Displays the scroll indicators momentarily.
scrollTo(
options?: {x?: number, y?: number, animated?: boolean} | number,
deprecatedX?: number,
deprecatedAnimated?: boolean,
deprecatedAnimated?: boolean,
);
```

Expand Down
2 changes: 1 addition & 1 deletion website/versioned_docs/version-0.72/touchablenativefeedback.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -168,7 +168,7 @@ static SelectableBackground(
): ThemeAttributeBackgroundPropType;
```

Creates an object that represents android theme's default background for selectable elements (?android:attr/selectableItemBackground). `rippleRadius` parameter controls the radius of the ripple effect.
Creates an object that represents android theme's default background for selectable elements (`?android:attr/selectableItemBackground`). `rippleRadius` parameter controls the radius of the ripple effect.

---

Expand Down
6 changes: 3 additions & 3 deletions yarn.lock
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -10997,9 +10997,9 @@ prism-react-renderer@^1.3.5:
integrity sha512-IJ+MSwBWKG+SM3b2SUfdrhC+gu01QkV2KmRQgREThBfSQRoufqRfxfHUxpG1WcaFjP+kojcFyO9Qqtpgt3qLCg==

prismjs@^1.28.0:
version "1.28.0"
resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.28.0.tgz#0d8f561fa0f7cf6ebca901747828b149147044b6"
integrity sha512-8aaXdYvl1F7iC7Xm1spqSaY/OJBpYW3v+KJ+F17iYxvdc8sfjW194COK5wVhMZX45tGteiBQgdvD/nhxcRwylw==
version "1.29.0"

@slorberslorberAug 25, 2023

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

minor update, the only impact I found in my visual tests was this change in Java code blocks:

CleanShot 2023-08-25 at 15 05 55@2x

resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.29.0.tgz#f113555a8fa9b57c35e637bba27509dcf802dd12"
integrity sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==

proc-log@^3.0.0:
version "3.0.0"
Expand Down
, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
chore: prepare docs for Docusaurus v3 upgrade - 2nd iteration by slorber · Pull Request #3830 · react/react-native-website · GitHub
Skip to content
chore: prepare docs for Docusaurus v3 upgrade - 2nd iteration#3830

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

elicwhite
merged 14 commits into

from

Sep 1, 2023
 Merged


chore: prepare docs for Docusaurus v3 upgrade - 2nd iteration
#3830
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


14 commits


Select commit
Hold shift + click to select a range
2e5c5bb

Add quotes


slorber Aug 25, 2023
7f63f7d

Fix useless bold chars


slorber Aug 25, 2023
8194d1d

fix useless extra spacing


slorber Aug 25, 2023
ee6f7c0

fix useless extra spacing


slorber Aug 25, 2023
7501fae

avoid remark-directive syntax


slorber Aug 25, 2023
bda8552

fix scrollTo codeblock


slorber Aug 25, 2023
4667a2e

Avoid remark-directive syntax


slorber Aug 25, 2023
56797fd

code blocks, use space instead of tabs


slorber Aug 25, 2023
277a5a8

code blocks, use space instead of tabs


slorber Aug 25, 2023
9b45cc8

code blocks, use space instead of tabs


slorber Aug 25, 2023
4d7f8e9

code blocks, use space instead of tabs


slorber Aug 25, 2023
2311ae8

code blocks, use space instead of tabs


slorber Aug 25, 2023
0a2b794

Use React fragment for 2 consecutive images


slorber Aug 25, 2023
0e545b2

update prismjs


slorber Aug 25, 2023

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


2 changes: 1 addition & 1 deletion
docs/native-components-ios.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -286,7 +286,7 @@ RCT_EXPORT_VIEW_PROPERTY(onRegionChange, RCTBubblingEventBlock)

RCT_CUSTOM_VIEW_PROPERTY(region, MKCoordinateRegion, MKMapView)
{
[view setRegion:json ? [RCTConvert MKCoordinateRegion:json] : defaultView.region animated:YES];
[view setRegion:json ? [RCTConvert MKCoordinateRegion:json] : defaultView.region animated:YES];
@slorberslorberAug 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

replace tab with space + reduce indentation for consistency
Avoid this extra spacing when upgrading:
CleanShot 2023-08-25 at 13 07 16@2x
Before: https://reactnative.dev/docs/native-components-ios#events

After: https://deploy-preview-3830--react-native.netlify.app/docs/native-components-ios#events
}

- (UIView *)view
Expand Down

2 changes: 1 addition & 1 deletion
docs/profile-hermes.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -71,7 +71,7 @@ To open the profile in Chrome DevTools:
2. Select the **Performance** tab.
3. Right click and choose **Load profile...**

<img src="/docs/assets/openChromeProfile.png" alt="Loading a performance profile on Chrome DevTools" />
<img src="/docs/assets/openChromeProfile.png" alt="Loading a performance profile on Chrome DevTools" />
@slorberslorberAug 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

unwanted extra space change list + image layout
CleanShot 2023-08-25 at 12 46 31@2x
Before: https://reactnative.dev/docs/profile-hermes#open-the-downloaded-profile-in-chrome-devtools

After: https://deploy-preview-3830--react-native.netlify.app/docs/profile-hermes#open-the-downloaded-profile-in-chrome-devtools

## How does the Hermes Profile Transformer work?

Expand Down

6 changes: 3 additions & 3 deletions
docs/pushnotificationios.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -402,9 +402,9 @@ See what push permissions are currently enabled.

`callback` will be invoked with a `permissions` object:

- `alert` :boolean
- `badge` :boolean
- `sound` :boolean
- `alert: boolean`
- `badge: boolean`
- `sound: boolean`

Comment on lines

-405
 to 
+407

@slorberslorberAug 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

:xyz, ::xyz and :::xyz are "Markdown Directives" and we turn them on by default in Docusaurus v3 to bring admonition support.
This means you should avoid that in your code (unless escaped) otherwise those annotations will magically disappear when upgrading.
CleanShot 2023-08-25 at 12 47 37@2x
I think it's reasonable to make the boolean part of the inline code block
Before: https://reactnative.dev/docs/pushnotificationios#checkpermissions

After: https://deploy-preview-3830--react-native.netlify.app/docs/pushnotificationios#checkpermissions

---

Expand Down

2 changes: 1 addition & 1 deletion
docs/scrollview.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -751,7 +751,7 @@ Displays the scroll indicators momentarily.
scrollTo(
 options?: {x?: number, y?: number, animated?: boolean} | number,
 deprecatedX?: number,
deprecatedAnimated?: boolean,
deprecatedAnimated?: boolean,
@slorberslorberAug 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks like a typo
);
```

Expand Down

2 changes: 1 addition & 1 deletion
docs/touchablenativefeedback.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -168,7 +168,7 @@ static SelectableBackground(
): ThemeAttributeBackgroundPropType;
```

Creates an object that represents android theme's default background for selectable elements (?android:attr/selectableItemBackground). `rippleRadius` parameter controls the radius of the ripple effect.
Creates an object that represents android theme's default background for selectable elements (`?android:attr/selectableItemBackground`). `rippleRadius` parameter controls the radius of the ripple effect.
@slorberslorberAug 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Another "Markdown Directive", we want to avoid them, escape them or wrap them in code blocks.
Otherwise the upgrade will lead to:
CleanShot 2023-08-25 at 12 52 23@2x

---

Expand Down

2 changes: 1 addition & 1 deletion
website/architecture/render-pipeline.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -160,7 +160,7 @@ React Native renderer leverages structural sharing to minimize the overhead of i

In the above example, React creates the new tree using these operations:

1. CloneNode(**Node 3**, {backgroundColor: 'yellow'}) → **Node 3'**
1. CloneNode(**Node 3**, `{backgroundColor: 'yellow'}`) → **Node 3'**
@slorberslorberAug 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks reasonable to wrap in code block
{ will mess up with MDX 2 and require to be escaped
2. CloneNode(**Node 2**) → **Node 2'**
3. AppendChild(**Node 2'**, **Node 3'**)
4. AppendChild(**Node 2'**, **Node 4**)
Expand Down

9 changes: 5 additions & 4 deletions
website/blog/2016-08-19-right-to-left-support-for-react-native-apps.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -15,9 +15,10 @@ 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:

<>
<img src="/blog/assets/rtl-ama-ios-arabic.png" width={280} style={{ margin: 10 }} />

<img src="/blog/assets/rtl-ama-android-hebrew.png" width={280} style={{ margin: 10 }} />
</>

Comment on lines

+18
 to 
+21

@slorberslorberAug 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Adding a fragment here permits to avoid having an extra useless \n char when upgrading to MDX v2.
CleanShot 2023-08-25 at 14 51 24@2x
https://twitter.com/badsyntax/status/1695041116893036746
In practice it's not super impactful, but this change will ensure the 2 images look exactly the same before/after the MDX v2 upgrade.

## Overview Changes in RN for RTL support

Expand DownExpand Up@@ -53,15 +54,15 @@ With this update, when you allow RTL layout for your app:

 ```objc
 // in AppDelegate.m
[[RCTI18nUtil sharedInstance] allowRTL:YES];
[[RCTI18nUtil sharedInstance] allowRTL:YES];
 ```

 Android:

 ```java
 // in MainActivity.java
I18nUtil sharedI18nUtilInstance = I18nUtil.getInstance();
sharedI18nUtilInstance.allowRTL(context, true);
I18nUtil sharedI18nUtilInstance = I18nUtil.getInstance();
sharedI18nUtilInstance.allowRTL(context, true);

Comment on lines

-56
 to 
+65

@slorberslorberAug 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Replace tabs with spaces for consistency + avoid extra spacing appearing when upgrading:
CleanShot 2023-08-25 at 13 02 33@2x
 ```

3. For Android, you need add `android:supportsRtl="true"` to the [`<application>`](https://developer.android.com/guide/topics/manifest/application-element.html) element in `AndroidManifest.xml` file.
Expand Down

50 changes: 25 additions & 25 deletions
website/blog/2016-12-05-easier-upgrades.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -65,40 +65,40 @@ index e98ebb0..2fb6a11 100644
--- a/ios/MyAwesomeApp/Info.plist
+++ b/ios/MyAwesomeApp/Info.plist
@@ -45,7 +45,7 @@
<dict>
<key>localhost</key>
<dict>
-<key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
+<key>NSExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
</dict>
<dict>
<key>localhost</key>
<dict>
-<key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
+<key>NSExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
</dict>
[...]
```

All we need now is to apply this patch to your source files. While the old `react-native upgrade` process would have prompted you for any small difference, Git is able to merge most of the changes automatically using its 3-way merge algorithm and eventually leave us with familiar conflict delimiters:

```
13B07F951A680F5B00A75B9A /* Release */ = {
isa = XCBuildConfiguration;
buildSettings = {
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
13B07F951A680F5B00A75B9A /* Release */ = {
isa = XCBuildConfiguration;
buildSettings = {
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
<<<<<<< ours
CODE_SIGN_IDENTITY = "iPhone Developer";
FRAMEWORK_SEARCH_PATHS = (
"$(inherited)",
"$(PROJECT_DIR)/HockeySDK.embeddedframework",
"$(PROJECT_DIR)/HockeySDK-iOS/HockeySDK.embeddedframework",
);
CODE_SIGN_IDENTITY = "iPhone Developer";
FRAMEWORK_SEARCH_PATHS = (
"$(inherited)",
"$(PROJECT_DIR)/HockeySDK.embeddedframework",
"$(PROJECT_DIR)/HockeySDK-iOS/HockeySDK.embeddedframework",
);
=======
CURRENT_PROJECT_VERSION = 1;
CURRENT_PROJECT_VERSION = 1;
>>>>>>> theirs
HEADER_SEARCH_PATHS = (
"$(inherited)",
/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
"$(SRCROOT)/../node_modules/react-native/React/**",
"$(SRCROOT)/../node_modules/react-native-code-push/ios/CodePush/**",
);
HEADER_SEARCH_PATHS = (
"$(inherited)",
/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
"$(SRCROOT)/../node_modules/react-native/React/**",
"$(SRCROOT)/../node_modules/react-native-code-push/ios/CodePush/**",
);
```

Comment on lines

68
 to 
102

@slorberslorberAug 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Replace tabs with space for consistency
Avoid this unwanted extra spacing when upgrading:
CleanShot 2023-08-25 at 13 05 42@2x
Before: https://reactnative.dev/blog/2016/12/05/easier-upgrades#how-does-it-work

After: https://deploy-preview-3830--react-native.netlify.app/blog/2016/12/05/easier-upgrades#how-does-it-work

These conflicts are generally easy to reason about. The delimiter **ours** stands for "your team" whereas **theirs** could be seen as "the React Native team".
Expand Down

2 changes: 1 addition & 1 deletion
website/blog/2021-09-01-preparing-your-app-for-iOS-15-and-android-12.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -65,7 +65,7 @@ Android 12 introduces new [overscroll effect](https://developer.android.com/abou

#### Permission Updates

Android 12 allows users of your app to only provide access to the approximate location if you request it with **`ACCESS_FINE_LOCATION`** permission**.** Learn more about it [here](https://developer.android.com/about/versions/12/approximate-location).
Android 12 allows users of your app to only provide access to the approximate location if you request it with **`ACCESS_FINE_LOCATION`** permission. Learn more about it [here](https://developer.android.com/about/versions/12/approximate-location).
@slorberslorberAug 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks like a typo

Check out Google’s [detailed behavior changes](https://developer.android.com/about/versions/12/behavior-changes-all) for all apps running on Android 12.

Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.70/native-components-ios.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -286,7 +286,7 @@ RCT_EXPORT_VIEW_PROPERTY(onRegionChange, RCTBubblingEventBlock)

RCT_CUSTOM_VIEW_PROPERTY(region, MKCoordinateRegion, MKMapView)
{
[view setRegion:json ? [RCTConvert MKCoordinateRegion:json] : defaultView.region animated:YES];
[view setRegion:json ? [RCTConvert MKCoordinateRegion:json] : defaultView.region animated:YES];
}

- (UIView *)view
Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.70/profile-hermes.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -93,7 +93,7 @@ To open the profile in Chrome DevTools:
2. Select the **Performance** tab.
3. Right click and choose **Load profile...**

<img src="/docs/assets/openChromeProfile.png" alt="Loading a performance profile on Chrome DevTools" />
<img src="/docs/assets/openChromeProfile.png" alt="Loading a performance profile on Chrome DevTools" />

## How does the Hermes Profile Transformer work?

Expand Down

6 changes: 3 additions & 3 deletions
website/versioned_docs/version-0.70/pushnotificationios.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -386,9 +386,9 @@ See what push permissions are currently enabled.

`callback` will be invoked with a `permissions` object:

- `alert` :boolean
- `badge` :boolean
- `sound` :boolean
- `alert: boolean`
- `badge: boolean`
- `sound: boolean`

---

Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.70/scrollview.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -745,7 +745,7 @@ Displays the scroll indicators momentarily.
scrollTo(
 options?: { x?: number, y?: number, animated?: boolean } | number,
 deprecatedX?: number,
deprecatedAnimated?: boolean,
deprecatedAnimated?: boolean,
);
```

Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.70/touchablenativefeedback.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -158,7 +158,7 @@ TV next focus up (see documentation for the View component).
static SelectableBackground(rippleRadius: ?number)
```

Creates an object that represents android theme's default background for selectable elements (?android:attr/selectableItemBackground). `rippleRadius` parameter controls the radius of the ripple effect.
Creates an object that represents android theme's default background for selectable elements (`?android:attr/selectableItemBackground`). `rippleRadius` parameter controls the radius of the ripple effect.

---

Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.71/native-components-ios.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -286,7 +286,7 @@ RCT_EXPORT_VIEW_PROPERTY(onRegionChange, RCTBubblingEventBlock)

RCT_CUSTOM_VIEW_PROPERTY(region, MKCoordinateRegion, MKMapView)
{
[view setRegion:json ? [RCTConvert MKCoordinateRegion:json] : defaultView.region animated:YES];
[view setRegion:json ? [RCTConvert MKCoordinateRegion:json] : defaultView.region animated:YES];
}

- (UIView *)view
Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.71/profile-hermes.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -71,7 +71,7 @@ To open the profile in Chrome DevTools:
2. Select the **Performance** tab.
3. Right click and choose **Load profile...**

<img src="/docs/assets/openChromeProfile.png" alt="Loading a performance profile on Chrome DevTools" />
<img src="/docs/assets/openChromeProfile.png" alt="Loading a performance profile on Chrome DevTools" />

## How does the Hermes Profile Transformer work?

Expand Down

6 changes: 3 additions & 3 deletions
website/versioned_docs/version-0.71/pushnotificationios.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -402,9 +402,9 @@ See what push permissions are currently enabled.

`callback` will be invoked with a `permissions` object:

- `alert` :boolean
- `badge` :boolean
- `sound` :boolean
- `alert: boolean`
- `badge: boolean`
- `sound: boolean`

---

Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.71/scrollview.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -751,7 +751,7 @@ Displays the scroll indicators momentarily.
scrollTo(
 options?: {x?: number, y?: number, animated?: boolean} | number,
 deprecatedX?: number,
deprecatedAnimated?: boolean,
deprecatedAnimated?: boolean,
);
```

Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.71/touchablenativefeedback.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -168,7 +168,7 @@ static SelectableBackground(
): ThemeAttributeBackgroundPropType;
```

Creates an object that represents android theme's default background for selectable elements (?android:attr/selectableItemBackground). `rippleRadius` parameter controls the radius of the ripple effect.
Creates an object that represents android theme's default background for selectable elements (`?android:attr/selectableItemBackground`). `rippleRadius` parameter controls the radius of the ripple effect.

---

Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.72/native-components-ios.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -286,7 +286,7 @@ RCT_EXPORT_VIEW_PROPERTY(onRegionChange, RCTBubblingEventBlock)

RCT_CUSTOM_VIEW_PROPERTY(region, MKCoordinateRegion, MKMapView)
{
[view setRegion:json ? [RCTConvert MKCoordinateRegion:json] : defaultView.region animated:YES];
[view setRegion:json ? [RCTConvert MKCoordinateRegion:json] : defaultView.region animated:YES];
}

- (UIView *)view
Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.72/profile-hermes.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -71,7 +71,7 @@ To open the profile in Chrome DevTools:
2. Select the **Performance** tab.
3. Right click and choose **Load profile...**

<img src="/docs/assets/openChromeProfile.png" alt="Loading a performance profile on Chrome DevTools" />
<img src="/docs/assets/openChromeProfile.png" alt="Loading a performance profile on Chrome DevTools" />

## How does the Hermes Profile Transformer work?

Expand Down

6 changes: 3 additions & 3 deletions
website/versioned_docs/version-0.72/pushnotificationios.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -402,9 +402,9 @@ See what push permissions are currently enabled.

`callback` will be invoked with a `permissions` object:

- `alert` :boolean
- `badge` :boolean
- `sound` :boolean
- `alert: boolean`
- `badge: boolean`
- `sound: boolean`

---

Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.72/scrollview.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -751,7 +751,7 @@ Displays the scroll indicators momentarily.
scrollTo(
 options?: {x?: number, y?: number, animated?: boolean} | number,
 deprecatedX?: number,
deprecatedAnimated?: boolean,
deprecatedAnimated?: boolean,
);
```

Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.72/touchablenativefeedback.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -168,7 +168,7 @@ static SelectableBackground(
): ThemeAttributeBackgroundPropType;
```

Creates an object that represents android theme's default background for selectable elements (?android:attr/selectableItemBackground). `rippleRadius` parameter controls the radius of the ripple effect.
Creates an object that represents android theme's default background for selectable elements (`?android:attr/selectableItemBackground`). `rippleRadius` parameter controls the radius of the ripple effect.

---

Expand Down

6 changes: 3 additions & 3 deletions
yarn.lock

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -10997,9 +10997,9 @@ prism-react-renderer@^1.3.5:
 integrity sha512-IJ+MSwBWKG+SM3b2SUfdrhC+gu01QkV2KmRQgREThBfSQRoufqRfxfHUxpG1WcaFjP+kojcFyO9Qqtpgt3qLCg==

prismjs@^1.28.0:
 version "1.28.0"
 resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.28.0.tgz#0d8f561fa0f7cf6ebca901747828b149147044b6"
 integrity sha512-8aaXdYvl1F7iC7Xm1spqSaY/OJBpYW3v+KJ+F17iYxvdc8sfjW194COK5wVhMZX45tGteiBQgdvD/nhxcRwylw==
 version "1.29.0"
@slorberslorberAug 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

minor update, the only impact I found in my visual tests was this change in Java code blocks:
CleanShot 2023-08-25 at 15 05 55@2x
 resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.29.0.tgz#f113555a8fa9b57c35e637bba27509dcf802dd12"
 integrity sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==

proc-log@^3.0.0:
 version "3.0.0"
Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
chore: prepare docs for Docusaurus v3 upgrade - 2nd iteration by slorber · Pull Request #3830 · react/react-native-website · GitHub
Skip to content
chore: prepare docs for Docusaurus v3 upgrade - 2nd iteration#3830

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

elicwhite
merged 14 commits into

from

Sep 1, 2023
 Merged


chore: prepare docs for Docusaurus v3 upgrade - 2nd iteration
#3830
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


14 commits


Select commit
Hold shift + click to select a range
2e5c5bb

Add quotes


slorber Aug 25, 2023
7f63f7d

Fix useless bold chars


slorber Aug 25, 2023
8194d1d

fix useless extra spacing


slorber Aug 25, 2023
ee6f7c0

fix useless extra spacing


slorber Aug 25, 2023
7501fae

avoid remark-directive syntax


slorber Aug 25, 2023
bda8552

fix scrollTo codeblock


slorber Aug 25, 2023
4667a2e

Avoid remark-directive syntax


slorber Aug 25, 2023
56797fd

code blocks, use space instead of tabs


slorber Aug 25, 2023
277a5a8

code blocks, use space instead of tabs


slorber Aug 25, 2023
9b45cc8

code blocks, use space instead of tabs


slorber Aug 25, 2023
4d7f8e9

code blocks, use space instead of tabs


slorber Aug 25, 2023
2311ae8

code blocks, use space instead of tabs


slorber Aug 25, 2023
0a2b794

Use React fragment for 2 consecutive images


slorber Aug 25, 2023
0e545b2

update prismjs


slorber Aug 25, 2023

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


2 changes: 1 addition & 1 deletion
docs/native-components-ios.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -286,7 +286,7 @@ RCT_EXPORT_VIEW_PROPERTY(onRegionChange, RCTBubblingEventBlock)

RCT_CUSTOM_VIEW_PROPERTY(region, MKCoordinateRegion, MKMapView)
{
[view setRegion:json ? [RCTConvert MKCoordinateRegion:json] : defaultView.region animated:YES];
[view setRegion:json ? [RCTConvert MKCoordinateRegion:json] : defaultView.region animated:YES];
@slorberslorberAug 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

replace tab with space + reduce indentation for consistency
Avoid this extra spacing when upgrading:
CleanShot 2023-08-25 at 13 07 16@2x
Before: https://reactnative.dev/docs/native-components-ios#events

After: https://deploy-preview-3830--react-native.netlify.app/docs/native-components-ios#events
}

- (UIView *)view
Expand Down

2 changes: 1 addition & 1 deletion
docs/profile-hermes.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -71,7 +71,7 @@ To open the profile in Chrome DevTools:
2. Select the **Performance** tab.
3. Right click and choose **Load profile...**

<img src="/docs/assets/openChromeProfile.png" alt="Loading a performance profile on Chrome DevTools" />
<img src="/docs/assets/openChromeProfile.png" alt="Loading a performance profile on Chrome DevTools" />
@slorberslorberAug 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

unwanted extra space change list + image layout
CleanShot 2023-08-25 at 12 46 31@2x
Before: https://reactnative.dev/docs/profile-hermes#open-the-downloaded-profile-in-chrome-devtools

After: https://deploy-preview-3830--react-native.netlify.app/docs/profile-hermes#open-the-downloaded-profile-in-chrome-devtools

## How does the Hermes Profile Transformer work?

Expand Down

6 changes: 3 additions & 3 deletions
docs/pushnotificationios.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -402,9 +402,9 @@ See what push permissions are currently enabled.

`callback` will be invoked with a `permissions` object:

- `alert` :boolean
- `badge` :boolean
- `sound` :boolean
- `alert: boolean`
- `badge: boolean`
- `sound: boolean`

Comment on lines

-405
 to 
+407

@slorberslorberAug 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

:xyz, ::xyz and :::xyz are "Markdown Directives" and we turn them on by default in Docusaurus v3 to bring admonition support.
This means you should avoid that in your code (unless escaped) otherwise those annotations will magically disappear when upgrading.
CleanShot 2023-08-25 at 12 47 37@2x
I think it's reasonable to make the boolean part of the inline code block
Before: https://reactnative.dev/docs/pushnotificationios#checkpermissions

After: https://deploy-preview-3830--react-native.netlify.app/docs/pushnotificationios#checkpermissions

---

Expand Down

2 changes: 1 addition & 1 deletion
docs/scrollview.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -751,7 +751,7 @@ Displays the scroll indicators momentarily.
scrollTo(
 options?: {x?: number, y?: number, animated?: boolean} | number,
 deprecatedX?: number,
deprecatedAnimated?: boolean,
deprecatedAnimated?: boolean,
@slorberslorberAug 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks like a typo
);
```

Expand Down

2 changes: 1 addition & 1 deletion
docs/touchablenativefeedback.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -168,7 +168,7 @@ static SelectableBackground(
): ThemeAttributeBackgroundPropType;
```

Creates an object that represents android theme's default background for selectable elements (?android:attr/selectableItemBackground). `rippleRadius` parameter controls the radius of the ripple effect.
Creates an object that represents android theme's default background for selectable elements (`?android:attr/selectableItemBackground`). `rippleRadius` parameter controls the radius of the ripple effect.
@slorberslorberAug 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Another "Markdown Directive", we want to avoid them, escape them or wrap them in code blocks.
Otherwise the upgrade will lead to:
CleanShot 2023-08-25 at 12 52 23@2x

---

Expand Down

2 changes: 1 addition & 1 deletion
website/architecture/render-pipeline.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -160,7 +160,7 @@ React Native renderer leverages structural sharing to minimize the overhead of i

In the above example, React creates the new tree using these operations:

1. CloneNode(**Node 3**, {backgroundColor: 'yellow'}) → **Node 3'**
1. CloneNode(**Node 3**, `{backgroundColor: 'yellow'}`) → **Node 3'**
@slorberslorberAug 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks reasonable to wrap in code block
{ will mess up with MDX 2 and require to be escaped
2. CloneNode(**Node 2**) → **Node 2'**
3. AppendChild(**Node 2'**, **Node 3'**)
4. AppendChild(**Node 2'**, **Node 4**)
Expand Down

9 changes: 5 additions & 4 deletions
website/blog/2016-08-19-right-to-left-support-for-react-native-apps.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -15,9 +15,10 @@ 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:

<>
<img src="/blog/assets/rtl-ama-ios-arabic.png" width={280} style={{ margin: 10 }} />

<img src="/blog/assets/rtl-ama-android-hebrew.png" width={280} style={{ margin: 10 }} />
</>

Comment on lines

+18
 to 
+21

@slorberslorberAug 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Adding a fragment here permits to avoid having an extra useless \n char when upgrading to MDX v2.
CleanShot 2023-08-25 at 14 51 24@2x
https://twitter.com/badsyntax/status/1695041116893036746
In practice it's not super impactful, but this change will ensure the 2 images look exactly the same before/after the MDX v2 upgrade.

## Overview Changes in RN for RTL support

Expand DownExpand Up@@ -53,15 +54,15 @@ With this update, when you allow RTL layout for your app:

 ```objc
 // in AppDelegate.m
[[RCTI18nUtil sharedInstance] allowRTL:YES];
[[RCTI18nUtil sharedInstance] allowRTL:YES];
 ```

 Android:

 ```java
 // in MainActivity.java
I18nUtil sharedI18nUtilInstance = I18nUtil.getInstance();
sharedI18nUtilInstance.allowRTL(context, true);
I18nUtil sharedI18nUtilInstance = I18nUtil.getInstance();
sharedI18nUtilInstance.allowRTL(context, true);

Comment on lines

-56
 to 
+65

@slorberslorberAug 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Replace tabs with spaces for consistency + avoid extra spacing appearing when upgrading:
CleanShot 2023-08-25 at 13 02 33@2x
 ```

3. For Android, you need add `android:supportsRtl="true"` to the [`<application>`](https://developer.android.com/guide/topics/manifest/application-element.html) element in `AndroidManifest.xml` file.
Expand Down

50 changes: 25 additions & 25 deletions
website/blog/2016-12-05-easier-upgrades.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -65,40 +65,40 @@ index e98ebb0..2fb6a11 100644
--- a/ios/MyAwesomeApp/Info.plist
+++ b/ios/MyAwesomeApp/Info.plist
@@ -45,7 +45,7 @@
<dict>
<key>localhost</key>
<dict>
-<key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
+<key>NSExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
</dict>
<dict>
<key>localhost</key>
<dict>
-<key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
+<key>NSExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
</dict>
[...]
```

All we need now is to apply this patch to your source files. While the old `react-native upgrade` process would have prompted you for any small difference, Git is able to merge most of the changes automatically using its 3-way merge algorithm and eventually leave us with familiar conflict delimiters:

```
13B07F951A680F5B00A75B9A /* Release */ = {
isa = XCBuildConfiguration;
buildSettings = {
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
13B07F951A680F5B00A75B9A /* Release */ = {
isa = XCBuildConfiguration;
buildSettings = {
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
<<<<<<< ours
CODE_SIGN_IDENTITY = "iPhone Developer";
FRAMEWORK_SEARCH_PATHS = (
"$(inherited)",
"$(PROJECT_DIR)/HockeySDK.embeddedframework",
"$(PROJECT_DIR)/HockeySDK-iOS/HockeySDK.embeddedframework",
);
CODE_SIGN_IDENTITY = "iPhone Developer";
FRAMEWORK_SEARCH_PATHS = (
"$(inherited)",
"$(PROJECT_DIR)/HockeySDK.embeddedframework",
"$(PROJECT_DIR)/HockeySDK-iOS/HockeySDK.embeddedframework",
);
=======
CURRENT_PROJECT_VERSION = 1;
CURRENT_PROJECT_VERSION = 1;
>>>>>>> theirs
HEADER_SEARCH_PATHS = (
"$(inherited)",
/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
"$(SRCROOT)/../node_modules/react-native/React/**",
"$(SRCROOT)/../node_modules/react-native-code-push/ios/CodePush/**",
);
HEADER_SEARCH_PATHS = (
"$(inherited)",
/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
"$(SRCROOT)/../node_modules/react-native/React/**",
"$(SRCROOT)/../node_modules/react-native-code-push/ios/CodePush/**",
);
```

Comment on lines

68
 to 
102

@slorberslorberAug 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Replace tabs with space for consistency
Avoid this unwanted extra spacing when upgrading:
CleanShot 2023-08-25 at 13 05 42@2x
Before: https://reactnative.dev/blog/2016/12/05/easier-upgrades#how-does-it-work

After: https://deploy-preview-3830--react-native.netlify.app/blog/2016/12/05/easier-upgrades#how-does-it-work

These conflicts are generally easy to reason about. The delimiter **ours** stands for "your team" whereas **theirs** could be seen as "the React Native team".
Expand Down

2 changes: 1 addition & 1 deletion
website/blog/2021-09-01-preparing-your-app-for-iOS-15-and-android-12.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -65,7 +65,7 @@ Android 12 introduces new [overscroll effect](https://developer.android.com/abou

#### Permission Updates

Android 12 allows users of your app to only provide access to the approximate location if you request it with **`ACCESS_FINE_LOCATION`** permission**.** Learn more about it [here](https://developer.android.com/about/versions/12/approximate-location).
Android 12 allows users of your app to only provide access to the approximate location if you request it with **`ACCESS_FINE_LOCATION`** permission. Learn more about it [here](https://developer.android.com/about/versions/12/approximate-location).
@slorberslorberAug 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks like a typo

Check out Google’s [detailed behavior changes](https://developer.android.com/about/versions/12/behavior-changes-all) for all apps running on Android 12.

Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.70/native-components-ios.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -286,7 +286,7 @@ RCT_EXPORT_VIEW_PROPERTY(onRegionChange, RCTBubblingEventBlock)

RCT_CUSTOM_VIEW_PROPERTY(region, MKCoordinateRegion, MKMapView)
{
[view setRegion:json ? [RCTConvert MKCoordinateRegion:json] : defaultView.region animated:YES];
[view setRegion:json ? [RCTConvert MKCoordinateRegion:json] : defaultView.region animated:YES];
}

- (UIView *)view
Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.70/profile-hermes.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -93,7 +93,7 @@ To open the profile in Chrome DevTools:
2. Select the **Performance** tab.
3. Right click and choose **Load profile...**

<img src="/docs/assets/openChromeProfile.png" alt="Loading a performance profile on Chrome DevTools" />
<img src="/docs/assets/openChromeProfile.png" alt="Loading a performance profile on Chrome DevTools" />

## How does the Hermes Profile Transformer work?

Expand Down

6 changes: 3 additions & 3 deletions
website/versioned_docs/version-0.70/pushnotificationios.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -386,9 +386,9 @@ See what push permissions are currently enabled.

`callback` will be invoked with a `permissions` object:

- `alert` :boolean
- `badge` :boolean
- `sound` :boolean
- `alert: boolean`
- `badge: boolean`
- `sound: boolean`

---

Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.70/scrollview.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -745,7 +745,7 @@ Displays the scroll indicators momentarily.
scrollTo(
 options?: { x?: number, y?: number, animated?: boolean } | number,
 deprecatedX?: number,
deprecatedAnimated?: boolean,
deprecatedAnimated?: boolean,
);
```

Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.70/touchablenativefeedback.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -158,7 +158,7 @@ TV next focus up (see documentation for the View component).
static SelectableBackground(rippleRadius: ?number)
```

Creates an object that represents android theme's default background for selectable elements (?android:attr/selectableItemBackground). `rippleRadius` parameter controls the radius of the ripple effect.
Creates an object that represents android theme's default background for selectable elements (`?android:attr/selectableItemBackground`). `rippleRadius` parameter controls the radius of the ripple effect.

---

Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.71/native-components-ios.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -286,7 +286,7 @@ RCT_EXPORT_VIEW_PROPERTY(onRegionChange, RCTBubblingEventBlock)

RCT_CUSTOM_VIEW_PROPERTY(region, MKCoordinateRegion, MKMapView)
{
[view setRegion:json ? [RCTConvert MKCoordinateRegion:json] : defaultView.region animated:YES];
[view setRegion:json ? [RCTConvert MKCoordinateRegion:json] : defaultView.region animated:YES];
}

- (UIView *)view
Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.71/profile-hermes.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -71,7 +71,7 @@ To open the profile in Chrome DevTools:
2. Select the **Performance** tab.
3. Right click and choose **Load profile...**

<img src="/docs/assets/openChromeProfile.png" alt="Loading a performance profile on Chrome DevTools" />
<img src="/docs/assets/openChromeProfile.png" alt="Loading a performance profile on Chrome DevTools" />

## How does the Hermes Profile Transformer work?

Expand Down

6 changes: 3 additions & 3 deletions
website/versioned_docs/version-0.71/pushnotificationios.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -402,9 +402,9 @@ See what push permissions are currently enabled.

`callback` will be invoked with a `permissions` object:

- `alert` :boolean
- `badge` :boolean
- `sound` :boolean
- `alert: boolean`
- `badge: boolean`
- `sound: boolean`

---

Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.71/scrollview.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -751,7 +751,7 @@ Displays the scroll indicators momentarily.
scrollTo(
 options?: {x?: number, y?: number, animated?: boolean} | number,
 deprecatedX?: number,
deprecatedAnimated?: boolean,
deprecatedAnimated?: boolean,
);
```

Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.71/touchablenativefeedback.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -168,7 +168,7 @@ static SelectableBackground(
): ThemeAttributeBackgroundPropType;
```

Creates an object that represents android theme's default background for selectable elements (?android:attr/selectableItemBackground). `rippleRadius` parameter controls the radius of the ripple effect.
Creates an object that represents android theme's default background for selectable elements (`?android:attr/selectableItemBackground`). `rippleRadius` parameter controls the radius of the ripple effect.

---

Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.72/native-components-ios.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -286,7 +286,7 @@ RCT_EXPORT_VIEW_PROPERTY(onRegionChange, RCTBubblingEventBlock)

RCT_CUSTOM_VIEW_PROPERTY(region, MKCoordinateRegion, MKMapView)
{
[view setRegion:json ? [RCTConvert MKCoordinateRegion:json] : defaultView.region animated:YES];
[view setRegion:json ? [RCTConvert MKCoordinateRegion:json] : defaultView.region animated:YES];
}

- (UIView *)view
Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.72/profile-hermes.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -71,7 +71,7 @@ To open the profile in Chrome DevTools:
2. Select the **Performance** tab.
3. Right click and choose **Load profile...**

<img src="/docs/assets/openChromeProfile.png" alt="Loading a performance profile on Chrome DevTools" />
<img src="/docs/assets/openChromeProfile.png" alt="Loading a performance profile on Chrome DevTools" />

## How does the Hermes Profile Transformer work?

Expand Down

6 changes: 3 additions & 3 deletions
website/versioned_docs/version-0.72/pushnotificationios.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -402,9 +402,9 @@ See what push permissions are currently enabled.

`callback` will be invoked with a `permissions` object:

- `alert` :boolean
- `badge` :boolean
- `sound` :boolean
- `alert: boolean`
- `badge: boolean`
- `sound: boolean`

---

Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.72/scrollview.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -751,7 +751,7 @@ Displays the scroll indicators momentarily.
scrollTo(
 options?: {x?: number, y?: number, animated?: boolean} | number,
 deprecatedX?: number,
deprecatedAnimated?: boolean,
deprecatedAnimated?: boolean,
);
```

Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.72/touchablenativefeedback.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -168,7 +168,7 @@ static SelectableBackground(
): ThemeAttributeBackgroundPropType;
```

Creates an object that represents android theme's default background for selectable elements (?android:attr/selectableItemBackground). `rippleRadius` parameter controls the radius of the ripple effect.
Creates an object that represents android theme's default background for selectable elements (`?android:attr/selectableItemBackground`). `rippleRadius` parameter controls the radius of the ripple effect.

---

Expand Down

6 changes: 3 additions & 3 deletions
yarn.lock

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -10997,9 +10997,9 @@ prism-react-renderer@^1.3.5:
 integrity sha512-IJ+MSwBWKG+SM3b2SUfdrhC+gu01QkV2KmRQgREThBfSQRoufqRfxfHUxpG1WcaFjP+kojcFyO9Qqtpgt3qLCg==

prismjs@^1.28.0:
 version "1.28.0"
 resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.28.0.tgz#0d8f561fa0f7cf6ebca901747828b149147044b6"
 integrity sha512-8aaXdYvl1F7iC7Xm1spqSaY/OJBpYW3v+KJ+F17iYxvdc8sfjW194COK5wVhMZX45tGteiBQgdvD/nhxcRwylw==
 version "1.29.0"
@slorberslorberAug 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

minor update, the only impact I found in my visual tests was this change in Java code blocks:
CleanShot 2023-08-25 at 15 05 55@2x
 resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.29.0.tgz#f113555a8fa9b57c35e637bba27509dcf802dd12"
 integrity sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==

proc-log@^3.0.0:
 version "3.0.0"
Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
chore: prepare docs for Docusaurus v3 upgrade - 2nd iteration by slorber · Pull Request #3830 · react/react-native-website · GitHub
Skip to content
chore: prepare docs for Docusaurus v3 upgrade - 2nd iteration#3830

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

elicwhite
merged 14 commits into

from

Sep 1, 2023
 Merged


chore: prepare docs for Docusaurus v3 upgrade - 2nd iteration
#3830
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


14 commits


Select commit
Hold shift + click to select a range
2e5c5bb

Add quotes


slorber Aug 25, 2023
7f63f7d

Fix useless bold chars


slorber Aug 25, 2023
8194d1d

fix useless extra spacing


slorber Aug 25, 2023
ee6f7c0

fix useless extra spacing


slorber Aug 25, 2023
7501fae

avoid remark-directive syntax


slorber Aug 25, 2023
bda8552

fix scrollTo codeblock


slorber Aug 25, 2023
4667a2e

Avoid remark-directive syntax


slorber Aug 25, 2023
56797fd

code blocks, use space instead of tabs


slorber Aug 25, 2023
277a5a8

code blocks, use space instead of tabs


slorber Aug 25, 2023
9b45cc8

code blocks, use space instead of tabs


slorber Aug 25, 2023
4d7f8e9

code blocks, use space instead of tabs


slorber Aug 25, 2023
2311ae8

code blocks, use space instead of tabs


slorber Aug 25, 2023
0a2b794

Use React fragment for 2 consecutive images


slorber Aug 25, 2023
0e545b2

update prismjs


slorber Aug 25, 2023

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


2 changes: 1 addition & 1 deletion
docs/native-components-ios.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -286,7 +286,7 @@ RCT_EXPORT_VIEW_PROPERTY(onRegionChange, RCTBubblingEventBlock)

RCT_CUSTOM_VIEW_PROPERTY(region, MKCoordinateRegion, MKMapView)
{
[view setRegion:json ? [RCTConvert MKCoordinateRegion:json] : defaultView.region animated:YES];
[view setRegion:json ? [RCTConvert MKCoordinateRegion:json] : defaultView.region animated:YES];
@slorberslorberAug 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

replace tab with space + reduce indentation for consistency
Avoid this extra spacing when upgrading:
CleanShot 2023-08-25 at 13 07 16@2x
Before: https://reactnative.dev/docs/native-components-ios#events

After: https://deploy-preview-3830--react-native.netlify.app/docs/native-components-ios#events
}

- (UIView *)view
Expand Down

2 changes: 1 addition & 1 deletion
docs/profile-hermes.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -71,7 +71,7 @@ To open the profile in Chrome DevTools:
2. Select the **Performance** tab.
3. Right click and choose **Load profile...**

<img src="/docs/assets/openChromeProfile.png" alt="Loading a performance profile on Chrome DevTools" />
<img src="/docs/assets/openChromeProfile.png" alt="Loading a performance profile on Chrome DevTools" />
@slorberslorberAug 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

unwanted extra space change list + image layout
CleanShot 2023-08-25 at 12 46 31@2x
Before: https://reactnative.dev/docs/profile-hermes#open-the-downloaded-profile-in-chrome-devtools

After: https://deploy-preview-3830--react-native.netlify.app/docs/profile-hermes#open-the-downloaded-profile-in-chrome-devtools

## How does the Hermes Profile Transformer work?

Expand Down

6 changes: 3 additions & 3 deletions
docs/pushnotificationios.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -402,9 +402,9 @@ See what push permissions are currently enabled.

`callback` will be invoked with a `permissions` object:

- `alert` :boolean
- `badge` :boolean
- `sound` :boolean
- `alert: boolean`
- `badge: boolean`
- `sound: boolean`

Comment on lines

-405
 to 
+407

@slorberslorberAug 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

:xyz, ::xyz and :::xyz are "Markdown Directives" and we turn them on by default in Docusaurus v3 to bring admonition support.
This means you should avoid that in your code (unless escaped) otherwise those annotations will magically disappear when upgrading.
CleanShot 2023-08-25 at 12 47 37@2x
I think it's reasonable to make the boolean part of the inline code block
Before: https://reactnative.dev/docs/pushnotificationios#checkpermissions

After: https://deploy-preview-3830--react-native.netlify.app/docs/pushnotificationios#checkpermissions

---

Expand Down

2 changes: 1 addition & 1 deletion
docs/scrollview.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -751,7 +751,7 @@ Displays the scroll indicators momentarily.
scrollTo(
 options?: {x?: number, y?: number, animated?: boolean} | number,
 deprecatedX?: number,
deprecatedAnimated?: boolean,
deprecatedAnimated?: boolean,
@slorberslorberAug 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks like a typo
);
```

Expand Down

2 changes: 1 addition & 1 deletion
docs/touchablenativefeedback.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -168,7 +168,7 @@ static SelectableBackground(
): ThemeAttributeBackgroundPropType;
```

Creates an object that represents android theme's default background for selectable elements (?android:attr/selectableItemBackground). `rippleRadius` parameter controls the radius of the ripple effect.
Creates an object that represents android theme's default background for selectable elements (`?android:attr/selectableItemBackground`). `rippleRadius` parameter controls the radius of the ripple effect.
@slorberslorberAug 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Another "Markdown Directive", we want to avoid them, escape them or wrap them in code blocks.
Otherwise the upgrade will lead to:
CleanShot 2023-08-25 at 12 52 23@2x

---

Expand Down

2 changes: 1 addition & 1 deletion
website/architecture/render-pipeline.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -160,7 +160,7 @@ React Native renderer leverages structural sharing to minimize the overhead of i

In the above example, React creates the new tree using these operations:

1. CloneNode(**Node 3**, {backgroundColor: 'yellow'}) → **Node 3'**
1. CloneNode(**Node 3**, `{backgroundColor: 'yellow'}`) → **Node 3'**
@slorberslorberAug 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks reasonable to wrap in code block
{ will mess up with MDX 2 and require to be escaped
2. CloneNode(**Node 2**) → **Node 2'**
3. AppendChild(**Node 2'**, **Node 3'**)
4. AppendChild(**Node 2'**, **Node 4**)
Expand Down

9 changes: 5 additions & 4 deletions
website/blog/2016-08-19-right-to-left-support-for-react-native-apps.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -15,9 +15,10 @@ 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:

<>
<img src="/blog/assets/rtl-ama-ios-arabic.png" width={280} style={{ margin: 10 }} />

<img src="/blog/assets/rtl-ama-android-hebrew.png" width={280} style={{ margin: 10 }} />
</>

Comment on lines

+18
 to 
+21

@slorberslorberAug 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Adding a fragment here permits to avoid having an extra useless \n char when upgrading to MDX v2.
CleanShot 2023-08-25 at 14 51 24@2x
https://twitter.com/badsyntax/status/1695041116893036746
In practice it's not super impactful, but this change will ensure the 2 images look exactly the same before/after the MDX v2 upgrade.

## Overview Changes in RN for RTL support

Expand DownExpand Up@@ -53,15 +54,15 @@ With this update, when you allow RTL layout for your app:

 ```objc
 // in AppDelegate.m
[[RCTI18nUtil sharedInstance] allowRTL:YES];
[[RCTI18nUtil sharedInstance] allowRTL:YES];
 ```

 Android:

 ```java
 // in MainActivity.java
I18nUtil sharedI18nUtilInstance = I18nUtil.getInstance();
sharedI18nUtilInstance.allowRTL(context, true);
I18nUtil sharedI18nUtilInstance = I18nUtil.getInstance();
sharedI18nUtilInstance.allowRTL(context, true);

Comment on lines

-56
 to 
+65

@slorberslorberAug 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Replace tabs with spaces for consistency + avoid extra spacing appearing when upgrading:
CleanShot 2023-08-25 at 13 02 33@2x
 ```

3. For Android, you need add `android:supportsRtl="true"` to the [`<application>`](https://developer.android.com/guide/topics/manifest/application-element.html) element in `AndroidManifest.xml` file.
Expand Down

50 changes: 25 additions & 25 deletions
website/blog/2016-12-05-easier-upgrades.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -65,40 +65,40 @@ index e98ebb0..2fb6a11 100644
--- a/ios/MyAwesomeApp/Info.plist
+++ b/ios/MyAwesomeApp/Info.plist
@@ -45,7 +45,7 @@
<dict>
<key>localhost</key>
<dict>
-<key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
+<key>NSExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
</dict>
<dict>
<key>localhost</key>
<dict>
-<key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
+<key>NSExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
</dict>
[...]
```

All we need now is to apply this patch to your source files. While the old `react-native upgrade` process would have prompted you for any small difference, Git is able to merge most of the changes automatically using its 3-way merge algorithm and eventually leave us with familiar conflict delimiters:

```
13B07F951A680F5B00A75B9A /* Release */ = {
isa = XCBuildConfiguration;
buildSettings = {
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
13B07F951A680F5B00A75B9A /* Release */ = {
isa = XCBuildConfiguration;
buildSettings = {
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
<<<<<<< ours
CODE_SIGN_IDENTITY = "iPhone Developer";
FRAMEWORK_SEARCH_PATHS = (
"$(inherited)",
"$(PROJECT_DIR)/HockeySDK.embeddedframework",
"$(PROJECT_DIR)/HockeySDK-iOS/HockeySDK.embeddedframework",
);
CODE_SIGN_IDENTITY = "iPhone Developer";
FRAMEWORK_SEARCH_PATHS = (
"$(inherited)",
"$(PROJECT_DIR)/HockeySDK.embeddedframework",
"$(PROJECT_DIR)/HockeySDK-iOS/HockeySDK.embeddedframework",
);
=======
CURRENT_PROJECT_VERSION = 1;
CURRENT_PROJECT_VERSION = 1;
>>>>>>> theirs
HEADER_SEARCH_PATHS = (
"$(inherited)",
/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
"$(SRCROOT)/../node_modules/react-native/React/**",
"$(SRCROOT)/../node_modules/react-native-code-push/ios/CodePush/**",
);
HEADER_SEARCH_PATHS = (
"$(inherited)",
/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
"$(SRCROOT)/../node_modules/react-native/React/**",
"$(SRCROOT)/../node_modules/react-native-code-push/ios/CodePush/**",
);
```

Comment on lines

68
 to 
102

@slorberslorberAug 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Replace tabs with space for consistency
Avoid this unwanted extra spacing when upgrading:
CleanShot 2023-08-25 at 13 05 42@2x
Before: https://reactnative.dev/blog/2016/12/05/easier-upgrades#how-does-it-work

After: https://deploy-preview-3830--react-native.netlify.app/blog/2016/12/05/easier-upgrades#how-does-it-work

These conflicts are generally easy to reason about. The delimiter **ours** stands for "your team" whereas **theirs** could be seen as "the React Native team".
Expand Down

2 changes: 1 addition & 1 deletion
website/blog/2021-09-01-preparing-your-app-for-iOS-15-and-android-12.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -65,7 +65,7 @@ Android 12 introduces new [overscroll effect](https://developer.android.com/abou

#### Permission Updates

Android 12 allows users of your app to only provide access to the approximate location if you request it with **`ACCESS_FINE_LOCATION`** permission**.** Learn more about it [here](https://developer.android.com/about/versions/12/approximate-location).
Android 12 allows users of your app to only provide access to the approximate location if you request it with **`ACCESS_FINE_LOCATION`** permission. Learn more about it [here](https://developer.android.com/about/versions/12/approximate-location).
@slorberslorberAug 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks like a typo

Check out Google’s [detailed behavior changes](https://developer.android.com/about/versions/12/behavior-changes-all) for all apps running on Android 12.

Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.70/native-components-ios.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -286,7 +286,7 @@ RCT_EXPORT_VIEW_PROPERTY(onRegionChange, RCTBubblingEventBlock)

RCT_CUSTOM_VIEW_PROPERTY(region, MKCoordinateRegion, MKMapView)
{
[view setRegion:json ? [RCTConvert MKCoordinateRegion:json] : defaultView.region animated:YES];
[view setRegion:json ? [RCTConvert MKCoordinateRegion:json] : defaultView.region animated:YES];
}

- (UIView *)view
Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.70/profile-hermes.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -93,7 +93,7 @@ To open the profile in Chrome DevTools:
2. Select the **Performance** tab.
3. Right click and choose **Load profile...**

<img src="/docs/assets/openChromeProfile.png" alt="Loading a performance profile on Chrome DevTools" />
<img src="/docs/assets/openChromeProfile.png" alt="Loading a performance profile on Chrome DevTools" />

## How does the Hermes Profile Transformer work?

Expand Down

6 changes: 3 additions & 3 deletions
website/versioned_docs/version-0.70/pushnotificationios.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -386,9 +386,9 @@ See what push permissions are currently enabled.

`callback` will be invoked with a `permissions` object:

- `alert` :boolean
- `badge` :boolean
- `sound` :boolean
- `alert: boolean`
- `badge: boolean`
- `sound: boolean`

---

Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.70/scrollview.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -745,7 +745,7 @@ Displays the scroll indicators momentarily.
scrollTo(
 options?: { x?: number, y?: number, animated?: boolean } | number,
 deprecatedX?: number,
deprecatedAnimated?: boolean,
deprecatedAnimated?: boolean,
);
```

Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.70/touchablenativefeedback.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -158,7 +158,7 @@ TV next focus up (see documentation for the View component).
static SelectableBackground(rippleRadius: ?number)
```

Creates an object that represents android theme's default background for selectable elements (?android:attr/selectableItemBackground). `rippleRadius` parameter controls the radius of the ripple effect.
Creates an object that represents android theme's default background for selectable elements (`?android:attr/selectableItemBackground`). `rippleRadius` parameter controls the radius of the ripple effect.

---

Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.71/native-components-ios.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -286,7 +286,7 @@ RCT_EXPORT_VIEW_PROPERTY(onRegionChange, RCTBubblingEventBlock)

RCT_CUSTOM_VIEW_PROPERTY(region, MKCoordinateRegion, MKMapView)
{
[view setRegion:json ? [RCTConvert MKCoordinateRegion:json] : defaultView.region animated:YES];
[view setRegion:json ? [RCTConvert MKCoordinateRegion:json] : defaultView.region animated:YES];
}

- (UIView *)view
Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.71/profile-hermes.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -71,7 +71,7 @@ To open the profile in Chrome DevTools:
2. Select the **Performance** tab.
3. Right click and choose **Load profile...**

<img src="/docs/assets/openChromeProfile.png" alt="Loading a performance profile on Chrome DevTools" />
<img src="/docs/assets/openChromeProfile.png" alt="Loading a performance profile on Chrome DevTools" />

## How does the Hermes Profile Transformer work?

Expand Down

6 changes: 3 additions & 3 deletions
website/versioned_docs/version-0.71/pushnotificationios.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -402,9 +402,9 @@ See what push permissions are currently enabled.

`callback` will be invoked with a `permissions` object:

- `alert` :boolean
- `badge` :boolean
- `sound` :boolean
- `alert: boolean`
- `badge: boolean`
- `sound: boolean`

---

Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.71/scrollview.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -751,7 +751,7 @@ Displays the scroll indicators momentarily.
scrollTo(
 options?: {x?: number, y?: number, animated?: boolean} | number,
 deprecatedX?: number,
deprecatedAnimated?: boolean,
deprecatedAnimated?: boolean,
);
```

Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.71/touchablenativefeedback.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -168,7 +168,7 @@ static SelectableBackground(
): ThemeAttributeBackgroundPropType;
```

Creates an object that represents android theme's default background for selectable elements (?android:attr/selectableItemBackground). `rippleRadius` parameter controls the radius of the ripple effect.
Creates an object that represents android theme's default background for selectable elements (`?android:attr/selectableItemBackground`). `rippleRadius` parameter controls the radius of the ripple effect.

---

Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.72/native-components-ios.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -286,7 +286,7 @@ RCT_EXPORT_VIEW_PROPERTY(onRegionChange, RCTBubblingEventBlock)

RCT_CUSTOM_VIEW_PROPERTY(region, MKCoordinateRegion, MKMapView)
{
[view setRegion:json ? [RCTConvert MKCoordinateRegion:json] : defaultView.region animated:YES];
[view setRegion:json ? [RCTConvert MKCoordinateRegion:json] : defaultView.region animated:YES];
}

- (UIView *)view
Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.72/profile-hermes.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -71,7 +71,7 @@ To open the profile in Chrome DevTools:
2. Select the **Performance** tab.
3. Right click and choose **Load profile...**

<img src="/docs/assets/openChromeProfile.png" alt="Loading a performance profile on Chrome DevTools" />
<img src="/docs/assets/openChromeProfile.png" alt="Loading a performance profile on Chrome DevTools" />

## How does the Hermes Profile Transformer work?

Expand Down

6 changes: 3 additions & 3 deletions
website/versioned_docs/version-0.72/pushnotificationios.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -402,9 +402,9 @@ See what push permissions are currently enabled.

`callback` will be invoked with a `permissions` object:

- `alert` :boolean
- `badge` :boolean
- `sound` :boolean
- `alert: boolean`
- `badge: boolean`
- `sound: boolean`

---

Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.72/scrollview.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -751,7 +751,7 @@ Displays the scroll indicators momentarily.
scrollTo(
 options?: {x?: number, y?: number, animated?: boolean} | number,
 deprecatedX?: number,
deprecatedAnimated?: boolean,
deprecatedAnimated?: boolean,
);
```

Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.72/touchablenativefeedback.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -168,7 +168,7 @@ static SelectableBackground(
): ThemeAttributeBackgroundPropType;
```

Creates an object that represents android theme's default background for selectable elements (?android:attr/selectableItemBackground). `rippleRadius` parameter controls the radius of the ripple effect.
Creates an object that represents android theme's default background for selectable elements (`?android:attr/selectableItemBackground`). `rippleRadius` parameter controls the radius of the ripple effect.

---

Expand Down

6 changes: 3 additions & 3 deletions
yarn.lock

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -10997,9 +10997,9 @@ prism-react-renderer@^1.3.5:
 integrity sha512-IJ+MSwBWKG+SM3b2SUfdrhC+gu01QkV2KmRQgREThBfSQRoufqRfxfHUxpG1WcaFjP+kojcFyO9Qqtpgt3qLCg==

prismjs@^1.28.0:
 version "1.28.0"
 resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.28.0.tgz#0d8f561fa0f7cf6ebca901747828b149147044b6"
 integrity sha512-8aaXdYvl1F7iC7Xm1spqSaY/OJBpYW3v+KJ+F17iYxvdc8sfjW194COK5wVhMZX45tGteiBQgdvD/nhxcRwylw==
 version "1.29.0"
@slorberslorberAug 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

minor update, the only impact I found in my visual tests was this change in Java code blocks:
CleanShot 2023-08-25 at 15 05 55@2x
 resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.29.0.tgz#f113555a8fa9b57c35e637bba27509dcf802dd12"
 integrity sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==

proc-log@^3.0.0:
 version "3.0.0"
Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '
chore: prepare docs for Docusaurus v3 upgrade - 2nd iteration by slorber · Pull Request #3830 · react/react-native-website · GitHub
Skip to content
chore: prepare docs for Docusaurus v3 upgrade - 2nd iteration#3830

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

elicwhite
merged 14 commits into

from

Sep 1, 2023
 Merged


chore: prepare docs for Docusaurus v3 upgrade - 2nd iteration
#3830
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


14 commits


Select commit
Hold shift + click to select a range
2e5c5bb

Add quotes


slorber Aug 25, 2023
7f63f7d

Fix useless bold chars


slorber Aug 25, 2023
8194d1d

fix useless extra spacing


slorber Aug 25, 2023
ee6f7c0

fix useless extra spacing


slorber Aug 25, 2023
7501fae

avoid remark-directive syntax


slorber Aug 25, 2023
bda8552

fix scrollTo codeblock


slorber Aug 25, 2023
4667a2e

Avoid remark-directive syntax


slorber Aug 25, 2023
56797fd

code blocks, use space instead of tabs


slorber Aug 25, 2023
277a5a8

code blocks, use space instead of tabs


slorber Aug 25, 2023
9b45cc8

code blocks, use space instead of tabs


slorber Aug 25, 2023
4d7f8e9

code blocks, use space instead of tabs


slorber Aug 25, 2023
2311ae8

code blocks, use space instead of tabs


slorber Aug 25, 2023
0a2b794

Use React fragment for 2 consecutive images


slorber Aug 25, 2023
0e545b2

update prismjs


slorber Aug 25, 2023

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


2 changes: 1 addition & 1 deletion
docs/native-components-ios.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -286,7 +286,7 @@ RCT_EXPORT_VIEW_PROPERTY(onRegionChange, RCTBubblingEventBlock)

RCT_CUSTOM_VIEW_PROPERTY(region, MKCoordinateRegion, MKMapView)
{
[view setRegion:json ? [RCTConvert MKCoordinateRegion:json] : defaultView.region animated:YES];
[view setRegion:json ? [RCTConvert MKCoordinateRegion:json] : defaultView.region animated:YES];
@slorberslorberAug 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

replace tab with space + reduce indentation for consistency
Avoid this extra spacing when upgrading:
CleanShot 2023-08-25 at 13 07 16@2x
Before: https://reactnative.dev/docs/native-components-ios#events

After: https://deploy-preview-3830--react-native.netlify.app/docs/native-components-ios#events
}

- (UIView *)view
Expand Down

2 changes: 1 addition & 1 deletion
docs/profile-hermes.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -71,7 +71,7 @@ To open the profile in Chrome DevTools:
2. Select the **Performance** tab.
3. Right click and choose **Load profile...**

<img src="/docs/assets/openChromeProfile.png" alt="Loading a performance profile on Chrome DevTools" />
<img src="/docs/assets/openChromeProfile.png" alt="Loading a performance profile on Chrome DevTools" />
@slorberslorberAug 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

unwanted extra space change list + image layout
CleanShot 2023-08-25 at 12 46 31@2x
Before: https://reactnative.dev/docs/profile-hermes#open-the-downloaded-profile-in-chrome-devtools

After: https://deploy-preview-3830--react-native.netlify.app/docs/profile-hermes#open-the-downloaded-profile-in-chrome-devtools

## How does the Hermes Profile Transformer work?

Expand Down

6 changes: 3 additions & 3 deletions
docs/pushnotificationios.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -402,9 +402,9 @@ See what push permissions are currently enabled.

`callback` will be invoked with a `permissions` object:

- `alert` :boolean
- `badge` :boolean
- `sound` :boolean
- `alert: boolean`
- `badge: boolean`
- `sound: boolean`

Comment on lines

-405
 to 
+407

@slorberslorberAug 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

:xyz, ::xyz and :::xyz are "Markdown Directives" and we turn them on by default in Docusaurus v3 to bring admonition support.
This means you should avoid that in your code (unless escaped) otherwise those annotations will magically disappear when upgrading.
CleanShot 2023-08-25 at 12 47 37@2x
I think it's reasonable to make the boolean part of the inline code block
Before: https://reactnative.dev/docs/pushnotificationios#checkpermissions

After: https://deploy-preview-3830--react-native.netlify.app/docs/pushnotificationios#checkpermissions

---

Expand Down

2 changes: 1 addition & 1 deletion
docs/scrollview.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -751,7 +751,7 @@ Displays the scroll indicators momentarily.
scrollTo(
 options?: {x?: number, y?: number, animated?: boolean} | number,
 deprecatedX?: number,
deprecatedAnimated?: boolean,
deprecatedAnimated?: boolean,
@slorberslorberAug 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks like a typo
);
```

Expand Down

2 changes: 1 addition & 1 deletion
docs/touchablenativefeedback.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -168,7 +168,7 @@ static SelectableBackground(
): ThemeAttributeBackgroundPropType;
```

Creates an object that represents android theme's default background for selectable elements (?android:attr/selectableItemBackground). `rippleRadius` parameter controls the radius of the ripple effect.
Creates an object that represents android theme's default background for selectable elements (`?android:attr/selectableItemBackground`). `rippleRadius` parameter controls the radius of the ripple effect.
@slorberslorberAug 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Another "Markdown Directive", we want to avoid them, escape them or wrap them in code blocks.
Otherwise the upgrade will lead to:
CleanShot 2023-08-25 at 12 52 23@2x

---

Expand Down

2 changes: 1 addition & 1 deletion
website/architecture/render-pipeline.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -160,7 +160,7 @@ React Native renderer leverages structural sharing to minimize the overhead of i

In the above example, React creates the new tree using these operations:

1. CloneNode(**Node 3**, {backgroundColor: 'yellow'}) → **Node 3'**
1. CloneNode(**Node 3**, `{backgroundColor: 'yellow'}`) → **Node 3'**
@slorberslorberAug 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks reasonable to wrap in code block
{ will mess up with MDX 2 and require to be escaped
2. CloneNode(**Node 2**) → **Node 2'**
3. AppendChild(**Node 2'**, **Node 3'**)
4. AppendChild(**Node 2'**, **Node 4**)
Expand Down

9 changes: 5 additions & 4 deletions
website/blog/2016-08-19-right-to-left-support-for-react-native-apps.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -15,9 +15,10 @@ 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:

<>
<img src="/blog/assets/rtl-ama-ios-arabic.png" width={280} style={{ margin: 10 }} />

<img src="/blog/assets/rtl-ama-android-hebrew.png" width={280} style={{ margin: 10 }} />
</>

Comment on lines

+18
 to 
+21

@slorberslorberAug 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Adding a fragment here permits to avoid having an extra useless \n char when upgrading to MDX v2.
CleanShot 2023-08-25 at 14 51 24@2x
https://twitter.com/badsyntax/status/1695041116893036746
In practice it's not super impactful, but this change will ensure the 2 images look exactly the same before/after the MDX v2 upgrade.

## Overview Changes in RN for RTL support

Expand DownExpand Up@@ -53,15 +54,15 @@ With this update, when you allow RTL layout for your app:

 ```objc
 // in AppDelegate.m
[[RCTI18nUtil sharedInstance] allowRTL:YES];
[[RCTI18nUtil sharedInstance] allowRTL:YES];
 ```

 Android:

 ```java
 // in MainActivity.java
I18nUtil sharedI18nUtilInstance = I18nUtil.getInstance();
sharedI18nUtilInstance.allowRTL(context, true);
I18nUtil sharedI18nUtilInstance = I18nUtil.getInstance();
sharedI18nUtilInstance.allowRTL(context, true);

Comment on lines

-56
 to 
+65

@slorberslorberAug 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Replace tabs with spaces for consistency + avoid extra spacing appearing when upgrading:
CleanShot 2023-08-25 at 13 02 33@2x
 ```

3. For Android, you need add `android:supportsRtl="true"` to the [`<application>`](https://developer.android.com/guide/topics/manifest/application-element.html) element in `AndroidManifest.xml` file.
Expand Down

50 changes: 25 additions & 25 deletions
website/blog/2016-12-05-easier-upgrades.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -65,40 +65,40 @@ index e98ebb0..2fb6a11 100644
--- a/ios/MyAwesomeApp/Info.plist
+++ b/ios/MyAwesomeApp/Info.plist
@@ -45,7 +45,7 @@
<dict>
<key>localhost</key>
<dict>
-<key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
+<key>NSExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
</dict>
<dict>
<key>localhost</key>
<dict>
-<key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
+<key>NSExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
</dict>
[...]
```

All we need now is to apply this patch to your source files. While the old `react-native upgrade` process would have prompted you for any small difference, Git is able to merge most of the changes automatically using its 3-way merge algorithm and eventually leave us with familiar conflict delimiters:

```
13B07F951A680F5B00A75B9A /* Release */ = {
isa = XCBuildConfiguration;
buildSettings = {
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
13B07F951A680F5B00A75B9A /* Release */ = {
isa = XCBuildConfiguration;
buildSettings = {
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
<<<<<<< ours
CODE_SIGN_IDENTITY = "iPhone Developer";
FRAMEWORK_SEARCH_PATHS = (
"$(inherited)",
"$(PROJECT_DIR)/HockeySDK.embeddedframework",
"$(PROJECT_DIR)/HockeySDK-iOS/HockeySDK.embeddedframework",
);
CODE_SIGN_IDENTITY = "iPhone Developer";
FRAMEWORK_SEARCH_PATHS = (
"$(inherited)",
"$(PROJECT_DIR)/HockeySDK.embeddedframework",
"$(PROJECT_DIR)/HockeySDK-iOS/HockeySDK.embeddedframework",
);
=======
CURRENT_PROJECT_VERSION = 1;
CURRENT_PROJECT_VERSION = 1;
>>>>>>> theirs
HEADER_SEARCH_PATHS = (
"$(inherited)",
/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
"$(SRCROOT)/../node_modules/react-native/React/**",
"$(SRCROOT)/../node_modules/react-native-code-push/ios/CodePush/**",
);
HEADER_SEARCH_PATHS = (
"$(inherited)",
/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
"$(SRCROOT)/../node_modules/react-native/React/**",
"$(SRCROOT)/../node_modules/react-native-code-push/ios/CodePush/**",
);
```

Comment on lines

68
 to 
102

@slorberslorberAug 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Replace tabs with space for consistency
Avoid this unwanted extra spacing when upgrading:
CleanShot 2023-08-25 at 13 05 42@2x
Before: https://reactnative.dev/blog/2016/12/05/easier-upgrades#how-does-it-work

After: https://deploy-preview-3830--react-native.netlify.app/blog/2016/12/05/easier-upgrades#how-does-it-work

These conflicts are generally easy to reason about. The delimiter **ours** stands for "your team" whereas **theirs** could be seen as "the React Native team".
Expand Down

2 changes: 1 addition & 1 deletion
website/blog/2021-09-01-preparing-your-app-for-iOS-15-and-android-12.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -65,7 +65,7 @@ Android 12 introduces new [overscroll effect](https://developer.android.com/abou

#### Permission Updates

Android 12 allows users of your app to only provide access to the approximate location if you request it with **`ACCESS_FINE_LOCATION`** permission**.** Learn more about it [here](https://developer.android.com/about/versions/12/approximate-location).
Android 12 allows users of your app to only provide access to the approximate location if you request it with **`ACCESS_FINE_LOCATION`** permission. Learn more about it [here](https://developer.android.com/about/versions/12/approximate-location).
@slorberslorberAug 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks like a typo

Check out Google’s [detailed behavior changes](https://developer.android.com/about/versions/12/behavior-changes-all) for all apps running on Android 12.

Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.70/native-components-ios.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -286,7 +286,7 @@ RCT_EXPORT_VIEW_PROPERTY(onRegionChange, RCTBubblingEventBlock)

RCT_CUSTOM_VIEW_PROPERTY(region, MKCoordinateRegion, MKMapView)
{
[view setRegion:json ? [RCTConvert MKCoordinateRegion:json] : defaultView.region animated:YES];
[view setRegion:json ? [RCTConvert MKCoordinateRegion:json] : defaultView.region animated:YES];
}

- (UIView *)view
Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.70/profile-hermes.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -93,7 +93,7 @@ To open the profile in Chrome DevTools:
2. Select the **Performance** tab.
3. Right click and choose **Load profile...**

<img src="/docs/assets/openChromeProfile.png" alt="Loading a performance profile on Chrome DevTools" />
<img src="/docs/assets/openChromeProfile.png" alt="Loading a performance profile on Chrome DevTools" />

## How does the Hermes Profile Transformer work?

Expand Down

6 changes: 3 additions & 3 deletions
website/versioned_docs/version-0.70/pushnotificationios.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -386,9 +386,9 @@ See what push permissions are currently enabled.

`callback` will be invoked with a `permissions` object:

- `alert` :boolean
- `badge` :boolean
- `sound` :boolean
- `alert: boolean`
- `badge: boolean`
- `sound: boolean`

---

Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.70/scrollview.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -745,7 +745,7 @@ Displays the scroll indicators momentarily.
scrollTo(
 options?: { x?: number, y?: number, animated?: boolean } | number,
 deprecatedX?: number,
deprecatedAnimated?: boolean,
deprecatedAnimated?: boolean,
);
```

Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.70/touchablenativefeedback.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -158,7 +158,7 @@ TV next focus up (see documentation for the View component).
static SelectableBackground(rippleRadius: ?number)
```

Creates an object that represents android theme's default background for selectable elements (?android:attr/selectableItemBackground). `rippleRadius` parameter controls the radius of the ripple effect.
Creates an object that represents android theme's default background for selectable elements (`?android:attr/selectableItemBackground`). `rippleRadius` parameter controls the radius of the ripple effect.

---

Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.71/native-components-ios.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -286,7 +286,7 @@ RCT_EXPORT_VIEW_PROPERTY(onRegionChange, RCTBubblingEventBlock)

RCT_CUSTOM_VIEW_PROPERTY(region, MKCoordinateRegion, MKMapView)
{
[view setRegion:json ? [RCTConvert MKCoordinateRegion:json] : defaultView.region animated:YES];
[view setRegion:json ? [RCTConvert MKCoordinateRegion:json] : defaultView.region animated:YES];
}

- (UIView *)view
Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.71/profile-hermes.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -71,7 +71,7 @@ To open the profile in Chrome DevTools:
2. Select the **Performance** tab.
3. Right click and choose **Load profile...**

<img src="/docs/assets/openChromeProfile.png" alt="Loading a performance profile on Chrome DevTools" />
<img src="/docs/assets/openChromeProfile.png" alt="Loading a performance profile on Chrome DevTools" />

## How does the Hermes Profile Transformer work?

Expand Down

6 changes: 3 additions & 3 deletions
website/versioned_docs/version-0.71/pushnotificationios.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -402,9 +402,9 @@ See what push permissions are currently enabled.

`callback` will be invoked with a `permissions` object:

- `alert` :boolean
- `badge` :boolean
- `sound` :boolean
- `alert: boolean`
- `badge: boolean`
- `sound: boolean`

---

Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.71/scrollview.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -751,7 +751,7 @@ Displays the scroll indicators momentarily.
scrollTo(
 options?: {x?: number, y?: number, animated?: boolean} | number,
 deprecatedX?: number,
deprecatedAnimated?: boolean,
deprecatedAnimated?: boolean,
);
```

Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.71/touchablenativefeedback.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -168,7 +168,7 @@ static SelectableBackground(
): ThemeAttributeBackgroundPropType;
```

Creates an object that represents android theme's default background for selectable elements (?android:attr/selectableItemBackground). `rippleRadius` parameter controls the radius of the ripple effect.
Creates an object that represents android theme's default background for selectable elements (`?android:attr/selectableItemBackground`). `rippleRadius` parameter controls the radius of the ripple effect.

---

Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.72/native-components-ios.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -286,7 +286,7 @@ RCT_EXPORT_VIEW_PROPERTY(onRegionChange, RCTBubblingEventBlock)

RCT_CUSTOM_VIEW_PROPERTY(region, MKCoordinateRegion, MKMapView)
{
[view setRegion:json ? [RCTConvert MKCoordinateRegion:json] : defaultView.region animated:YES];
[view setRegion:json ? [RCTConvert MKCoordinateRegion:json] : defaultView.region animated:YES];
}

- (UIView *)view
Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.72/profile-hermes.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -71,7 +71,7 @@ To open the profile in Chrome DevTools:
2. Select the **Performance** tab.
3. Right click and choose **Load profile...**

<img src="/docs/assets/openChromeProfile.png" alt="Loading a performance profile on Chrome DevTools" />
<img src="/docs/assets/openChromeProfile.png" alt="Loading a performance profile on Chrome DevTools" />

## How does the Hermes Profile Transformer work?

Expand Down

6 changes: 3 additions & 3 deletions
website/versioned_docs/version-0.72/pushnotificationios.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -402,9 +402,9 @@ See what push permissions are currently enabled.

`callback` will be invoked with a `permissions` object:

- `alert` :boolean
- `badge` :boolean
- `sound` :boolean
- `alert: boolean`
- `badge: boolean`
- `sound: boolean`

---

Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.72/scrollview.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -751,7 +751,7 @@ Displays the scroll indicators momentarily.
scrollTo(
 options?: {x?: number, y?: number, animated?: boolean} | number,
 deprecatedX?: number,
deprecatedAnimated?: boolean,
deprecatedAnimated?: boolean,
);
```

Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.72/touchablenativefeedback.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -168,7 +168,7 @@ static SelectableBackground(
): ThemeAttributeBackgroundPropType;
```

Creates an object that represents android theme's default background for selectable elements (?android:attr/selectableItemBackground). `rippleRadius` parameter controls the radius of the ripple effect.
Creates an object that represents android theme's default background for selectable elements (`?android:attr/selectableItemBackground`). `rippleRadius` parameter controls the radius of the ripple effect.

---

Expand Down

6 changes: 3 additions & 3 deletions
yarn.lock

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -10997,9 +10997,9 @@ prism-react-renderer@^1.3.5:
 integrity sha512-IJ+MSwBWKG+SM3b2SUfdrhC+gu01QkV2KmRQgREThBfSQRoufqRfxfHUxpG1WcaFjP+kojcFyO9Qqtpgt3qLCg==

prismjs@^1.28.0:
 version "1.28.0"
 resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.28.0.tgz#0d8f561fa0f7cf6ebca901747828b149147044b6"
 integrity sha512-8aaXdYvl1F7iC7Xm1spqSaY/OJBpYW3v+KJ+F17iYxvdc8sfjW194COK5wVhMZX45tGteiBQgdvD/nhxcRwylw==
 version "1.29.0"
@slorberslorberAug 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

minor update, the only impact I found in my visual tests was this change in Java code blocks:
CleanShot 2023-08-25 at 15 05 55@2x
 resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.29.0.tgz#f113555a8fa9b57c35e637bba27509dcf802dd12"
 integrity sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==

proc-log@^3.0.0:
 version "3.0.0"
Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
chore: prepare docs for Docusaurus v3 upgrade - 2nd iteration by slorber · Pull Request #3830 · react/react-native-website · GitHub
Skip to content
chore: prepare docs for Docusaurus v3 upgrade - 2nd iteration#3830

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

elicwhite
merged 14 commits into

from

Sep 1, 2023
 Merged


chore: prepare docs for Docusaurus v3 upgrade - 2nd iteration
#3830
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


14 commits


Select commit
Hold shift + click to select a range
2e5c5bb

Add quotes


slorber Aug 25, 2023
7f63f7d

Fix useless bold chars


slorber Aug 25, 2023
8194d1d

fix useless extra spacing


slorber Aug 25, 2023
ee6f7c0

fix useless extra spacing


slorber Aug 25, 2023
7501fae

avoid remark-directive syntax


slorber Aug 25, 2023
bda8552

fix scrollTo codeblock


slorber Aug 25, 2023
4667a2e

Avoid remark-directive syntax


slorber Aug 25, 2023
56797fd

code blocks, use space instead of tabs


slorber Aug 25, 2023
277a5a8

code blocks, use space instead of tabs


slorber Aug 25, 2023
9b45cc8

code blocks, use space instead of tabs


slorber Aug 25, 2023
4d7f8e9

code blocks, use space instead of tabs


slorber Aug 25, 2023
2311ae8

code blocks, use space instead of tabs


slorber Aug 25, 2023
0a2b794

Use React fragment for 2 consecutive images


slorber Aug 25, 2023
0e545b2

update prismjs


slorber Aug 25, 2023

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


2 changes: 1 addition & 1 deletion
docs/native-components-ios.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -286,7 +286,7 @@ RCT_EXPORT_VIEW_PROPERTY(onRegionChange, RCTBubblingEventBlock)

RCT_CUSTOM_VIEW_PROPERTY(region, MKCoordinateRegion, MKMapView)
{
[view setRegion:json ? [RCTConvert MKCoordinateRegion:json] : defaultView.region animated:YES];
[view setRegion:json ? [RCTConvert MKCoordinateRegion:json] : defaultView.region animated:YES];
@slorberslorberAug 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

replace tab with space + reduce indentation for consistency
Avoid this extra spacing when upgrading:
CleanShot 2023-08-25 at 13 07 16@2x
Before: https://reactnative.dev/docs/native-components-ios#events

After: https://deploy-preview-3830--react-native.netlify.app/docs/native-components-ios#events
}

- (UIView *)view
Expand Down

2 changes: 1 addition & 1 deletion
docs/profile-hermes.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -71,7 +71,7 @@ To open the profile in Chrome DevTools:
2. Select the **Performance** tab.
3. Right click and choose **Load profile...**

<img src="/docs/assets/openChromeProfile.png" alt="Loading a performance profile on Chrome DevTools" />
<img src="/docs/assets/openChromeProfile.png" alt="Loading a performance profile on Chrome DevTools" />
@slorberslorberAug 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

unwanted extra space change list + image layout
CleanShot 2023-08-25 at 12 46 31@2x
Before: https://reactnative.dev/docs/profile-hermes#open-the-downloaded-profile-in-chrome-devtools

After: https://deploy-preview-3830--react-native.netlify.app/docs/profile-hermes#open-the-downloaded-profile-in-chrome-devtools

## How does the Hermes Profile Transformer work?

Expand Down

6 changes: 3 additions & 3 deletions
docs/pushnotificationios.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -402,9 +402,9 @@ See what push permissions are currently enabled.

`callback` will be invoked with a `permissions` object:

- `alert` :boolean
- `badge` :boolean
- `sound` :boolean
- `alert: boolean`
- `badge: boolean`
- `sound: boolean`

Comment on lines

-405
 to 
+407

@slorberslorberAug 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

:xyz, ::xyz and :::xyz are "Markdown Directives" and we turn them on by default in Docusaurus v3 to bring admonition support.
This means you should avoid that in your code (unless escaped) otherwise those annotations will magically disappear when upgrading.
CleanShot 2023-08-25 at 12 47 37@2x
I think it's reasonable to make the boolean part of the inline code block
Before: https://reactnative.dev/docs/pushnotificationios#checkpermissions

After: https://deploy-preview-3830--react-native.netlify.app/docs/pushnotificationios#checkpermissions

---

Expand Down

2 changes: 1 addition & 1 deletion
docs/scrollview.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -751,7 +751,7 @@ Displays the scroll indicators momentarily.
scrollTo(
 options?: {x?: number, y?: number, animated?: boolean} | number,
 deprecatedX?: number,
deprecatedAnimated?: boolean,
deprecatedAnimated?: boolean,
@slorberslorberAug 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks like a typo
);
```

Expand Down

2 changes: 1 addition & 1 deletion
docs/touchablenativefeedback.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -168,7 +168,7 @@ static SelectableBackground(
): ThemeAttributeBackgroundPropType;
```

Creates an object that represents android theme's default background for selectable elements (?android:attr/selectableItemBackground). `rippleRadius` parameter controls the radius of the ripple effect.
Creates an object that represents android theme's default background for selectable elements (`?android:attr/selectableItemBackground`). `rippleRadius` parameter controls the radius of the ripple effect.
@slorberslorberAug 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Another "Markdown Directive", we want to avoid them, escape them or wrap them in code blocks.
Otherwise the upgrade will lead to:
CleanShot 2023-08-25 at 12 52 23@2x

---

Expand Down

2 changes: 1 addition & 1 deletion
website/architecture/render-pipeline.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -160,7 +160,7 @@ React Native renderer leverages structural sharing to minimize the overhead of i

In the above example, React creates the new tree using these operations:

1. CloneNode(**Node 3**, {backgroundColor: 'yellow'}) → **Node 3'**
1. CloneNode(**Node 3**, `{backgroundColor: 'yellow'}`) → **Node 3'**
@slorberslorberAug 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks reasonable to wrap in code block
{ will mess up with MDX 2 and require to be escaped
2. CloneNode(**Node 2**) → **Node 2'**
3. AppendChild(**Node 2'**, **Node 3'**)
4. AppendChild(**Node 2'**, **Node 4**)
Expand Down

9 changes: 5 additions & 4 deletions
website/blog/2016-08-19-right-to-left-support-for-react-native-apps.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -15,9 +15,10 @@ 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:

<>
<img src="/blog/assets/rtl-ama-ios-arabic.png" width={280} style={{ margin: 10 }} />

<img src="/blog/assets/rtl-ama-android-hebrew.png" width={280} style={{ margin: 10 }} />
</>

Comment on lines

+18
 to 
+21

@slorberslorberAug 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Adding a fragment here permits to avoid having an extra useless \n char when upgrading to MDX v2.
CleanShot 2023-08-25 at 14 51 24@2x
https://twitter.com/badsyntax/status/1695041116893036746
In practice it's not super impactful, but this change will ensure the 2 images look exactly the same before/after the MDX v2 upgrade.

## Overview Changes in RN for RTL support

Expand DownExpand Up@@ -53,15 +54,15 @@ With this update, when you allow RTL layout for your app:

 ```objc
 // in AppDelegate.m
[[RCTI18nUtil sharedInstance] allowRTL:YES];
[[RCTI18nUtil sharedInstance] allowRTL:YES];
 ```

 Android:

 ```java
 // in MainActivity.java
I18nUtil sharedI18nUtilInstance = I18nUtil.getInstance();
sharedI18nUtilInstance.allowRTL(context, true);
I18nUtil sharedI18nUtilInstance = I18nUtil.getInstance();
sharedI18nUtilInstance.allowRTL(context, true);

Comment on lines

-56
 to 
+65

@slorberslorberAug 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Replace tabs with spaces for consistency + avoid extra spacing appearing when upgrading:
CleanShot 2023-08-25 at 13 02 33@2x
 ```

3. For Android, you need add `android:supportsRtl="true"` to the [`<application>`](https://developer.android.com/guide/topics/manifest/application-element.html) element in `AndroidManifest.xml` file.
Expand Down

50 changes: 25 additions & 25 deletions
website/blog/2016-12-05-easier-upgrades.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -65,40 +65,40 @@ index e98ebb0..2fb6a11 100644
--- a/ios/MyAwesomeApp/Info.plist
+++ b/ios/MyAwesomeApp/Info.plist
@@ -45,7 +45,7 @@
<dict>
<key>localhost</key>
<dict>
-<key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
+<key>NSExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
</dict>
<dict>
<key>localhost</key>
<dict>
-<key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
+<key>NSExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
</dict>
[...]
```

All we need now is to apply this patch to your source files. While the old `react-native upgrade` process would have prompted you for any small difference, Git is able to merge most of the changes automatically using its 3-way merge algorithm and eventually leave us with familiar conflict delimiters:

```
13B07F951A680F5B00A75B9A /* Release */ = {
isa = XCBuildConfiguration;
buildSettings = {
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
13B07F951A680F5B00A75B9A /* Release */ = {
isa = XCBuildConfiguration;
buildSettings = {
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
<<<<<<< ours
CODE_SIGN_IDENTITY = "iPhone Developer";
FRAMEWORK_SEARCH_PATHS = (
"$(inherited)",
"$(PROJECT_DIR)/HockeySDK.embeddedframework",
"$(PROJECT_DIR)/HockeySDK-iOS/HockeySDK.embeddedframework",
);
CODE_SIGN_IDENTITY = "iPhone Developer";
FRAMEWORK_SEARCH_PATHS = (
"$(inherited)",
"$(PROJECT_DIR)/HockeySDK.embeddedframework",
"$(PROJECT_DIR)/HockeySDK-iOS/HockeySDK.embeddedframework",
);
=======
CURRENT_PROJECT_VERSION = 1;
CURRENT_PROJECT_VERSION = 1;
>>>>>>> theirs
HEADER_SEARCH_PATHS = (
"$(inherited)",
/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
"$(SRCROOT)/../node_modules/react-native/React/**",
"$(SRCROOT)/../node_modules/react-native-code-push/ios/CodePush/**",
);
HEADER_SEARCH_PATHS = (
"$(inherited)",
/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
"$(SRCROOT)/../node_modules/react-native/React/**",
"$(SRCROOT)/../node_modules/react-native-code-push/ios/CodePush/**",
);
```

Comment on lines

68
 to 
102

@slorberslorberAug 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Replace tabs with space for consistency
Avoid this unwanted extra spacing when upgrading:
CleanShot 2023-08-25 at 13 05 42@2x
Before: https://reactnative.dev/blog/2016/12/05/easier-upgrades#how-does-it-work

After: https://deploy-preview-3830--react-native.netlify.app/blog/2016/12/05/easier-upgrades#how-does-it-work

These conflicts are generally easy to reason about. The delimiter **ours** stands for "your team" whereas **theirs** could be seen as "the React Native team".
Expand Down

2 changes: 1 addition & 1 deletion
website/blog/2021-09-01-preparing-your-app-for-iOS-15-and-android-12.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -65,7 +65,7 @@ Android 12 introduces new [overscroll effect](https://developer.android.com/abou

#### Permission Updates

Android 12 allows users of your app to only provide access to the approximate location if you request it with **`ACCESS_FINE_LOCATION`** permission**.** Learn more about it [here](https://developer.android.com/about/versions/12/approximate-location).
Android 12 allows users of your app to only provide access to the approximate location if you request it with **`ACCESS_FINE_LOCATION`** permission. Learn more about it [here](https://developer.android.com/about/versions/12/approximate-location).
@slorberslorberAug 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks like a typo

Check out Google’s [detailed behavior changes](https://developer.android.com/about/versions/12/behavior-changes-all) for all apps running on Android 12.

Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.70/native-components-ios.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -286,7 +286,7 @@ RCT_EXPORT_VIEW_PROPERTY(onRegionChange, RCTBubblingEventBlock)

RCT_CUSTOM_VIEW_PROPERTY(region, MKCoordinateRegion, MKMapView)
{
[view setRegion:json ? [RCTConvert MKCoordinateRegion:json] : defaultView.region animated:YES];
[view setRegion:json ? [RCTConvert MKCoordinateRegion:json] : defaultView.region animated:YES];
}

- (UIView *)view
Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.70/profile-hermes.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -93,7 +93,7 @@ To open the profile in Chrome DevTools:
2. Select the **Performance** tab.
3. Right click and choose **Load profile...**

<img src="/docs/assets/openChromeProfile.png" alt="Loading a performance profile on Chrome DevTools" />
<img src="/docs/assets/openChromeProfile.png" alt="Loading a performance profile on Chrome DevTools" />

## How does the Hermes Profile Transformer work?

Expand Down

6 changes: 3 additions & 3 deletions
website/versioned_docs/version-0.70/pushnotificationios.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -386,9 +386,9 @@ See what push permissions are currently enabled.

`callback` will be invoked with a `permissions` object:

- `alert` :boolean
- `badge` :boolean
- `sound` :boolean
- `alert: boolean`
- `badge: boolean`
- `sound: boolean`

---

Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.70/scrollview.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -745,7 +745,7 @@ Displays the scroll indicators momentarily.
scrollTo(
 options?: { x?: number, y?: number, animated?: boolean } | number,
 deprecatedX?: number,
deprecatedAnimated?: boolean,
deprecatedAnimated?: boolean,
);
```

Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.70/touchablenativefeedback.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -158,7 +158,7 @@ TV next focus up (see documentation for the View component).
static SelectableBackground(rippleRadius: ?number)
```

Creates an object that represents android theme's default background for selectable elements (?android:attr/selectableItemBackground). `rippleRadius` parameter controls the radius of the ripple effect.
Creates an object that represents android theme's default background for selectable elements (`?android:attr/selectableItemBackground`). `rippleRadius` parameter controls the radius of the ripple effect.

---

Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.71/native-components-ios.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -286,7 +286,7 @@ RCT_EXPORT_VIEW_PROPERTY(onRegionChange, RCTBubblingEventBlock)

RCT_CUSTOM_VIEW_PROPERTY(region, MKCoordinateRegion, MKMapView)
{
[view setRegion:json ? [RCTConvert MKCoordinateRegion:json] : defaultView.region animated:YES];
[view setRegion:json ? [RCTConvert MKCoordinateRegion:json] : defaultView.region animated:YES];
}

- (UIView *)view
Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.71/profile-hermes.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -71,7 +71,7 @@ To open the profile in Chrome DevTools:
2. Select the **Performance** tab.
3. Right click and choose **Load profile...**

<img src="/docs/assets/openChromeProfile.png" alt="Loading a performance profile on Chrome DevTools" />
<img src="/docs/assets/openChromeProfile.png" alt="Loading a performance profile on Chrome DevTools" />

## How does the Hermes Profile Transformer work?

Expand Down

6 changes: 3 additions & 3 deletions
website/versioned_docs/version-0.71/pushnotificationios.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -402,9 +402,9 @@ See what push permissions are currently enabled.

`callback` will be invoked with a `permissions` object:

- `alert` :boolean
- `badge` :boolean
- `sound` :boolean
- `alert: boolean`
- `badge: boolean`
- `sound: boolean`

---

Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.71/scrollview.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -751,7 +751,7 @@ Displays the scroll indicators momentarily.
scrollTo(
 options?: {x?: number, y?: number, animated?: boolean} | number,
 deprecatedX?: number,
deprecatedAnimated?: boolean,
deprecatedAnimated?: boolean,
);
```

Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.71/touchablenativefeedback.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -168,7 +168,7 @@ static SelectableBackground(
): ThemeAttributeBackgroundPropType;
```

Creates an object that represents android theme's default background for selectable elements (?android:attr/selectableItemBackground). `rippleRadius` parameter controls the radius of the ripple effect.
Creates an object that represents android theme's default background for selectable elements (`?android:attr/selectableItemBackground`). `rippleRadius` parameter controls the radius of the ripple effect.

---

Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.72/native-components-ios.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -286,7 +286,7 @@ RCT_EXPORT_VIEW_PROPERTY(onRegionChange, RCTBubblingEventBlock)

RCT_CUSTOM_VIEW_PROPERTY(region, MKCoordinateRegion, MKMapView)
{
[view setRegion:json ? [RCTConvert MKCoordinateRegion:json] : defaultView.region animated:YES];
[view setRegion:json ? [RCTConvert MKCoordinateRegion:json] : defaultView.region animated:YES];
}

- (UIView *)view
Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.72/profile-hermes.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -71,7 +71,7 @@ To open the profile in Chrome DevTools:
2. Select the **Performance** tab.
3. Right click and choose **Load profile...**

<img src="/docs/assets/openChromeProfile.png" alt="Loading a performance profile on Chrome DevTools" />
<img src="/docs/assets/openChromeProfile.png" alt="Loading a performance profile on Chrome DevTools" />

## How does the Hermes Profile Transformer work?

Expand Down

6 changes: 3 additions & 3 deletions
website/versioned_docs/version-0.72/pushnotificationios.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -402,9 +402,9 @@ See what push permissions are currently enabled.

`callback` will be invoked with a `permissions` object:

- `alert` :boolean
- `badge` :boolean
- `sound` :boolean
- `alert: boolean`
- `badge: boolean`
- `sound: boolean`

---

Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.72/scrollview.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -751,7 +751,7 @@ Displays the scroll indicators momentarily.
scrollTo(
 options?: {x?: number, y?: number, animated?: boolean} | number,
 deprecatedX?: number,
deprecatedAnimated?: boolean,
deprecatedAnimated?: boolean,
);
```

Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.72/touchablenativefeedback.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -168,7 +168,7 @@ static SelectableBackground(
): ThemeAttributeBackgroundPropType;
```

Creates an object that represents android theme's default background for selectable elements (?android:attr/selectableItemBackground). `rippleRadius` parameter controls the radius of the ripple effect.
Creates an object that represents android theme's default background for selectable elements (`?android:attr/selectableItemBackground`). `rippleRadius` parameter controls the radius of the ripple effect.

---

Expand Down

6 changes: 3 additions & 3 deletions
yarn.lock

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -10997,9 +10997,9 @@ prism-react-renderer@^1.3.5:
 integrity sha512-IJ+MSwBWKG+SM3b2SUfdrhC+gu01QkV2KmRQgREThBfSQRoufqRfxfHUxpG1WcaFjP+kojcFyO9Qqtpgt3qLCg==

prismjs@^1.28.0:
 version "1.28.0"
 resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.28.0.tgz#0d8f561fa0f7cf6ebca901747828b149147044b6"
 integrity sha512-8aaXdYvl1F7iC7Xm1spqSaY/OJBpYW3v+KJ+F17iYxvdc8sfjW194COK5wVhMZX45tGteiBQgdvD/nhxcRwylw==
 version "1.29.0"
@slorberslorberAug 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

minor update, the only impact I found in my visual tests was this change in Java code blocks:
CleanShot 2023-08-25 at 15 05 55@2x
 resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.29.0.tgz#f113555a8fa9b57c35e637bba27509dcf802dd12"
 integrity sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==

proc-log@^3.0.0:
 version "3.0.0"
Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
chore: prepare docs for Docusaurus v3 upgrade - 2nd iteration by slorber · Pull Request #3830 · react/react-native-website · GitHub
Skip to content
chore: prepare docs for Docusaurus v3 upgrade - 2nd iteration#3830

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

elicwhite
merged 14 commits into

from

Sep 1, 2023
 Merged


chore: prepare docs for Docusaurus v3 upgrade - 2nd iteration
#3830
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


14 commits


Select commit
Hold shift + click to select a range
2e5c5bb

Add quotes


slorber Aug 25, 2023
7f63f7d

Fix useless bold chars


slorber Aug 25, 2023
8194d1d

fix useless extra spacing


slorber Aug 25, 2023
ee6f7c0

fix useless extra spacing


slorber Aug 25, 2023
7501fae

avoid remark-directive syntax


slorber Aug 25, 2023
bda8552

fix scrollTo codeblock


slorber Aug 25, 2023
4667a2e

Avoid remark-directive syntax


slorber Aug 25, 2023
56797fd

code blocks, use space instead of tabs


slorber Aug 25, 2023
277a5a8

code blocks, use space instead of tabs


slorber Aug 25, 2023
9b45cc8

code blocks, use space instead of tabs


slorber Aug 25, 2023
4d7f8e9

code blocks, use space instead of tabs


slorber Aug 25, 2023
2311ae8

code blocks, use space instead of tabs


slorber Aug 25, 2023
0a2b794

Use React fragment for 2 consecutive images


slorber Aug 25, 2023
0e545b2

update prismjs


slorber Aug 25, 2023

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


2 changes: 1 addition & 1 deletion
docs/native-components-ios.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -286,7 +286,7 @@ RCT_EXPORT_VIEW_PROPERTY(onRegionChange, RCTBubblingEventBlock)

RCT_CUSTOM_VIEW_PROPERTY(region, MKCoordinateRegion, MKMapView)
{
[view setRegion:json ? [RCTConvert MKCoordinateRegion:json] : defaultView.region animated:YES];
[view setRegion:json ? [RCTConvert MKCoordinateRegion:json] : defaultView.region animated:YES];
@slorberslorberAug 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

replace tab with space + reduce indentation for consistency
Avoid this extra spacing when upgrading:
CleanShot 2023-08-25 at 13 07 16@2x
Before: https://reactnative.dev/docs/native-components-ios#events

After: https://deploy-preview-3830--react-native.netlify.app/docs/native-components-ios#events
}

- (UIView *)view
Expand Down

2 changes: 1 addition & 1 deletion
docs/profile-hermes.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -71,7 +71,7 @@ To open the profile in Chrome DevTools:
2. Select the **Performance** tab.
3. Right click and choose **Load profile...**

<img src="/docs/assets/openChromeProfile.png" alt="Loading a performance profile on Chrome DevTools" />
<img src="/docs/assets/openChromeProfile.png" alt="Loading a performance profile on Chrome DevTools" />
@slorberslorberAug 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

unwanted extra space change list + image layout
CleanShot 2023-08-25 at 12 46 31@2x
Before: https://reactnative.dev/docs/profile-hermes#open-the-downloaded-profile-in-chrome-devtools

After: https://deploy-preview-3830--react-native.netlify.app/docs/profile-hermes#open-the-downloaded-profile-in-chrome-devtools

## How does the Hermes Profile Transformer work?

Expand Down

6 changes: 3 additions & 3 deletions
docs/pushnotificationios.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -402,9 +402,9 @@ See what push permissions are currently enabled.

`callback` will be invoked with a `permissions` object:

- `alert` :boolean
- `badge` :boolean
- `sound` :boolean
- `alert: boolean`
- `badge: boolean`
- `sound: boolean`

Comment on lines

-405
 to 
+407

@slorberslorberAug 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

:xyz, ::xyz and :::xyz are "Markdown Directives" and we turn them on by default in Docusaurus v3 to bring admonition support.
This means you should avoid that in your code (unless escaped) otherwise those annotations will magically disappear when upgrading.
CleanShot 2023-08-25 at 12 47 37@2x
I think it's reasonable to make the boolean part of the inline code block
Before: https://reactnative.dev/docs/pushnotificationios#checkpermissions

After: https://deploy-preview-3830--react-native.netlify.app/docs/pushnotificationios#checkpermissions

---

Expand Down

2 changes: 1 addition & 1 deletion
docs/scrollview.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -751,7 +751,7 @@ Displays the scroll indicators momentarily.
scrollTo(
 options?: {x?: number, y?: number, animated?: boolean} | number,
 deprecatedX?: number,
deprecatedAnimated?: boolean,
deprecatedAnimated?: boolean,
@slorberslorberAug 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks like a typo
);
```

Expand Down

2 changes: 1 addition & 1 deletion
docs/touchablenativefeedback.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -168,7 +168,7 @@ static SelectableBackground(
): ThemeAttributeBackgroundPropType;
```

Creates an object that represents android theme's default background for selectable elements (?android:attr/selectableItemBackground). `rippleRadius` parameter controls the radius of the ripple effect.
Creates an object that represents android theme's default background for selectable elements (`?android:attr/selectableItemBackground`). `rippleRadius` parameter controls the radius of the ripple effect.
@slorberslorberAug 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Another "Markdown Directive", we want to avoid them, escape them or wrap them in code blocks.
Otherwise the upgrade will lead to:
CleanShot 2023-08-25 at 12 52 23@2x

---

Expand Down

2 changes: 1 addition & 1 deletion
website/architecture/render-pipeline.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -160,7 +160,7 @@ React Native renderer leverages structural sharing to minimize the overhead of i

In the above example, React creates the new tree using these operations:

1. CloneNode(**Node 3**, {backgroundColor: 'yellow'}) → **Node 3'**
1. CloneNode(**Node 3**, `{backgroundColor: 'yellow'}`) → **Node 3'**
@slorberslorberAug 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks reasonable to wrap in code block
{ will mess up with MDX 2 and require to be escaped
2. CloneNode(**Node 2**) → **Node 2'**
3. AppendChild(**Node 2'**, **Node 3'**)
4. AppendChild(**Node 2'**, **Node 4**)
Expand Down

9 changes: 5 additions & 4 deletions
website/blog/2016-08-19-right-to-left-support-for-react-native-apps.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -15,9 +15,10 @@ 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:

<>
<img src="/blog/assets/rtl-ama-ios-arabic.png" width={280} style={{ margin: 10 }} />

<img src="/blog/assets/rtl-ama-android-hebrew.png" width={280} style={{ margin: 10 }} />
</>

Comment on lines

+18
 to 
+21

@slorberslorberAug 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Adding a fragment here permits to avoid having an extra useless \n char when upgrading to MDX v2.
CleanShot 2023-08-25 at 14 51 24@2x
https://twitter.com/badsyntax/status/1695041116893036746
In practice it's not super impactful, but this change will ensure the 2 images look exactly the same before/after the MDX v2 upgrade.

## Overview Changes in RN for RTL support

Expand DownExpand Up@@ -53,15 +54,15 @@ With this update, when you allow RTL layout for your app:

 ```objc
 // in AppDelegate.m
[[RCTI18nUtil sharedInstance] allowRTL:YES];
[[RCTI18nUtil sharedInstance] allowRTL:YES];
 ```

 Android:

 ```java
 // in MainActivity.java
I18nUtil sharedI18nUtilInstance = I18nUtil.getInstance();
sharedI18nUtilInstance.allowRTL(context, true);
I18nUtil sharedI18nUtilInstance = I18nUtil.getInstance();
sharedI18nUtilInstance.allowRTL(context, true);

Comment on lines

-56
 to 
+65

@slorberslorberAug 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Replace tabs with spaces for consistency + avoid extra spacing appearing when upgrading:
CleanShot 2023-08-25 at 13 02 33@2x
 ```

3. For Android, you need add `android:supportsRtl="true"` to the [`<application>`](https://developer.android.com/guide/topics/manifest/application-element.html) element in `AndroidManifest.xml` file.
Expand Down

50 changes: 25 additions & 25 deletions
website/blog/2016-12-05-easier-upgrades.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -65,40 +65,40 @@ index e98ebb0..2fb6a11 100644
--- a/ios/MyAwesomeApp/Info.plist
+++ b/ios/MyAwesomeApp/Info.plist
@@ -45,7 +45,7 @@
<dict>
<key>localhost</key>
<dict>
-<key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
+<key>NSExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
</dict>
<dict>
<key>localhost</key>
<dict>
-<key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
+<key>NSExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
</dict>
[...]
```

All we need now is to apply this patch to your source files. While the old `react-native upgrade` process would have prompted you for any small difference, Git is able to merge most of the changes automatically using its 3-way merge algorithm and eventually leave us with familiar conflict delimiters:

```
13B07F951A680F5B00A75B9A /* Release */ = {
isa = XCBuildConfiguration;
buildSettings = {
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
13B07F951A680F5B00A75B9A /* Release */ = {
isa = XCBuildConfiguration;
buildSettings = {
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
<<<<<<< ours
CODE_SIGN_IDENTITY = "iPhone Developer";
FRAMEWORK_SEARCH_PATHS = (
"$(inherited)",
"$(PROJECT_DIR)/HockeySDK.embeddedframework",
"$(PROJECT_DIR)/HockeySDK-iOS/HockeySDK.embeddedframework",
);
CODE_SIGN_IDENTITY = "iPhone Developer";
FRAMEWORK_SEARCH_PATHS = (
"$(inherited)",
"$(PROJECT_DIR)/HockeySDK.embeddedframework",
"$(PROJECT_DIR)/HockeySDK-iOS/HockeySDK.embeddedframework",
);
=======
CURRENT_PROJECT_VERSION = 1;
CURRENT_PROJECT_VERSION = 1;
>>>>>>> theirs
HEADER_SEARCH_PATHS = (
"$(inherited)",
/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
"$(SRCROOT)/../node_modules/react-native/React/**",
"$(SRCROOT)/../node_modules/react-native-code-push/ios/CodePush/**",
);
HEADER_SEARCH_PATHS = (
"$(inherited)",
/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
"$(SRCROOT)/../node_modules/react-native/React/**",
"$(SRCROOT)/../node_modules/react-native-code-push/ios/CodePush/**",
);
```

Comment on lines

68
 to 
102

@slorberslorberAug 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Replace tabs with space for consistency
Avoid this unwanted extra spacing when upgrading:
CleanShot 2023-08-25 at 13 05 42@2x
Before: https://reactnative.dev/blog/2016/12/05/easier-upgrades#how-does-it-work

After: https://deploy-preview-3830--react-native.netlify.app/blog/2016/12/05/easier-upgrades#how-does-it-work

These conflicts are generally easy to reason about. The delimiter **ours** stands for "your team" whereas **theirs** could be seen as "the React Native team".
Expand Down

2 changes: 1 addition & 1 deletion
website/blog/2021-09-01-preparing-your-app-for-iOS-15-and-android-12.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -65,7 +65,7 @@ Android 12 introduces new [overscroll effect](https://developer.android.com/abou

#### Permission Updates

Android 12 allows users of your app to only provide access to the approximate location if you request it with **`ACCESS_FINE_LOCATION`** permission**.** Learn more about it [here](https://developer.android.com/about/versions/12/approximate-location).
Android 12 allows users of your app to only provide access to the approximate location if you request it with **`ACCESS_FINE_LOCATION`** permission. Learn more about it [here](https://developer.android.com/about/versions/12/approximate-location).
@slorberslorberAug 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks like a typo

Check out Google’s [detailed behavior changes](https://developer.android.com/about/versions/12/behavior-changes-all) for all apps running on Android 12.

Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.70/native-components-ios.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -286,7 +286,7 @@ RCT_EXPORT_VIEW_PROPERTY(onRegionChange, RCTBubblingEventBlock)

RCT_CUSTOM_VIEW_PROPERTY(region, MKCoordinateRegion, MKMapView)
{
[view setRegion:json ? [RCTConvert MKCoordinateRegion:json] : defaultView.region animated:YES];
[view setRegion:json ? [RCTConvert MKCoordinateRegion:json] : defaultView.region animated:YES];
}

- (UIView *)view
Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.70/profile-hermes.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -93,7 +93,7 @@ To open the profile in Chrome DevTools:
2. Select the **Performance** tab.
3. Right click and choose **Load profile...**

<img src="/docs/assets/openChromeProfile.png" alt="Loading a performance profile on Chrome DevTools" />
<img src="/docs/assets/openChromeProfile.png" alt="Loading a performance profile on Chrome DevTools" />

## How does the Hermes Profile Transformer work?

Expand Down

6 changes: 3 additions & 3 deletions
website/versioned_docs/version-0.70/pushnotificationios.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -386,9 +386,9 @@ See what push permissions are currently enabled.

`callback` will be invoked with a `permissions` object:

- `alert` :boolean
- `badge` :boolean
- `sound` :boolean
- `alert: boolean`
- `badge: boolean`
- `sound: boolean`

---

Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.70/scrollview.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -745,7 +745,7 @@ Displays the scroll indicators momentarily.
scrollTo(
 options?: { x?: number, y?: number, animated?: boolean } | number,
 deprecatedX?: number,
deprecatedAnimated?: boolean,
deprecatedAnimated?: boolean,
);
```

Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.70/touchablenativefeedback.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -158,7 +158,7 @@ TV next focus up (see documentation for the View component).
static SelectableBackground(rippleRadius: ?number)
```

Creates an object that represents android theme's default background for selectable elements (?android:attr/selectableItemBackground). `rippleRadius` parameter controls the radius of the ripple effect.
Creates an object that represents android theme's default background for selectable elements (`?android:attr/selectableItemBackground`). `rippleRadius` parameter controls the radius of the ripple effect.

---

Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.71/native-components-ios.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -286,7 +286,7 @@ RCT_EXPORT_VIEW_PROPERTY(onRegionChange, RCTBubblingEventBlock)

RCT_CUSTOM_VIEW_PROPERTY(region, MKCoordinateRegion, MKMapView)
{
[view setRegion:json ? [RCTConvert MKCoordinateRegion:json] : defaultView.region animated:YES];
[view setRegion:json ? [RCTConvert MKCoordinateRegion:json] : defaultView.region animated:YES];
}

- (UIView *)view
Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.71/profile-hermes.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -71,7 +71,7 @@ To open the profile in Chrome DevTools:
2. Select the **Performance** tab.
3. Right click and choose **Load profile...**

<img src="/docs/assets/openChromeProfile.png" alt="Loading a performance profile on Chrome DevTools" />
<img src="/docs/assets/openChromeProfile.png" alt="Loading a performance profile on Chrome DevTools" />

## How does the Hermes Profile Transformer work?

Expand Down

6 changes: 3 additions & 3 deletions
website/versioned_docs/version-0.71/pushnotificationios.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -402,9 +402,9 @@ See what push permissions are currently enabled.

`callback` will be invoked with a `permissions` object:

- `alert` :boolean
- `badge` :boolean
- `sound` :boolean
- `alert: boolean`
- `badge: boolean`
- `sound: boolean`

---

Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.71/scrollview.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -751,7 +751,7 @@ Displays the scroll indicators momentarily.
scrollTo(
 options?: {x?: number, y?: number, animated?: boolean} | number,
 deprecatedX?: number,
deprecatedAnimated?: boolean,
deprecatedAnimated?: boolean,
);
```

Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.71/touchablenativefeedback.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -168,7 +168,7 @@ static SelectableBackground(
): ThemeAttributeBackgroundPropType;
```

Creates an object that represents android theme's default background for selectable elements (?android:attr/selectableItemBackground). `rippleRadius` parameter controls the radius of the ripple effect.
Creates an object that represents android theme's default background for selectable elements (`?android:attr/selectableItemBackground`). `rippleRadius` parameter controls the radius of the ripple effect.

---

Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.72/native-components-ios.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -286,7 +286,7 @@ RCT_EXPORT_VIEW_PROPERTY(onRegionChange, RCTBubblingEventBlock)

RCT_CUSTOM_VIEW_PROPERTY(region, MKCoordinateRegion, MKMapView)
{
[view setRegion:json ? [RCTConvert MKCoordinateRegion:json] : defaultView.region animated:YES];
[view setRegion:json ? [RCTConvert MKCoordinateRegion:json] : defaultView.region animated:YES];
}

- (UIView *)view
Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.72/profile-hermes.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -71,7 +71,7 @@ To open the profile in Chrome DevTools:
2. Select the **Performance** tab.
3. Right click and choose **Load profile...**

<img src="/docs/assets/openChromeProfile.png" alt="Loading a performance profile on Chrome DevTools" />
<img src="/docs/assets/openChromeProfile.png" alt="Loading a performance profile on Chrome DevTools" />

## How does the Hermes Profile Transformer work?

Expand Down

6 changes: 3 additions & 3 deletions
website/versioned_docs/version-0.72/pushnotificationios.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -402,9 +402,9 @@ See what push permissions are currently enabled.

`callback` will be invoked with a `permissions` object:

- `alert` :boolean
- `badge` :boolean
- `sound` :boolean
- `alert: boolean`
- `badge: boolean`
- `sound: boolean`

---

Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.72/scrollview.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -751,7 +751,7 @@ Displays the scroll indicators momentarily.
scrollTo(
 options?: {x?: number, y?: number, animated?: boolean} | number,
 deprecatedX?: number,
deprecatedAnimated?: boolean,
deprecatedAnimated?: boolean,
);
```

Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.72/touchablenativefeedback.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -168,7 +168,7 @@ static SelectableBackground(
): ThemeAttributeBackgroundPropType;
```

Creates an object that represents android theme's default background for selectable elements (?android:attr/selectableItemBackground). `rippleRadius` parameter controls the radius of the ripple effect.
Creates an object that represents android theme's default background for selectable elements (`?android:attr/selectableItemBackground`). `rippleRadius` parameter controls the radius of the ripple effect.

---

Expand Down

6 changes: 3 additions & 3 deletions
yarn.lock

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -10997,9 +10997,9 @@ prism-react-renderer@^1.3.5:
 integrity sha512-IJ+MSwBWKG+SM3b2SUfdrhC+gu01QkV2KmRQgREThBfSQRoufqRfxfHUxpG1WcaFjP+kojcFyO9Qqtpgt3qLCg==

prismjs@^1.28.0:
 version "1.28.0"
 resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.28.0.tgz#0d8f561fa0f7cf6ebca901747828b149147044b6"
 integrity sha512-8aaXdYvl1F7iC7Xm1spqSaY/OJBpYW3v+KJ+F17iYxvdc8sfjW194COK5wVhMZX45tGteiBQgdvD/nhxcRwylw==
 version "1.29.0"
@slorberslorberAug 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

minor update, the only impact I found in my visual tests was this change in Java code blocks:
CleanShot 2023-08-25 at 15 05 55@2x
 resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.29.0.tgz#f113555a8fa9b57c35e637bba27509dcf802dd12"
 integrity sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==

proc-log@^3.0.0:
 version "3.0.0"
Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Universal Dark Mode - works on any site
(function() {
var enabled = true;
function applyDarkMode() {
if (!enabled) return;
// Create style element if it doesn't exist
var style = document.getElementById('universal-dark-mode-style');
if (!style) {
style = document.createElement('style');
style.id = 'universal-dark-mode-style';
document.head.appendChild(style);
}
// Dark mode CSS - inverts colors but preserves images/video
style.textContent = '
/* Invert everything except media */
html {
filter: invert(1) hue-rotate(180deg) !important;
background: #1a1a2e !important;
}
/* Restore images, videos, iframes, canvas */
img, video, iframe, canvas, svg, picture, [style*="background-image"] {
filter: invert(1) hue-rotate(180deg) !important;
}
/* Preserve specific elements that should not be inverted */
.no-dark-mode, .no-dark-mode *,
[data-theme="light"], [data-theme="light"],
.ace_editor, .ace_editor *,
.CodeMirror, .CodeMirror *,
.monaco-editor, .monaco-editor *,
.markdown-body pre, .markdown-body pre *,
.highlight, .highlight *,
pre code, pre code * {
filter: none !important;
}
/* Fix common UI elements */
.modal, .popup, .dropdown-menu, .tooltip, .popover {
filter: invert(1) hue-rotate(180deg) !important;
background: #2d2d44 !important;
border-color: #444 !important;
}
/* Scrollbars */
::-webkit-scrollbar { background: #1a1a2e !important; }
::-webkit-scrollbar-thumb { background: #444 !important; }
::-webkit-scrollbar-thumb:hover { background: #555 !important; }
/* Selection */
::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
';
}
function removeDarkMode() {
var style = document.getElementById('universal-dark-mode-style');
if (style) style.remove();
}
// Toggle with Alt+Shift+D
document.addEventListener('keydown', function(e) {
if (e.altKey && e.shiftKey && e.key === 'D') {
e.preventDefault();
enabled = !enabled;
if (enabled) {
applyDarkMode();
console.log('[Universal Dark Mode] Enabled');
} else {
removeDarkMode();
console.log('[Universal Dark Mode] Disabled');
}
}
});
// Apply on load
applyDarkMode();
// Re-apply on dynamic content
var observer = new MutationObserver(function(mutations) {
if (enabled && !document.getElementById('universal-dark-mode-style')) {
applyDarkMode();
}
});
observer.observe(document.head, { childList: true });
console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');
})();
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();
chore: prepare docs for Docusaurus v3 upgrade - 2nd iteration by slorber · Pull Request #3830 · react/react-native-website · GitHub
Skip to content
chore: prepare docs for Docusaurus v3 upgrade - 2nd iteration#3830

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

elicwhite
merged 14 commits into

from

Sep 1, 2023
 Merged


chore: prepare docs for Docusaurus v3 upgrade - 2nd iteration
#3830
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


14 commits


Select commit
Hold shift + click to select a range
2e5c5bb

Add quotes


slorber Aug 25, 2023
7f63f7d

Fix useless bold chars


slorber Aug 25, 2023
8194d1d

fix useless extra spacing


slorber Aug 25, 2023
ee6f7c0

fix useless extra spacing


slorber Aug 25, 2023
7501fae

avoid remark-directive syntax


slorber Aug 25, 2023
bda8552

fix scrollTo codeblock


slorber Aug 25, 2023
4667a2e

Avoid remark-directive syntax


slorber Aug 25, 2023
56797fd

code blocks, use space instead of tabs


slorber Aug 25, 2023
277a5a8

code blocks, use space instead of tabs


slorber Aug 25, 2023
9b45cc8

code blocks, use space instead of tabs


slorber Aug 25, 2023
4d7f8e9

code blocks, use space instead of tabs


slorber Aug 25, 2023
2311ae8

code blocks, use space instead of tabs


slorber Aug 25, 2023
0a2b794

Use React fragment for 2 consecutive images


slorber Aug 25, 2023
0e545b2

update prismjs


slorber Aug 25, 2023

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


2 changes: 1 addition & 1 deletion
docs/native-components-ios.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -286,7 +286,7 @@ RCT_EXPORT_VIEW_PROPERTY(onRegionChange, RCTBubblingEventBlock)

RCT_CUSTOM_VIEW_PROPERTY(region, MKCoordinateRegion, MKMapView)
{
[view setRegion:json ? [RCTConvert MKCoordinateRegion:json] : defaultView.region animated:YES];
[view setRegion:json ? [RCTConvert MKCoordinateRegion:json] : defaultView.region animated:YES];
@slorberslorberAug 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

replace tab with space + reduce indentation for consistency
Avoid this extra spacing when upgrading:
CleanShot 2023-08-25 at 13 07 16@2x
Before: https://reactnative.dev/docs/native-components-ios#events

After: https://deploy-preview-3830--react-native.netlify.app/docs/native-components-ios#events
}

- (UIView *)view
Expand Down

2 changes: 1 addition & 1 deletion
docs/profile-hermes.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -71,7 +71,7 @@ To open the profile in Chrome DevTools:
2. Select the **Performance** tab.
3. Right click and choose **Load profile...**

<img src="/docs/assets/openChromeProfile.png" alt="Loading a performance profile on Chrome DevTools" />
<img src="/docs/assets/openChromeProfile.png" alt="Loading a performance profile on Chrome DevTools" />
@slorberslorberAug 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

unwanted extra space change list + image layout
CleanShot 2023-08-25 at 12 46 31@2x
Before: https://reactnative.dev/docs/profile-hermes#open-the-downloaded-profile-in-chrome-devtools

After: https://deploy-preview-3830--react-native.netlify.app/docs/profile-hermes#open-the-downloaded-profile-in-chrome-devtools

## How does the Hermes Profile Transformer work?

Expand Down

6 changes: 3 additions & 3 deletions
docs/pushnotificationios.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -402,9 +402,9 @@ See what push permissions are currently enabled.

`callback` will be invoked with a `permissions` object:

- `alert` :boolean
- `badge` :boolean
- `sound` :boolean
- `alert: boolean`
- `badge: boolean`
- `sound: boolean`

Comment on lines

-405
 to 
+407

@slorberslorberAug 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

:xyz, ::xyz and :::xyz are "Markdown Directives" and we turn them on by default in Docusaurus v3 to bring admonition support.
This means you should avoid that in your code (unless escaped) otherwise those annotations will magically disappear when upgrading.
CleanShot 2023-08-25 at 12 47 37@2x
I think it's reasonable to make the boolean part of the inline code block
Before: https://reactnative.dev/docs/pushnotificationios#checkpermissions

After: https://deploy-preview-3830--react-native.netlify.app/docs/pushnotificationios#checkpermissions

---

Expand Down

2 changes: 1 addition & 1 deletion
docs/scrollview.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -751,7 +751,7 @@ Displays the scroll indicators momentarily.
scrollTo(
 options?: {x?: number, y?: number, animated?: boolean} | number,
 deprecatedX?: number,
deprecatedAnimated?: boolean,
deprecatedAnimated?: boolean,
@slorberslorberAug 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks like a typo
);
```

Expand Down

2 changes: 1 addition & 1 deletion
docs/touchablenativefeedback.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -168,7 +168,7 @@ static SelectableBackground(
): ThemeAttributeBackgroundPropType;
```

Creates an object that represents android theme's default background for selectable elements (?android:attr/selectableItemBackground). `rippleRadius` parameter controls the radius of the ripple effect.
Creates an object that represents android theme's default background for selectable elements (`?android:attr/selectableItemBackground`). `rippleRadius` parameter controls the radius of the ripple effect.
@slorberslorberAug 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Another "Markdown Directive", we want to avoid them, escape them or wrap them in code blocks.
Otherwise the upgrade will lead to:
CleanShot 2023-08-25 at 12 52 23@2x

---

Expand Down

2 changes: 1 addition & 1 deletion
website/architecture/render-pipeline.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -160,7 +160,7 @@ React Native renderer leverages structural sharing to minimize the overhead of i

In the above example, React creates the new tree using these operations:

1. CloneNode(**Node 3**, {backgroundColor: 'yellow'}) → **Node 3'**
1. CloneNode(**Node 3**, `{backgroundColor: 'yellow'}`) → **Node 3'**
@slorberslorberAug 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks reasonable to wrap in code block
{ will mess up with MDX 2 and require to be escaped
2. CloneNode(**Node 2**) → **Node 2'**
3. AppendChild(**Node 2'**, **Node 3'**)
4. AppendChild(**Node 2'**, **Node 4**)
Expand Down

9 changes: 5 additions & 4 deletions
website/blog/2016-08-19-right-to-left-support-for-react-native-apps.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -15,9 +15,10 @@ 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:

<>
<img src="/blog/assets/rtl-ama-ios-arabic.png" width={280} style={{ margin: 10 }} />

<img src="/blog/assets/rtl-ama-android-hebrew.png" width={280} style={{ margin: 10 }} />
</>

Comment on lines

+18
 to 
+21

@slorberslorberAug 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Adding a fragment here permits to avoid having an extra useless \n char when upgrading to MDX v2.
CleanShot 2023-08-25 at 14 51 24@2x
https://twitter.com/badsyntax/status/1695041116893036746
In practice it's not super impactful, but this change will ensure the 2 images look exactly the same before/after the MDX v2 upgrade.

## Overview Changes in RN for RTL support

Expand DownExpand Up@@ -53,15 +54,15 @@ With this update, when you allow RTL layout for your app:

 ```objc
 // in AppDelegate.m
[[RCTI18nUtil sharedInstance] allowRTL:YES];
[[RCTI18nUtil sharedInstance] allowRTL:YES];
 ```

 Android:

 ```java
 // in MainActivity.java
I18nUtil sharedI18nUtilInstance = I18nUtil.getInstance();
sharedI18nUtilInstance.allowRTL(context, true);
I18nUtil sharedI18nUtilInstance = I18nUtil.getInstance();
sharedI18nUtilInstance.allowRTL(context, true);

Comment on lines

-56
 to 
+65

@slorberslorberAug 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Replace tabs with spaces for consistency + avoid extra spacing appearing when upgrading:
CleanShot 2023-08-25 at 13 02 33@2x
 ```

3. For Android, you need add `android:supportsRtl="true"` to the [`<application>`](https://developer.android.com/guide/topics/manifest/application-element.html) element in `AndroidManifest.xml` file.
Expand Down

50 changes: 25 additions & 25 deletions
website/blog/2016-12-05-easier-upgrades.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -65,40 +65,40 @@ index e98ebb0..2fb6a11 100644
--- a/ios/MyAwesomeApp/Info.plist
+++ b/ios/MyAwesomeApp/Info.plist
@@ -45,7 +45,7 @@
<dict>
<key>localhost</key>
<dict>
-<key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
+<key>NSExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
</dict>
<dict>
<key>localhost</key>
<dict>
-<key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
+<key>NSExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
</dict>
[...]
```

All we need now is to apply this patch to your source files. While the old `react-native upgrade` process would have prompted you for any small difference, Git is able to merge most of the changes automatically using its 3-way merge algorithm and eventually leave us with familiar conflict delimiters:

```
13B07F951A680F5B00A75B9A /* Release */ = {
isa = XCBuildConfiguration;
buildSettings = {
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
13B07F951A680F5B00A75B9A /* Release */ = {
isa = XCBuildConfiguration;
buildSettings = {
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
<<<<<<< ours
CODE_SIGN_IDENTITY = "iPhone Developer";
FRAMEWORK_SEARCH_PATHS = (
"$(inherited)",
"$(PROJECT_DIR)/HockeySDK.embeddedframework",
"$(PROJECT_DIR)/HockeySDK-iOS/HockeySDK.embeddedframework",
);
CODE_SIGN_IDENTITY = "iPhone Developer";
FRAMEWORK_SEARCH_PATHS = (
"$(inherited)",
"$(PROJECT_DIR)/HockeySDK.embeddedframework",
"$(PROJECT_DIR)/HockeySDK-iOS/HockeySDK.embeddedframework",
);
=======
CURRENT_PROJECT_VERSION = 1;
CURRENT_PROJECT_VERSION = 1;
>>>>>>> theirs
HEADER_SEARCH_PATHS = (
"$(inherited)",
/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
"$(SRCROOT)/../node_modules/react-native/React/**",
"$(SRCROOT)/../node_modules/react-native-code-push/ios/CodePush/**",
);
HEADER_SEARCH_PATHS = (
"$(inherited)",
/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
"$(SRCROOT)/../node_modules/react-native/React/**",
"$(SRCROOT)/../node_modules/react-native-code-push/ios/CodePush/**",
);
```

Comment on lines

68
 to 
102

@slorberslorberAug 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Replace tabs with space for consistency
Avoid this unwanted extra spacing when upgrading:
CleanShot 2023-08-25 at 13 05 42@2x
Before: https://reactnative.dev/blog/2016/12/05/easier-upgrades#how-does-it-work

After: https://deploy-preview-3830--react-native.netlify.app/blog/2016/12/05/easier-upgrades#how-does-it-work

These conflicts are generally easy to reason about. The delimiter **ours** stands for "your team" whereas **theirs** could be seen as "the React Native team".
Expand Down

2 changes: 1 addition & 1 deletion
website/blog/2021-09-01-preparing-your-app-for-iOS-15-and-android-12.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -65,7 +65,7 @@ Android 12 introduces new [overscroll effect](https://developer.android.com/abou

#### Permission Updates

Android 12 allows users of your app to only provide access to the approximate location if you request it with **`ACCESS_FINE_LOCATION`** permission**.** Learn more about it [here](https://developer.android.com/about/versions/12/approximate-location).
Android 12 allows users of your app to only provide access to the approximate location if you request it with **`ACCESS_FINE_LOCATION`** permission. Learn more about it [here](https://developer.android.com/about/versions/12/approximate-location).
@slorberslorberAug 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks like a typo

Check out Google’s [detailed behavior changes](https://developer.android.com/about/versions/12/behavior-changes-all) for all apps running on Android 12.

Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.70/native-components-ios.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -286,7 +286,7 @@ RCT_EXPORT_VIEW_PROPERTY(onRegionChange, RCTBubblingEventBlock)

RCT_CUSTOM_VIEW_PROPERTY(region, MKCoordinateRegion, MKMapView)
{
[view setRegion:json ? [RCTConvert MKCoordinateRegion:json] : defaultView.region animated:YES];
[view setRegion:json ? [RCTConvert MKCoordinateRegion:json] : defaultView.region animated:YES];
}

- (UIView *)view
Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.70/profile-hermes.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -93,7 +93,7 @@ To open the profile in Chrome DevTools:
2. Select the **Performance** tab.
3. Right click and choose **Load profile...**

<img src="/docs/assets/openChromeProfile.png" alt="Loading a performance profile on Chrome DevTools" />
<img src="/docs/assets/openChromeProfile.png" alt="Loading a performance profile on Chrome DevTools" />

## How does the Hermes Profile Transformer work?

Expand Down

6 changes: 3 additions & 3 deletions
website/versioned_docs/version-0.70/pushnotificationios.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -386,9 +386,9 @@ See what push permissions are currently enabled.

`callback` will be invoked with a `permissions` object:

- `alert` :boolean
- `badge` :boolean
- `sound` :boolean
- `alert: boolean`
- `badge: boolean`
- `sound: boolean`

---

Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.70/scrollview.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -745,7 +745,7 @@ Displays the scroll indicators momentarily.
scrollTo(
 options?: { x?: number, y?: number, animated?: boolean } | number,
 deprecatedX?: number,
deprecatedAnimated?: boolean,
deprecatedAnimated?: boolean,
);
```

Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.70/touchablenativefeedback.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -158,7 +158,7 @@ TV next focus up (see documentation for the View component).
static SelectableBackground(rippleRadius: ?number)
```

Creates an object that represents android theme's default background for selectable elements (?android:attr/selectableItemBackground). `rippleRadius` parameter controls the radius of the ripple effect.
Creates an object that represents android theme's default background for selectable elements (`?android:attr/selectableItemBackground`). `rippleRadius` parameter controls the radius of the ripple effect.

---

Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.71/native-components-ios.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -286,7 +286,7 @@ RCT_EXPORT_VIEW_PROPERTY(onRegionChange, RCTBubblingEventBlock)

RCT_CUSTOM_VIEW_PROPERTY(region, MKCoordinateRegion, MKMapView)
{
[view setRegion:json ? [RCTConvert MKCoordinateRegion:json] : defaultView.region animated:YES];
[view setRegion:json ? [RCTConvert MKCoordinateRegion:json] : defaultView.region animated:YES];
}

- (UIView *)view
Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.71/profile-hermes.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -71,7 +71,7 @@ To open the profile in Chrome DevTools:
2. Select the **Performance** tab.
3. Right click and choose **Load profile...**

<img src="/docs/assets/openChromeProfile.png" alt="Loading a performance profile on Chrome DevTools" />
<img src="/docs/assets/openChromeProfile.png" alt="Loading a performance profile on Chrome DevTools" />

## How does the Hermes Profile Transformer work?

Expand Down

6 changes: 3 additions & 3 deletions
website/versioned_docs/version-0.71/pushnotificationios.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -402,9 +402,9 @@ See what push permissions are currently enabled.

`callback` will be invoked with a `permissions` object:

- `alert` :boolean
- `badge` :boolean
- `sound` :boolean
- `alert: boolean`
- `badge: boolean`
- `sound: boolean`

---

Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.71/scrollview.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -751,7 +751,7 @@ Displays the scroll indicators momentarily.
scrollTo(
 options?: {x?: number, y?: number, animated?: boolean} | number,
 deprecatedX?: number,
deprecatedAnimated?: boolean,
deprecatedAnimated?: boolean,
);
```

Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.71/touchablenativefeedback.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -168,7 +168,7 @@ static SelectableBackground(
): ThemeAttributeBackgroundPropType;
```

Creates an object that represents android theme's default background for selectable elements (?android:attr/selectableItemBackground). `rippleRadius` parameter controls the radius of the ripple effect.
Creates an object that represents android theme's default background for selectable elements (`?android:attr/selectableItemBackground`). `rippleRadius` parameter controls the radius of the ripple effect.

---

Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.72/native-components-ios.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -286,7 +286,7 @@ RCT_EXPORT_VIEW_PROPERTY(onRegionChange, RCTBubblingEventBlock)

RCT_CUSTOM_VIEW_PROPERTY(region, MKCoordinateRegion, MKMapView)
{
[view setRegion:json ? [RCTConvert MKCoordinateRegion:json] : defaultView.region animated:YES];
[view setRegion:json ? [RCTConvert MKCoordinateRegion:json] : defaultView.region animated:YES];
}

- (UIView *)view
Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.72/profile-hermes.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -71,7 +71,7 @@ To open the profile in Chrome DevTools:
2. Select the **Performance** tab.
3. Right click and choose **Load profile...**

<img src="/docs/assets/openChromeProfile.png" alt="Loading a performance profile on Chrome DevTools" />
<img src="/docs/assets/openChromeProfile.png" alt="Loading a performance profile on Chrome DevTools" />

## How does the Hermes Profile Transformer work?

Expand Down

6 changes: 3 additions & 3 deletions
website/versioned_docs/version-0.72/pushnotificationios.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -402,9 +402,9 @@ See what push permissions are currently enabled.

`callback` will be invoked with a `permissions` object:

- `alert` :boolean
- `badge` :boolean
- `sound` :boolean
- `alert: boolean`
- `badge: boolean`
- `sound: boolean`

---

Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.72/scrollview.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -751,7 +751,7 @@ Displays the scroll indicators momentarily.
scrollTo(
 options?: {x?: number, y?: number, animated?: boolean} | number,
 deprecatedX?: number,
deprecatedAnimated?: boolean,
deprecatedAnimated?: boolean,
);
```

Expand Down

2 changes: 1 addition & 1 deletion
website/versioned_docs/version-0.72/touchablenativefeedback.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -168,7 +168,7 @@ static SelectableBackground(
): ThemeAttributeBackgroundPropType;
```

Creates an object that represents android theme's default background for selectable elements (?android:attr/selectableItemBackground). `rippleRadius` parameter controls the radius of the ripple effect.
Creates an object that represents android theme's default background for selectable elements (`?android:attr/selectableItemBackground`). `rippleRadius` parameter controls the radius of the ripple effect.

---

Expand Down

6 changes: 3 additions & 3 deletions
yarn.lock

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -10997,9 +10997,9 @@ prism-react-renderer@^1.3.5:
 integrity sha512-IJ+MSwBWKG+SM3b2SUfdrhC+gu01QkV2KmRQgREThBfSQRoufqRfxfHUxpG1WcaFjP+kojcFyO9Qqtpgt3qLCg==

prismjs@^1.28.0:
 version "1.28.0"
 resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.28.0.tgz#0d8f561fa0f7cf6ebca901747828b149147044b6"
 integrity sha512-8aaXdYvl1F7iC7Xm1spqSaY/OJBpYW3v+KJ+F17iYxvdc8sfjW194COK5wVhMZX45tGteiBQgdvD/nhxcRwylw==
 version "1.29.0"
@slorberslorberAug 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

minor update, the only impact I found in my visual tests was this change in Java code blocks:
CleanShot 2023-08-25 at 15 05 55@2x
 resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.29.0.tgz#f113555a8fa9b57c35e637bba27509dcf802dd12"
 integrity sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==

proc-log@^3.0.0:
 version "3.0.0"
Expand Down