When user selects answer on survey, screen drops down exposing big gap atop

[ldco2016]

When a user clicks on this survey and then opens supporting information, then decides to select his or her answer and clicks on next question button, the whole top part of the screen drops down exposing this huge gap as you see below:

This is the relevant code regarding the above behavior:

class BallotSurveyDetails extends PureComponent {
  componentDidUpdate(prevProps) {
    if (prevProps.currentWizardPage !== this.props.currentWizardPage) {
      this.scroll.props.scrollToPosition(0, 0, true);
    }
  }

  render() {
    const {
      currentWizardPage,
      selectedSurvey,
      handleNextQuestionButtonPress,
      handleResponseChanged,
      loading,
      responses,
      handleSubmitButtonPress,
      saving,
      wizardPages
    } = this.props;
    if (!saving && loading) {
      return <Loading />;
    }

    const isWizard = selectedSurvey.Layout !== "Wizard";

    const isList = selectedSurvey.Layout !== "List";

    const displayNextQ = isWizard && currentWizardPage < wizardPages;

    const displaySubmit =
      isList || (isWizard && currentWizardPage === wizardPages);

    const sortedGroups = (selectedSurvey.QuestionGroups || []).sort(
      (a, b) => a.Order - b.Order
    );

    const wizardGroup = isWizard ? sortedGroups[currentWizardPage - 1] : null;
    return (
      <SafeAreaView style={styles.container}>
        {isWizard && wizardPages.length > 1 && (
          <Card style={styles.pagination}>
            <RadioPagination
              numberOfPages={wizardPages}
              currentPage={currentWizardPage}
            />
          </Card>
        )}
        <KeyboardAwareScrollView
          showsVerticalScrollIndicator={false}
          extraScrollHeight={45}
          innerRef={ref => {
            this.scroll = ref;
          }}
          enableOnAndroid={true}
          contentContainerStyle={{ paddingBottom: 90 }}
        >
          <View style={styles.headerContainer}>
            <Text style={styles.ballotTitle}>{selectedSurvey.Name}</Text>
            <Text style={styles.ballotSubtitle}>
              {selectedSurvey.Description}
            </Text>
          </View>
          {isList &&
            sortedGroups.map(group => (
              <QuestionGroup
                saveRef={this.props.saveRef}
                questionGroup={group}
                key={group.Key}
                responses={responses}
                handleResponseChanged={(questionKey, value) =>
                  handleResponseChanged(group.Key, questionKey, value)
                }
                handleReturnKeyPress={this.props.handleReturnKeyPress}
              />
            ))}
          {isWizard && (
            <QuestionGroup
              saveRef={this.props.saveRef}
              questionGroup={wizardGroup}
              key={wizardGroup.Key}
              responses={responses}
              handleResponseChanged={(questionKey, value) =>
                handleResponseChanged(wizardGroup.Key, questionKey, value)
              }
              handleReturnKeyPress={this.props.handleReturnKeyPress}
            />
          )}
        </KeyboardAwareScrollView>
        {displayNextQ && (
          <TouchableOpacity
            style={styles.footer}
            onPress={handleNextQuestionButtonPress}
          >
            <Text style={styles.footerBtnText}>{"NEXT QUESTION"}</Text>
          </TouchableOpacity>
        )}

[Cal-L]

I had a similar issue. Setting the automaticallyAdjustContentInsets={false} fixed it for me.

[ldco2016]

@Cal-L , I attempted the above and it has not worked for me:

return (
      <SafeAreaView style={styles.container}>
        {isWizard && wizardPages.length > 1 && (
          <Card style={styles.pagination}>
            <RadioPagination
              numberOfPages={wizardPages}
              currentPage={currentWizardPage}
            />
          </Card>
        )}
        <KeyboardAwareScrollView
          automaticallyAdjustContentInsets={false}
          showsVerticalScrollIndicator={false}
          extraScrollHeight={45}
          innerRef={ref => {
            this.scroll = ref;
          }}
          enableOnAndroid={true}
          contentContainerStyle={{ paddingBottom: 90 }}
        >
          <View style={styles.headerContainer}>
            <Text style={styles.ballotTitle}>{selectedSurvey.Name}</Text>
            <Text style={styles.ballotSubtitle}>
              {selectedSurvey.Description}
            </Text>
          </View>

[jorgeluis91x]

I have the same problem, Have you find the solution? @ldco2016