Slow Rendering of MapView

[aaronksaunders]

All other animation in app work fine, but I am getting a huge delay in the IOS simulator and a slight delay on device during page transition.

the code is posted here: https://github.com/aaronksaunders/ReactParseExample/blob/master/App/Components/SessionDetail.js

The previous page that is rendering the page with the map is as follows:

 this.props.navigator.push({
 //title: this.getTitle(earthquake.humanReadableLocation),
 component: SessionDetail,
 passProps: {session: session, navigator: this.props.navigator},
 navigationBar: <NavigationBar title ='Session Detail' />
 });

I am using the react-native-navbar, if that helps

Here is a video of the delay: http://bit.ly/1bHUlcl

[mattmo]

Did you figure out the cause of this?

[aaronksaunders]

Nope, no update, feedback or comment... Are you seeing this issue?

[brentvatne]

@aaronksaunders - I tried pulling your app and I just saw this: http://url.brentvatne.ca/1isEN - that was a problem with your parse query, this fixed it:

 observe: function (props, state) {
 return {
 tutorSessions: (new Parse.Query("TutorSession").include("place").include("tutor").include("user"))
 };
 },

Next, the actual problem - this is pretty easy to fix, in SessionDetail add react-timer-mixin and include it as a mixin, then render the map after the component has already mounted and performed an initial rendering pass.

/**
 *
 *
 */
'use strict';
var React = require('react-native');
var ActionSheetIOS = require('ActionSheetIOS');

var {
 StyleSheet,
 ScrollView,
 MapView,
 View,
 } = React;

var moment = require('moment');
var TextLabelPanel = require('../Components/TextLabelPanel');
var Button = require('../Components/Button');
var TimerMixin = require('react-timer-mixin');

var SessionDetail = React.createClass({
 mixins: [TimerMixin],

 getInitialState: function () {
 return {
 relativeTime: moment(this.props.session.createdAt).startOf('hours').fromNow(),
 annotations: [{
 longitude: this.props.session.place.coords.longitude,
 latitude: this.props.session.place.coords.latitude,
 title: 'You Are Here'
 }],
 mapRegion: {
 latitude: this.props.session.place.coords.latitude,
 longitude: this.props.session.place.coords.longitude,
 latitudeDelta: .01,
 longitudeDelta: .01
 }
 };
 },


 showShareActionSheet: function () {
 ActionSheetIOS.showShareActionSheetWithOptions({
 url: 'https://code.facebook.com',
 },
 (error) => {
 console.error(error);
 },
 (success, method) => {
 var text;
 if (success) {
 text = `Shared via ${method}`;
 } else {
 text = 'You didn\'t share';
 }
 this.setState({text})
 });
 },

 componentDidMount: function() {
 this.setTimeout(function() {
 this.setState({showMap: true});
 }.bind(this), 250);
 },

 renderMap: function() {
 if (this.state.showMap) {
 return (
 <MapView region={this.state.mapRegion} style={styles.map}
 annotations={this.state.annotations}/>
 );
 } else {
 return (
 <View style={[styles.map, {backgroundColor: '#cccccc'}]} />
 );
 }
 },

 render: function () {
 // alert(JSON.stringify(this.state.annotations));
 return (
 <ScrollView>
 {this.renderMap()}
 <TextLabelPanel label="Name" text={this.props.session.place.Name}/>
 <TextLabelPanel label="Location" text={this.props.session.place.Location}/>
 <TextLabelPanel label="When" text={this.state.relativeTime}/>
 <Button
 onPress={() => this.showShareActionSheet()}
 label="Share Session Information"/>
 </ScrollView>
 );
 }
});

var styles = StyleSheet.create({
 map: {
 height: 250
 }
});

module.exports = SessionDetail;

[rxb]

Had same issue, this fixed perfectly. Thanks!

[brentvatne]

@rxb - great 😄

[albertwchang]

Great advice w/ timer-mixin and where to use it, @brentvatne. Thanks!

[alvaromb]

Thanks @brentvatne! Awesome tip. The mixins are currently not supported in ES6 classes, right?

[richarddewit]

@alvaromb You're right, use this instead:

componentDidMount() {
 this.timer = TimerMixin.setTimeout(() => {
 this.setState({ showMap: true });
 }, 250);
}

componentWillUnmount() {
 TimerMixin.clearTimeout(this.timer);
}

[brentvatne]

@alvaromb - you can use react-mixin to get around that ;)

[satishsojitra]

@brentvatne one off question.. I recently started working on react native. I want to learn it very depth. How did you learn all this?