Hardware Back Button issue on a Hidden tabBar Screen

[Kida007]

I just have a Simple TabNavigator, In which one of the Tabs navigate to a screen with Hidden TabBar . which i achieved using this :
Trip: { screen:Trip, navigationOptions:{ tabBarLabel:'Start', tabBarVisible: false } }

Now When i press hardware Back Button it crashes with :
TypeError: undefined is not an object (evaluating '_this3._component.setNativeProps')
and if it make it Visible, it works just fine i.e navigates to the first Tab Screen.

[iloo123]

Why do you have tabBarLabel:'Start' when you're hiding it ?

[iloo123]

Try this

import { Platform, BackHandler } from 'react-native'

componentWillMount() {
        if (Platform.OS !== 'android') return
        BackHandler.addEventListener('hardwareBackPress', () => {
            const { dispatch } = this.props
            dispatch({ type: 'Navigation/BACK' })
            return true
        })
 }

    componentWillUnmount() {
        if (Platform.OS === 'android') BackHandler.removeEventListener('hardwareBackPress')
    }

[Kida007]

Thanks @iloo123 for reply .
I tried BackHandler on that Specific Tab Screen.
Apparently BackHandler doesn't work inside TabNavigator (for me atleast).

I want to achieve something like this :

Which I think better be achieved by Custom TabBar .

But I still Think Back Button on Hidden TabBar Screen is not Working ideally .

[iloo123]

Try this with in the screen. I'm sure this will work

  static navigationOptions = ({navigation}) => ({
    tabBarVisible: false,
    headerLeft: (<View style={{paddingLeft: 25}}><TouchableOpacity onPress={() => navigation.goBack()}>
    <Image source={require('./icons/back.png')} style={{width: 20, height: 20, resizeMode: 'contain'}} />
    </TouchableOpacity></View>),
    headerTitle: <View>
                  <Text style={styles.titleStyle}>Account Settings</Text>
                </View>,
  })

[Kida007]

thanks for the reply!
but does that solve the problem of 'hardwareBackButton' ?

[Kida007]

So This is How I solved.

1) Changing Route Model.

Instead of using that particular screen in TabNavigator. I used it as a screen in the parent Stack Navigator which contains the TabNavigator.

so the route looks like

Parent Stack
|-- Login
|
|-- TabNavigator
|
|-- Screen I want to Navigate from middle Tab

2 ) Controlling TabBar middle Tab to operate differently .

This can be Done by using tabBarComponent in TabNavigatorConfig to control Navigation
as we have to stop navigation for the middle Tab and navigate to some other screen in
Stack Navigator. we can do this :

tabBarComponent: ({jumpToIndex, ...props, navigation})=>(
      <TabBarBottom
        {...props}
        jumpToIndex= {(index)=>{
          if(index==2) navigation.navigate('TripStack') ;
          else jumpToIndex(index)
        }}
        style={ Styles.tabBarStyle}
        labelStyle= {{ fontSize:10 }}
      />
    )
      />
    )

I Think this is the right way to do it.
But I'm not Sure of the Original Issue.

Anyways I found that here