Android View doesnt go to bottom screen edge

[ElSeniorMikael]

Description

Our team realised that our apps we made, on certain Android device, the view doesnt go to the bottom edge of the screens. there's always a spacing. At first we thought it was React navigation that would create that spacings but we recently started a new project and we come to realise that it is native from React native. From the default source files of React native (the template we get from npx create-react-app) we have seen that the template use the SafeArea component, so we replaced it with a View component and tried with and without flex: 1 to his styles property but nothing changes, the spacings is still there. Is there a way of getting rid of it ?

PREVIEW OF CODE

PREVIEW ANDROID DEVICE (the spacings would be the black bar under the white scrollview)

Steps to reproduce

1. npx create-react-app
2. npm run android (i'm using PIXEL 6)

React Native Version

0.72.12

Affected Platforms

Runtime - Android

Output of npx react-native info

System:
  OS: macOS 14.1.2
  CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Memory: 2.76 GB / 32.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 18.19.0
    path: /usr/local/opt/node@18/bin/node
  Yarn: Not Found
  npm:
    version: 10.2.3
    path: /usr/local/opt/node@18/bin/npm
  Watchman:
    version: 2023.12.04.00
    path: /usr/local/bin/watchman
Managers:
  CocoaPods:
    version: 1.14.3
    path: /Users/michaellabelle/.rvm/gems/ruby-2.7.4/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.0
      - iOS 17.0
      - macOS 14.0
      - tvOS 17.0
      - watchOS 10.0
  Android SDK: Not Found
IDEs:
  Android Studio: 2022.3 AI-223.8836.35.2231.10671973
  Xcode:
    version: 15.0.1/15A507
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 11.0.21
    path: /usr/bin/javac
  Ruby:
    version: 2.7.4
    path: /Users/michaellabelle/.rvm/rubies/ruby-2.7.4/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.72.12
    wanted: 0.72.12
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: false

Stacktrace or Logs

No crash or failure

Reproducer

https://snack.expo.dev/@mlabelle/rn---spacing-from-bottom-edge?platform=android

Screenshots and Videos

No response

[github-actions[bot]]

:warning:

Newer Version of React Native is Available!

:information_source:

You are on a supported minor version, but it looks like there's a newer patch available - 0.72.12. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

[ElSeniorMikael]

I've update to 0.72.12 + made a repo for the problem i'm facing

[lovelytingy]

Hi @ElSeniorMikael, To customize the behavior of the bottom bar in your React Native app, you can make it transparent or change its color by adding these lines to your AppTheme in res/values/styles.xml:

<item name="android:windowTranslucentNavigation">true</item>

or

<item name="android:navigationBarColor">#FF0000</item>

Use the first line to make the bottom bar transparent or the second one to change its color. Let me know if you need further assistance.

[bfricka]

I have tried everything to remove this gap, and, while you can remove it using custom Android styles in normal views, it persists in modals, and there's nothing you can do to fix it there.

[mensonones]

Hey, @ElSeniorMikael! See this example

res/values/styles.xml

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
        <item name="android:navigationBarColor">
                  @android:color/background_light
               </item>
    </style>
</resources>

Set item navigationBarColor your preference

More info: https://developer.android.com/design/ui/mobile/guides/foundations/system-bars

[teivienn]

You need use additional library to support edge-to-edge mode on android.

When you will target to android 15 this options will be enabled by default

• https://developer.android.com/about/versions/15/behavior-changes-15#edge-to-edge

But react-native doesn't support android 15 and edge-to-edge mode yet

[clspeter]

I and using Expo and managed to let View render under with NavigationBar.setPositionAsync('absolute') from Expo NavigationBar

I Believe setFitsSystemWindows() from react-native-system-navigation-bar works the same way if you are not comfortable using expo.

I have tried everything to remove this gap, and, while you can remove it using custom Android styles in normal views, it persists in modals, and there's nothing you can do to fix it there.

Same here, react native Modal component will ignore this behavior, only render the default way and wont cover navigation bar section, please let me know if any have sloution, Thanks.