feat(ui): size customization

README.md

@@ -37,6 +37,7 @@ const MyComponent = () => (
 | 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            |
+| size             | number                 | maximum size range of the confettis        |          | 26             |
 | 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 |

example/storybook/stories/index.js

@@ -3,7 +3,7 @@ import { Dimensions } from 'react-native';
 import { storiesOf } from '@storybook/react-native';
 import { withKnobs, boolean, number, array, button } from '@storybook/addon-knobs';
 import { action } from '@storybook/addon-actions';
-import ConfettiCannon, {DEFAULT_COLORS, DEFAULT_EXPLOSION_SPEED, DEFAULT_FALL_SPEED} from 'react-native-confetti-cannon';
+import ConfettiCannon, {DEFAULT_COLORS, DEFAULT_EXPLOSION_SPEED, DEFAULT_SIZE, DEFAULT_FALL_SPEED} from 'react-native-confetti-cannon';
 
 import ScreenSimulator from './components/screen-simulator';
 
@@ -23,6 +23,7 @@ storiesOf('Demo', module)
           y: number('origin.y', -10, {}, 'Props')
         }}
         explosionSpeed={number('explosionSpeed', DEFAULT_EXPLOSION_SPEED, {}, 'Props')}
+        size={number('size', DEFAULT_SIZE, {}, 'Props')}
         fallSpeed={number('fallSpeed', DEFAULT_FALL_SPEED, {}, 'Props')}
         fadeOut={boolean('fadeOut', false, 'Props')}
         colors={array('colors', DEFAULT_COLORS, ',', 'Props')}
@@ -55,6 +56,7 @@ storiesOf('Demo', module)
             y: number('origin.y', -10, {}, 'Props (left)')
           }}
           explosionSpeed={number('explosionSpeed', DEFAULT_EXPLOSION_SPEED, {}, 'Props (left)')}
+          size={number('size', DEFAULT_SIZE, {}, 'Props')}
           fallSpeed={number('fallSpeed', DEFAULT_FALL_SPEED, {}, 'Props (left)')}
           fadeOut={boolean('fadeOut', false, 'Props (left)')}
           colors={array('colors', DEFAULT_COLORS, ',', 'Props (left)')}
@@ -76,6 +78,7 @@ storiesOf('Demo', module)
             y: number('origin.y', -10, {}, 'Props (right)')
           }}
           explosionSpeed={number('explosionSpeed', DEFAULT_EXPLOSION_SPEED, {}, 'Props (right)')}
+          size={number('size', DEFAULT_SIZE, {}, 'Props')}
           fallSpeed={number('fallSpeed', DEFAULT_FALL_SPEED, {}, 'Props (right)')}
           fadeOut={boolean('fadeOut', false, 'Props (right)')}
           colors={array('colors', DEFAULT_COLORS, ',', 'Props (right)')}

package.json

@@ -40,7 +40,8 @@
     "Vincent Catillon <[email protected]>",
     "Alan Langlois <[email protected]>",
     "Junho Yeo <[email protected]>",
-    "Lee Zumstein <[email protected]>"
+    "Lee Zumstein <[email protected]>",
+    "Daniel Shelton <[email protected]>"
   ],
   "author": "Vincent Catillon",
   "devDependencies": {

src/components/confetti.js

@@ -18,20 +18,21 @@ type Props = {|
   containerTransform: Interpolations,
   transform: Interpolations,
   color: string,
+  size: number,
   opacity: Animated.Interpolation,
   testID?: string
 |};
 
 class Confetti extends React.PureComponent<Props> {
   props: Props;
-  width: number = randomValue(8, 16);
-  height: number = randomValue(6, 12);
   isRounded: boolean = Math.round(randomValue(0, 1)) === 1;
 
   render() {
-    const { containerTransform, transform, opacity, color } = this.props;
-    const { width, height, isRounded } = this;
+    const { containerTransform, transform, opacity, color, size } = this.props;
+    const { isRounded } = this;
     const containerStyle = { transform: containerTransform };
+    const height = randomValue(size * 0.5, size);
+    const width = randomValue(size * 0.4, size * 0.75);
     const style = { width, height, backgroundColor: color, transform, opacity};
 
     return (

src/index.d.ts

@@ -7,6 +7,7 @@ export interface ExplosionProps {
     y: number
   };
   explosionSpeed?: number;
+  size?: number;
   fallSpeed?: number;
   colors?: string[];
   fadeOut?: boolean;
@@ -39,6 +40,7 @@ export declare const TOP_MIN: number;
 export declare const DEFAULT_COLORS: string[];
 export declare const DEFAULT_EXPLOSION_SPEED: number;
 export declare const DEFAULT_FALL_SPEED: number;
+export declare const DEFAULT_SIZE: number;
 
 declare class Explosion extends React.PureComponent<ExplosionProps, ExplosionState> {
   start: (resume?: boolean) => void;

src/index.js

@@ -15,6 +15,7 @@ type Props = {|
     y: number
   },
   explosionSpeed?: number,
+  size?: number,
   fallSpeed?: number,
   colors?: Array<string>,
   fadeOut?: boolean,
@@ -59,6 +60,7 @@ export const DEFAULT_COLORS: Array<string> =[
 ];
 export const DEFAULT_EXPLOSION_SPEED = 350;
 export const DEFAULT_FALL_SPEED = 3000;
+export const DEFAULT_SIZE = 26;
 
 class Explosion extends React.PureComponent<Props, State> {
   props: Props;
@@ -178,7 +180,7 @@ class Explosion extends React.PureComponent<Props, State> {
   };
 
   render() {
-    const { origin, fadeOut } = this.props;
+    const { origin, fadeOut, size = DEFAULT_SIZE } = this.props;
     const { items } = this.state;
     const { height, width } = Dimensions.get('window');
 
@@ -226,6 +228,7 @@ class Explosion extends React.PureComponent<Props, State> {
               containerTransform={containerTransform}
               transform={transform}
               opacity={opacity}
+              size={size}
               key={index}
               testID={`confetti-${index + 1}`}
             />