React Native - ScrollView not scrolling-CodePudding

I'm currently making a registration form using React Native. When I implement into the application, a scroll bar doesn't work.

return (
    <TouchableWithoutFeedback
      onPress={() => {
        Keyboard.dismiss();
      }}>
      <View style={styles.container}>
        <ScrollView>
          <View style={styles.formContainer}>
            <View style={styles.registerTextContainer}>
              {/* <Text style={styles.registerText}>Register for an account</Text> */}
            </View>

            <Form type={User} ref={c => (this._form = c)} options={options} />

            <TouchableOpacity
              style={styles.registerButtonContainer}
              onPress={this.handleSubmit}>
              <Text style={styles.registerButtonText}>REGISTER</Text>
            </TouchableOpacity>
          </View>
        </ScrollView>
      </View>
    </TouchableWithoutFeedback>
  );
}

This is how the application currently looks

CodePudding user response：

Trying wrapping the whole page with ScrollView instead of TouchableWithoutFeedback and set flex to 1

 return (
<ScrollView style={{ flex: 1 }}>
  <TouchableWithoutFeedback
    onPress={() => {
      Keyboard.dismiss();
    }}
  >
    <View style={styles.container}>
      <View style={styles.formContainer}>
        <View style={styles.registerTextContainer}>
          {/* <Text style={styles.registerText}>Register for an account</Text> */}
        </View>

        <Form type={User} ref={(c) => (this._form = c)} options={options} />

        <TouchableOpacity
          style={styles.registerButtonContainer}
          onPress={this.handleSubmit}
        >
          <Text style={styles.registerButtonText}>REGISTER</Text>
        </TouchableOpacity>
      </View>
    </View>
  </TouchableWithoutFeedback>
</ScrollView>

);

CodePudding user response：

Don't set flex:1 in scroll view, instead try

<ScrollView contentContainerStyle={{ flexGrow: 1}}>