<p dir="auto">There seems to have been an API change between React 0.12 and 0.13 that's not covered in the documentation. When using <code class="notranslate">JSXTransformer.transform</code> with the <code class="notranslate">sourceMap</code> option, the source map is now returned as a plain JavaScript object. Previously it would return an instance of <code class="notranslate">SourceMapGenerator</code> and you'd need to call <code class="notranslate">.toJSON()</code> to get the actual source map.</p>
<p dir="auto">Is this an intentional change that just got overlooked when writing the documentation?</p>
<p dir="auto">i'm trying to create my apps, app have function like maps app of google. my app have 2 scene: - first scene: is mapview and have a search input in the top of the scene, when user click on search input, app will navigate to second scene (search scene) - second scene: i implemented module react-native-google-places-autocomplete, when user input text this component will give suggestion and autocomplete place.</p>
<p dir="auto">I get place info (description and coordinate...) and pass this props through Actions.pop() method of react-native-router-flux. then get props and trigger componentWillReceiveProps to update region object of mapview component (first scene). But seemly componentWillReceiveProps do not work. I stuck there. Do you know how to solve it or know other way to do it? Please help me!</p>
<p dir="auto">This is my first scene code (mapview componet)</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import React, { Component } from 'react';
import {
  AppRegistry,
  Dimensions,
  StyleSheet,
  Text,
  TextInput,
  TouchableHighlight,
  Image,
  View
} from 'react-native';
import { Actions } from 'react-native-router-flux';
import MapView from 'react-native-maps';
var {GooglePlacesAutocomplete} = require('react-native-google-places-autocomplete');

const { width, height } = Dimensions.get('window');

const ASPECT_RATIO = width / height;
const LATITUDE = 21.035080;
const LONGITUDE = 105.793627;
const LATITUDE_DELTA = 0.0922;
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;

export default class Hub extends Component {
  constructor(props){
    super(props);
    this.state = {
      textQuery: 'Searh a place',
      region: {},
      markers:[],
      mapStyle:null
    };
  }

  componentWillMount() {
    this.initial ();
  };

  initial () {
      navigator.geolocation.getCurrentPosition(
        (position) =&gt; {
          console.log(position);
          this.setState({
            region: {
              latitude: position.coords.latitude,
              longitude: position.coords.longitude,
              latitudeDelta: LATITUDE_DELTA,
              longitudeDelta: LONGITUDE_DELTA,
            },
          });
        }, (error) =&gt; {
          console.log(error);
          this.setState({
            region: {
              latitude: LATITUDE,
              longitude: LONGITUDE,
              latitudeDelta: LATITUDE_DELTA,
              longitudeDelta: LONGITUDE_DELTA,
            },
          });
        },
      );
    }
    };

  componentWillReceiveProps(nextProps){
    this.updatePlace();
  };

  updatePlace = (props = this.props) =&gt; {
  // do something with props
  console.log('now running');
  this.setState({
    textQuery: props.address,
    region: {
      latitude: props.latitude,
      longitude: props.longitude,
      latitudeDelta: LATITUDE_DELTA,
      longitudeDelta: LONGITUDE_DELTA,
    },
  });
  };

onRegionChange = (region) =&gt; {
  this.setState({ region });
};

  render() {

    return (
      &lt;View style ={styles.container}&gt;
        &lt;TouchableHighlight onPress={Actions.placesearch}&gt;
          &lt;View style={styles.searchContainer}&gt;
            &lt;Text style={styles.seartTitle}&gt;
              {this.state.textQuery}
            &lt;/Text&gt;
          &lt;/View&gt;
        &lt;/TouchableHighlight&gt;
        &lt;MapView
          style={styles.map}
          region={this.state.region}
          onRegionChange={this.onRegionChange}

        &gt;
        {this.state.markers.map = (marker =&gt; (
          &lt;MapView.Marker
            coordinate={marker.latlng}
            title={marker.title}
            description={marker.description}
            identifier={marker.id}
          /&gt;
        ))}

        &lt;/MapView&gt;
      &lt;/View&gt;
    );
  }
}"><pre class="notranslate"><code class="notranslate">import React, { Component } from 'react';
import {
  AppRegistry,
  Dimensions,
  StyleSheet,
  Text,
  TextInput,
  TouchableHighlight,
  Image,
  View
} from 'react-native';
import { Actions } from 'react-native-router-flux';
import MapView from 'react-native-maps';
var {GooglePlacesAutocomplete} = require('react-native-google-places-autocomplete');

