Bump to React Native 0.87 #4310
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -41,4 +41,9 @@ hermesEnabled=true | |
| # Use this property to enable edge-to-edge display support. | ||
| # This allows your app to draw behind system bars for an immersive UI. | ||
| # Note: Only works with ReactActivity and should not be used with custom Activity. | ||
| edgeToEdgeEnabled=true | ||
|
There was a problem hiding this comment. 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win 🧩 Analysis chain🏁 Script executed: #!/bin/bash
set -eu
printf '%s\n' '--- target configuration ---'
sed -n '35,52p' apps/basic-example/android/gradle.properties
printf '%s\n' '--- App.tsx relevant section ---'
sed -n '1,85p' apps/basic-example/src/App.tsx
printf '%s\n' '--- package and dependency references ---'
rg -n -C 3 'react-native-safe-area-context|SafeAreaView|edgeToEdgeEnabled|targetSdkVersion|compileSdkVersion' \
apps/basic-example package.json apps/basic-example/package.json 2>/dev/null || true
printf '%s\n' '--- repository files related to Android inset handling ---'
git ls-files | rg '(^|/)(App\.tsx|.*safe.?area.*|gradle\.properties|build\.gradle|AndroidManifest\.xml)$' | head -200Repository: software-mansion/react-native-gesture-handler Length of output: 7566 🌐 Web query:
💡 Result: For React Native applications targeting modern Android, edge-to-edge support is now a standard requirement, particularly as Android 15 and 16 enforce this behavior [1][2]. Enabling Edge-to-Edge Starting with React Native 0.81, you can enable edge-to-edge layout across supported Android versions by adding the following property to your android/gradle.properties file [3][2]: edgeToEdgeEnabled=true When this property is enabled, your app's content will flow behind the system bars (status bar and navigation bar) [3][4]. For applications targeting Android 15 (SDK 35) or higher, edge-to-edge is enforced by the platform [1][2]. Recommended Approach for Safe Areas The native React Native SafeAreaView component is generally discouraged for Android, as it was originally designed for iOS and lacks the necessary flexibility for robust Android edge-to-edge handling [3][5][6]. Instead, use the community-standard react-native-safe-area-context library [3][5][6]. Implementation Steps: 1. Configure the Provider: Wrap your root component in SafeAreaProvider [7][8]. 2. Use the Hook: Instead of the SafeAreaView component, use the useSafeAreaInsets hook to apply padding to your screens based on the device's safe area insets [3][5]. This ensures consistent behavior across both platforms [3][5]. Example: import { useSafeAreaInsets } from 'react-native-safe-area-context'; import { View } from 'react-native'; const MyComponent = => { const insets = useSafeAreaInsets; return ( <View style={{ paddingTop: insets.top, paddingBottom: insets.bottom }}> {/* Content */} ); }; Important Considerations: - Deprecation of Older Libraries: If you previously used the third-party react-native-edge-to-edge library, it is now largely superseded by the built-in edgeToEdgeEnabled Gradle property in React Native 0.81+ [9][2]. - System Bars: With edge-to-edge enabled, traditional APIs for setting status bar background colors may have reduced or no effect because the bars are now transparent [2][6]. You may need to use tools like react-native-navigation-bar if specific navigation bar styling is required [4][9]. - Testing: Always test on devices running Android 15+ to ensure your UI correctly handles system bar insets, as edge-to-edge enforcement cannot be opted out of on Android 16+ [2][10]. Citations:
🏁 Script executed: #!/bin/bash
set -eu
printf '%s\n' '--- React Native version declarations ---'
rg -n -C 2 '"react-native"|reactNativeVersion|REACT_NATIVE_VERSION' \
package.json apps/basic-example package.json apps/basic-example/android \
2>/dev/null || true
printf '%s\n' '--- all basic-example layout and inset-related code ---'
rg -n -C 4 'SafeAreaView|paddingTop|paddingBottom|StatusBar|WindowInsets|insets|SafeAreaProvider|useSafeArea' \
apps/basic-example/src apps/basic-example/android 2>/dev/null || true
printf '%s\n' '--- root scripts and lockfile entries ---'
rg -n -m 20 '"react-native"|"react-native-safe-area-context"' \
package.json yarn.lock package-lock.json pnpm-lock.yaml 2>/dev/null || true
printf '%s\n' '--- Android activity configuration ---'
sed -n '1,180p' apps/basic-example/android/app/src/main/AndroidManifest.xml
rg -n -C 5 'class MainActivity|ReactActivity|edgeToEdge|WindowCompat|setDecorFitsSystemWindows|WindowInsets' \
apps/basic-example/android apps/basic-example/src 2>/dev/null || trueRepository: software-mansion/react-native-gesture-handler Length of output: 9472 🌐 Web query:
💡 Result: The SafeAreaView component in React Native is deprecated and should not be used in new projects [1][2][3]. The official recommendation is to use the react-native-safe-area-context library instead, which provides a robust, cross-platform solution for handling safe area insets on both Android and iOS [1][2][4]. Historically, the built-in SafeAreaView component was limited to iOS devices (iOS 11+) and did not provide native support for Android safe area insets [5][1][6]. By contrast, react-native-safe-area-context is designed to work across platforms, accurately handling notches, home indicators, and other physical screen limitations on both operating systems [4]. Most modern React Native projects, including those using React Navigation, rely on this library as the standard approach [4]. Citations:
🌐 Web query:
💡 Result: In React Native, the built-in SafeAreaView component is deprecated and was primarily designed for iOS [1]. It does not provide cross-platform support for handling edge-to-edge insets on Android [1][2]. For modern Android applications targeting edge-to-edge (which is enforced by default on Android 15/API 35+), you should use the react-native-safe-area-context library instead of the core SafeAreaView component [1][2]. Regarding edge-to-edge configuration in React Native: 1. Gradle Property: The edge-to-edge behavior in React Native is controlled by the edgeToEdgeEnabled property in your app's gradle.properties file [3][4]. 2. Automatic Detection: As of recent releases (including v0.86 and v0.87), React Native has improved handling for edge-to-edge scenarios [5][6]. The framework now includes logic to detect when edge-to-edge is enforced by the OS (Android 15+), even if the edgeToEdgeEnabled property is not explicitly set to true [5]. 3. Implementation: When edge-to-edge is active, React Native automatically adjusts certain behaviors, such as disabling StatusBar backgroundColor and translucent properties to allow the app to render behind system bars [3]. To properly manage system bar overlaps in your layout on Android, it is recommended to use the useSafeAreaInsets hook provided by react-native-safe-area-context, which is the industry standard for this purpose [1][4][2]. Citations:
🏁 Script executed: #!/bin/bash
set -eu
printf '%s\n' '--- navigator implementation ---'
fd -i 'Navigator' apps/basic-example/src --type f -x sh -c 'echo "--- $1"; sed -n "1,240p" "$1"' sh {}
printf '%s\n' '--- navigator header and container styles ---'
rg -n -C 5 'header|padding|SafeArea|StatusBar|View|Navigator' apps/basic-example/src/Navigator* apps/basic-example/src 2>/dev/null | head -240Repository: software-mansion/react-native-gesture-handler Length of output: 18022 Replace the fixed Android padding with runtime insets.
🤖 Prompt for AI AgentsSource: MCP tools |
||
|
|
||
| # Opt out of built-in kotlin and new DSL behavior that ships with AGP 9. | ||
| # Starting from AGP 10.x these opt outs will be removed. | ||
| android.builtInKotlin=false | ||
| android.newDsl=false | ||
Uh oh!
There was an error while loading. Please reload this page.