Keyboard blocking inputs / KeyboardAvodingView

[leanminmachine]

How do you use KeyboardAvoidingView with this library? Does not seem to work aka auto-scroll to input.

<Form>
<KeyboardAvoidingView
behavior="padding" >
<FieldsContainer>
<Fieldset label = "Edit Profile">

  <Input name = "name"
  label = "Name"
  placeholder = "Jane Doe" />

  <Select
  name = "gender"
  label = "Gender"
  options = {genderOptions}
  placeholder = "Male"
  />

  <Select
  name="bodyType"
  label="Body Type"
  options={bodyTypeOptions}
  placeholder="Mesomorph"
  />

  <Select
  name = "location"
  label = "Location"
  options = {locationOptions}
  placeholder = "Central"
  />

  <Input name="bio" label="Bio" placeholder="" multiline={true} numberOfLines={3}  inlineLabel={false} />

</Fieldset>

</FieldsContainer>
</KeyboardAvoidingView>

<ActionSheetContainer />

  <Button
  onPress={handleSubmit(this.submit.bind(this))}
  > Submit </Button>

  <SuccessMessage
  success = {submitSucceeded} />

</Form>

Tried https://github.com/APSL/react-native-keyboard-aware-scroll-view as well but same issue - it does not scroll

[PonorogoCreativeIT]

try to change ScrollView on parent Form.js and change to KeyboardAwareScrollView

its worked for me

[AlessandroAnnini]

yes @PonorogoCreativeIT , it works for me too, thanks!

render() {
    const { children, ...rest } = this.props

    return (
      <View style={{ flex: 1 }} onLayout={this.onLayout}>
        <ScrollView>
          <KeyboardAvoidingView behavior="position" contentContainerStyle={{ minHeight: this.state.height }}>
              { children }
          </KeyboardAvoidingView>
        </ScrollView>
      </View>
    )
  }

[truca]

@sun2rise how do you define this.state.height?

[leggomuhgreggo]

@truca in case it's still relevant, or relevant for others, this is (approximately) what I did. Not sure it's the ideal, but it preserves the minHeight in the ScrollView's contentContainer, when the keyboard is up. Hope that helps.

class AppWrap extends Component {
  state = {
    contentHeight: 0,
  };

  handleContentSizeChange = (contentWidth, contentHeight) => {
    if (this.state.contentHeight === 0) {
      this.setState({ contentHeight });
    }
  };

  render() {
    const { children, contentContainerStyle, style } = this.props;
    return (

      <KeyboardAvoidingView
        style={{flex: 1}
        behavior="padding"
      >
        <ScrollView
          onContentSizeChange={this.handleContentSizeChange}
          style={{
            flex: 1,
            width: "100%",
          }}
          contentContainerStyle={[
            {
              flex: 1,
              width: "100%",
            },
            { minHeight: this.state.contentHeight },
          ]}
        >
          {children}
        </ScrollView>
      </KeyboardAvoidingView>
    );
  }
}

[benson7667]

https://stackoverflow.com/a/51169574/10031014

[phattruong-agilityio]

Did you try this?

<ScrollView style={{ flex: 1 }}>
  <KeyboardAvoidingView
    enabled
    behavior='position'
    keyboardVerticalOffset={200}
  >
    <View style={{ flex: 1 }}>
      { children have TextInput}
    </View>
  </KeyboardAvoidingView>
</ScrollView>

You would need to set the value of keyboardVerticalOffset to make the input display as expect while the keyboard display. And don't forget <TouchableWithoutFeedback onPress={Keyboard.dismiss}> wrapper these code to make more friendly.

[markusguenther]

Do you still use the package? I stopped working with it because I just have rights on GitHub and not on npm and therefore it makes not really sense to continue with it. I guess @esbenp is to busy and also stopped maintenance.

I am just curious if it is still a topic for you. Because if Esben is also interested we can overhaul the package and update some stuff.