Modal push elements down when it's open ANDROID

[FedeBatt]

Description

I create a tooltip component, but when i open the modal with the property "transparent", the elements are pushed down only happend in Android. In iOS work's well.

React Native Version

0.70.6

Output of npx react-native info

System:
OS: macOS 13.3.1
CPU: 2,6 GHz Intel Core i7 de seis núcleos
Memory: 162.64 MB / 16.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 18.16.0 - /usr/local/bin/node
Yarn: Not Found
npm: 9.5.1 - /usr/local/bin/npm
Watchman: 2023.05.01.00 - /opt/homebrew/bin/watchman
Managers:
CocoaPods: 1.12.1 - /Users/karimbelarbi/.rvm/gems/ruby-2.7.5/bin/pod
SDKs:
iOS SDK:
Platforms:
Android SDK: Pixel4 SDK 33
IDEs:
Android Studio: 2022.2 AI-222.4459.24.2221.9971841
Xcode: 14.3/14E222b - /usr/bin/xcodebuild
Languages:
Java: Not Found
npmPackages:
@react-native-community/cli: Not Found
react: 18.1.0
react-native: 0.70.6
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

Steps to reproduce

Paste the follow code and you should see

Snack, code example, screenshot, or link to a repository

<View style={{ justifyContent: 'center', alignItems: 'center', flex: 1 }}> <Text> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed volutpat lacus in massa eleifend blandit. Donec sit amet ipsum sed odio bibendum facilisis a eu lorem. Fusce consequat felis at massa rhoncus, a faucibus sapien interdum. <Modal transparent visible={true}> <View style={{ width: '100%', height: '100%', backgroundColor: 'red', }} ></View> </Modal> </Text> </View>

[github-actions]

⚠️

Newer Version of React Native is Available!

ℹ️

You are on a supported minor version, but it looks like there's a newer patch available - 0.70.9. 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.

[hanarotg]

In Android platform, you need to set statusBarTranslucent to true in your modal

• React-Native statusBarTranslucent

Edited code

import React, {useState} from 'react';
import {Text, View, Modal} from 'react-native';

export default function App() {
  return (
    <View style={{justifyContent: 'center', alignItems: 'center', flex: 1}}>
      <Text>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed volutpat
        lacus in massa eleifend blandit. Donec sit amet ipsum sed odio bibendum
        facilisis a eu lorem. Fusce consequat felis at massa rhoncus, a faucibus
        sapien interdum.
        <Modal transparent visible={true} statusBarTranslucent={true}>
          <View
            style={{
              width: '100%',
              height: '100%',
              backgroundColor: 'red',
            }}></View>
        </Modal>
      </Text>
    </View>
  );
}

Screenshot

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions]

This issue was closed because it has been stalled for 7 days with no activity.