Bdtjtk

I am quite new to React Native and now I am kind of building my mobile app (previously implemented using jQuery and PhoneGap) from the beginning and I need an advice how to achieve the following:

On my main dashboard I have a list of mail boxes (React FlatList)

1. MailBox1

2. Mailbox2

3. Mailbox3

Then, after a specific mailbox was clicked I want to list all of the items inside of it (on a new screen/component/page):

1. MailBox1_Item1

2. MailBox1_Item2

Each of the mail items has its own details. After a mail item was clicked I want to be able to display its details on a new screen/component/page.

MailBox1_Item1 was created on 10/10/18

MailBox1_Item1 was created by SomeUser

etc.

The specific thing here is that I want to be able to navigate back when I am on the screens for details and mail items.

My app so far is using a tab navigator from here:

import React, { Component } from 'react';

import { StyleSheet, Text, View } from "react-native";



import { createBottomTabNavigator } from "react-navigation"

import Icon from 'react-native-vector-icons/Ionicons'



import HomeTab from './HomeTab'

import SettingsTab from './SettingsTab'



export default createBottomTabNavigator({

  Home:{

    screen: HomeTab,

    navigationOptions: {

        tabBarLabel: 'Home',

        tabBarIcon:({tintColor})=>(

          <Icon name="ios-home" color={tintColor} size={24}/>

        )

    }

  },

  Settings:{

    screen: SettingsTab,

    navigationOptions: {

        tabBarLabel: 'Settings',

        tabBarIcon:({tintColor})=>(

          <Icon name="ios-settings" color={tintColor} size={24}/>

        )

    }

  }

},

{

  //router config

  initialRoutName: 'Home',

  order: ['Home', 'Settings'],

  //navigation for complete tab navigator

  navigationOptions:{

    tabBarVisible:true

  },

  tabBarOptions:{

    activeTintColor:'red',

    inactiveTintColor:'grey'

  }

});



const styles = StyleSheet.create({

  container: {

    flex: 1,

    alignItems: 'center',

    justifyContent: 'center',

  }

});

and my dashboard is on the 'Home' tab.

What you should do is, just use a StackNavigator for your Dashboard route of the Tab, and your Stack navigator should contain the following routes

• MailList (Component to show mail list)




• MailItemList (Component to show list of items associated with specific mail)




• ItemDetail (Component to show detail for item)

The code should look like :

const dashboardStack = createStackNavigator({

  MailListScreen: {screen: MailList},

  MailItemListScreen: {screen: MailItemList},

  ItemDetailScreen: {screen: ItemDetail},

});

with this in hand, you should use componentDidMount of each component to initiate your network operation to fetch required data to show it to the screen, and for the screens which depend on the previous like list item screen to fetch list of items for given mail, just pass the id of the mail to the next screen and use that id to initiate the network call to fetch the desired data.

You can pass the id (in general, data) from one route (screen component) to other using params like this:

this.props.navigation.navigate('MailItemListScreen', {id: 1});

The above line describes a navigation from current screen lets say from MailListScreen to MailItemListScreen and also carrying a payload of info as second parameter in the navigate.

I would recommend you read the react-navigation docs first.

Hope this helps. Happy Coding !