Does KeyboardAvoidingView work in react-native-web, Expo? - react-native

Question

In short: does KeyboardAvoidingView work in react-native-web or is there another way to move TextInput above keyboard when keyboard opens?
Getting the keyboard to work fluently in web environment is needed functionality. People might use web version of app with tablets or mobile devices in which cases handling keyboard fluently is important.
At the moment it seems that when focusing input the screen will move to it after character in keyboard is pressed. Before that the input can be completely under the keyboard which is not good for user experience.
In android and iOS Expo app KeyboardAvoidingView has worked perfectly and I have used "softwareKeyboardLayoutMode": "resize" to achieve desired outcome.
But in web I'm not sure if I am implementing KeyboardAvoidingView correctly, if more configuration is needed or if it works at all in web environment.
This is simplified return() of the LoginScreen.tsx where KeyboardAvoidingView is used
return (
<ImageBackground source={I.backGround} style={S.LoginStyles.container}>
<View style={S.LoginStyles.row}>
<Text style={S.LoginStyles.headerTitle}>
{language.LoginScreen.Text1}
</Text>
<Text style={S.LoginStyles.headerSubTitle}>
{language.LoginScreen.Text2}
</Text>
</View>
<KeyboardAvoidingView behavior="padding">
<View style={S.LoginStyles.middleContainer}>
<TextInput
style={[S.LoginStyles.formInput, { marginTop: 40 }]}
onChangeText={text => setFieldValue(C.DatabaseConstants.name, text)}
/>
<TextInput
style={S.LoginStyles.formInputPassword}
onChangeText={text =>
setFieldValue(C.DatabaseConstants.password, text)
}
onSubmitEditing={() => OnLogin()}
/>
<FunctionButton
func={OnLogin}
text={language.LoginScreen.Text5}
buttonStyle={S.ButtonStyles.login}
/>
</View>
</KeyboardAvoidingView>
</ImageBackground>
);
Also if it does not work how could this functionality (moving input on top of keyboard onFocus) could be achieved in react-native-web.
I have tried to add solutions found in:
How to prevent mobile keyboard from covering html input
HTML5 mobile keyboard covers the input in Full screen mode
Scroll textfield up when keyboard popsup
...in index.html file with no success.
EDIT
I have stackNavigator inside drawer navigation (react native navigation).
I'm not sure if react native navigation makes Keyboard not to work but it shouldnt. LoginScreen example (that is above) now works but I cannot get simple screen inside navigation to work. The code of the simple screen is below:
<View style={{
flex: 1,
alignItems: 'flex-start',
justifyContent: 'flex-start',
backgroundColor: 'red',
}}>
<ScrollView style={{ flexGrow: 1 }}>
<View style={{ height: 500, width: '100%' }}></View>
<KeyboardAvoidingView behavior="padding">
<View style={{ height: 100, backgroundColor: 'blue', width: '100%' }}>
<TextInput style={{
height: C.Dimensions.heightSm2, //based on screen height
minHeight: 27,
width: C.Dimensions.formInputWidth, //based on screen width
marginBottom: 5,
borderRadius: 20,
borderWidth: 1,
color: Colors.black,
borderColor: Colors.black20,
outlineWidth: 0,
fontSize: 20,
fontFamily: 'catamaranRegular',
}} />
</View>
</KeyboardAvoidingView>
</ScrollView>
</View>
When the TextInput inside blue View component is focused the keyboard hides the input and when character of keyboard is pressed the TextInput comes above keyboard.