Search code examples
javascriptreact-nativereduxreact-native-router-flux

In React Native (and Ignite), how do I create a ListView (inside a tab) that navigates to another container when a list item is clicked?

I have just created an Ignite starter project. I am partially familiar with the tech used in this great boilerplate code, but some aspects are quite new to me. In the project is a ListView that is navigated to on pressing a button. Once inside the ListView, I want to be able to click on an item and push to a container that I have generated. I can't get this to work.

I haven't altered the v1.13.0 Ignite project in any other way than to this end. The navigation is therefore provided by 'react-native-router-flux'. Specifically I have:

  • Taken the ListviewExample scene in NavigationRouter.js and encapsulated my generated container in it like so:

<Scene hideNavBar={false} key='listviewExample' component={ListviewExample} title='Listview Example'> <Scene key='testContainer' component={TestContainer} title='testContainer' /> </Scene>

  • Imported Actions from react-native-router-flux: import { Actions } from 'react-native-router-flux'
  • Added the following to the Text item in ListviewExample: onPress={() => Actions.testContainer()}

When I press on the Text item in my ListView, precisely nothing happens. If I take a look at Spencer Carli's blog post about this, for example, I can't see anything different to what I am doing. Nor in the 'react-native-router-flux' demo.

What am I missing here?

Note, by the way, that I wrote (inside a tab) in the title because my actual Ignite-based project that I am working on has the ListView inside a tab. But as I am having the same problem outside of a tab view when I try in the simpler Ignite project I am using here for testing purposes, I guess the issue is something else.

Solution

  • Apparently my setup was fine apart from one detail. As you can see above, I had enclosed my testContainer in the listViewExample tag. In fact, putting it on the same level as the listViewExample tag resulted in exactly the behaviour I was looking for. So: <Scene key='listviewExample' navigationBarStyle={Styles.navBar} component={ListviewExample} title='Listview Example' /> <Scene key='testContainer' component={TestContainer} title='testContainer' />

    Problem solved.