App navigation in React Native : maximum call stack size exceeded

Question

I'm using ReactNative to create an iOS app. But I encountered an error I don't know how to fix.

I wanted to create a button for navigating to another scene. I followed Dark Army's tutorial on RN navigation and used the source code provided. I double checked everything and all seemed fine. But the error I mentioned pops up.

Here's the code I have done so far:

Index.ios.js:

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
} from 'react-native';

var Navigation = require('./DARNNavigator');

class QayProject extends Component {

  render() {
    return (
      <Navigation></Navigation>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FFF5E7',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('QayProject', () => QayProject);

DARNNavigator:

'use strict';

import React , {Component} from 'react';
import{
  View,
  Navigator
} from 'react-native';


const FirstPage = require('./FirstPage');
const SecondPage = require('./SecondPage');
class DARNNavigator extends React.Component{
  constructor(props) {
  super(props);
  }

  render() {
    var initialRouteID = 'first';
    return (
      <Navigator
        style={{flex:1}}
        initialRoute={{id: initialRouteID}}
        renderScene={this.navigatorRenderScene}/>
    );
  }

  navigatorRenderScene(route, navigator) {
    switch (route.id) {
      case 'first':
        return (<FirstPage navigator={navigator} route={route} title="FirstPage"/>);
      case 'second':
        return (<SecondPage navigator={navigator} route={route} title="SecondPage"/>);

    }
  }
}


module.exports = DARNNavigator;

FirstPage:

    import React, { Component } from 'react';
    import{
      View,
      Navigator,
      Button,
      AppRegistry,
      StyleSheet
    } from 'react-native';

    export default class FirstPage extends Component {

      constructor(props) {
        super(props);
        this.state={ id:'first' }
      }
      render() {
        return (

        <View style={styles.container}>

        <Button
          onPress={this.props.navigator.push({ id:'second' })}
          title="Next"
          color="#FFB200"
        />

        </View>

        )
      }
    }

    const styles = StyleSheet.create({
      container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
      },
      welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
      },
      instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
      },
    });

    module.exports = FirstPage;

SecondPage:

import React, { Component } from 'react';
import {
  View,
  Text,
  Navigator,
  StyleSheet
} from 'react-native';

export default class SecondPage extends Component {

  constructor(props) {
    super(props);
  this.state={
    id:'second'
  }
}

  render() {
    return (
      <View style={styles.container}>
      <Text style={styles.title}>
      Hello!
      </Text>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

module.exports = SecondPage;

Excellent first post. Very clear, very nicely formatted. Well done. If you haven't seen the site's [2 Minute tour](http://stackoverflow.com/tour) have a look. There are a lot of neat things to do here. — clearlight, Jan 30 '17 at 01:01
In my opinion, and as @appsthatmatter has suggested, built-in Navigation is what you should use. Take a look at his answer. — Facundo La Rocca, Jan 30 '17 at 13:04

score 2 · Answer 1 · answered Jan 30 '17 at 01:36

2

Don't use that library. They don't even have ONE single star on Github (not that it's the measure of a library's worth, I'm just saying there are more proven libraries available). The best and most straightforward I've found so far is "react-native-navigation" (https://github.com/wix/react-native-navigation). A lot of people like "react-native-router-flux" as well but I personally don't.

Sorry, I don't have time to read the code right now, I may later. But my suggestion for now is to try out react-native-navigation. It's seriously amazing.

answered Jan 30 '17 at 01:36

Tricode

388
4
12

I couldn't run the program. The RCTBridge files somehow was not found. – Qay Yaz Jan 30 '17 at 06:24
Hmm. Did you try to make a Facebook login and add the required libraries? This is a common error when trying to do this. To learn how to navigate, what I did was download an example app using the Navigator library I wanted to use. You can find one using react-native-navigation here: https://github.com/wix/react-native-navigation/tree/master/example – Tricode Jan 31 '17 at 15:27

score 1 · Accepted Answer · answered Jan 30 '17 at 11:41

I suggest to follow the official guide of React Native and use the built-in Navigator component.

Using Navigators React Native

I never saw that error, but if it will come after a lot of navigation steps, you should take a look at the resetTo function. It will clear the navigation stack. This makes sense for example when you are navigating back to the home screen of your app.

App navigation in React Native : maximum call stack size exceeded

2 Answers2