const { width, height } = Dimensions.get('window');

const ASPECT_RATIO = width / height;
const LATITUDE = 21.035080;
const LONGITUDE = 105.793627;
const LATITUDE_DELTA = 0.0922;
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;

export default class Hub extends Component {
  constructor(props){
    super(props);
    this.state = {
      textQuery: 'Searh a place',
      region: {},
      markers:[],
      mapStyle:null
    };
  }

  componentWillMount() {
    this.initial ();
  };

  initial () {
      navigator.geolocation.getCurrentPosition(
        (position) =&gt; {
          console.log(position);
          this.setState({
            region: {
              latitude: position.coords.latitude,
              longitude: position.coords.longitude,
              latitudeDelta: LATITUDE_DELTA,
              longitudeDelta: LONGITUDE_DELTA,
            },
          });
        }, (error) =&gt; {
          console.log(error);
          this.setState({
            region: {
              latitude: LATITUDE,
              longitude: LONGITUDE,
              latitudeDelta: LATITUDE_DELTA,
              longitudeDelta: LONGITUDE_DELTA,
            },
          });
        },
      );
    }
    };

  componentWillReceiveProps(nextProps){
    this.updatePlace();
  };

  updatePlace = (props = this.props) =&gt; {
  // do something with props
  console.log('now running');
  this.setState({
    textQuery: props.address,
    region: {
      latitude: props.latitude,
      longitude: props.longitude,
      latitudeDelta: LATITUDE_DELTA,
      longitudeDelta: LONGITUDE_DELTA,
    },
  });
  };

onRegionChange = (region) =&gt; {
  this.setState({ region });
};

  render() {

    return (
      &lt;View style ={styles.container}&gt;
        &lt;TouchableHighlight onPress={Actions.placesearch}&gt;
          &lt;View style={styles.searchContainer}&gt;
            &lt;Text style={styles.seartTitle}&gt;
              {this.state.textQuery}
            &lt;/Text&gt;
          &lt;/View&gt;
        &lt;/TouchableHighlight&gt;
        &lt;MapView
          style={styles.map}
          region={this.state.region}
          onRegionChange={this.onRegionChange}

        &gt;
        {this.state.markers.map = (marker =&gt; (
          &lt;MapView.Marker
            coordinate={marker.latlng}
            title={marker.title}
            description={marker.description}
            identifier={marker.id}
          /&gt;
        ))}

        &lt;/MapView&gt;
      &lt;/View&gt;
    );
  }
}
</code></pre></div>
<p dir="auto">This is my second scene code (search places component)</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';
import { Actions } from 'react-native-router-flux';
var {GooglePlacesAutocomplete} = require('react-native-google-places-autocomplete');


export default class PlaceSearch extends Component {
  constructor(props){
    super(props);
    this.state = {

    };
  }

  setLocation (data, details) {
    var d, da = {};
    var da = data;
    var d = details;     
    Actions.pop({latitude: d.geometry.location.lat, longitude: d.geometry.location.lng, address: da.description});
  };

