tabBarOnPress not working bottomTabNAvigator

Question

I have three screens in may BottomTabNavigator. I want to pass React native Date Picker for ios/android component as soon as third screen (Range) in bottom navigator is pressed. I tried using tabBarOnPress in my third screen in static navigationOptions, but it does not seems to work.

HEre is the snippets for my codes:

App.js

    (all imports considered)
    .......////
    const RangeStack = createStackNavigator({
      Range: {
        screen : Range
      }
    })



    export const BottomTabNavigation = createBottomTabNavigator({
      Daily: {
        screen: DailyStack
      },
      Monthly: {
        screen: MonthlyStack
      },
      Range: {
        screen: RangeStack
      }
    })
...../////

Range.js

import React, { Component } from 'react'
import { Text, View } from 'react-native'

import AsyncStorage from '@react-native-community/async-storage';
import { TouchableOpacity } from 'react-native-gesture-handler';


export const SalesUiRange = () => {
  return (
    <View>
      <Text>Sales ui range</Text>
    </View>
  )
}


export class ClaimsUiRange extends React.Component {

  render () {    
    return (   
      <View>
      <Text>Claims ui range</Text>
    </View>
    )
  }
}




export default class Range extends Component {
  static navigationOptions = ({ navigation }) => {
    return {

      tabBarOnPress: ({navigation, defaultHandler }) => {
       alert('pressed')
        defaultHandler();
      }
    }
  }


  constructor(props) {
    super(props)

    this.state = {
       valueOption: ''
    }
  }

     async getItem (item){
      const valueOption = await AsyncStorage.getItem(item);
      this.setState({
        valueOption
      })
}



  componentDidMount(){

    this.getItem('InitialOption');

  }


  render() {
    return (
      <View>
        {this.state.valueOption === 'sales' ? <SalesUiRange/> : <ClaimsUiRange/>}
      </View>
    )
  }
}

Please help to make this work.

Answer 1

This is not working because you are giving a tabBarOnPress property to the stackNavigator.

To give it to the route you need you have to change the createBottomTabNavigator to:

Range: {
    screen: RangeStack
    navigationOptions:{
       tabBarOnPress:({navigation, defaultHandler}) => {
               //whatever you need to do
            defaultHandler()
        }
     }
  }