How to create dynamic routes using StackNavigator

Question

I am trying to learn how to use React Navigation on react-native and stumbled upon this article: https://hackernoon.com/getting-started-with-react-navigation-the-navigation-solution-for-react-native-ea3f4bd786a4. It explains how to create a 3 level navigation with fixed routes. My question is how do you go about creating a 3 or more levels of navigation when some of the routes should be dynamic. The screen structure would look something like this:

Physics
    |- Physics 101
         |- Chapter 1
         |- Chapter 2    
         |- Chapter 3
    |- Physics 201
         |- Chapter 1
         |- Chapter 2
         |- Chapter 3
         |- Chapter 4
         |- Chapter 5
    |- Physics 305
         |- Chapter 1
         |- Chapter 2
         |- Chapter 3
         |- Chapter 4
         |- Chapter 5
         |- Chapter 6
         |- Chapter 7
         |- Chapter 8

So looking at that structure, Physics would be the main screen that contains 3 fixed navigation items, where when you click on one, it would take you to another screen with more navigation items. One thing to note is that when you're on the main screen, you wouldn't know how many child nav items each of the items would have until you click into one.

For example, if you click on Physics 101, you'd be taken to a screen with 3 routes where each will show the content of the chapter. Clicking on Physics 305 would take you to a screen with 8 navigation items, etc.

I am just not too sure on how to use StackNavigator there when you don't know how many routes/navigation items need to be created until you've selected an item.

Help?

Update Here's the code I have right now which helps with listing out the Subject, then on tap, it shows all the Units, but I am still not sure how to create a new screen that then lists out all the chapters in a unit, where the number of chapters are different for each unit.

// router.js
export const SubjectStack = StackNavigator({
  Subjects: {
    screen: Subjects,
    navigationOptions: {
      title: 'Subjects',
    }
  },
  Units: {
    screen: Units,
    navigationOptions: ({ navigation }) => ({
      title: `${navigation.state.params.title.toUpperCase()}`
    })
  }
});

export const Root = TabNavigator({
  Subjects: {
    screen: SubjectStack,
    navigationOptions: {
      tabBarLabel: 'Subjects',
      tabBarIcon: ({ tintColor }) => <Icon name="list" size={35} color={tintColor} />,
    }
  },
  New: {
    screen: New,
    navigationOptions: {
      tabBarLabel: 'Add New Subject',
      tabBarIcon: ({ tintColor }) => <Icon name="plus" size={35} color={tintColor} />
    }
  }
});



// Subjects.js
import React, { Component } from 'react';
import {
  Text,
  View,
  ScrollView,
  StatusBar
} from 'react-native';
import { List, ListItem } from 'react-native-elements';
import { units } from '../../config/data';

class Subjects extends Component {
  onLearnMore = (trip) => {
    this.props.navigation.navigate('Units', {...unit});
  };

  render() {
    return (
      <ScrollView>
        <StatusBar barStyle="dark-content" />
        <List>
          { units.map(unit => (
            <ListItem
                key={unit.id}
                title={unit.title}
                onPress={() => this.onLearnMore(unit)}
              />
          ))}
        </List>
      </ScrollView>
    );
  }
}

export default Subjects;

Answer 1

the route structure you need is

StackNavigator({
   Subject, // physics
   Unit, // Physics 101 , Physics 201 , ..
   Chapter, // Chapter 1, ..
})

It's the data that you need to pass varies and the way you need is jumping from one to another on some action. You don't need a dynamic route its your content that has to be dynamic.