How to fix keyboard from hiding input fields in React Native

Question

I’m setting up a new component, and the keyboard covers the fields

This is for a new component

<KeyboardAwareScrollView enableOnAndroid={true} extraScrollHeight={50} enableAutomaticScroll={true}>
                    <View style={{ paddingHorizontal: 20 }}>

                        <View>
                            <FloatingLabelInput
                                onRef={(ref) => {
                                    this.inputs['firstName'] = ref
                                }}
                                onSubmitEditing={() => {
                                    this.focusNextField('lastName')
                                }}
                                label={i18n.t('t_driver_registration_first_name_label')}
                                onChangeText={(text) => this.onChangeInputText('firstName', text)}
                                keyboardType='default'
                                maxLength={20}
                                value={form.firstName}
                                labelStyle={Style.inputLabel}
                                basicColor={GStyle.GREEN}
                                inputTextColor={Color(GStyle.BLACK).alpha(.7)}
                                editable={mode !== DriverFormMode.EDIT}
                            />

I expect the keyboard will not cover my fields.

you must try [this solution](https://stackoverflow.com/a/74210255/9412981) — Sandeep Parish, Oct 26 '22 at 15:23

score 0 · Answer 1 · edited Aug 31 '20 at 05:51

0

Wrap your view in this to scroll automatically on input focus. Do:

<KeyboardAvoidingView style={{ flex: 1, flexDirection: 'column',justifyContent: 'center',}} behavior="padding" enabled   keyboardVerticalOffset={100}>
    <ScrollView>
        <View style={Styles.row}>
                //your view
        </View>
    </ScrollView>
</KeyboardAvoidingView>

<View style={Styles.row}> This is just a Stylesheet e.g. Create a new StyleSheet:

const Styles = StyleSheet.create({
  row: {
    borderRadius: 4,
    borderWidth: 0.5,
    borderColor: '#d6d7da',
  },
  title: {
    fontSize: 19,
    fontWeight: 'bold',
  },
  activeTitle: {
    color: 'red',
  },
});

Use a StyleSheet:

<View style={Styles.row}>
  <Text style={[Styles.title, this.props.isActive && styles.activeTitle]} />
</View>

edited Aug 31 '20 at 05:51

David Jesus

1,981
2
29
34

answered May 30 '19 at 08:48

pasignature

577
1
6
13

???? what did you mean row ? show me full example to your idea – Bob May 30 '19 at 10:47
Just do your styling your own way, all you need is to wrap your view in that code and it should scroll automatically on input focus. – pasignature May 30 '19 at 19:12
row is just a style class name. – David Jesus Aug 30 '20 at 23:56

How to fix keyboard from hiding input fields in React Native

1 Answers1