Skip to content

Commit 8bcfa8b

Browse files
sunnylqmsunnylqm
authored
Merge pull request #965 from facebook/main
0.80
2 parents 70bd672 + a53ae2a commit 8bcfa8b

256 files changed

Lines changed: 47700 additions & 1262 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎docs/_integration-with-existing-apps-kotlin.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -157,7 +157,7 @@ Then you need to enable [cleartext traffic](https://developer.android.com/traini
157157

158158
As usual, here the AndroidManifest.xml file from the Community template to use as a reference: [main](https://github.com/react-native-community/template/blob/0.77-stable/template/android/app/src/main/AndroidManifest.xml) and [debug](https://github.com/react-native-community/template/blob/0.77-stable/template/android/app/src/debug/AndroidManifest.xml)
159159

160-
This is needed as your application will communicate with your local bundler, [Metro][https://metrobundler.dev/], via HTTP.
160+
This is needed as your application will communicate with your local bundler, [Metro](https://metrobundler.dev/), via HTTP.
161161

162162
Make sure you add this only to your **debug** manifest.
163163

@@ -424,7 +424,7 @@ class MyReactActivity : ReactActivity() {
424424
</TabItem>
425425
</Tabs>
426426

427-
As usual, here the [MainActivity.kt Community template file as reference](https://github.com/react-native-community/template/blob/0.77-stable/template/android/app/src/main/java/com/helloworld/MainApplication.kt)
427+
As usual, here the [MainActivity.kt Community template file as reference](https://github.com/react-native-community/template/blob/0.80-stable/template/android/app/src/main/java/com/helloworld/MainActivity.kt)
428428

429429
Whenever you create a new Activity, you need to add it to your `AndroidManifest.xml` file. You also need set the theme of `MyReactActivity` to `Theme.AppCompat.Light.NoActionBar` (or to any non-ActionBar theme) as otherwise your application will render an ActionBar on top of your React Native screen:
430430

‎docs/accessibility.md‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,18 +14,20 @@ Android and iOS differ slightly in their approaches, and thus the React Native i
1414

1515
### `accessible`
1616

17-
When `true`, indicates that the view is an accessibility element. When a view is an accessibility element, it groups its children into a single selectable component. By default, all touchable elements are accessible.
17+
When `true`, indicates that the view is discoverable by assistive technologies such as screen readers and hardware keyboards. Note that this does not necessarily mean that the view will be focused by VoiceOver or TalkBack. There are a number of reasons for this, such as VoiceOver disallowing nested accessibility elements, or TalkBack opting to focus some parent element instead.
1818

19-
On Android, `accessible={true}` property for a react-native View will be translated into native `focusable={true}`.
19+
By default, all touchable elements are accessible.
20+
21+
On Android, `accessible` will be translated into native [`focusable`](<https://developer.android.com/reference/android/view/View#setFocusable(boolean)>). On iOS, it translates into native [`isAccessibilityElement`](https://developer.apple.com/documentation/uikit/uiaccessibilityelement/isaccessibilityelement?language=objc).
2022

2123
```tsx
22-
<View accessible={true}>
23-
<Text>text one</Text>
24-
<Text>text two</Text>
24+
<View>
25+
<View accessible={true} />
26+
<View />
2527
</View>
2628
```
2729

28-
In the above example, accessibility focus is only available on the parent view with the `accessible` property, and not individually for 'text one' and 'text two'.
30+
In the above example, accessibility focus is only available on the first child view with the `accessible` property, and not for the parent or sibling without `accessible`.
2931

3032
### `accessibilityLabel`
3133

‎docs/build-speed.md‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,26 @@ org.gradle.configuration-cache=true
8181

8282
Please refer to the [official Gradle documentation](https://docs.gradle.org/current/userguide/configuration_cache.html) for more resources on Configuration Caching.
8383

84+
## Using a Maven Mirror (Android-only)
85+
86+
When building Android apps, your Gradle builds will need to download the necessary dependencies from Maven Central and other repositories from the internet.
87+
88+
If your organization is running a Maven repository mirror, you should consider using it as it will speed up your build, by downloading the artifacts from the mirror rather than from the internet.
89+
90+
You can configure a mirror by specifying the `exclusiveEnterpriseRepository` property in your `android/gradle.properties` file:
91+
92+
```diff
93+
# Use this property to enable or disable the Hermes JS engine.
94+
# If set to false, you will be using JSC instead.
95+
hermesEnabled=true
96+
97+
# Use this property to configure a Maven enteprise repository
98+
# that will be used exclusively to fetch all of your dependencies.
99+
+exclusiveEnterpriseRepository=https://my.internal.proxy.net/
100+
```
101+
102+
By setting this property, your build will fetch dependencies **exclusively** from your specified repository and not from others.
103+
84104
## Use a compiler cache
85105

86106
If you're running frequent native builds (either C++ or Objective-C), you might benefit from using a **compiler cache**.

‎docs/fabric-native-components-android.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -425,10 +425,10 @@ class ReactWebViewPackage : BaseReactPackage() {
425425

426426
override fun getReactModuleInfoProvider(): ReactModuleInfoProvider = ReactModuleInfoProvider {
427427
mapOf(ReactWebViewManager.REACT_CLASS to ReactModuleInfo(
428-
_name = ReactWebViewManager.REACT_CLASS,
429-
_className = ReactWebViewManager.REACT_CLASS,
430-
_canOverrideExistingModule = false,
431-
_needsEagerInit = false,
428+
name = ReactWebViewManager.REACT_CLASS,
429+
className = ReactWebViewManager.REACT_CLASS,
430+
canOverrideExistingModule = false,
431+
needsEagerInit = false,
432432
isCxxModule = false,
433433
isTurboModule = true,
434434
)

‎docs/i18nmanager.md‎

Lines changed: 165 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,165 @@
1+
---
2+
id: i18nmanager
3+
title: I18nManager
4+
---
5+
6+
# I18nManager
7+
8+
The `I18nManager` module provides utilities for managing Right-to-Left (RTL) layout support for languages like Arabic, Hebrew, and others. It provides methods to control RTL behavior and check the current layout direction.
9+
10+
## Examples
11+
12+
### Change positions and animations based on RTL
13+
14+
If you absolutely position elements to align with other flexbox elements, they may not align in RTL languages. Using `isRTL` can be used to adjust alignment or animations.
15+
16+
```SnackPlayer name=I18nManager%20Change%20Absolute%20Positions%20And%20Animations
17+
import React from 'react';
18+
import {I18nManager, Text, View} from 'react-native';
19+
import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
20+
21+
const App = () => {
22+
// Change to `true` to see the effect in a non-RTL language
23+
const isRTL = I18nManager.isRTL;
24+
return (
25+
<SafeAreaProvider>
26+
<SafeAreaView>
27+
<View style={{ position: 'absolute', left: isRTL ? undefined : 0, right: isRTL ? 0 : undefined }}>
28+
{isRTL ? (
29+
<Text>Back &gt;</Text>
30+
) : (
31+
<Text>&lt; Back</Text>
32+
)}
33+
</View>
34+
</SafeAreaView>
35+
</SafeAreaProvider>
36+
);
37+
};
38+
39+
export default App;
40+
```
41+
42+
### During Development
43+
44+
```SnackPlayer name=I18nManager%20During%20Development
45+
import React, {useState} from 'react';
46+
import {Alert, I18nManager, StyleSheet, Switch, Text, View} from 'react-native';
47+
import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
48+
49+
const App = () => {
50+
const [rtl, setRTL] = useState(I18nManager.isRTL);
51+
return (
52+
<SafeAreaProvider>
53+
<SafeAreaView>
54+
<View style={styles.container}>
55+
<View style={styles.forceRtl}>
56+
<Text>Force RTL in Development:</Text>
57+
<Switch value={rtl} onValueChange={(value) => {
58+
setRTL(value);
59+
I18nManager.forceRTL(value);
60+
Alert.alert(
61+
'Reload this page',
62+
'Please reload this page to change the UI direction! ' +
63+
'All examples in this app will be affected. ' +
64+
'Check them out to see what they look like in RTL layout.',
65+
);
66+
}} />
67+
</View>
68+
</View>
69+
</SafeAreaView>
70+
</SafeAreaProvider>
71+
);
72+
};
73+
74+
const styles = StyleSheet.create({
75+
container: {
76+
padding: 20,
77+
},
78+
forceRtl: {
79+
flexDirection: 'row',
80+
justifyContent: 'space-between',
81+
alignItems: 'center',
82+
},
83+
});
84+
85+
export default App;
86+
```
87+
88+
# Reference
89+
90+
## Properties
91+
92+
### `isRTL`
93+
94+
```typescript
95+
static isRTL: boolean;
96+
```
97+
98+
A boolean value indicating whether the app is currently in RTL layout mode.
99+
100+
The value of `isRTL` is determined by the following logic:
101+
102+
- If `forceRTL` is `true`, `isRTL` returns `true`
103+
- If `allowRTL` is `false`, `isRTL` returns `false`
104+
- Otherwise, `isRTL` will be `true` given the following:
105+
- **iOS:**
106+
- The user-preferred language on the device is an RTL language
107+
- The application-defined localizations include the user-chosen language (as defined in the Xcode project file (`knownRegions = (...)`)
108+
- **Android:**
109+
- The user-preferred language on the device is an RTL language
110+
- The application's `AndroidManifest.xml` defines `android:supportsRTL="true"` on the `<application>` element
111+
112+
### `doLeftAndRightSwapInRTL`
113+
114+
```typescript
115+
static doLeftAndRightSwapInRTL: boolean;
116+
```
117+
118+
A boolean value indicating whether left and right style properties should be automatically swapped when in RTL mode. When enabled, left becomes right and right becomes left in RTL layouts.
119+
120+
## Methods
121+
122+
### `allowRTL()`
123+
124+
```typescript
125+
static allowRTL: (allowRTL: boolean) => void;
126+
```
127+
128+
Enables or disables RTL layout support for the application.
129+
130+
**Parameters:**
131+
132+
- `allowRTL` (boolean): Whether to allow RTL layout
133+
134+
**Important Notes:**
135+
136+
- Changes take effect on the next application start, not immediately
137+
- This setting is persisted across app restarts
138+
139+
### `forceRTL()`
140+
141+
```typescript
142+
static forceRTL: (forced: boolean) => void;
143+
```
144+
145+
Forces the app to use RTL layout regardless of the device language settings. This is primarily useful for testing RTL layouts during development.
146+
147+
Avoid forcing RTL in production apps as it requires a full app restart to take effect, which makes for a poor user-experience.
148+
149+
**Parameters:**
150+
151+
- `forced` (boolean): Whether to force RTL layout
152+
153+
**Important Notes:**
154+
155+
- Changes take full effect on the next application start, not immediately
156+
- The setting is persisted across app restarts
157+
- Only meant for development and testing. In production, you should either disallow RTL fully or handle it appropriately (see `isRTL`)
158+
159+
### `swapLeftAndRightInRTL()`
160+
161+
```typescript
162+
static swapLeftAndRightInRTL: (swapLeftAndRight: boolean) => void;
163+
```
164+
165+
Swap left and right style properties in RTL mode. When enabled, left becomes right and right becomes left in RTL layouts. Does not affect the value of `isRTL`.

‎docs/integration-with-android-fragment.md‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,8 @@ This is required by React Native to handle the back button press event.
3333

3434
Go into your host activity and make sure it implements the `DefaultHardwareBackBtnHandler` interface:
3535

36+
> **Deprecated.** `Activity.onBackPressed()` has been [deprecated](<https://developer.android.com/reference/android/app/Activity#onBackPressed()>) since API level 33. Android 16 devices with apps targeting API level 36 this will [no longer be called](https://developer.android.com/about/versions/16/behavior-changes-16#predictive-back) and [OnBackPressedDispatcher](https://developer.android.com/reference/androidx/activity/OnBackPressedDispatcher) should be used instead.
37+
3638
<Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
3739
<TabItem value="kotlin">
3840

@@ -56,7 +58,7 @@ import androidx.appcompat.app.AppCompatActivity
5658
}
5759

5860
+ override fun invokeDefaultOnBackPressed() {
59-
+ super.onBackPressed()
61+
+ onBackPressedDispatcher.onBackPressed()
6062
+ }
6163
}
6264
```
@@ -86,7 +88,7 @@ import androidx.appcompat.app.AppCompatActivity;
8688

8789
+ @Override
8890
+ public void invokeDefaultOnBackPressed() {
89-
+ super.onBackPressed();
91+
+ getOnBackPressedDispatcher().onBackPressed();
9092
+ }
9193
}
9294
```

‎docs/layout-props.md‎

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -547,11 +547,11 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/bottom for more details of
547547

548548
`display` sets the display type of this component.
549549

550-
It works similarly to `display` in CSS but only supports 'flex' and 'none'. 'flex' is the default.
550+
It works similarly to `display` in CSS but only supports the values 'flex', 'none', and 'contents'. The default is `flex`.
551551

552-
| Type | Required |
553-
| -------------------- | -------- |
554-
| enum('none', 'flex') | No |
552+
| Type | Required |
553+
| -------------------------------- | -------- |
554+
| enum('none', 'flex', 'contents') | No |
555555

556556
---
557557

@@ -661,6 +661,21 @@ It works similarly to `height` in CSS, but in React Native you must use points o
661661

662662
---
663663

664+
### `isolation`
665+
666+
`isolation` lets you form a [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Stacking_context). This prop is only available on the [New Architecture](/architecture/landing-page).
667+
668+
There are two values:
669+
670+
- `auto` (default): Does nothing.
671+
- `isolate`: Forms a stacking context.
672+
673+
| Type | Required |
674+
| ----------------------- | -------- |
675+
| enum('auto', 'isolate') | No |
676+
677+
---
678+
664679
### `justifyContent`
665680

666681
`justifyContent` aligns children in the main direction. For example, if children are flowing vertically, `justifyContent` controls how they align vertically. It works like `justify-content` in CSS (default: flex-start). See https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content for more details.

‎docs/layoutevent.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ Component Y coordinate inside the parent component.
5555

5656
### `target`
5757

58-
The node id of the element receiving the PressEvent.
58+
The node id of the element receiving the LayoutEvent.
5959

6060
| Type | Optional |
6161
| --------------------------- | -------- |

‎docs/linking.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -84,15 +84,15 @@ If your app is using [Universal Links](https://developer.apple.com/ios/universal
8484
<TabItem value="swift">
8585
8686
```swift title="AppDelegate.swift"
87-
func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
87+
override func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
8888
return RCTLinkingManager.application(app, open: url, options: options)
8989
}
9090
```
9191

9292
If your app is using [Universal Links](https://developer.apple.com/ios/universal-links/), you'll need to add the following code as well:
9393

9494
```swift title="AppDelegate.swift"
95-
func application(
95+
override func application(
9696
_ application: UIApplication,
9797
continue userActivity: NSUserActivity,
9898
restorationHandler: @escaping ([UIUserActivityRestoring]?) -> Void) -> Bool {

‎docs/modal.md‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -176,10 +176,21 @@ The `onOrientationChange` callback is called when the orientation changes while
176176

177177
---
178178

179+
### `allowSwipeDismissal` <div class="label ios">iOS</div>
180+
181+
Controls whether the modal can be dismissed by swiping down on iOS.
182+
This requires you to implement the `onRequestClose` prop to handle the dismissal.
183+
184+
| Type | Default |
185+
| ---- | ------- |
186+
| bool | `false` |
187+
188+
---
189+
179190
### `onRequestClose`
180191

181192
The `onRequestClose` callback is called when the user taps the hardware back button on Android or the menu button on Apple TV. Because of this required prop, be aware that `BackHandler` events will not be emitted as long as the modal is open.
182-
On iOS, this callback is called when a Modal is being dismissed using a drag gesture when `presentationStyle` is `pageSheet or formSheet`
193+
On iOS, this callback is called when a Modal is being dismissed using a drag gesture when `presentationStyle` is `pageSheet or formSheet`. When `allowSwipeDismissal` is enabled this callback will be called after dismissing the modal.
183194

184195
| Type |
185196
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |

0 commit comments

Comments
 (0)