Onsen UI + React Navigator.pushPage not a function?

Question

Using the Onsen playground & React Combining Navigator and Tabbar example, I made this - https://media.giphy.com/media/fjxPFluObAs5P3cXms/giphy.gif

I wanted to change the position of the button and input field for where you add more users, so I used a fab. Whenever I call the navigator.pushPage it says TypeError: navigator.pushPage is not a function .

The code behind it is:

 fabHandleClick() {
      navigator.pushPage({ component: ItemForm, props: { key: 'itemForm' } });
    }


render() {
    return (
        <Page>
            <List
              dataSource={this.props.users}
              renderRow={this.renderList.bind(this, this.props.users, this.props.added, "Add", true)}
            />
            <br />
            <hr />
            <br />
            <List
              dataSource={this.props.added}
              renderRow={this.renderList.bind(this, this.props.added, this.props.users, "Remove", false)}
            />
            <Fab
              onClick={this.fabHandleClick}
              position='bottom right'>
              <Icon icon='md-face' />
            </Fab>

        </Page>
    );
}

Thanks in advance!

Answer 1

<Page /> should have access to the navigator object either by being wraped in a function or as a prop

Wrapped example:

  renderPage = (route, navigator) => (<Ons.Page key={route.title} renderToolbar={() => this.renderToolbar(route, navigator)}>
        <section style={{ margin: '16px', textAlign: 'center' }}>
          <Ons.Button onClick={() => this.fabHandleClick(navigator)}>
              Push Page
            </Ons.Button>
        </section>
      </Ons.Page>);

fabHandleClick(navigator) {
      navigator.pushPage({ component: ItemForm, props: { key: 'itemForm' } });
    }