Add animating and hidesWhenStopped props

Author: phamfoo

example/App.tsx

@@ -1,5 +1,11 @@
-import React from 'react'
-import { View, StatusBar, Text, StyleSheet } from 'react-native'
+import React, { useReducer } from 'react'
+import {
+  View,
+  StatusBar,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+} from 'react-native'
 import {
   Plane,
   Chase,
@@ -30,7 +36,23 @@ const spinners = [
   { component: Fold, backgroundColor: '#2980b9' },
 ]
 
+function reducer(state, action) {
+  switch (action.type) {
+    case 'toggle_loading':
+      return { ...state, [action.spinnerIndex]: !state[action.spinnerIndex] }
+    default:
+      return state
+  }
+}
+
+const initialState = spinners.reduce(
+  (acc, _, index) => ({ ...acc, [index]: true }),
+  {}
+)
+
 export default function App() {
+  const [state, dispatch] = useReducer(reducer, initialState)
+
   return (
     <View style={styles.container}>
       <StatusBar barStyle="light-content" />
@@ -42,21 +64,28 @@ export default function App() {
               .slice(rowIndex * 3, rowIndex * 3 + 3)
               .map((spinner, index) => {
                 const Spinner = spinner.component
+                const spinnerIndex = rowIndex * 3 + index
                 return (
-                  <View
+                  <TouchableOpacity
                     style={[
                       styles.cell,
                       {
                         backgroundColor: spinner.backgroundColor,
                       },
                     ]}
                     key={index}
+                    onPress={() => {
+                      dispatch({
+                        type: 'toggle_loading',
+                        spinnerIndex: spinnerIndex,
+                      })
+                    }}
                   >
-                    <Spinner color="#FFF" />
+                    <Spinner color="#FFF" animating={state[spinnerIndex]} />
                     <Text style={styles.componentLabel}>
-                      {`<${spinner.component.name} \/>`}
+                      {`<${spinner.component.name} />`}
                     </Text>
-                  </View>
+                  </TouchableOpacity>
                 )
               })}
           </View>

src/AnimationContainer.tsx

@@ -1,28 +1,93 @@
 import * as React from 'react'
 import { Animated } from 'react-native'
 
-export interface Props {
+interface AnimationNode {
   animation: Animated.CompositeAnimation
+  values: Animated.AnimatedInterpolation[]
 }
-export default class AnimationContainer extends React.Component<Props> {
+
+export interface Props<T extends string> {
+  initAnimation: () => Record<T, (value: Animated.Value) => AnimationNode>
+  children: (
+    interpolationsByKey: Record<T, Animated.AnimatedInterpolation[]>
+  ) => React.ReactNode
+  animating: boolean
+}
+
+export default class AnimationContainer<
+  T extends string
+> extends React.Component<Props<T>> {
   animation: Animated.CompositeAnimation
+  animatedValuesByKey: Record<T, Animated.Value> = {} as Record<
+    T,
+    Animated.Value
+  >
+  interpolationsByKey: Record<
+    T,
+    Animated.AnimatedInterpolation[]
+  > = {} as Record<T, Animated.AnimatedInterpolation[]>
+
+  static defaultProps = {
+    animating: true,
+  }
 
-  constructor(props: Props) {
+  constructor(props: Props<T>) {
     super(props)
+    const { initAnimation } = props
+
+    const animationInitializersByKey = initAnimation()
+    const animations: Animated.CompositeAnimation[] = []
 
-    const { animation } = this.props
-    this.animation = animation
+    for (const key in animationInitializersByKey) {
+      const animationInitializer = animationInitializersByKey[key]
+      const animationValue = new Animated.Value(0)
+      this.animatedValuesByKey[key] = animationValue
+      const { animation, values } = animationInitializer(animationValue)
+      animations.push(animation)
+      this.interpolationsByKey[key] = values
+    }
+
+    if (animations.length === 1) {
+      this.animation = animations[0]
+    } else {
+      this.animation = Animated.parallel(animations)
+    }
   }
 
   componentDidMount() {
+    this.startAnimation()
+  }
+
+  componentDidUpdate(prevProps: Props<T>) {
+    const { animating } = this.props
+
+    if (animating !== prevProps.animating) {
+      if (animating) {
+        this.startAnimation()
+      } else {
+        this.stopAnimation()
+      }
+    }
+  }
+
+  startAnimation = () => {
     this.animation.start()
   }
 
+  stopAnimation = () => {
+    this.animation.stop()
+
+    for (const key in this.animatedValuesByKey) {
+      this.animatedValuesByKey[key].setValue(0)
+    }
+  }
+
   componentWillUnmount() {
     this.animation.stop()
   }
 
   render() {
-    return this.props.children
+    const { children } = this.props
+    return children ? children(this.interpolationsByKey) : null
   }
 }

src/Bounce.tsx

@@ -7,25 +7,15 @@ import { stagger } from './utils'
 export default class Bounce extends React.Component<SpinnerProps> {
   static defaultProps = defaultProps
 
-  value = new Animated.Value(0)
-  animation: Animated.CompositeAnimation
-  values: Animated.AnimatedInterpolation[]
-
-  constructor(props: SpinnerProps) {
-    super(props)
-
-    const { animation, values } = stagger(1000, 2, {
-      duration: 2000,
-      value: this.value,
-      keyframes: [0, 45, 55, 100],
-    })
-
-    this.animation = animation
-    this.values = values
-  }
-
   render() {
-    const { size, color, style, ...rest } = this.props
+    const {
+      size,
+      color,
+      style,
+      animating,
+      hidesWhenStopped,
+      ...rest
+    } = this.props
     const circleStyle = {
       position: 'absolute',
       width: size,
@@ -34,28 +24,51 @@ export default class Bounce extends React.Component<SpinnerProps> {
       borderRadius: size / 2,
       opacity: 0.6,
     }
+
     return (
-      <AnimationContainer animation={this.animation}>
-        <View style={[{ width: size, height: size }, style]} {...rest}>
-          {this.values.map((value, index) => (
-            <Animated.View
-              key={index}
-              style={[
-                circleStyle,
-                {
-                  transform: [
-                    {
-                      scale: value.interpolate({
-                        inputRange: [0, 45, 55, 100],
-                        outputRange: [0.01, 1, 1, 0.01],
-                      }),
-                    },
-                  ],
-                },
-              ]}
-            />
-          ))}
-        </View>
+      <AnimationContainer<'bounce'>
+        initAnimation={() => ({
+          bounce: (value) =>
+            stagger(1000, 2, {
+              duration: 2000,
+              value: value,
+              keyframes: [0, 45, 55, 100],
+            }),
+        })}
+        animating={animating}
+      >
+        {(values) => (
+          <View
+            style={[
+              {
+                width: size,
+                height: size,
+                opacity: !animating && hidesWhenStopped ? 0 : 1,
+              },
+              style,
+            ]}
+            {...rest}
+          >
+            {values.bounce.map((value, index) => (
+              <Animated.View
+                key={index}
+                style={[
+                  circleStyle,
+                  {
+                    transform: [
+                      {
+                        scale: value.interpolate({
+                          inputRange: [0, 45, 55, 100],
+                          outputRange: [0.01, 1, 1, 0.01],
+                        }),
+                      },
+                    ],
+                  },
+                ]}
+              />
+            ))}
+          </View>
+        )}
       </AnimationContainer>
     )
   }