Using navigator to Welcome component about react-native-material-design HOT 25 CLOSED

You need to import it...

import React, { Component, PropTypes, View, Text, Image, IntentAndroid } from 'react-native';

from react-native-material-design.

Hello

In the demo, the navigator is created by reference into the context of the app, meaning you can access it from any child component of the index.android.js file. In this case, the entire app.

https://github.com/react-native-material-design/demo-app/blob/master/src/scenes/Navigation.js#L81

The link above shows how you can grab it from context, and use it wherever you like.

from react-native-material-design.

How can I access them outside of the render() function?

from react-native-material-design.

Same way you'd access props or state.

const { navigator } = this.context

navigator.pop();

from react-native-material-design.

Thanks for the swift response and help!

I tried too hard and couldn't figured it out, i'm sure i'm missing here something.
Here's my welcome screen code, i'm using react-native-gifted-listview module as my refreshable list component.

When i'm trying to console.log(navigator) i'm getting undefined.
Maybe you'll be able to help me out with this.

import React, { Component, View, Text, Image, IntentAndroid } from 'react-native';
import { Card, Button, COLOR, TYPO } from 'react-native-material-design';

import AppStore from '../stores/AppStore';

var API_URL = 'http://www.geektime.co.il/appApi/json.php';
var GiftedListView = require('react-native-gifted-listview');
var Post = require ('./Post');
var connError = 0;

export default class Welcome extends Component {
  _onFetch(page = 1, callback, options) {
    var data = [];
    function timeout(ms, promise) {
      return new Promise(function(resolve, reject) {
        setTimeout(function() {
            reject(new Error("timeout"))
        }, ms)
        promise.then(resolve, reject)
      })
    }

    timeout(5000,fetch(API_URL + '?page=' + page)
      .then((response) => response.json())
      .then((responseData) => {
        if (connError == 1) {
          connError = 0;
        }
        data = responseData.posts;
        page++;
          callback(data);
      }).catch((error) => {
        if (connError == 0) {
            connError = 1;
        }
        callback(null);
      }).done()
    )
  }
    _renderCardView(rowData) {
      const navigator = this.context;
      const theme = AppStore.getState().theme;
      return (
        <View>
            <Card>
                <Card.Media
                    image={<Image source={{uri:rowData.image}}/>}
                    overlay
                >
                    <Text style={[TYPO.paperFontHeadline, COLOR.paperGrey50]}>{rowData.title}</Text>
                    <Text style={[TYPO.paperSubhead, COLOR.paperGrey50]}>{rowData.author}</Text>
                </Card.Media>
                <Card.Body>
                    <Text>{rowData.excerpt}</Text>
                </Card.Body>
                <Card.Actions position="left">
                    <Button primary={theme} value="Read this" onPress={() => console.log(navigator) } />
                </Card.Actions>
            </Card>
        </View>
      )
    }
    render() {
        return (
          <GiftedListView
            rowView={this._renderCardView}
            onFetch={this._onFetch}
            firstLoader={true} // display a loader for the first fetching
            pagination={true} // enable infinite scrolling using touch to load more
            refreshable={true} // enable pull-to-refresh for iOS and touch-to-refresh for Android
            withSections={false} // enable sections
            customStyles={{
              refreshableView: {
                backgroundColor: '#eee',
              },
            }}

            PullToRefreshViewAndroidProps={{
              colors: ['#ff0000', '#00ff00', '#0000ff'],
              progressBackgroundColor: '#c8c7cc',
            }}
          />
        );
    }

}

from react-native-material-design.

No problem!

this.context is an object, containing the navigator and drawer references. You need to do either:

const { navigator } = this.context; or
const navigator = this.context.navigator;

from react-native-material-design.

Tried them both, nothing works. headache.
Mind if I wrap the whole code in a zip and send it to you?

from react-native-material-design.

Ah wait, you're missing something:

    static contextTypes = {
        navigator: PropTypes.object.isRequired
    };

That should work now, I hope ha.

from react-native-material-design.

Can't find variable: PropTypes

from react-native-material-design.

Works, but returns the WorkerNavigator instead of the navigator.

from react-native-material-design.

Erm, WorkerNavigator? Can you dump the console.log of the navigator here?

from react-native-material-design.

_renderCardView(rowData) {
      const theme = AppStore.getState().theme;
      console.log(navigator); // prints the following.
      return (
        <View>
            <Card>
                <Card.Media
                    image={<Image source={{uri:rowData.image}}/>}
                    overlay
                >
                    <Text style={[TYPO.paperFontHeadline, COLOR.paperGrey50]}>{rowData.title}</Text>
                    <Text style={[TYPO.paperSubhead, COLOR.paperGrey50]}>{rowData.author}</Text>
                </Card.Media>
                <Card.Body>
                    <Text>{rowData.excerpt}</Text>
                </Card.Body>
                <Card.Actions position="left">
                    <Button primary={theme} value="Read" />
                </Card.Actions>
            </Card>
        </View>
      )
    }

from react-native-material-design.

Okay so I went about and tackled this...

https://github.com/react-native-material-design/demo-app#navigate

Custom implementation which is pretty flexible. Might make it into a lib but could do with testing on it first :)

from react-native-material-design.

with more cards i get Cannot read property '_currentElement' of null

when i use const { navigator } = this.context;

from react-native-material-design.

Could you show me the full code?

from react-native-material-design.

http://lpaste.net/148531

from react-native-material-design.

@arpu can you also show us your routes file please

from react-native-material-design.

is the routes file from the demo-app nothing changed

from react-native-material-design.

Could you try replacing the Button with this:

<Button primary={theme} value="Read this" onPress={() => { navigator.forward() }} />

If that doesn't work, can you paste the output of this.context.navigator for us... cheers

from react-native-material-design.

TypeError: Cannot read property 'navigator' of undefined(…)
ExceptionsManager.js:63 Cannot read property '_currentElement' of nullhandleException @ ExceptionsManager.js:63handleError @ InitializeJavaScriptAppEngine.js:80ErrorUtils.reportFatalError @ error-guard.js:28guard @ MessageQueue.js:40callFunctionReturnFlushedQueue @ MessageQueue.js:81onmessage @ debuggerWorker.js:39

from react-native-material-design.

Try changing:
_renderCardView(rowData) {

to:
_renderCardView = (rowData) => {

from react-native-material-design.

This solves the issue.

from react-native-material-design.

Okay so this is because within _renderCardView(rowData) {, the class (this) isn't bound into that function. To get around this you could do something in the constructor like:

constructor() {
    super();
    this._renderCardView = this._renderCardView.bind(this);
}

However, that to me is a bit stinky, so doing:

_renderCardView = (rowData) => { is a cleaner way to bind this, using the arrow function:

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions

from react-native-material-design.

works for me too thx

from react-native-material-design.

Closing issue as this is resolved.

from react-native-material-design.