how to use ES6 with react native

Question

Working with React-Native and trying to learn ES6 syntax. I had a similar issue yesterday and got the solution. I added

.bind(this)

to my my function calls and the problem was solved. I ran into the same issue again with another function call and I cannot track down what is going on. The error message is the same.

undefined is not a object (evaluating 'this.props.drawer.open')

The function is:

    onClickMenu () {
    this.props.drawer.open();
  }

and it is being called with this:

onPress={this.onClickMenu.bind(this)}

Here is the entire code. If you see something other than this issue that doesn't look right let me know please! *note I have replaced "var" with "let". From what I've read it is proper ES6 syntax to do that everywhere?

    'use strict';

const React = require('react-native');
const {
  Text,
  View,
  Component,
  StyleSheet,
  SwitchAndroid
} = React;

import { Button } from 'react-native-material-design';
import Store from 'react-native-simple-store';
import Underscore from 'underscore';
import RNGMap from 'react-native-gmaps';
import Polyline from 'react-native-gmaps/Polyline';
import Icon from 'react-native-vector-icons/Ionicons';
import SettingsService from './../settings/settings.service';
//import subdivisions from './subdivisions.json';
import commonStyles from './../common/styles';

let accessToken = null;
let userId = null;
let routeId = null;
let subdivisionId = null;

SettingsService.init('Android');

class Map extends Component {
  constructor(props) {
    super(props)
    this.state = {
      odometer: 0,
      mapWidth: 300,
      mapHeight: 300,
      enabled: false,
      isMoving: false,
      currentLocation: undefined,
      locationManager: undefined,
      paceButtonIcon: 'Start Trip',
      navigateButtonIcon: 'navigate',
      paceButtonStyle: commonStyles.disabledButton,
      // mapbox
      center: {
        lat: 40.7223,
        lng: -73.9878
      },
      zoom: 10,
      markers: []
    }
  }

  componentDidMount() {
    Store.get('token').then((token) => {
      accessToken = token.access_token;
      userId = token.userId;
    });
    let me = this,
      gmap = this.refs.gmap;

    this.locationManager = this.props.locationManager;

    // location event
    this.locationManager.on("location", function(location) {
      console.log('- location: ', JSON.stringify(location));
      me.setCenter(location);
      gmap.addMarker(me._createMarker(location));

      me.setState({
        odometer: (location.odometer / 1000).toFixed(1)
      });

      // Add a point to our tracking polyline
      if (me.polyline) {
        me.polyline.addPoint(location.coords.latitude, location.coords.longitude);
      }
    });
    // http event
    this.locationManager.on("http", function(response) {});
    // geofence event
    this.locationManager.on("geofence", function(geofence) {});
    // error event
    this.locationManager.on("error", function(error) {
      console.log('- ERROR: ', JSON.stringify(error));
    });
    // motionchange event
    this.locationManager.on("motionchange", function(event) {
      me.updatePaceButtonStyle();
    });

    // getGeofences
    this.locationManager.getGeofences(function(rs) {
    }, function(error) {
      console.log("- getGeofences ERROR", error);
    });

    SettingsService.getValues(function(values) {
      values.license = "eddbe81bbd86fa030ea466198e778ac78229454c31100295dae4bfc5c4d0f7e2";
      values.orderId = 1;
      values.stopTimeout = 0;
      //values.url = 'http://192.168.11.120:8080/locations';

      me.locationManager.configure(values, function(state) {
        me.setState({
          enabled: state.enabled
        });
        if (state.enabled) {
          me.initializePolyline();
          me.updatePaceButtonStyle()
        }
      });
    });

    this.setState({
      enabled: false,
      isMoving: false
    });
  }
  _createMarker(location) {
    return {
      title: location.timestamp,
      id: location.uuid,
      icon: require("image!transparent_circle"),
      anchor: [0.5, 0.5],
      coordinates: {
        lat: location.coords.latitude,
        lng: location.coords.longitude
      }
    };
  }

