Animations changes

Author: amoreno

.DS_Store

@@ -1,6 +1,6 @@
 /* @flow */
 
-import React from 'react'
+import React from 'react';
 import {
   View,
   StyleSheet,
@@ -9,15 +9,15 @@ import {
   Animated,
   StatusBar,
   Dimensions
-} from 'react-native'
-import SkipButton from './template/SkipButton'
-import Animations from './animations/Animations'
-import { ifIphoneX } from 'react-native-iphone-x-helper'
+} from 'react-native';
+import SkipButton from './template/SkipButton';
+import Animations from './animations/Animations';
+import { ifIphoneX } from 'react-native-iphone-x-helper';
 
-import type { Element } from 'react'
-import type { AnimationTypes } from './animations/Animations'
+import type { Element } from 'react';
+import type { AnimationTypes } from './animations/Animations';
 
-const SCREEN_WIDTH = Dimensions.get('window').width
+const SCREEN_WIDTH = Dimensions.get('window').width;
 
 type Props = {
   children: any,
@@ -29,99 +29,123 @@ type Props = {
   skipLastTitleButton?: string,
   skipButton?: Element<*>,
   customAnimation?: Object,
-  animationType?: string
-}
+  animationType?:
+    | 'Parallax'
+    | 'Pager'
+    | 'ZoomOut'
+    | 'FadeIn'
+    | 'TranslateY'
+    | 'RotateX'
+    | 'RotateY'
+    | 'Flip',
+  showSkipButton?: boolean,
+  tintStatusBar?: boolean
+};
 type State = {
   xOffset: Animated.Value,
   page: number
-}
+};
 
 class IntroSlider extends React.Component<Props, State> {
-  scrollView: ScrollView
+  scrollView: ScrollView;
 
   static defaultProps = {
     page: 0,
-    animationType: 'Pager'
-  }
+    animationType: 'Pager',
+    showSkipButton: true,
+    tintStatusBar: true
+  };
 
   constructor(props: Props) {
-    super(props)
+    super(props);
     this.state = {
       xOffset: new Animated.Value(0),
       page: props.page
-    }
+    };
   }
 
   componentWillMount() {
-    const position: number = this.state.page
+    const position: number = this.state.page;
     if (this.isAndroidStatusBar() && this.props.tintStatusBar) {
       StatusBar.setBackgroundColor(
         this.shadeStatusBar(
           this.props.children[position].props.backgroundColor,
           -0.3
         ),
         true
-      )
+      );
     }
   }
 
   renderDots = (): Element<*> => {
-    const { activeDotStyle, inactiveDotStyle } = this.props
-    let dotsArray: Array<*> = []
+    const { activeDotStyle, inactiveDotStyle } = this.props;
+    let dotsArray: Array<*> = [];
 
     for (let index = 0; index < this.props.children.length; index++) {
-      const isSelected: boolean = this.state.page === index
+      const isSelected: boolean = this.state.page === index;
       dotsArray.push(
         <View
           key={index}
-          style={[styles.dot, isSelected ? activeDotStyle : inactiveDotStyle]}
+          style={[
+            styles.dot,
+            isSelected
+              ? {
+                  ...styles.active,
+                  ...activeDotStyle
+                }
+              : inactiveDotStyle
+          ]}
         />
-      )
+      );
     }
-    return <View style={styles.dotsContainer}>{dotsArray}</View>
-  }
+    return <View style={styles.dotsContainer}>{dotsArray}</View>;
+  };
 
