I have a scrollview component which when I wrapped around react-native-pull-to-refresh, wherever it is referenced to scroll down is not triggering. Below is the code for the same,

<PTRView onRefresh={fetchMoreMessages}>
      <ScrollView
        ref={scrollviewref}
        onScroll={onScroll}
        scrollEventThrottle={16}
        // onContentSizeChange={() =>
        //   scrollviewref.current.scrollToEnd({animated: true})
        // }
        >
       
        <View style={{padding: 10, paddingBottom: 70}}>
          {message && displayMessageList(message)}

          {selectsymptomcontent &&
            selectsymptomcontent.output &&
            renderSelectSymptomCard()}

          {nextpageaction !== 'dummytext' && renderNextPageSymptom()}

          {posting == true &&
            'dummytext' != selectsymptomcontent &&
            nextpageaction !== 'dummytext' && (
              <Text style={{fontSize: 15}}>
                Checking your response, please hold on
                <AnimatedEllipsis />
              </Text>
            )}
        </View>
       
        {loadingmessages === true && (
          <View
            style={{
              justifyContent: 'center',
              alignItems: 'center',
              position: 'absolute',
              backgroundColor: '#F5FCFF88',
              bottom: 0,
              left: 0,
              top: 0,
              right: 0,
            }}>
            <ActivityIndicator size="small" color="#000" />
          </View>
        )}
     
      </ScrollView>
     
      </PTRView>
      {scrollToBottom==true && (
          <TouchableOpacity style={{position:'absolute',bottom:'10%',right:'5%'}} onPress={()=>{
            console.log('HHHHHhHH')
            scrollviewref?.current.scrollToEnd({animated: true})
            }}>
          <AntDesignIcon name="downcircle" size={30} color="rgba(0,0,0,0.3)"/>
      </TouchableOpacity>
      )} 

Here, inside the callback of TouchableOpacity, the console is getting printed, however the second line is not working.

also, initially I want the scrollview to point to the bottom, hence I also have the following piece of code, but even that is not triggering, except for the consoles which are printing fine.

 if(scrollviewref &&scrollviewref.current && scrollviewref.current!=undefined && scrollviewref.current!==null && scrollviewref.current.scrollToEnd && scrollviewref.current.scrollToEnd!==null && moreClicked==false){
      console.log('pppppppppp')
      setTimeout(()=>{
        if(scrollviewref &&scrollviewref.current && scrollviewref.current!=undefined && scrollviewref.current!==null && scrollviewref.current.scrollToEnd && scrollviewref.current.scrollToEnd!==null && moreClicked==false){
          scrollviewref.current.scrollToEnd({animated: true})
        }        
      },1000)      
      console.log('hhhhhhh')
    }  

This is a very weird situation which I am not understanding how to fix, kindly help me out here, any leads would be great.

CodePudding user response：

I suggest using RefreshControl instead of third party components like react-native-pull-to-refresh