React-Native — Navigator not rendering initialRoute Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of React-Native — Navigator not rendering initialRoute without wasting too much if your time.

The question is published on by Tutorial Guruji team.

In the process of teaching myself React-Native. Building a mock-up of a retail iOS site which draws its data from Firebase and have hit a snag trying to incorporate Navigator. My app flows from ‘index.ios.js > MainLayout > Routing > HomeIndex’. Here are said components:


import React, { Component } from 'react';
import { Text } from 'react-native';
import { Container, Header, Title, Content, Footer, FooterTab, Button, Left, Right, Body, Icon } from 'native-base';
import Routing from './Routing';
import HomeIndex from '../pages/HomeIndex';

class MainLayout extends Component {
  render() {
    return (
                <Button transparent>
            <Right />

          <Routing />

                <Button full>

export default MainLayout;


import React, { Component } from 'react';
import { Navigator, View } from 'react-native';
import HomeIndex from '../pages/HomeIndex';
import ShowPage from '../pages/ShowPage';

class Routing extends Component {

  renderScene(route, navigator) {
    if ( === 'home') {
      return <HomeIndex navigator={navigator} />
    } else if ( === 'show') {
      return <ShowPage navigator={navigator} />

  render() {
    return (
        initialRoute={{ name: 'home' }}

export default Routing;


import React, { Component } from 'react';
import { RNRSData } from '../../config/FirebaseConstants';
import { StyleSheet, Text, View, TouchableHighlight, Image, Navigator } from 'react-native';
import styles from '../../../styles.js';

class HomeIndex extends Component {
    this.state = {
      allProducts: [],

  componentDidMount() {
    let _this = this;
    let products = {};

    RNRSData.ref('products/').once('value', function(data) {
      data.forEach(function(productNode) {
        let name = productNode.val().name;
        let cost = productNode.val().cost;
        let image = productNode.val().image;
        let idNumber = productNode.key;
        products[name] = {name: name, cost: cost, image: image, id: idNumber}
    }).then(function(product) {
      let keys = Object.keys(products).sort();
      let sortedHash = {};
      let sortedArray = [];

      for (let i = 0; i < keys.length; i++) {
        let key = keys[i];
        sortedArray.push(sortedHash[key] = products[key]);

      _this.setState({allProducts: sortedArray}, function afterProductSet() {


  render () {
    let allProducts = this.state.allProducts;

    return (
        <Text style={styles.homeHeader}>New Arrivals</Text>
        <View style={styles.homeIndexContainer}>
            { {
              return (
                <View style={styles.liContainer} key={}>
                    <Image source={{uri: object.image}} style={styles.liImage}>
                    <Text style={styles.liTextName}>{}</Text>
                    <Text style={styles.liTextCost}>${object.cost}</Text>

export default HomeIndex;

As it stands, my simulator renders the header and footer and hits the console.log in the HomeIndex and displays the correct data in said console.log. But it’s not displaying the data it’s pulling from Firebase within my simulator.

If I switch out <Routing /> for <HomeIndex /> within MainLayout.js it correctly displays the index in the simulator, which is leading me to suspect it may be something I’m botching within Routing.js. Or if the Navigator is somehow throwing off my componentDidMount method. Any help would be appreciated.


My issue was stemming from the nesting of my <Routing /> component in the <Content> tags in my MainLayout.js. Removed those and it rendered correctly.

We are here to answer your question about React-Native — Navigator not rendering initialRoute - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji