AvoidKeyboard is not working when we use it with statusBarTranslucent.
arunabhverma opened this issue · comments
Arunabh Verma 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.
Daniele Carvalho commented
I have the same issue
Vlad commented
any news?
Arunabh Verma commented
Not from the Author's side? Still waiting...
…On Mon, Jun 12, 2023 at 9:41 AM Vlad ***@***.***> wrote:
any news?
—
Reply to this email directly, view it on GitHub
<#698 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AOGUMAHI32HNWY72C7ZJFALXK2JGFANCNFSM6AAAAAAQQVNEP4>
.
You are receiving this because you authored the thread.Message ID:
***@***.***>
Vladislav Vodicka 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
Gabriel Freitas Yamamoto commented
Still an issue.
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={}
>
Felipe de Oliveira commented
Still an issue. I need to use statusBarTranslucent={true}.