keyboard hides the textInput field

[harikanammi]

I am running sample example using this module. My question is i am focusing on input field..... keyboard is displaying but textInput field is hiding. This problem comes only for android. Please give any suggestions. Thank you in advance.

here is my code:

initFormValues = () => {
    const Email = Tcomb.refinement(Tcomb.String, s => Validator.checkEmail(s) === undefined)
    Email.getValidationErrorMessage = s => Validator.checkEmail(s)
    const Phone = Tcomb.refinement(Tcomb.String, s => Validator.checkPhone(s) === undefined)
    Phone.getValidationErrorMessage = s => Validator.checkPhone(s)
    this.Customer = Tcomb.struct({
      first_name: Tcomb.String,
      last_name: Tcomb.String,
      address_1: Tcomb.String,
      suburb: Tcomb.String,
      country: Tcomb.String,
      state: Tcomb.String,
      postcode: Tcomb.String,
      email: Email,
      phone: Phone,
      note: Tcomb.maybe(Tcomb.String) //maybe = optional
    })
    this.options = {
      auto: 'none', 
      fields: {
        first_name: {
          label: Languages.FirstName,
          placeholder: Languages.TypeFirstName,
          error: Languages.EmptyError, //for simple empty error warning.
          underlineColorAndroid: 'transparent',
          stylesheet: labelStyle
        },
        last_name: {
          label: Languages.LastName,
          placeholder: Languages.TypeLastName,
          error: Languages.EmptyError,
          underlineColorAndroid: 'transparent',
          stylesheet: labelStyle
        },
        address_1: {
          label: Languages.Address,
          placeholder: Languages.TypeAddress,
          error: Languages.EmptyError,
          underlineColorAndroid: 'transparent',
          stylesheet: labelStyle
        },
        city: {
          label: Languages.City,
          placeholder: Languages.TypeCity,
          error: Languages.EmptyError,
          editable: false,
          underlineColorAndroid: 'transparent',
          stylesheet: labelStyle
        },
        state: {
          label: Languages.State,
          placeholder: Languages.TypeState,
          editable: false,
          error: Languages.EmptyError,
          underlineColorAndroid: 'transparent',
          stylesheet: labelStyle
        },
        postcode: {
          label: Languages.Postcode,
          placeholder: Languages.TypePostcode,
          error: Languages.EmptyError,
          underlineColorAndroid: 'transparent',
          stylesheet: labelStyle
        },
        country: {
          label: Languages.TypeCountry,
          nullOption: { value: '', text: Languages.Country },
          editable: false,
          error: Languages.NotSelectedError,
          styles: {
            borderColor: 'black',
            borderWidth: 1
          },
          stylesheet: labelStyle,
          underlineColorAndroid: 'transparent'
        },
        email: {
          label: Languages.Email,
          placeholder: Languages.TypeEmail,
          keyboardType: 'email-address',
          underlineColorAndroid: 'transparent',
          stylesheet: labelStyle
        },
        phone: {
          label: Languages.Phone,
          placeholder: Languages.TypePhone,
          keyboardType: 'phone-pad',
          underlineColorAndroid: 'transparent',
          stylesheet: labelStyle,
          returnKeyType: 'next'
        },
        note: {
          label: Languages.Note,
          placeholder: Languages.TypeNote,
          underlineColorAndroid: 'transparent',
          multiline: true,
          onFocus: () => this.inputFocused(),
          stylesheet: customStyle
        },
        suburb: {
          label: Languages.Suburb,
          placeholder: Languages.TypeSuburb,
          underlineColorAndroid: 'transparent',
          stylesheet: labelStyle
        }
      }
    }
  }

inputFocused() {
    this.refs.scrollView.scrollTo({ y: windowSize.height })
  }

render(){
return(
<View style={{flex:1}}>
  <ScrollView style={styles.form} ref="scrollView">
<Form ref="form" type={this.Customer} options={this.options} value={this.state.value} onChange={this.onChange.bind(this)} />
 </ScrollView >
</View>
)
}

Here is my screenshot:

[AustinKostelansky]

I used the react-native-keyboard-aware-scroll-view library to circumvent this issue. Just import the library and replace your scrollview with the KeyboardAwareScrollView component. Make sure to give it a flexGrow style of 1.

I hope this helps!

[abdifardin]

react-native-keyboard-aware-scroll-view itself doesn't solve this issue If you are using expo : https://github.com/APSL/react-native-keyboard-aware-scroll-view/issues/2#issuecomment-321719250

else https://github.com/APSL/react-native-keyboard-aware-scroll-view/issues/2#issuecomment-213318096

[abhiburk]

For those this is what my solution would be it works and scrolls automatically on focus input. I tried this on expo hope this helps.

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

[raheemazeezabiodun]

@abhiburk your solution worked for me

[Zoha131]

@abhiburk you just saved my life man. Thanks a lot.

[kamilamin]

@abhiburk your solution works for me. Thanks Alot man!

[butagreeza]

worked for me

[rajendrabhole]

@abhiburk Thanks a lot man.

[ChindrisSebilix]

@abhiburk can you share Styles.row please?

[butagreeza]

@ChindrisSebilix Styles.row can be anything you define

for example

const styles = StyleSheet.create({ row: { flexDirection: 'row', alignItems: 'flex-start', backgroundColor: '#fff', justifyContent: 'center', }, });

depending on what you want..