Android hardware artifacting fix

README.md

@@ -31,16 +31,17 @@ const MyComponent = () => (
 
 ## Props
 
-| Name             | Type                   | Description                                | Required | Default        |
-|------------------|------------------------|--------------------------------------------|----------|----------------|
-| count            | number                 | items count to display                     | required |                |
-| origin           | {x: number, y: number} | animation position origin                  | required |                |
-| explosionSpeed   | number                 | explosion duration (ms) from origin to top |          | 350            |
-| fallSpeed        | number                 | fall duration (ms) from top to bottom      |          | 3000           |
-| fadeOut          | boolean                | make the confettis disappear at the end    |          | false          |
-| colors           | string[]               | give your own colors to the confettis      |          | default colors |
-| autoStart        | boolean                | auto start the animation                   |          | true           |
-| autoStartDelay   | number                 | delay to wait before triggering animation  |          | 0              |
+| Name                           | Type                   | Description                                | Required | Default        |
+|--------------------------------|------------------------|--------------------------------------------|----------|----------------|
+| count                          | number                 | items count to display                     | required |                |
+| origin                         | {x: number, y: number} | animation position origin                  | required |                |
+| explosionSpeed                 | number                 | explosion duration (ms) from origin to top |          | 350            |
+| fallSpeed                      | number                 | fall duration (ms) from top to bottom      |          | 3000           |
+| fadeOut                        | boolean                | make the confettis disappear at the end    |          | false          |
+| colors                         | string[]               | give your own colors to the confettis      |          | default colors |
+| autoStart                      | boolean                | auto start the animation                   |          | true           |
+| autoStartDelay                 | number                 | delay to wait before triggering animation  |          | 0              |
+| renderToHardwareTextureAndroid | boolean                | enable Android hardware texture rendering  |          | true           |
 
 ## Events
 

jest.config.js

@@ -6,6 +6,10 @@ module.exports = {
     'node_modules/(?!(.*-)?react(.*-)?(native)(-.*)?)',
     'node_modules/core-js'
   ],
+  setupFiles: [
+    '<rootDir>/node_modules/react-native/jest/setup.js',
+    '<rootDir>/jestSetup.js'
+  ],
   collectCoverage: true,
   coverageReporters: ['lcov', 'text', 'html'],
   collectCoverageFrom: [

jestSetup.js

@@ -0,0 +1,27 @@
+// @flow
+
+jest.mock('react-native', () => {
+  const ReactNative = jest.requireActual('react-native');
+  const { Platform } = ReactNative;
+
+  jest.spyOn(Platform, 'select');
+  const MockPlatform = {
+    ...Platform,
+    OS: 'ios',
+  };
+  Platform.select.mockImplementation(specifics => {
+    const { OS } = MockPlatform
+    if (OS in specifics) {
+      return specifics[OS];
+    } else if ('default' in specifics) {
+      return specifics.default;
+    }
+    return undefined;
+  })
+
+  return Object.setPrototypeOf({
+    Platform: MockPlatform,
+  }, ReactNative);
+});
+
+jest.mock('react-native/Libraries/Animated/src/NativeAnimatedHelper');

src/__tests__/index.js

@@ -1,13 +1,18 @@
 // @flow
 
 import * as React from 'react';
+import { Animated, Platform } from 'react-native';
 import renderer from 'react-test-renderer';
 
 import ConfettiCannon, {DEFAULT_EXPLOSION_SPEED, DEFAULT_FALL_SPEED} from '..';
 
 describe('index', () => {
+  let ref: JestMockFn<[ConfettiCannon | null], void>
+
   beforeEach(() => {
     jest.useFakeTimers();
+    Platform.OS = 'ios';
+    ref = jest.fn()
   });
 
   it('should trigger animations callbacks', () => {
@@ -64,7 +69,7 @@ describe('index', () => {
     expect(handleAnimationEnd).toHaveBeenCalledTimes(1);
   });
 
-  it('should not start is autoStart is disabled', () => {
+  it('should not start if autoStart is disabled', () => {
     const handleAnimationStart = jest.fn();
 
     renderer.create(
@@ -108,7 +113,6 @@ describe('index', () => {
     const handleAnimationResume = jest.fn();
     const handleAnimationStop = jest.fn();
     const handleAnimationEnd = jest.fn();
-    const ref = jest.fn();
 
     renderer.create(
       <ConfettiCannon
@@ -119,28 +123,27 @@ describe('index', () => {
         onAnimationResume={handleAnimationResume}
         onAnimationStop={handleAnimationStop}
         onAnimationEnd={handleAnimationEnd}
-        // $FlowFixMe this is a mock
         ref={ref}
       />
     );
 
     const [confettiCannon] = ref.mock.calls[0];
 
-    confettiCannon.start();
+    confettiCannon && confettiCannon.start();
 
     expect(handleAnimationStart).toHaveBeenCalledTimes(1);
     expect(handleAnimationResume).toHaveBeenCalledTimes(0);
     expect(handleAnimationStop).toHaveBeenCalledTimes(0);
     expect(handleAnimationEnd).toHaveBeenCalledTimes(0);
 
-    confettiCannon.stop();
+    confettiCannon && confettiCannon.stop();
 
     expect(handleAnimationStart).toHaveBeenCalledTimes(1);
     expect(handleAnimationResume).toHaveBeenCalledTimes(0);
     expect(handleAnimationStop).toHaveBeenCalledTimes(1);
     expect(handleAnimationEnd).toHaveBeenCalledTimes(0);
 
-    confettiCannon.resume();
+    confettiCannon && confettiCannon.resume();
 
     expect(handleAnimationStart).toHaveBeenCalledTimes(1);
     expect(handleAnimationResume).toHaveBeenCalledTimes(1);
@@ -230,4 +233,80 @@ describe('index', () => {
 
     expect(confettis1).toEqual(confettis2);
   });
+
+  it('should include the perspective transform on the Android platform', () => {
+    Platform.OS = 'android';
+    const origin = {x: -10, y: 0};
+    const count = 1;
+
+    const component = renderer.create(
+      <ConfettiCannon count={count} origin={origin} />
+    );
+    const confetti = component.root.find(el => el.props.testID === 'confetti-1');
+
+    expect(confetti.props.transform).toEqual(expect.arrayContaining([{ perspective: 100 }]));
+  });
+
+  it('should default "renderToHardwareTextureAndroid" prop to true once animating', () => {
+    const origin = {x: -10, y: 0};
+    const count = 1;
+
+    const component = renderer.create(
+      <ConfettiCannon count={count} origin={origin} ref={ref} />
+    );
+    const confetti = component.root.find(el => el.props.testID === 'confetti-1');
+    const confettiAnimatedView = confetti.findByType(Animated.View);
+
+    const [confettiCannon] = ref.mock.calls[0];
+
+    confettiCannon && confettiCannon.start();
+
+    expect(confetti.props.renderToHardwareTextureAndroid).toEqual(true);
+    expect(confettiAnimatedView.props.renderToHardwareTextureAndroid).toEqual(true);
+  });
+
+  it('should set "renderToHardwareTextureAndroid" prop to false once done animating', () => {
+    const origin = {x: -10, y: 0};
+    const count = 1;
+
+    const component = renderer.create(
+      <ConfettiCannon count={count} origin={origin} ref={ref} />
+    );
+    const confetti = component.root.find(el => el.props.testID === 'confetti-1');
+    const confettiAnimatedView = confetti.findByType(Animated.View);
+
+    const [confettiCannon] = ref.mock.calls[0];
+
+    confettiCannon && confettiCannon.start();
+
+    expect(confetti.props.renderToHardwareTextureAndroid).toEqual(true);
+    expect(confettiAnimatedView.props.renderToHardwareTextureAndroid).toEqual(true);
+
+    jest.advanceTimersByTime(DEFAULT_EXPLOSION_SPEED + DEFAULT_FALL_SPEED);
+
+    expect(confetti.props.renderToHardwareTextureAndroid).toEqual(false);
+    expect(confettiAnimatedView.props.renderToHardwareTextureAndroid).toEqual(false);
+  });
+
+  it('should accept "renderToHardwareTextureAndroid = false" prop', () => {
+    const origin = {x: -10, y: 0};
+    const count = 1;
+
+    const component = renderer.create(
+      <ConfettiCannon
+        count={count}
+        origin={origin}
+        renderToHardwareTextureAndroid={false}
+        ref={ref} />
+    );
+    const confetti = component.root.find(el => el.props.testID === 'confetti-1');
+    const confettiAnimatedView = confetti.findByType(Animated.View);
+
+    const [confettiCannon] = ref.mock.calls[0];
+
+    confettiCannon && confettiCannon.start();
+
+    expect(confetti.props.renderToHardwareTextureAndroid).toEqual(false);
+    expect(confettiAnimatedView.props.renderToHardwareTextureAndroid).toEqual(false);
+  });
 });

src/components/confetti.js

@@ -10,14 +10,16 @@ type Interpolations = Array<{
   translateY?: Animated.Interpolation,
   rotate?: Animated.Interpolation,
   rotateX?: Animated.Interpolation,
-  rotateY?: Animated.Interpolation
+  rotateY?: Animated.Interpolation,
+  perspective?: number
 }>;
 
 type Props = {|
   containerTransform: Interpolations,
   transform: Interpolations,
   color: string,
   opacity: Animated.Interpolation,
+  renderToHardwareTextureAndroid?: boolean,
   testID?: string
 |};
 
@@ -28,13 +30,16 @@ class Confetti extends React.PureComponent<Props> {
   isRounded: boolean = Math.round(randomValue(0, 1)) === 1;
 
   render() {
-    const { containerTransform, transform, opacity, color } = this.props;
+    const { containerTransform, transform, opacity, color, renderToHardwareTextureAndroid } = this.props;
     const { width, height, isRounded } = this;
     const containerStyle = { transform: containerTransform };
     const style = { width, height, backgroundColor: color, transform, opacity};
 
     return (
-      <Animated.View style={[styles.confetti, containerStyle]}>
+      <Animated.View
+        pointerEvents="none"
+        renderToHardwareTextureAndroid={renderToHardwareTextureAndroid}
+        style={[styles.confetti, containerStyle]}>
         <Animated.View style={[isRounded && styles.rounded, style]} />
       </Animated.View>
     );

src/index.d.ts

@@ -12,6 +12,7 @@ export interface ExplosionProps {
   fadeOut?: boolean;
   autoStart?: boolean;
   autoStartDelay?: number;
+  renderToHardwareTextureAndroid?: boolean;
   onAnimationStart?: () => void;
   onAnimationResume?: () => void;
   onAnimationStop?: () => void;

src/index.js

@@ -1,7 +1,7 @@
 // @flow
 
 import * as React from 'react';
-import { Animated, Dimensions, Easing } from 'react-native';
+import { Animated, Dimensions, Easing, Platform } from 'react-native';
 import type { CompositeAnimation } from 'react-native/Libraries/Animated/src/AnimatedImplementation';
 import type { EndResult } from 'react-native/Libraries/Animated/src/animations/Animation';
 
@@ -20,6 +20,7 @@ type Props = {|
   fadeOut?: boolean,
   autoStart?: boolean,
   autoStartDelay?: number,
+  renderToHardwareTextureAndroid?: boolean,
   onAnimationStart?: () => void,
   onAnimationResume?: () => void,
   onAnimationStop?: () => void,
@@ -40,7 +41,8 @@ type Item = {|
 |};
 
 type State = {|
-  items: Array<Item>
+  items: Array<Item>,
+  isAnimating: boolean
 |};
 
 export const TOP_MIN = 0.7;
@@ -63,7 +65,8 @@ export const DEFAULT_FALL_SPEED = 3000;
 class Explosion extends React.PureComponent<Props, State> {
   props: Props;
   state: State = {
-    items: []
+    items: [],
+    isAnimating: false
   };
   start: () => void;
   resume: () => void;
@@ -158,12 +161,16 @@ class Explosion extends React.PureComponent<Props, State> {
       ]);
 
       onAnimationStart && onAnimationStart();
+
+      this.setState({ isAnimating: true });
     }
 
     this.sequence && this.sequence.start(({finished}: EndResult) => {
-      if (finished) {
-        onAnimationEnd && onAnimationEnd();
-      }
+      if (!finished) return;
+
+      this.setState({ isAnimating: false });
+
+      onAnimationEnd && onAnimationEnd();
     });
   };
 
@@ -178,8 +185,8 @@ class Explosion extends React.PureComponent<Props, State> {
   };
 
   render() {
-    const { origin, fadeOut } = this.props;
-    const { items } = this.state;
+    const { origin, fadeOut, renderToHardwareTextureAndroid = true } = this.props;
+    const { items, isAnimating } = this.state;
     const { height, width } = Dimensions.get('window');
 
     return (
@@ -215,13 +222,17 @@ class Explosion extends React.PureComponent<Props, State> {
           });
           const containerTransform = [{translateX: left}, {translateY: top}];
           const transform = [{rotateX}, {rotateY}, {rotate: rotateZ}, {translateX}];
+          if (Platform.OS === 'android') {
+            transform.push({ perspective: 100 });
+          }
 
           return (
             <Confetti
               color={item.color}
               containerTransform={containerTransform}
               transform={transform}
               opacity={opacity}
+              renderToHardwareTextureAndroid={renderToHardwareTextureAndroid && isAnimating}
               key={index}
               testID={`confetti-${index + 1}`}
             />