-  _getAnimation = (index: number, animationType: string): Function => {
-    return Animations[animationType](index, this.state.xOffset)
-  }
+  _getAnimation = (index: number, animationType: string): ?Function => {
+    if (!Animations[animationType]) {
+      return;
+    }
+    return Animations[animationType](index, this.state.xOffset);
+  };
 
   /**
    * Render each child view in the ViewPager
    * @returns {*}
    */
   renderChildren = (): Array<Element<*>> => {
-    const { customAnimation } = this.props
     return this.props.children.map((child: Object, index: number) => {
       return (
-        <View key={index} style={{ width: SCREEN_WIDTH }}>
-          <Animated.View
-            style={[
-              styles.container,
-              this._getAnimation(index, this.props.animationType) || customAnimation
-            ]}>
-            {child}
-          </Animated.View>
+        <View
+          key={index}
+          style={{
+            width: SCREEN_WIDTH
+          }}>
+          {React.cloneElement(child, {
+            animation:
+              this.props.customAnimation ||
+              this._getAnimation(index, this.props.animationType)
+          })}
         </View>
-      )
-    })
-  }
+      );
+    });
+  };
 
   /**
    * Handles page change event
    * @param e
    */
   onPageSelected = (e: Object) => {
     // Calculate current index
-    const index = Math.round(e.nativeEvent.contentOffset.x / SCREEN_WIDTH)
+    const index = Math.round(e.nativeEvent.contentOffset.x / SCREEN_WIDTH);
 
     // Only call the function if the index is an integer
     if (index === parseInt(index, 10)) {
       if (index < 0 || index >= React.Children.count(this.props.children)) {
-        return
+        return;
       }
-      this.handleBottomStepper(index)
+      this.handleBottomStepper(index);
     }
-  }
+  };
 
   /**
    * Handles bottom stepper buttons behaviour
@@ -135,18 +159,18 @@ class IntroSlider extends React.Component<Props, State> {
           -0.3
         ),
         false
-      )
+      );
     }
-    this.setState({ page: position })
-  }
+    this.setState({ page: position });
+  };
 
   shadeStatusBar = (color: string, percent: number): string => {
     const first = parseInt(color.slice(1), 16),
       black = first & 0x0000ff,
       green = (first >> 8) & 0x00ff,
       percentage = percent < 0 ? percent * -1 : percent,
       red = first >> 16,
-      theme = percent < 0 ? 0 : 255
+      theme = percent < 0 ? 0 : 255;
 
     return (
       '#' +
@@ -158,27 +182,27 @@ class IntroSlider extends React.Component<Props, State> {
       )
         .toString(16)
         .slice(1)
-    )
-  }
+    );
+  };
 
   isAndroidStatusBar = (): boolean => {
-    return this.props.children.length > 0 && Platform.OS === 'android'
-  }
+    return this.props.children.length > 0 && Platform.OS === 'android';
+  };
 
   render() {
-    const isLast: boolean = this.props.children.length - 1 === this.state.page
+    const isLast: boolean = this.props.children.length - 1 === this.state.page;
     return (
       <View style={styles.container}>
         <Animated.ScrollView
           ref={(ref: any) => {
-            this.scrollView = ref
+            this.scrollView = ref;
           }}
           style={styles.container}
           horizontal={true}
           pagingEnabled={true}
           removeClippedSubviews={true}
           directionalLockEnabled={true}
-          scrollEventThrottle={1}
+          scrollEventThrottle={10}
           bounces={false}
           scrollsToTop={false}
           automaticallyAdjustContentInsets={false}
@@ -188,7 +212,9 @@ class IntroSlider extends React.Component<Props, State> {
             [
               {
                 nativeEvent: {
-                  contentOffset: { x: this.state.xOffset }
+                  contentOffset: {
+                    x: this.state.xOffset
+                  }
                 }
               }
             ],
@@ -204,7 +230,9 @@ class IntroSlider extends React.Component<Props, State> {
             <SkipButton
               onSkip={this.props.onSkip}
               skipTitleButton={
-                isLast ? this.props.skipLastTitleButton : this.props.skipTitleButton
+                isLast
+                  ? this.props.skipLastTitleButton
+                  : this.props.skipTitleButton
               }
             />
           ) : (
@@ -213,7 +241,7 @@ class IntroSlider extends React.Component<Props, State> {
           {this.renderDots()}
         </View>
       </View>
-    )
+    );
   }
 }
 
@@ -223,15 +251,14 @@ const styles = StyleSheet.create({
     overflow: 'hidden'
   },
   bottom: {
-    bottom: 12,
+    bottom: 30,
     ...ifIphoneX({
       bottom: 40
     })
   },
   dotsContainer: {
     flexDirection: 'row',
     justifyContent: 'center',
-    bottom: 5,
     position: 'absolute',
     alignItems: 'center',
     justifyContent: 'center',
@@ -244,7 +271,10 @@ const styles = StyleSheet.create({
     borderRadius: 20,
     backgroundColor: 'rgba(0, 0, 0, .2)',
     marginHorizontal: 5
+  },
+  active: {
+    backgroundColor: 'white'
   }
-})
+});
 
-export default IntroSlider
+export default IntroSlider;