1

This is my hierarchical structure of router:

<Tabs
  key='tabbar'
  backToInitial
  onTabOnPress={() => {
    console.log('Back to initial and also print this');
  }}
  swipeEnabled
  hideNavBar={true}
>
  <Scene
    title='Profilo'
    key='profile'
    component={Profile}
    tabBarLabel='Profilo'
    icon={TabBarIcon}
    name='ios-person'
    titleStyle={{
      fontFamily: 'RobotoRegular', 
      fontSize: 24, 
      color: '#00b0ff'
    }}
  >
    <Scene
      title='adsf'
      key='vehicle'
      component={Vehicle}
      titleStyle={{
        fontFamily: 'RobotoRegular', 
        fontSize: 24, 
        color: '#00b0ff'
      }}
    />
  </Scene>

</Tabs>

If I am on the Profilo page and I wont to go to the Vehicle page, I use Actions.vehicle() but I obtain this error:

Actions.vehicle() is not a function

I already try with this solution, but this also doesn't work How can I resolve this problem?

The Result of a propesed snack is the following: enter image description here

th3g3ntl3man
  • 1,926
  • 5
  • 29
  • 50

1 Answers1

1

Using an action scene key will require your scene to be on the same level as your other scenes, i.e. the vehicle scene cannot be a child component of profile.

In addition, you will need a Stack component to house both profile and vehicle scenes so that you can call Actions.{key} to access the scenes properly.

I have included a snack here for you to play with it. :)

Proposed solution:

<Tabs
  key='tabbar'
  backToInitial
  onTabOnPress={() => {
    console.log('Back to initial and also print this');
  }}
  swipeEnabled
  hideNavBar={true}
>
  <Stack
    title='ProfiloStack'
    key='profileStack'
  >
  <Scene
    title='Profilo'
    key='profile'
    component={Profile}
    tabBarLabel='Profilo'
    icon={TabBarIcon}
    name='ios-person'
    titleStyle={{
      fontFamily: 'RobotoRegular', 
      fontSize: 24, 
      color: '#00b0ff'
    }}
  />
    <Scene
      title='adsf'
      key='vehicle'
      component={Vehicle}
      titleStyle={{
        fontFamily: 'RobotoRegular', 
        fontSize: 24, 
        color: '#00b0ff'
      }}
    />
  </Stack>
</Tabs>
kenmistry
  • 1,934
  • 1
  • 15
  • 24
  • that's strange. it is working on my expo snack. how does your updated code with the `Stack` component look? i can troubleshoot from there. – kenmistry Jan 25 '20 at 02:02
  • When I open and start your expo snack, the error was generated – th3g3ntl3man Jan 25 '20 at 13:59
  • Erm. It is not going to work on `browser`. You need to select `Android` or `iOS`. – kenmistry Jan 25 '20 at 14:01
  • I run your snack on my `Android`... In my question, I add the result of run your `snack` – th3g3ntl3man Jan 25 '20 at 14:06
  • Okay. I can see a couple of problems there. You will need to restructure your scenes by enclosing both scenes within a `Stack` and named it differently. I've updated my answer to include a proposed solution. – kenmistry Jan 25 '20 at 14:15