  initializePolyline() {
    // Create our tracking Polyline
    let me = this;
    Polyline.create({
      width: 12,
      points: [],
      geodesic: true,
      color: '#2677FF'
    }, function(polyline) {
      me.polyline = polyline;
    });
  }

  onClickMenu () {
    this.props.drawer.open();
  }

  onClickEnable() {
    let me = this;
    if (!this.state.enabled) {
      this.locationManager.start(function() {
        me.initializePolyline();
      });
    } else {
      this.locationManager.resetOdometer();
      this.locationManager.stop();
      this.setState({
        markers: [{}],
        odometer: 0
      });
      this.setState({
        markers: []
      });
      if (this.polyline) {
        this.polyline.remove(function(result) {
          me.polyline = undefined;
        });
      }
    }

    this.setState({
      enabled: !this.state.enabled
    });
    this.updatePaceButtonStyle();
  }

  onClickPace() {
    if (!this.state.enabled) {
      return;
    }
    let isMoving = !this.state.isMoving;
    this.locationManager.changePace(isMoving);

    this.setState({
      isMoving: isMoving
    });
    this.updatePaceButtonStyle();
  }

  onClickLocate() {
    let me = this;

    this.locationManager.getCurrentPosition({
      timeout: 30
    }, function(location) {
      me.setCenter(location);
    }, function(error) {
      console.error('ERROR: getCurrentPosition', error);
      me.setState({
        navigateButtonIcon: 'navigate'
      });
    });
  }

  onRegionChange() {}

  setCenter(location) {
    this.setState({
      navigateButtonIcon: 'navigate',
      center: {
        lat: location.coords.latitude,
        lng: location.coords.longitude
      },
      zoom: 16
    });
  }

  onLayout() {
    let me = this,
      gmap = this.refs.gmap;

    this.refs.workspace.measure(function(ox, oy, width, height, px, py) {
      me.setState({
        mapHeight: height,
        mapWidth: width
      });
    });
  }

  updatePaceButtonStyle() {
    let style = commonStyles.disabledButton;
    if (this.state.enabled) {
      style = (this.state.isMoving) ? commonStyles.redButton : commonStyles.greenButton;
    }
    this.setState({
      paceButtonStyle: style,
      paceButtonIcon: (this.state.enabled && this.state.isMoving) ? 'Stop Trip' : 'Start Trip'
    });
  }

  render() {
    return (
      <View style={commonStyles.container}>
        <View style={commonStyles.topToolbar}>
          <Icon.Button name="android-options" onPress={this.onClickMenu.bind(this)} backgroundColor="transparent" size={30} color="#000" style={styles.btnMenu} underlayColor={"transparent"} />
          <Text style={commonStyles.toolbarTitle}>Background Geolocation</Text>
          <SwitchAndroid onValueChange={this.onClickEnable.bind(this)} value={this.state.enabled} />
        </View>
        <View ref="workspace" style={styles.workspace} onLayout={this.onLayout.bind(this)}>

          <RNGMap
            ref={'gmap'}
            style={{width: this.state.mapWidth, height: this.state.mapHeight}}
            markers={this.state.markers}
            zoomLevel={this.state.zoom}
            onMapChange={(e) => console.log(e)}
            onMapError={(e) => console.log('Map error --> ', e)}
            center={this.state.center} />

        </View>
        <View style={commonStyles.bottomToolbar}>
          <Icon.Button name={this.state.navigateButtonIcon} onPress={this.onClickLocate.bind(this)} size={25} color="#000" underlayColor="#ccc" backgroundColor="transparent" style={styles.btnNavigate} />
          <Text style={{fontWeight: 'bold', fontSize: 18, flex: 1, textAlign: 'center'}}>{this.state.odometer} km</Text>
          <Button raised={true} 
                  text={this.state.paceButtonIcon} 
                  onPress={this.onClickPace.bind(this)}
                  overrides={{backgroundColor:"#e12429",textColor:"#ffffff"}} 
                  style={this.state.paceButtonStyle}></Button>
          <Text>&nbsp;</Text>
        </View>
      </View>
    );
  }
};

