1

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.

Hessuew
  • 583
  • 1
  • 4
  • 23
  • 1
    I tested the scenario you described, and it's working for me. When I focus the input, it goes up when the keyboard shows. Could you add your dependencies versions and styles of your components to try to reproduce the issue accurately? – diedu Oct 30 '21 at 04:07
  • @diedu I got it work in that LoginScreen example, but I cannot get it to work in very simple screen. I will edit the question with example code and styles – Hessuew Nov 01 '21 at 07:51
  • 1
    I tested it again, still works. I'm using `"react-native": "0.64.2" "react-native-web": "0.17.1"` what versions are you using? try to create a repo as a minimal reproduction. Sometimes you can find out what's wrong when isolating the issue – diedu Nov 02 '21 at 02:50
  • @diedu I'm using `"expo": "^43.0.0", "react-native": "0.64.2, "react-native-web": "0.17.5""`. I forgot to mention them on edit. And thank you for guidance. I will create minimal repo as you said and little by little try to get it working. Thank you for your help. – Hessuew Nov 02 '21 at 06:39

0 Answers0