Detect Scroll event in react

import React, { Component } from 'react'

import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'

import { View, StyleSheet } from 'react-native'

import { TabBar, Icon } from 'antd-mobile'

import homeIcon from '../../../images/home-icon.svg'
import homeIconActive from '../../../images/home-icon-active.svg'
import refillIcon from '../../../images/icon-news.svg'
import refillIconActive from '../../../images/icon-news-active.svg'
import orderIcon from '../../../images/icons-receipt.svg'
import orderIconActive from '../../../images/icons-receipt-active.svg'

import { resetNavigationState } from '../../common/navigation/navigationActions'
import { zIndexLevel999 } from '../../../styles/helper/variables'

const style = StyleSheet.create({
  footerStyle: {
    position: 'fixed',
    width: '100%',
    bottom: 0,
    boxShadow: '0 1px 33px 0 rgba(0, 0, 0, 0.16)',
    zIndex: zIndexLevel999
  }
})

class Footer extends Component {
  constructor (props) {
    super(props)
    this._timeout = null
    this.handleScroll = this.handleScroll.bind(this)
    this.state = {
      selectedTab: 'home',
      isNavigate: false,
      scrollStatus: ''
    }
  }

  componentDidMount () {
    window.addEventListener('scroll', this.handleScroll)
  }

  componentWillUnmount () {
    window.removeEventListener('scroll', this.handleScroll)
  }

  handleScroll (event) {
    console.log(this.state.scrollStatus)
    if (this._timeout) { // if there is already a timeout in process cancel it
      clearTimeout(this._timeout)
    }
    this._timeout = setTimeout(() => {
      this._timeout = null
      this.setState({
        scrollStatus: 'scroll stopped'
      })
    }, 1000)
    if (this.state.scrollStatus !== 'scrolling') {
      this.setState({
        scrollStatus: 'scrolling'
      })
    }
  }

  navigatePath (path, tabName) {
    this.setState({
      selectedTab: tabName
    })
    this.props.actions.resetNavigationState()
    if (path === '/profile') {
      let customerId = this.props.customerFormState.payload.id

      path = '/profile?customer-id=' + customerId
    }
    this.props.history.push(path)
  }

  render () {
    const {pathname} = this.props.location
    return (
      <View
        style={style.footerStyle}
      >
        <TabBar
          unselectedTintColor='#949494'
          tintColor='#80C241'
          barTintColor='white'
          hidden={this.state.scrollStatus === 'scrolling'}
        >
          <TabBar.Item
            title='Home'
            key='Home'
            icon={homeIcon}
            selectedIcon={homeIconActive}
            selected={pathname === '/home'}
            onPress={() => {
              this.navigatePath('/home')
            }}
          />
          <TabBar.Item
            title='Tips'
            key='Tips'
            icon={refillIcon}
            selectedIcon={refillIconActive}
            selected={pathname === '/blog/healthtips'}
            onPress={() => {
              this.navigatePath('/blog/healthtips')
            }}
          />
          <TabBar.Item
            title='Refill'
            key='Refill'
            icon={refillIcon}
            selectedIcon={refillIconActive}
            selected={pathname === '/refill-medicines'}
            onPress={() => {
              this.navigatePath('/refill-medicines')
            }
            }
          />

          <TabBar.Item
            title='My Orders'
            key='Orders'
            icon={orderIcon}
            selectedIcon={orderIconActive}
            selected={pathname === '/orders'}
            onPress={() => {
              this.navigatePath('/orders')
            }}
          />

          <TabBar.Item
            title='More'
            key='More'
            icon={<Icon type={'ellipsis'} />}
            selectedIcon={<Icon color={'#80C241'} type={'ellipsis'} />}
            selected={pathname === '/profile'}
            onPress={() => {
              this.navigatePath('/profile')
            }}
          />
        </TabBar>
      </View>
    )
  }
}

function mapStateToProps (state, ownProps) {
  return {
    location: ownProps.location,
    customerFormState: state.customerFormState
  }
}

function matchDispatchToProps (dispatch) {
  return {
    actions: bindActionCreators(
      {
        resetNavigationState
      },
      dispatch
    )
  }
}

export default connect(
  mapStateToProps,
  matchDispatchToProps
)(Footer)