react-native-keyboard-aware-scroll-view Footer/bottom of the screen not visible with native-base iOS

Footer/bottom of the screen not visible with native-base iOS

Open cristianoccazinsp opened this issue 4 years ago • 5 comments

When using KeyboardAwareFlatList, any component rendered below it are not properly moved up when the keyboard is visible. Instead, an empty space is shown there.

Any ideas what's going on?

Sample code:

<SafeAreaView style={fixedStyles.modalContentStyle}>
  <Item style={fixedStyles.filterItem}>
    <Input value={this.state.filterStr} placeholder='Filter...' onChange={this.filterChange} ref={this.setRef} disableFullscreenUI={true}/>
  </Item>
  
  <KeyboardAwareFlatList
    style={fixedStyles.flatList}
    data={this.state.items}
    keyExtractor={this.keyExtractor}
    renderItem={this.renderItem}
    ListEmptyComponent={!this.state.loaded ? loadingText : (this.props.noResultsText || noResultsText)}
    removeClippedSubviews={true}
    maxToRenderPerBatch={pageSize / 2}
    initialNumToRender={pageSize}
    onEndReached={this.loadMore}
    onEndReachedThreshold={0.6}
    keyboardShouldPersistTaps={'handled'}
    enableResetScrollToCoords={false}
  />

  <View style={{width: '100%', flexDirection: 'row', justifyContent: 'space-between'}}>

    {this.props.close ?
      <Button
        onPress={this.props.onCancel}
        iconLeft
        transparent
        black
        >
        <Icon name='close' type='AntDesign'></Icon>
        <Text>{this.props.cancelButtonText || "Close"}</Text>
      </Button>
    : null}

    {this.props.extraAction || null}

    {!this.props.required ?
      <Button
        onPress={this.clear}
        transparent
        noSpacing={this.props.showTotal}
        black
      >
        <Text>{"Clear"}</Text>
      </Button>
    : null}

    {this.props.showTotal?
      <Button
        transparent
        black
      >
        <Text>{`Total: ${this.state.total}`}</Text>
      </Button>
    : null}
  </View>
</SafeAreaView>

Please see the captures below.