Navigate animation drops frame even when using InteractionManager

[indesignlatam]

Hello,

I my projects usually I use createContainer and inside it I do some linking of collections EX:

export default createContainer((params) => {
    const handle = Meteor.subscribe('subs-name');

    let listing;
    let subscriptionsReady = false;

    if(handle.ready()){
        listing = Meteor.collection('listings').findOne({_id: listingId});
        listing.user = Meteor.collection('users').findOne({_id: listing.userId});
        listing.city = Meteor.collection('cities').findOne({_id: listing.cityId});
        listing.images = Meteor.collection('images').find({objectId: listing._id});
        listing.features = Meteor.collection('features').find({_id: {$in: listing.features}});
        listing.isFavorite = Meteor.collection('favorites').findOne({listingId: listing._id});

        subscriptionsReady = true;
    }

    return {
        listing,
        listingId,
        subscriptionsReady
    };
}, ListingDetail);

Some times subscription is to fast and the code inside handle runs and the animation drop some frames even when using InteractionManager, but thats obvious because InteractionManager will run in my component not inside the container.

I have solved this adding this to the createContainer mixin in react-native-meteor.

componentWillMount() {
  InteractionManager.runAfterInteractions(() => {
    Data.waitDdpReady(()=>{
      if(this.getMeteorData) {
        this.data = {};
        this._meteorDataManager = new MeteorDataManager(this);
        const newData = this._meteorDataManager.calculateData();
        this._meteorDataManager.updateData(newData);
      }
    });
  });
},

I know this can be done in a separate component, but maybe something like this could be a good feature to have.

I would like to hear what you people think about it.

[baryshok]

@indesignlatam I also wrapped 'Data.waitDdpReady' in 'InteractionManager.runAfterInteractions' some time ago in my project, but fell back to the original code very soon, because the app started to crash sometimes. You see that 'this._meteorDataManager = new MeteorDataManager(this);' is called inside InteractionManager and it can be created with a delay, but in componentWillUpdate method it is expected to be already defined (newData = this._meteorDataManager.calculateData();).

[indesignlatam]

You are right. I was just testing that and I found what you described. I removed it.