title: React native - Maximum call stack size exceeded
body: <p>When I add the <code>&lt;Menu /&gt;</code> component to my header as below:</p>
  
  <pre><code>let SearchPage = (props) =&gt; {
    const menu = (
      &lt;Container&gt;
        &lt;Header style={styles.header}&gt;
          &lt;Left&gt;
            &lt;Button &gt;
              &lt;Menu /&gt;
            &lt;/Button&gt;
          &lt;/Left&gt;
          &lt;Body&gt;
  </code></pre>
  
  <p>I get the error </p>
  
  <blockquote>
    <p>Maximum call stack size exceeded</p>
  </blockquote>
  
  <p>and of course if I comment out the <code>&lt;Menu /&gt;</code> line in my <code>SearchPage</code>, there is no error.</p>
  
  <p>The menu is a <a href="https://github.com/shoumma/react-native-off-canvas-menu" rel="noreferrer">react-native-off-canvas-menu</a></p>
  
  <p>My menu component:</p>
  
  <p><strong>components/menu/Menu.js</strong></p>
  
  <pre><code>import React from 'react'
  import { View, Icon } from 'react-native'
  import { connect } from 'react-redux'
  import { togglePageMenu } from './menu.action'
  import { OffCanvas3D } from 'react-native-off-canvas-menu'
  //import AddPage from '../add-page/AddPage'
  import SearchPage from '../search-page/SearchPage'
  
  const mapStateToProps = (state) =&gt; ({
    isOpen: state.get('menu').isOpen
  })
  
  const mapDispatchToProps = (dispatch) =&gt; ({
    togglePageMenu: () =&gt; {
      dispatch(togglePageMenu())
    }
  })
  
  let Menu = (props) =&gt; (
    &lt;View style={{ flex: 1 }}&gt;
      &lt;OffCanvas3D
        active={props.isOpen}
        onMenuPress={props.togglePageMenu}
        backgroundColor={'#222222'}
        menuTextStyles={{ color: 'white' }}
        handleBackPress={true}
        menuItems={[
          {
            title: 'Search Products',
            icon: &lt;Icon name="camera" size={35} color='#ffffff' /&gt;,
            renderScene: &lt;SearchPage /&gt;
          }
        ]} /&gt;
    &lt;/View&gt;
  )
  Menu.propTypes = {
    togglePageMenu: React.PropTypes.func.isRequired,
    isOpen: React.PropTypes.bool.isRequired
  }
  
  Menu = connect(
    mapStateToProps,
    mapDispatchToProps
  )(Menu)
  
  export default Menu
  </code></pre>
  
  <p>What could be causing the error?</p>
  
  <p>Here is my component that uses the menu (probably not relevant):</p>
  
  <p><strong>components/search-page/SearchPage.js</strong></p>
  
  <pre><code>import { ScrollView, StyleSheet, View } from 'react-native'
  import {
    Container,
    Button,
    Text,
    Header,
    Body,
    Right,
    Left,
    Title,
    Icon
  } from 'native-base'
  import React from 'react'
  import Keywords from '../keywords/Keywords'
  import Categories from '../categories/Categories'
  import Location from '../location/Location'
  import Menu from '../menu/Menu'
  import DistanceSlider from '../distanceSlider/DistanceSlider'
  import Map from '../map/Map'
  import Drawer from 'react-native-drawer'
  import { connect } from 'react-redux'
  import { toggleMenu } from './searchPage.action'
  import { styles, wideButtonColor } from '../../style'
  import searchPageStyle from './style'
  import { selectIsSearchFormValid } from './isSearchFormValid.selector'
  
  const mapStateToProps = (state) =&gt; ({
    isMenuOpen: state.get('searchPage').get('isMenuOpen'),
    isSearchFormValid: selectIsSearchFormValid(state)
  })
  
  const mapDispatchToProps = (dispatch) =&gt; ({
    toggleMenu: () =&gt; {
      dispatch(toggleMenu())
    }
  })
  
  let SearchPage = (props) =&gt; {
    const menu = (
      &lt;Container&gt;
        &lt;Header style={styles.header}&gt;
          &lt;Left&gt;
            &lt;Button &gt;
              &lt;Menu /&gt;
            &lt;/Button&gt;
          &lt;/Left&gt;
          &lt;Body&gt;
            &lt;Title style={styles.title}&gt;Search Products&lt;/Title&gt;
          &lt;/Body&gt;
          &lt;Right&gt;
          &lt;/Right&gt;
        &lt;/Header&gt;
        &lt;Container style={styles.container}&gt;
          &lt;ScrollView keyboardShouldPersistTaps={true}&gt;
            &lt;Categories /&gt;
            &lt;View style={searchPageStyle.locationContainer}&gt;
              &lt;Location /&gt;
            &lt;/View&gt;
            &lt;DistanceSlider /&gt;
            &lt;Keywords /&gt;
            &lt;Button 
              block 
              style={{
                ...searchPageStyle.goButton, 
                backgroundColor: wideButtonColor(!props.isSearchFormValid)
              }} 
              disabled={!props.isSearchFormValid}
              onPress={props.toggleMenu}&gt;
              &lt;Text&gt;GO&lt;/Text&gt;
            &lt;/Button&gt;
          &lt;/ScrollView&gt;
        &lt;/Container&gt;
      &lt;/Container&gt;
    )
    return (
      &lt;Drawer open={props.isMenuOpen} content={menu}&gt;
        &lt;Container style={mapStyles.container}&gt;
          &lt;Map /&gt;
        &lt;/Container&gt;
      &lt;/Drawer&gt;
    )
  }
  SearchPage.propTypes = {
    toggleMenu: React.PropTypes.func.isRequired,
    isMenuOpen: React.PropTypes.bool.isRequired,
    isSearchFormValid: React.PropTypes.bool.isRequired
  }
  
  SearchPage = connect(
    mapStateToProps,
    mapDispatchToProps
  )(SearchPage)
  
  export default SearchPage
  
  const mapStyles = StyleSheet.create({
    container: {
      ...StyleSheet.absoluteFillObject,
      height: 400,
      width: 400,
      justifyContent: 'flex-end',
      alignItems: 'center',
    }
  })
  </code></pre>