0

I am trying to create a "load more" functionality to my ScollView. Currently I have a button, which when pressed loads more elements into the ScrollView. This all works as expected. However, I am now trying to trigger this when the user is close to the end of the ScrollView, but unfortunately the function is not triggering. I have tried changing the values of onEndReachedThreshold (bigger and smaller), with no luck. I have pasted my module return below. All help is much appreciated.

return (

        <View style={{ width: "100%", height: "100%" }}>
            <ScrollView showsVerticalScrollIndicator={false} onEndReachedThreshold={10} onEndReached={() => { console.log("end reached"); this.props.pEnd ? this.props.loadMore() : null }} refreshControl={<RefreshControl refreshing={this.props.refreshing} onRefresh={() => { this.props.getData(0) }} />} style={{ width: "100%", flexDirection: "column" }}>

                <View style={{ height: 10, width: "100%" }}></View>
                {scrollables}
                {this.props.pEnd ? null : <View style={{ height: 25, width: "100%", flexDirection: "row", justifyContent: "center", alignItems: "center" }}>
                    <TouchableOpacity
                        style={{ height: "100%", width: 100, backgroundColor: "white", borderRadius: 20, padding: 2, justifyContent: "center", alignItems: "center" }}
                        onPress={() => { this.props.loadMore() }}>
                        <Text>Load Older...</Text>
                    </TouchableOpacity>
                </View>}


                <View style={{ width: "100%", height: "10%", paddingBottom: "20%" }}></View>
            </ScrollView>

        </View>);
Rizwan Ahmed Shivalli
  • 1,483
  • 8
  • 37
HarryShotta
  • 347
  • 1
  • 15
  • 3
    `ScrollView` don't have prop `onEndReached`, `Flatlist` has that. Please check the [Docs](https://facebook.github.io/react-native/docs/scrollview) – Maneesh Sep 25 '19 at 09:28
  • 1
    Dear You can use onScroll props of . For more reference https://medium.com/@yangnana11/react-native-making-load-more-on-scroll-for-android-and-ios-when-you-already-has-a-working-792d71e46148 – Swatee Salunkhe Sep 25 '19 at 09:31
  • Why do you have `View` as a parent for scroll? Do not use "%" you can use flex: 1 instead. And `ScrollView` do not have onEndReached props use FlatList. Keep practicing (Y) – Pir Shukarullah Shah Sep 25 '19 at 10:53
  • What wrong with having a View as a parent and why do you suggest using flex:1? – HarryShotta Sep 25 '19 at 17:28

1 Answers1

0

Remember, your FlatList should not be in a ScrollView Component. I spent my whole day solving this & it was just a small mistake. So, I think you guys also avoid using Flatlist in any ScrollView component

Muhammad Talha
  • 719
  • 1
  • 4
  • 9