[Android] Modal - statusBarTranslucent behaves differently, modal content is pushed up when keyboard open even if set to true

[olivertylsar]

Description

We are using Modal component in our app. We usually have its content (dialog) centered, but in one case where text input is included, we have the content pushed up by some pixels to prevent keyboard overlapping it, so it always displays in the top half of the screen.

We want it to behave the same on android and iOS. With setting statusBarTranslucent to true we were able to achieve the consistent behavior on both platforms in previous React Native versions (last one 0.74), because with this setting the modal content didn't react to keyboard visibitily and was able to preserve its position. After upgrading to 0.76.1, the same code started to behave differently. The modal content is now being pushed up automatically when keyboard is open, even if statusBarTranslucent is set to true on android. We want to keep it at the same position regardless of keyboard visibility.

Steps to reproduce

  const [showModal, setShowModal] = useState(false)

  return (
    <SafeAreaView style={styles.container}>
      <Button title={"This is React Native 0.76.1"} onPress={() =>setShowModal(true)} />
      <Modal visible={showModal} transparent statusBarTranslucent={true}>
        <View style={{flexGrow: 1, justifyContent: "center", alignItems: "center", flexDirection: 'column'}}>
          <View style={{ padding: 20, backgroundColor: "white"}}>
            <TextInput placeholder={"Click here to write"}/>
            <Button title={"Close"} onPress={() => setShowModal(false)}/>
          </View>
        </View>
      </Modal>
    </SafeAreaView>
  )
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#ecf0f1',
    flex: 1,
    justifyContent: 'center',
    padding: 8,
  },
});

export default App;`

### React Native Version

0.76.1

### Affected Platforms

Runtime - Android

### Output of `npx react-native info`

```text
System:
  OS: macOS 15.1
  CPU: (10) arm64 Apple M2 Pro
  Memory: 119.13 MB / 32.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.16.0
    path: ~/.nvm/versions/node/v20.16.0/bin/node
  Yarn:
    version: 1.22.19
    path: /opt/homebrew/bin/yarn
  npm:
    version: 10.8.1
    path: ~/.nvm/versions/node/v20.16.0/bin/npm
  Watchman:
    version: 2024.09.16.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods: Not Found
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.1
      - iOS 18.1
      - macOS 15.1
      - tvOS 18.1
      - visionOS 2.1
      - watchOS 11.1
  Android SDK: Not Found
IDEs:
  Android Studio: 2022.2 AI-222.4459.24.2221.10121639
  Xcode:
    version: 16.1/16B40
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.10
    path: /usr/bin/javac
  Ruby:
    version: 3.3.1
    path: /Users/olivertylsar/.rvm/rubies/ruby-3.3.1/bin/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 15.0.0
    wanted: 15.0.0
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.76.1
    wanted: 0.76.1
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: Not found
  newArchEnabled: false

Stacktrace or Logs

There is no crash nor failure.

Reproducer

https://github.com/olivertylsar/rn-modal-android

Screenshots and Videos

RN 0.74.5 with desired and expected behavior:

RN-0.74.5.mp4

RN 0.76.1 with actual behavior:

RN-0.76.1.mp4

[dnhan1707]

Hi @olivertylsar , Thank you fro posting this issue.
I saw that you want the expected result to work on both IOS and Android, but from the documentation, statusBarTranslucent is only supported on Android

I'll try to work on this for the Android side first, then let's see if I can do anything on IOS

[olivertylsar]

@dnhan1707 Yes, on iOS it works fine. The issue is on android, I was able to change the behavior based on the statusBarTranslucent prop in previous React Native versions, which is not the case anymore after the upgrade. You can try it yourself by toggling the statusBarTranslucent prop.

I think it is related to android:windowSoftInputMode="adjustResize", which resizes the content when keyboard opens on android. The question is, if modals should be impacted by that and if they should, is there a possibility to add another prop to set that it should not? I'm not sure if it was intentional before that statusBarTranslucent was changing the behavior in relation to keyboard, but it was a very common suggestion on stackoverflow etc. to use it to achieve it.