any Scroll events such as onScroll do not work with FlatList omponent

So I have a project using React-Native on iOS using <Flatlist/> component that is being rendered conditionally using a function renderContent() if a cart data is empty under a view like so:

<SafeAreaView style={styles.container}>
    <Navigator.Config
      onAppear={this.handleGetData}
      onDisappear={this.handleOnDisappear}
      rightButtons={deleteButton}
      onRightPress={this.handleDeleteButton}
    >
      {this.renderContent()}
    </Navigator.Config>
  </SafeAreaView>

where the renderContent() function is like so :

renderContent = () => {
const { cart, cart: { cartObject } } = this.props
const { shop_group: shopGroup } = cartObject
if (
  (cart.isNoResult && !cart.isLoadingCartList) ||
  !this.state.isUserLogin ||
  (shopGroup && shopGroup.length < 1 && !cart.isLoadingCartList)
) {
  return this.renderNoResult()
}
return this.renderData()

}

the <NoResultView/> component

<View style={{ flex: 1, backgroundColor: 'white' }}>
<View>
  <View style={{ paddingTop: noLogin ? 50 : 30, alignItems: 'center' }}>
    ...

  {
    cartData.isLoadingRecommended == false  ?



      <SuggestionsView title="Rekomendasi" 
        data={cartData.recommended ? cartData.recommended.recommendation : []} 
        renderItem={renderItemRecommended}
        onScroll={handleScroll}
        onEndReached={(info)=>{
          // if(!cartData.isLoadingRecommended && cartData.recommended){
            console.log('----------** END **------------', info, cartData.isLoadingRecommended)
          // }
        }}
      />

    :
    <ActivityIndicator animating size="small" />

  }

</View>

and the <FlatList/> component is rendered inside `

import { View, Text, Image, FlatList, TouchableOpacity } from 'react-native'
import React, { Component }  from 'react'
import Icon from 'react-native-vector-icons/EvilIcons'
import { ReactTPRoutes } from 'NativeModules'

class SuggestionsView extends Component {
    constructor(props){
        super(props)
        this.state = {
            isRefreshing: false,
            isLoading: false,
            isLoadingMorePost: true,
            hasNextPage: false,
            reachFeedEnd: false,
            shouldDisplayErrorToaster: false,
            isError: false,
          }
}

    handlePressViewAll = () => this.props.onPressViewAll()

    keyExtractor = (item, index) => index;


    render(){
        return (
        <View style={{
            paddingLeft: 16,
            paddingRight: 16,
        }}>


            </View>
            <FlatList
                style={{ flex: 1 }}
                numColumns={2}
                data={this.props.data}
                keyExtractor={this.keyExtractor}
                renderItem={this.props.renderItem}
                onEndReachedThreshold={0.3}
                scrollEventThrottle={16}
                onEndReached={(info)=>{
                    if(this.props.onEndReached){
                        this.props.onEndReached(info)

                    }
                }}
                ref={x => {
                    this.flatist = x // tslint:disable-line
                }}
                onScroll={()=> console.log('test')}
            />
        </View>
        )}
}

export default SuggestionsView

Although for some reason the onScroll Method is not firing at all. The scrollToEnd method is also not firing for some reason. Any help is appreciated thank you.