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?