Conversation
❌ Deploy Preview for reactnativecn failed. Why did it fail? →
|
📝 WalkthroughWalkthroughDocumentation updates across eight React Native API and integration guides, including reframing Android integration from Activity-based to Fragment-based approach, modernizing example code with SafeAreaProvider/SafeAreaView wrappers, restructuring API documentation with new props and sections, updating image paths to local assets, and correcting deprecated UI copy in Chinese content. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Tip Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs). Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
cndocs/textinput.md (1)
307-310:⚠️ Potential issue | 🟡 MinorFix malformed union type syntax in the
dataDetectorTypestable.Line [309] contains
, ,array(extra comma), which makes the type definition invalid/ambiguous in rendered docs.Suggested fix
-| enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all'), ,array of enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all') | +| enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all'), array of enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all') |🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@cndocs/textinput.md` around lines 307 - 310, The table cell for dataDetectorTypes contains a malformed union with an extra comma (", ,array")—locate the `dataDetectorTypes` entry in the table and remove the stray comma so the type reads as a valid union like "enum('phoneNumber','link','address','calendarEvent','none','all'), array of enum('phoneNumber','link','address','calendarEvent','none','all')" ensuring consistent spacing and punctuation around the enum list.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@cndocs/integration-with-android-fragment.md`:
- Line 20: The documentation incorrectly references the Android resource
directory as "res/layouts"; update the sentence in the
"integration-with-android-fragment.md" content so it uses the correct Android
resource directory name "res/layout" (e.g., change `res/layouts` to `res/layout`
in the sentence mentioning `main_activity.xml`) so the onboarding steps point to
the proper layout folder.
- Around line 42-51: The Kotlin diff in the snippet incorrectly shows two added
class declarations; update the diff so it removes the old declaration and adds
the new one: change one of the "+class MainActivity : AppCompatActivity" lines
to a deletion ("-class MainActivity : AppCompatActivity") and keep the added
implementation line "+class MainActivity : AppCompatActivity(),
DefaultHardwareBackBtnHandler"; target the MainActivity declaration and the
DefaultHardwareBackBtnHandler import to ensure the diff semantics are correct.
- Around line 135-137: The example still calls super.onBackPressed() inside
invokeDefaultOnBackPressed (and the similar block around lines 174–177); replace
those calls so the fragment uses the activity's OnBackPressedDispatcher instead
(e.g., call requireActivity().onBackPressedDispatcher.onBackPressed() from
invokeDefaultOnBackPressed or invoke the dispatcher via the fragment's
activity), and update both occurrences (method invokeDefaultOnBackPressed and
the other matching snippet) to consistently use OnBackPressedDispatcher rather
than Activity.onBackPressed().
In `@cndocs/text.md`:
- Around line 294-295: Update the local doc link to include the .md extension:
replace the anchor reference accessibility#accessible-ios-android with
accessibility.md#accessible-ios-android in cndocs/text.md so the link format
matches the rest of the file and avoids build-time route/anchor mismatches.
In `@cndocs/textinput.md`:
- Around line 946-948: Fix the mismatched quoting for the blurAndSubmit option:
change the backtick/quote typo around the symbol currently shown as
`'blurAndSubmit`'` to use correct matching quotes/backticks so it reads
consistently (e.g., `'blurAndSubmit'` or `blurAndSubmit`) alongside the existing
`'submit'` entry; update the text where the symbol blurAndSubmit is referenced
to ensure the quotes are balanced and consistent with the surrounding
documentation.
---
Outside diff comments:
In `@cndocs/textinput.md`:
- Around line 307-310: The table cell for dataDetectorTypes contains a malformed
union with an extra comma (", ,array")—locate the `dataDetectorTypes` entry in
the table and remove the stray comma so the type reads as a valid union like
"enum('phoneNumber','link','address','calendarEvent','none','all'), array of
enum('phoneNumber','link','address','calendarEvent','none','all')" ensuring
consistent spacing and punctuation around the enum list.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 58714aad-2224-47a8-888b-0b1d06389551
📒 Files selected for processing (8)
cndocs/integration-with-android-fragment.mdcndocs/other-debugging-methods.mdcndocs/pressable.mdcndocs/text.mdcndocs/textinput.mdcndocs/touchableopacity.mdcndocs/transforms.mdcndocs/view.md
| 在本示例中，我们将使用 `FrameLayout` 把一个 React Native Fragment 添加到 Activity 中。这种方式足够灵活，也可以适配其他布局（如底部弹窗或标签布局）。 | ||
|
|
||
| 确保主应用程序类实现 ReactApplication： | ||
| 首先在 Activity 的布局文件（例如 `res/layouts` 文件夹中的 `main_activity.xml`）中添加一个带有 id、宽度和高度的 `<FrameLayout>`。React Native Fragment 将渲染到此布局中。 |
There was a problem hiding this comment.
Correct Android resource directory name.
Line [20] says res/layouts; Android layout XML files are in res/layout. This path typo can break onboarding steps.
Suggested fix
-首先在 Activity 的布局文件（例如 `res/layouts` 文件夹中的 `main_activity.xml`）中添加一个带有 id、宽度和高度的 `<FrameLayout>`。React Native Fragment 将渲染到此布局中。
+首先在 Activity 的布局文件（例如 `res/layout` 文件夹中的 `main_activity.xml`）中添加一个带有 id、宽度和高度的 `<FrameLayout>`。React Native Fragment 将渲染到此布局中。📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| 首先在 Activity 的布局文件（例如 `res/layouts` 文件夹中的 `main_activity.xml`）中添加一个带有 id、宽度和高度的 `<FrameLayout>`。React Native Fragment 将渲染到此布局中。 | |
| 首先在 Activity 的布局文件（例如 `res/layout` 文件夹中的 `main_activity.xml`）中添加一个带有 id、宽度和高度的 `<FrameLayout>`。React Native Fragment 将渲染到此布局中。 |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@cndocs/integration-with-android-fragment.md` at line 20, The documentation
incorrectly references the Android resource directory as "res/layouts"; update
the sentence in the "integration-with-android-fragment.md" content so it uses
the correct Android resource directory name "res/layout" (e.g., change
`res/layouts` to `res/layout` in the sentence mentioning `main_activity.xml`) so
the onboarding steps point to the proper layout folder.
| ```diff | ||
| package <your-package-here> | ||
|
|
||
| </TabItem> | ||
| <TabItem value="java"> | ||
| import android.os.Bundle | ||
| import androidx.appcompat.app.AppCompatActivity | ||
| +import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler | ||
|
|
||
| ```java | ||
| public class MyReactApplication extends Application implements ReactApplication { | ||
| @Override | ||
| public void onCreate() { | ||
| super.onCreate(); | ||
| SoLoader.init(this, false); | ||
| } | ||
| +class MainActivity : AppCompatActivity() { | ||
| +class MainActivity : AppCompatActivity(), DefaultHardwareBackBtnHandler { | ||
|
|
There was a problem hiding this comment.
Fix invalid diff semantics in Kotlin snippet.
Line [49]-Line [50] currently shows two +class lines, which makes the diff example inconsistent. One should be removed (-) and one added (+).
Suggested fix
-+class MainActivity : AppCompatActivity() {
+class MainActivity : AppCompatActivity(), DefaultHardwareBackBtnHandler {🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@cndocs/integration-with-android-fragment.md` around lines 42 - 51, The Kotlin
diff in the snippet incorrectly shows two added class declarations; update the
diff so it removes the old declaration and adds the new one: change one of the
"+class MainActivity : AppCompatActivity" lines to a deletion ("-class
MainActivity : AppCompatActivity") and keep the added implementation line
"+class MainActivity : AppCompatActivity(), DefaultHardwareBackBtnHandler";
target the MainActivity declaration and the DefaultHardwareBackBtnHandler import
to ensure the diff semantics are correct.
| override fun invokeDefaultOnBackPressed() { | ||
| super.onBackPressed() | ||
| } |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# First, let's check the file exists and get its line count
wc -l cndocs/integration-with-android-fragment.mdRepository: reactnativecn/react-native-website
Length of output: 125
🏁 Script executed:
# Read the relevant sections of the file
# Check lines around 35-37 (deprecation warning)
sed -n '30,45p' cndocs/integration-with-android-fragment.mdRepository: reactnativecn/react-native-website
Length of output: 861
🏁 Script executed:
# Check lines around 136-137 (first code example)
sed -n '130,145p' cndocs/integration-with-android-fragment.mdRepository: reactnativecn/react-native-website
Length of output: 352
🏁 Script executed:
# Check lines around 174-177 (second code example)
sed -n '170,185p' cndocs/integration-with-android-fragment.mdRepository: reactnativecn/react-native-website
Length of output: 267
🌐 Web query:
Android OnBackPressedDispatcher onBackPressed Kotlin Java syntax
💡 Result:
Kotlin (Activity)
import androidx.activity.OnBackPressedCallback
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
onBackPressedDispatcher.addCallback(
this, // LifecycleOwner
object : OnBackPressedCallback(true) {
override fun handleOnBackPressed() {
// handle back
// e.g. finish()
}
}
)
}
}(Registers an OnBackPressedCallback whose handleOnBackPressed() runs when enabled.) [1][2]
Kotlin (Fragment)
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
val callback = requireActivity().onBackPressedDispatcher.addCallback(viewLifecycleOwner) {
// handle back
}
// callback.isEnabled = false // optional
}(The addCallback(owner) { ... } KTX form is shown in the “custom back navigation” guide.) [4]
Java (Activity)
import androidx.activity.OnBackPressedCallback;
public class MainActivity extends AppCompatActivity {
`@Override`
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
getOnBackPressedDispatcher().addCallback(
this, // LifecycleOwner
new OnBackPressedCallback(true) {
`@Override`
public void handleOnBackPressed() {
// handle back
}
}
);
}
}(Java uses getOnBackPressedDispatcher() + new OnBackPressedCallback(...).) [1][4]
Manually triggering back dispatch (either language)
onBackPressedDispatcher.onBackPressed()Calls the dispatcher to run the top-most enabled callback (or fall back). [3]
Sources: AndroidX OnBackPressedCallback, OnBackPressedDispatcher API refs + Android “Provide custom back navigation” guide. [1][3][4]
🌐 Web query:
Android Activity.onBackPressed() deprecated API 33 OnBackPressedDispatcher
💡 Result:
Activity.onBackPressed() is deprecated (and increasingly incompatible with predictive back). The supported replacement is AndroidX back handling via OnBackPressedDispatcher + OnBackPressedCallback (or the platform OnBackInvokedCallback on newer Android versions). [1] [3]
Migrate to OnBackPressedDispatcher (recommended)
In an Activity that is a ComponentActivity (e.g., AppCompatActivity):
import androidx.activity.OnBackPressedCallback
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
onBackPressedDispatcher.addCallback(
this, // LifecycleOwner
object : OnBackPressedCallback(true) {
override fun handleOnBackPressed() {
// Your custom back behavior here
// e.g. if (shouldBlockBack) return
// else isEnabled = false; onBackPressedDispatcher.onBackPressed()
finish()
}
}
)
}
}Notes:
- Callbacks are stacked; the most recently added enabled callback wins. [3]
- Prefer enabling/disabling the callback (
isEnabled = false) based on UI state instead of callingonBackPressed()yourself. [3]
Predictive back (API 33+)
- AndroidX
OnBackPressedDispatcherbridges to the newer back system (includingOnBackInvokedDispatcher) when available, so most apps should just migrate to AndroidX callbacks. [2] [3] - Predictive back system animations are controlled by the manifest flag
android:enableOnBackInvokedCallback(app- or activity-level). [3]
Sources: Android Activity deprecation guidance [1], OnBackPressedDispatcher behavior/bridging [2], Android predictive back migration guide (updated 2026-03-04) [3].
🏁 Script executed:
# Let me check if there are any imports or context around these methods
sed -n '1,50p' cndocs/integration-with-android-fragment.md | head -40Repository: reactnativecn/react-native-website
Length of output: 1790
🏁 Script executed:
# Get full context around line 136 to understand the class structure
sed -n '120,150p' cndocs/integration-with-android-fragment.mdRepository: reactnativecn/react-native-website
Length of output: 994
Update code examples to use OnBackPressedDispatcher consistently with the deprecation warning.
Lines 35–37 correctly warn that Activity.onBackPressed() is deprecated and recommend using OnBackPressedDispatcher, but lines 136 and 176 still use super.onBackPressed(). This contradicts the documented guidance and will mislead developers implementing this pattern.
Suggested fix
- override fun invokeDefaultOnBackPressed() {
- super.onBackPressed()
- }
+ override fun invokeDefaultOnBackPressed() {
+ onBackPressedDispatcher.onBackPressed()
+ }- `@Override`
- public void invokeDefaultOnBackPressed() {
- super.onBackPressed();
- }
+ `@Override`
+ public void invokeDefaultOnBackPressed() {
+ getOnBackPressedDispatcher().onBackPressed();
+ }Also applies to: 174–177
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@cndocs/integration-with-android-fragment.md` around lines 135 - 137, The
example still calls super.onBackPressed() inside invokeDefaultOnBackPressed (and
the similar block around lines 174–177); replace those calls so the fragment
uses the activity's OnBackPressedDispatcher instead (e.g., call
requireActivity().onBackPressedDispatcher.onBackPressed() from
invokeDefaultOnBackPressed or invoke the dispatcher via the fragment's
activity), and update both occurrences (method invokeDefaultOnBackPressed and
the other matching snippet) to consistently use OnBackPressedDispatcher rather
than Activity.onBackPressed().
| 更多信息请参阅[辅助功能指南](accessibility#accessible-ios-android)。 | ||
|
|
There was a problem hiding this comment.
Use consistent local doc link format for accessibility anchor.
Line [294] links to accessibility#accessible-ios-android, while this file predominantly uses accessibility.md#.... Keeping .md avoids potential route/anchor mismatch across build modes.
Suggested fix
-更多信息请参阅[辅助功能指南](accessibility#accessible-ios-android)。
+更多信息请参阅[辅助功能指南](accessibility.md#accessible-ios-android)。🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@cndocs/text.md` around lines 294 - 295, Update the local doc link to include
the .md extension: replace the anchor reference
accessibility#accessible-ios-android with
accessibility.md#accessible-ios-android in cndocs/text.md so the link format
matches the rest of the file and avoids build-time route/anchor mismatches.
| - `'submit'` 只发送提交事件，不使输入框失焦 | ||
| - `'blurAndSubmit`' 会使输入框失焦并发送提交事件 | ||
|
|
There was a problem hiding this comment.
Correct mismatched quoting for blurAndSubmit.
Line [947] currently shows 'blurAndSubmit'`, which is a typo and can cause copy/paste confusion.
Suggested fix
-- `'blurAndSubmit`' 会使输入框失焦并发送提交事件
+- `'blurAndSubmit'` 会使输入框失焦并发送提交事件📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| - `'submit'` 只发送提交事件，不使输入框失焦 | |
| - `'blurAndSubmit`' 会使输入框失焦并发送提交事件 | |
| - `'submit'` 只发送提交事件，不使输入框失焦 | |
| - `'blurAndSubmit'` 会使输入框失焦并发送提交事件 |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@cndocs/textinput.md` around lines 946 - 948, Fix the mismatched quoting for
the blurAndSubmit option: change the backtick/quote typo around the symbol
currently shown as `'blurAndSubmit`'` to use correct matching quotes/backticks
so it reads consistently (e.g., `'blurAndSubmit'` or `blurAndSubmit`) alongside
the existing `'submit'` entry; update the text where the symbol blurAndSubmit is
referenced to ensure the quotes are balanced and consistent with the surrounding
documentation.
1 participant
概要
本批次按高质量模式同步 cndocs 与上游 docs 差异，重点更新结构变化较大的 API 文档与调试/集成指南，保持 frontmatter id/title、代码/API 名称、链接与文档结构一致。
处理文件（8）
跳过文件
_开头的文档（按规则统一跳过）translate-progress.json中merged列表内文件（已跳过）cndocs/getting-started.md：中文站点存在本地化结构（旧版环境搭建多标签导览），与上游简化版页面策略不同，避免误覆盖cndocs/flexbox.md：本轮未纳入，避免在超大文档上进行不完整改写，留待下一批次专项处理术语与风格对齐说明
:::tip/:::note/:::warning）与示例结构class->className以适配 MDX/JSX自检
id/title（按要求保留）Summary by CodeRabbit
Release Notes
onHoverIn,onHoverOut, andonPressMove.RippleConfigforeground property for Android ripple effects.