1

I am using RN 0.55.4 + Expo

I tried to use KeyboardAvoidingView to my form but it doesnt change anything with or without KeyboardAvoidingView, its still blocking my form. I am using tcomb-form

This is my current code

 return (
      <View style={styles.container}>

        <KeyboardAvoidingView>
        <ScrollView>

          <View>
            <Header/>

            <View style={styles.inputs}>
              <LoginForm
                formType={formType}
                form={this.props.auth.form}
                value={this.state.value}
                onChange={self.onChange.bind(self)}/>
              {passwordCheckbox}
            </View>

            <FormButton/>

            <View >
              <View style={styles.forgotContainer}>
                {leftMessage}
                {rightMessage}
              </View>
            </View>
          </View>

        </ScrollView>
        </KeyboardAvoidingView>

      </View>
    )

This is the style

var styles = StyleSheet.create({
  container: {
    flexDirection: 'column',
    flex: 1
  },
  inputs: {
    marginTop: 10,
    marginBottom: 10,
    marginLeft: 10,
    marginRight: 10
  },
  forgotContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginTop: 10,
    marginLeft: 10,
    marginRight: 10
  }
})

This is the display enter image description here I also tried https://github.com/APSL/react-native-keyboard-aware-scroll-view library but still same result, keyboard is blocking the view / form. Anyone know whats wrong?

Tom Kur
  • 2,248
  • 1
  • 18
  • 28

2 Answers2

1

For iOS you should set the "behavior" parameter of the KeyboardAvoidingView to "padding" : 

<KeyboardAvoidingView behavior="padding">

Refering to react-native documentation :

Note: Android and iOS both interact with this prop differently. Android may behave better when given no behavior prop at all, whereas iOS is the opposite.

A working example on iOS and Android :

<KeyboardAvoidingView behavior={Platform.OS == "ios" ? "padding" : null}>
sanjar
  • 1,081
  • 2
  • 9
  • 15
  • adding behavior is not working, still blocking the view/form. It seems the Scrollview height doesnt change during keyboard display – Tom Kur Sep 10 '18 at 10:19
-1

It also happened to me... ScrollView and FlatList can work it out by setting a dynamic height depending on your data to FlatList. eg:

<ScrollView>
  <FlatList style={{height: dataArr.length * YourInputHeight}}
  ...
  />
</ScrollView>
executable
  • 3,365
  • 6
  • 24
  • 52
Tang Sir
  • 1