react-native-modal/react-native-modal

AvoidKeyboard is not working when we use it with statusBarTranslucent.

arunabhverma opened this issue · 7 comments

arunabhverma commented

Environment

System:
OS: macOS 12.4
CPU: (8) x64 Apple M1
Memory: 31.11 MB / 16.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 16.17.0 - /usr/local/bin/node
Yarn: 1.22.19 - /usr/local/bin/yarn
npm: 8.15.0 - /usr/local/bin/npm
Watchman: 2022.08.15.00 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.11.3 - /usr/local/bin/pod
SDKs:
iOS SDK:
  Platforms: DriverKit 21.4, iOS 15.5, macOS 12.3, tvOS 15.4, watchOS 8.5
Android SDK: Not Found
IDEs:
Android Studio: 2021.2 AI-212.5712.43.2112.8609683
Xcode: 13.4.1/13F100 - /usr/bin/xcodebuild
Languages:
Java: 11.0.11 - /Library/Java/JavaVirtualMachines/adoptopenjdk-11.jdk/Contents/Home/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 18.1.0 => 18.1.0 
react-native: 0.70.1 => 0.70.1 
react-native-macos: Not Found
npmGlobalPackages:
*react-native*: Not Found

Platforms

Android and IOS

Versions

  • react-native-modal: 13.0.1
  • react-native: 0.70.1
  • react: 18.1.0

Description

AvoidKeyboard prop is not working when we use it with statusBarTranslucent.

Reproducible Demo

Use react native modal with avoidKeyboard true and statusBarTranslucent and use a textInput as child component.
code

daniele-mc commented

I have the same issue

  • 👍8
brightsider commented

any news?

arunabhverma commented
vvodicka commented

You can mitigate this bug by not using statusBarTranslucent and modifying status bar background color manually.

import {StatusBar} from 'react-native'
...
const modalBackdropColor='rgba(0,0,0,0.7)' 
<>
  <StatusBar backgroundColor={isModalVisible ? modalBackdropColor : undefined} />
  <ReactModal
    ...
    avoidKeyboard={true}
    statusBarTranslucent={false}
  >
      ...
  </ReactModal>
</>

...you get the point

gabrielyotoo commented

Still an issue.

  • 👍1
manishwebskitter commented

Setting statusBarTranslucent={false} worked for me.

<Modal
backdropOpacity={0.9}
backdropColor='#9c9eaa'
isVisible={bottomSheetVisible}
deviceHeight={height}
deviceWidth={width}
avoidKeyboard={true}
statusBarTranslucent={false}
hasBackdrop={bottomSheetVisible}
animationInTiming={500}
animationOutTiming={600}
backdropTransitionInTiming={600}
backdropTransitionOutTiming={600}
hideModalContentWhileAnimating={true}
onBackButtonPress={() => setBottomSheetVisible(false)}
onBackdropPress={() => setBottomSheetVisible(false)}
style={[css.p0]}
customBackdrop={}
>
  • 👎1
Felipe-OT commented

Still an issue. I need to use statusBarTranslucent={true}.

  • 👍1