[iOS]KeyboardAvoidingView When I turn on the reduced Motion, the page is blank

[kingshuoxu]

Description

I used KeyboardAvoidingView in my project and set the behavior to padding in iOS. I found that when I turned on reduced motion, the page turned white when the keyboard was retracted, KeyboardAvoidingView will top the page very high.I found that the project on the reactNative official website also has this problem.

20230209-102617.mp4

Version

0.65.1 and 0.71

Output of npx react-native info

System:
OS: macOS 12.6
CPU: (8) x64 Apple M1 Pro
Memory: 127.09 MB / 16.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 14.15.0 - ~/.nvm/versions/node/v14.15.0/bin/node
Yarn: 1.22.19 - /opt/homebrew/bin/yarn
npm: 6.14.8 - ~/.nvm/versions/node/v14.15.0/bin/npm
Watchman: 2022.07.04.00 - /opt/homebrew/bin/watchman
Managers:
CocoaPods: 1.11.3 - /opt/homebrew/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 22.2, iOS 16.2, macOS 13.1, tvOS 16.1, watchOS 9.1
Android SDK: Not Found
IDEs:
Android Studio: 2021.3 AI-213.7172.25.2113.9123335
Xcode: 14.2/14C18 - /usr/bin/xcodebuild
Languages:
Java: 11.0.16 - /usr/bin/javac
npmPackages:
@react-native-community/cli: 5.0.1 => 5.0.1
react: 17.0.2 => 17.0.2
react-native: 0.65.1 => 0.65.1
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

Steps to reproduce

Open the reduced motion to open the page containing the KeyboardAvoidingView, and pop up and put away the keyboard.

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

import React from 'react';
import {
View,
KeyboardAvoidingView,
TextInput,
StyleSheet,
Text,
Platform,
TouchableWithoutFeedback,
Button,
Keyboard,
} from 'react-native';

const KeyboardAvoidingComponent = () => {
return (
<KeyboardAvoidingView
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
style={styles.container}>


Header


<Button title="Submit" onPress={() => null} />




);
};

const styles = StyleSheet.create({
container: {
flex: 1,
},
inner: {
padding: 24,
flex: 1,
justifyContent: 'space-around',
},
header: {
fontSize: 36,
marginBottom: 48,
},
textInput: {
height: 40,
borderColor: '#000000',
borderBottomWidth: 1,
marginBottom: 36,
},
btnContainer: {
backgroundColor: 'white',
marginTop: 12,
},
});

export default KeyboardAvoidingComponent;

20230209-102617.mp4

[m-9521]

cool

[FeatherJiang]

I have same problem.
Below 0.68 use react-native-keyboard-aware-scroll-view instead.
Above 0.68,I dont find solution.

[FeatherJiang]

This issue has been resolved, but not released
#34503

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

[chocking]

This issue has been resolved, but not released #34503

It looks like it has already been released in 0.70.1
https://github.com/facebook/react-native/releases/tag/v0.70.1