React Native dynamic StackNavigator

Question

In my native app I'm creating StackNavigator with createStackNavigator. I can set to new navigation screen with props.navigation.navigate("ScreenName") onPress event in button which refers to given "ScreenName".

Here is a sample of my createStackNavigator

const homeUI = (props) => {
return (
    <View>
        <StatusBar translucent animated backgroundColor="rgba(0, 0, 0, 0.54)" />
        <ScrollView>
            <View style={styles.pngHolder}>
                <Image style={styles.stretch} source={require('../../../assets/pictures/logo.png')} />
                <TouchableOpacity style={styles.imageHolder} onPress={() => {props.navigation.navigate("LoginPanel")}} >
                    <Image style={styles.loginImage} source={require('../../../assets/pictures/IconProfile.png')} />
                </TouchableOpacity>
            </View>
            <MenuButton 
                goTo = {() => {props.navigation.navigate("Demands")}} 
                logo = {require('../../../assets/pictures/Icon01.png')} 
                name="Demands" />
            <MenuButton
                goTo = {() => {props.navigation.navigate('Headquarters')}}
                logo = {require('../../../assets/pictures/Icon02.png')} 
                name="Headquarters" />
            <MenuButton
                goTo= {()=> {props.navigation.navigate("Announcements")}} 
                logo = {require('../../../assets/pictures/Icon03.png')} 
                name="Announcements" />
            <MenuButton 
                goTo = {() => {props.navigation.navigate('Contact')}}
                logo = {require('../../../assets/pictures/Icon07.png')} 
                name="Contact" />
               //and so on.
        </ScrollView>
    </View>
);
}

I can navigate between pages with <MenuItem /> component. What I want to do is navigating screens with dynamically because after clicking on <MenuItem /> button, in each component (demands, announcements, ...) I'm fetching data. Each data has array of information and I want to display this data with dynamic screens but I'm not sure how to do it.

This is visual data sample I just created. ( '+' represents array, '-' represents information).

+ Data  
  - Country
      + City
          - Basel
              - Picture
          - Madrid
              - Picture
  - Sports
      + Tennis
          - Racket
          - Bags

Data categories lengths are different then each other. I want to get last information in each item but since lengths are different how can I create dynamic screen like this?

country > city > basel or madrid > information.

sports > tennis > racket or bags.

These are questions I've looked for but I couldn't figure it out.

React Native Creating Navigator Dynamically

How to Create Dynamic Routes

It is not necessary to create dynamic `stackNavigator`. You can create one screen (f.e. Details screen), that will receive parameters. In your case, the parameters will be the city ids or sports ids. On load of this Details screen you can access the parameter and to load and display the relevant data. Check out this example: https://snack.expo.io/@react-navigation/navigate-with-params-v3 — Hristo Eftimov, Dec 07 '18 at 08:48
@HristoEftimov Thanks for your response I was looking for something like this. Thank a lot :). — tron, Dec 07 '18 at 08:59
@HristoEftimov i need some think like this.. here how can i pass the const data = [ { label: 'Header title', children: [ { label: 'Sub-header title', children: [ { label: '3rd level #1' }, { label: '3rd level #2', children: [ { label: 'Level 4' } ] } ] } ] } ] nested data in each page. — user, Dec 05 '19 at 06:51

score 4 · Accepted Answer · answered Dec 07 '18 at 11:16

4

It is not necessary to create dynamic stackNavigator. You can create one screen (f.e. Details screen), that will receive parameters:

this.props.navigation.push('Details', {
    type: 'city',
    id: 'city_id,
})

On a load of this screen, you can access the parameter and to load and display the relevant data:

const { type, id } = this.props.navigation.state.params // option 1
const type = this.props.navigation.getParam('type'); // option 2

I have created an example with you dummy data: https://snack.expo.io/@hristoeftimov/react-navigation:-navigate-with-params

answered Dec 07 '18 at 11:16

Hristo Eftimov

13,845
13
50
77

1

Hi, i need exactly the same behaviour. But here i have to pass a paremeter from nested array object. like const data = [ { label: 'Header title', children: [ { label: 'Sub-header title', children: [ { label: '3rd level #1' }, { label: '3rd level #2', children: [ { label: 'Level 4' } ] } ] } ] } ] how to pass the nested data in each page?.. – user Dec 05 '19 at 06:47

React Native dynamic StackNavigator

1 Answers1