CODEWITHSUNDEEP
javascriptreact-nativereact-navigation
tron
tron

Reputation: 113

React Native dynamic StackNavigator

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

Upvotes: 2

Views: 3923

Answers (1)

Hristo Eftimov
Hristo Eftimov

Reputation: 15703

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

Upvotes: 4

Related Questions