  render() {
    return (
      &lt;View style={styles.container}&gt;
      &lt;GooglePlacesAutocomplete
        placeholder='Search'
        minLength={2} // minimum length of text to search
        autoFocus={false}

        fetchDetails={true}
        renderDescription={(row) =&gt; row.description} // custom description render
        onPress={(data, details = null) =&gt; { // 'details' is provided when fetchDetails = true
          this.setLocation(data, details);
          //console.log(data);
          //console.log(details);
        }}
        getDefaultValue={() =&gt; {
          return ''; // text input default value
        }}
        query={{
          // available options: https://developers.google.com/places/web-service/autocomplete
          key: 'AIzaSyDwa-YQOdts8gmrY49nkl5NX8kd7PSXNIs',
          language: 'vi', // language of the results
           // default: 'geocode'
          components: 'country:vn',
        }}
        styles={{
          description: {
            fontWeight: 'bold',
          },
          predefinedPlacesDescription: {
            color: '#1faadb',
          },
        }}

        currentLocation={true} // Will add a 'Current location' button at the top of the predefined places list
        currentLocationLabel=&quot;Current location&quot;
        nearbyPlacesAPI='GooglePlacesSearch' // Which API to use: GoogleReverseGeocoding or GooglePlacesSearch
        GoogleReverseGeocodingQuery={{
          // available options for GoogleReverseGeocoding API : https://developers.google.com/maps/documentation/geocoding/intro
        }}
        GooglePlacesSearchQuery={{
          // available options for GooglePlacesSearch API : https://developers.google.com/places/web-service/search
          rankby: 'distance',
          types: 'food',
        }}


        filterReverseGeocodingByTypes={['locality', 'administrative_area_level_3']} // filter the reverse geocoding results by types - ['locality', 'administrative_area_level_3'] if you want to display only cities

        //predefinedPlaces={[homePlace, workPlace]}

        debounce={200} // debounce the requests in ms. Set to 0 to remove debounce. By default 0ms.
      /&gt;
      &lt;/View&gt;
    );
  }
}"><pre class="notranslate"><code class="notranslate">import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';
import { Actions } from 'react-native-router-flux';
var {GooglePlacesAutocomplete} = require('react-native-google-places-autocomplete');


export default class PlaceSearch extends Component {
  constructor(props){
    super(props);
    this.state = {

    };
  }

  setLocation (data, details) {
    var d, da = {};
    var da = data;
    var d = details;     
    Actions.pop({latitude: d.geometry.location.lat, longitude: d.geometry.location.lng, address: da.description});
  };

  render() {
    return (
      &lt;View style={styles.container}&gt;
      &lt;GooglePlacesAutocomplete
        placeholder='Search'
        minLength={2} // minimum length of text to search
        autoFocus={false}

        fetchDetails={true}
        renderDescription={(row) =&gt; row.description} // custom description render
        onPress={(data, details = null) =&gt; { // 'details' is provided when fetchDetails = true
          this.setLocation(data, details);
          //console.log(data);
          //console.log(details);
        }}
        getDefaultValue={() =&gt; {
          return ''; // text input default value
        }}
        query={{
          // available options: https://developers.google.com/places/web-service/autocomplete
          key: 'AIzaSyDwa-YQOdts8gmrY49nkl5NX8kd7PSXNIs',
          language: 'vi', // language of the results
           // default: 'geocode'
          components: 'country:vn',
        }}
        styles={{
          description: {
            fontWeight: 'bold',
          },
          predefinedPlacesDescription: {
            color: '#1faadb',
          },
        }}

        currentLocation={true} // Will add a 'Current location' button at the top of the predefined places list
        currentLocationLabel="Current location"
        nearbyPlacesAPI='GooglePlacesSearch' // Which API to use: GoogleReverseGeocoding or GooglePlacesSearch
        GoogleReverseGeocodingQuery={{
          // available options for GoogleReverseGeocoding API : https://developers.google.com/maps/documentation/geocoding/intro
        }}
        GooglePlacesSearchQuery={{
          // available options for GooglePlacesSearch API : https://developers.google.com/places/web-service/search
          rankby: 'distance',
          types: 'food',
        }}


        filterReverseGeocodingByTypes={['locality', 'administrative_area_level_3']} // filter the reverse geocoding results by types - ['locality', 'administrative_area_level_3'] if you want to display only cities

        //predefinedPlaces={[homePlace, workPlace]}

        debounce={200} // debounce the requests in ms. Set to 0 to remove debounce. By default 0ms.
      /&gt;
      &lt;/View&gt;
    );
  }
}
</code></pre></div>