Background blur happens on triggering Keyboard.dismiss in android

[sanjeevkumar91]

Description

In react-native 0.71.3, Triggering the Keyboard.dismiss() function is changing the background color to grey or some overlay to appear. Added minimal code version of snack expo link. Please refer attached screenshots.

Before Keyboard Dismiss:

After KeyBoard Dismiss:

Note: We tried removing react-native-keyboard-aware-scroll-view we still faced the same blur issue with some other elements, But we couldn't able to create this behavior in snack eg shared.

React Native Version

0.71.3

Output of npx react-native info

System: OS: macOS 12.6 CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz Memory: 64.08 MB / 16.00 GB Shell: 5.8.1 - /bin/zsh Binaries: Node: 16.10.0 - ~/.nvm/versions/node/v16.10.0/bin/node Yarn: 3.2.0 - ~/.nvm/versions/node/v16.10.0/bin/yarn npm: 7.24.0 - ~/.nvm/versions/node/v16.10.0/bin/npm Watchman: 2022.10.17.00 - /usr/local/bin/watchman Managers: CocoaPods: 1.11.3 - /usr/local/lib/ruby/gems/2.7.0/bin/pod SDKs: iOS SDK: Platforms: DriverKit 21.2, iOS 15.2, macOS 12.1, tvOS 15.2, watchOS 8.3 Android SDK: API Levels: 27, 28, 29, 30, 31, 33 Build Tools: 25.0.3, 26.0.3, 27.0.3, 28.0.3, 29.0.3, 30.0.2, 30.0.3, 31.0.0, 33.0.0 System Images: android-29 | Google APIs Intel x86 Atom, android-30 | Google APIs Intel x86 Atom, android-31 | Intel x86 Atom_64, android-31 | Google APIs Intel x86 Atom_64 Android NDK: Not Found IDEs: Android Studio: 2021.3 AI-213.7172.25.2113.9123335 Xcode: 13.2.1/13C100 - /usr/bin/xcodebuild Languages: Java: 11.0.2 - /usr/bin/javac npmPackages: @react-native-community/cli: Not Found react: 18.2.0 => 18.2.0 react-native: 0.71.3 react-native-macos: Not Found npmGlobalPackages: react-native: 0.71.3

Steps to reproduce

• Open the snack expo link - https://snack.expo.dev/@a.sanjeevkumar91/textinput-example
• Enter more than 5 characters in the Text Input
• Background color is greyed out when the keyboard is dismissed.

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

https://snack.expo.dev/@a.sanjeevkumar91/textinput-example

[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. 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.

[sanjeevkumar91]

We tried it on the react native version 0.71.3 and faced the same issue.

[TheMissouri]

i think the issue is due to this component KeyboardAwareScrollView , so it's not related to react native

[sanjeevkumar91]

@TheMissouri We checked removing the keyboard-aware scroll view as well. It is still happening for other elements like buttons and icons.

Please refer to this snack expo link -- https://snack.expo.dev/@a.sanjeevkumar91/keyboard-blur-issue-button

Steps to reproduce without keyboard-aware scroll view:

• Enter more than 5 characters in the Text Input
• The color of the Button will get changed since it is focused/highlighted.

[correadevuk]

I'm experiencing the same issue with ScrollView when programmatically dismissing the keyboard using the Keyboard.dismiss() function in React Native. After calling Keyboard.dismiss(), all children inside the ScrollView are rendered with an unwanted grey background. This occurs every time the keyboard is dismissed.

@sanjeevkumar91 I'm setting "scrollEnabled" to false before calling Keyboard.dismiss() and that resolved the issue for me.

`<ScrollView keyboardShouldPersistTaps="always" scrollEnabled={!isLoading}

{children} `

[sanjeevkumar91]

@correadevuk For me this issue is happening without a scroll view as well. Refer: https://snack.expo.dev/@a.sanjeevkumar91/keyboard-blur-issue-button

[alainib]

i have the same bug with FlatList but not able to fix it yet

[github-actions[bot]]

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[bot]]

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

[shaunaksharma-ih]

This is the only mention of this issue that I am also facing, and it's been closed without any resolution (the scroll enabled method did not work for me). Anyone able to figure this one out?