2

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.

Screenshot of React Native error screen

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.