I have a problem I can't figure out how to make my <Flatlist>
scroll to the footer. I tried to wish it like with a ScrollView but nothing worked.
I am returning this from my component:
<FlatList
ref={(scroll) => this.scroll = scroll}
contentContainerStyle={{
alignSelf: 'center',
alignItems: 'center',
width: '100%'
}}
style={{
height: '100%',
backgroundColor: COLORS.LIST_BACKGROUND
}}
data={this.props.cartItems.list}
keyExtractor={(item, index) => `${item.ID}`}
ListFooterComponent={this.renderFooterComponent()}
renderItem={this.renderStudent}
/>
I have defined this function in my component:
const renderDiscountInput = () => (
<View style={[styles.row, styles.discountInputWrapper]}>
<View style={styles.inputWrapper}>
<Input
onFocus={(event) => {
this._scrollToInput(findNodeHandle(event.target));
}}
inputContainerStyle={styles.inputContainer}
onChangeText={this.props.setDiscount}
inputStyle={styles.input}
errorStyle={{ color: COLORS.RED }}
errorMessage={this.props.discountError ? 'Coupon is not exists or expired' : ''}
/>
</View>
<TouchableOpacity onPress={() => this.applyDiscount()} style={styles.applyButton}>
<Text style={styles.applyButtonText}>Apply</Text>
</TouchableOpacity>
</View>
);
_scrollToInput(reactNode) {
this.scroll.props.scrollToFocusedInput(reactNode);
}
I will answer leading questions.