CODEWITHSUNDEEP
react-nativeonpress
program_bumble_bee
program_bumble_bee

Reputation: 305

tabBarOnPress not working bottomTabNAvigator

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.

Upvotes: 0

Views: 2533

Answers (2)

remeus
remeus

Reputation: 2424

@Auticcat is right, but I should add that if you really want to leave the navigation options inside the component, it is possible to use getActiveChildNavigationOptions in your navigator.

export const BottomTabNavigation = createBottomTabNavigator({
  Daily: {
    screen: DailyStack,
  },
  Monthly: {
    screen: MonthlyStack,
  },
  Range: {
    screen: RangeStack,
    navigationOptions: ({ navigation, screenProps }) => ({
      ...getActiveChildNavigationOptions(navigation, screenProps),
    }),
  }
});

Upvotes: 2

Auticcat
Auticcat

Reputation: 4489

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()
        }
     }
  }

Upvotes: 3

Related Questions