Merge branch 'master' of https://github.com/staszekscp/react-native-web

Author: staszekscp

package-lock.json

@@ -3,7 +3,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "name": "babel-plugin-react-native-web",
-  "version": "0.21.0",
+  "version": "0.21.1",
   "description": "Babel plugin for React Native for Web",
   "main": "index.js",
   "devDependencies": {

packages/babel-plugin-react-native-web/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "react-native-web-docs",
-  "version": "0.21.0",
+  "version": "0.21.1",
   "description": "Documentation website for React Native for Web",
   "scripts": {
     "dev": "eleventy --serve",

packages/react-native-web-docs/package.json

@@ -1,18 +1,18 @@
 {
   "private": true,
   "name": "react-native-web-examples",
-  "version": "0.21.0",
+  "version": "0.21.1",
   "scripts": {
     "build": "next build",
     "dev": "next",
     "start": "next start"
   },
   "dependencies": {
-    "babel-plugin-react-native-web": "0.21.0",
+    "babel-plugin-react-native-web": "0.21.1",
     "next": "^12.2.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "react-native-web": "0.21.0"
+    "react-native-web": "0.21.1"
   },
   "devDependencies": {
     "@babel/core": "^7.18.6",

packages/react-native-web-examples/package.json

@@ -3,7 +3,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "name": "react-native-web",
-  "version": "0.21.0",
+  "version": "0.21.1",
   "description": "React Native for Web",
   "module": "dist/index.js",
   "main": "dist/cjs/index.js",

packages/react-native-web/package.json

@@ -9,6 +9,7 @@
 
 import Animated from '..';
 import Easing from '../../Easing';
+import AnimatedImplementation from '../../../vendor/react-native/Animated/AnimatedImplementation';
 
 const AnimatedInterpolation = Animated.Interpolation;
 
@@ -329,4 +330,74 @@ describe('Animated', () => {
       expect(interpolation(2 / 3)).toBe('rgba(0, 0, 0, 0.667)');
     });
   });
+
+  describe('sequence and loop', () => {
+    it('supports restarting sequence after it was stopped during execution', () => {
+      const anim1 = { start: jest.fn(), stop: jest.fn() };
+      const anim2 = { start: jest.fn(), stop: jest.fn() };
+      const cb = jest.fn();
+
+      const seq = AnimatedImplementation.sequence([anim1, anim2]);
+
+      seq.start(cb);
+
+      anim1.start.mock.calls[0][0]({ finished: true });
+      seq.stop();
+
+      // anim1 should be finished so anim2 should also start
+      expect(anim1.start).toHaveBeenCalledTimes(1);
+      expect(anim2.start).toHaveBeenCalledTimes(1);
+
+      seq.start(cb);
+
+      // after restart the sequence should resume from the anim2
+      expect(anim1.start).toHaveBeenCalledTimes(1);
+      expect(anim2.start).toHaveBeenCalledTimes(2);
+    });
+
+    it('supports restarting sequence after it was finished without a reset', () => {
+      const anim1 = { start: jest.fn(), stop: jest.fn() };
+      const anim2 = { start: jest.fn(), stop: jest.fn() };
+      const cb = jest.fn();
+
+      const seq = AnimatedImplementation.sequence([anim1, anim2]);
+
+      seq.start(cb);
+      anim1.start.mock.calls[0][0]({ finished: true });
+      anim2.start.mock.calls[0][0]({ finished: true });
+
+      // sequence should be finished
+      expect(cb).toBeCalledWith({ finished: true });
+
+      seq.start(cb);
+
+      // sequence should successfully restart from the anim1
+      expect(anim1.start).toHaveBeenCalledTimes(2);
+      expect(anim2.start).toHaveBeenCalledTimes(1);
+    });
+
+    it('restarts sequence normally in a loop if resetBeforeIteration is false', () => {
+      const anim1 = { start: jest.fn(), stop: jest.fn() };
+      const anim2 = { start: jest.fn(), stop: jest.fn() };
+      const seq = AnimatedImplementation.sequence([anim1, anim2]);
+
+      const loop = AnimatedImplementation.loop(seq, {
+        resetBeforeIteration: false
+      });
+
+      loop.start();
+
+      expect(anim1.start).toHaveBeenCalledTimes(1);
+
+      anim1.start.mock.calls[0][0]({ finished: true });
+
+      expect(anim2.start).toHaveBeenCalledTimes(1);
+
+      anim2.start.mock.calls[0][0]({ finished: true });
+
+      // after anim2 is finished, the sequence is finished,
+      // hence the loop iteration is finished, so the next iteration starts
+      expect(anim1.start).toHaveBeenCalledTimes(2);
+    });
+  });
 });

packages/react-native-web/src/exports/Animated/__tests__/index-test.js

@@ -18,7 +18,7 @@ const Platform = {
     return false;
   },
   get Version(): string {
-    return "0.0.0"
+    return '0.0.0';
   }
 };
 

packages/react-native-web/src/exports/Platform/index.js

@@ -318,6 +318,8 @@ const sequence = function (
         current++;
 
         if (current === animations.length) {
+          // if the start is called, even without a reset, it should start from the beginning
+          current = 0;
           callback && callback(result);
           return;
         }

packages/react-native-web/src/vendor/react-native/Animated/AnimatedImplementation.js

@@ -78,6 +78,7 @@ class AnimatedProps extends AnimatedNode {
     if (this.__isNative && this._animatedView) {
       this.__disconnectAnimatedView();
     }
+    this._animatedView = null;
     for (const key in this._props) {
       const value = this._props[key];
       if (value instanceof AnimatedNode) {