Fixed animations wrongly coming from the bottom when using the react-…

…navigation Tabs

This problem is caused due to the fact that react-navigation moves components out of the view-port, and RNMM caches recent measures, which caused the component position to be incorrect in some situations

CHANGELOG.md

@@ -15,6 +15,7 @@ Create magical move transitions between scenes in react-native
 
 - Fixed Android build on certain RN/SDK combinations due to hardcoded Android version numbers (thanks @stpch)
 - Fixed `duration`, `delay` and `easing` props, which were used from the source component, but they should have been used from the target component.
+- Fixed animations wrongly coming from the bottom when using the react-navigation Tabs.
 
 ### Changes
 

src/Scene.js

@@ -118,9 +118,13 @@ class MagicMoveScene extends Component {
  return this.props.active;
  }
 
- measure() {
+ measure(forceRemeasure) {
  const now = performanceNow();
- if (this._lastMeasureResult && now - this._lastMeasureTime <= 100) {
+ if (
+ this._lastMeasureResult &&
+ (now - this._lastMeasureTime < 16 ||
+ (now - this._lastMeasureTime <= 100 && !forceRemeasure))
+ ) {
  return this._lastMeasureResult;
  }
  this._lastMeasureTime = now;

src/clone/measure.js

@@ -33,11 +33,23 @@ export async function measureRelativeLayout(component) {
  const { mmContext } = component.props;
  const { scene, provider } = mmContext;
 
- const layouts = await Promise.all([
+ let layouts = await Promise.all([
  component.measure(),
  (scene || provider).measure()
  ]);
 
+ // If the component is outside the scene, then perform one more attempt
+ // to measure the scene. This fixes an issue with react-navigation
+ // which moves content out of the view-port when it is not visible
+ if (
+ layouts[0].x + layouts[0].width < layouts[1].x ||
+ layouts[0].y + layouts[0].height < layouts[1].y ||
+ layouts[0].x > layouts[1].x + layouts[1].width ||
+ layouts[0].y > layouts[1].y + layouts[1].height
+ ) {
+ layouts[1] = await (scene || provider).measure(true);
+ }
+
  return {
  x: layouts[0].x - layouts[1].x,
  y: layouts[0].y - layouts[1].y,