const styles = StyleSheet.create({
  workspace: {
    flex: 1
  }
});

module.exports = Map;

UPDATE: debugging via adb in the terminal shows the same error

So here is rest of code. to troubleshoot. I added the project files to a plunker. it is a demo project that i am working with. plunker

    'use strict';

const React = require('react-native');
const {
  Text, 
  Component,
  StyleSheet, 
  AppRegistry
} = React;

import Map from './map/map';
import Drawer from 'react-native-drawer';
import Settings from './settings/settings.android';
import Icon from 'react-native-vector-icons/Ionicons';
import BackgroundGeolocation from 'react-native-background-geolocation-android';

global.bgGeo = BackgroundGeolocation;

class App extends Component {
  onClickMenu() {
    this.props.refs.drawer.open();
  }

  render() {
    return (
      <Drawer ref="drawer" side="right" acceptPan={false} content={<Settings drawer={this.refs.drawer} locationManager={BackgroundGeolocation} />}>
        <Map drawer={this.refs.drawer} locationManager={BackgroundGeolocation} />    
      </Drawer>
    );
  }
};

module.exports = App;

UPDATE:

I dont think your code shows which `props` are passed to your component and the error doesnt specify which part is undefined. You're assuming context is not being passed, is it possible that `drawer` (or even `props`) is not defined? Some logging would confirm it. — Matt Styles, Mar 04 '16 at 12:52
just console.log, XCode will display JS logging via the debug panel when running your app. [more info](http://stackoverflow.com/questions/30115372/how-to-do-logging-in-react-native) — Matt Styles, Mar 04 '16 at 12:57
and what happens when you insert a `console.log( this )` or `console.log( this.props )` as the first line in `onClickMenu`? — Matt Styles, Mar 04 '16 at 13:19
Oh, just saw some more edit, I'm not sure the exact problem (hence a lack of an answer), but you can't pass a component through like that in React anyway, at best you'd be passing the element referencing the component (not sure how that plays out in react-native). You __can__ pass a function through to children to call `drawer.open()` or `drawer.close()` though. — Matt Styles, Mar 04 '16 at 13:22
Ha, yes, well, there is the problem! I'll try to write an answer to help, as I think the solution is to pass through a function rather than trying to pass through the ref directly. — Matt Styles, Mar 04 '16 at 14:04

score 2 · Accepted Answer · answered Mar 04 '16 at 14:15

I dont think you can pass through refs to components in such a way, certainly it would not work in React and I dont think it would work in such a way in React-Native either.

I'm not clear why you are trying to .open the Drawer from the Map component as it looks like the Map component can only be accessed when the Drawer is open, but, if you want to access parent behaviours from children a good pattern is to pass through functions for children to execute (you could argue that this is actually bad and that passing events around is a more robust pattern).

I've never used the library so I'm not totally clear on its usage but you can pass functions through like this:

class Application extends Component {

  closeControlPanel = () => {
    this.refs.drawer.close()
  };
  openControlPanel = () => {
    this.refs.drawer.open()
  };
  render () {
    return (
      <Drawer
        ref="drawer"
        content={<ControlPanel />}
        >
        <Map onMenuClose={ this.closeControlPanel.bind( this ) } />
      </Drawer>
    )
  }
})

In this case this.props.onMenuClose should be attached to an action, which, when executed will trigger the function from the parent and execute the this.refs.drawer.close function.

Ok. Im not at computer right now but will plug it in asap. This is actually my first react native project so I am learning as I go. I got this as a demo project and I thought I would convert it to ES6 for consistency with most projects out there. Problem with using demo projects to learn is you never know what jackass made it — texas697, Mar 04 '16 at 14:54

how to use ES6 with react native

1 Answers1