newDrawer - add useNativeAnimations (#469)

* newDrawer - add useNativeAnimations

* newDrawer - set default useNativeAnimation to false

* newDrawer - remove unnecessary code

Author: roiberlin

src/interactableComponents/drawer/Swipeable.js

@@ -59,9 +59,9 @@ export default class Swipeable extends Component<PropType, StateType> {
   static defaultProps = {
     friction: 1,
     overshootFriction: 1,
-    // useNativeAnimations: true // issue in iPhone 5
+    useNativeAnimations: false // issue in iPhone5
   };
-  
+
   _onGestureEvent: ?Animated.Event;
   _transX: ?Animated.Interpolation;
   _showLeftAction: ?Animated.Interpolation | ?Animated.Value;
@@ -71,7 +71,7 @@ export default class Swipeable extends Component<PropType, StateType> {
 
   constructor(props: PropType) {
     super(props);
-    
+
     const dragX = new Animated.Value(0);
     this.rowState = 0;
 
@@ -82,7 +82,7 @@ export default class Swipeable extends Component<PropType, StateType> {
       rightOffset: undefined,
       rowWidth: Constants.screenWidth
     };
-    
+
     this._updateAnimatedEvent(props, this.state);
 
     this._onGestureEvent = Animated.event([{nativeEvent: {translationX: dragX}}], {
@@ -211,18 +211,18 @@ export default class Swipeable extends Component<PropType, StateType> {
   _animateRow = (fromValue, toValue, velocityX) => {
     const {dragX, rowTranslation} = this.state;
     const {
-      useNativeAnimations, 
-      animationOptions, 
-      onSwipeableLeftOpen, 
-      onSwipeableRightOpen, 
-      onSwipeableClose, 
+      useNativeAnimations,
+      animationOptions,
+      onSwipeableLeftOpen,
+      onSwipeableRightOpen,
+      onSwipeableClose,
       onSwipeableOpen,
       onSwipeableLeftWillOpen,
       onSwipeableRightWillOpen,
       onSwipeableWillClose,
       onSwipeableWillOpen
     } = this.props;
-    
+
     dragX.setValue(0);
     rowTranslation.setValue(fromValue);
     this.rowState = Math.sign(toValue);
@@ -268,7 +268,7 @@ export default class Swipeable extends Component<PropType, StateType> {
     const {leftWidth = 0, rowWidth = 0} = this.state;
     const {rightOffset = rowWidth} = this.state;
     const rightWidth = rowWidth - rightOffset;
-    
+
     if (this.rowState === 1) {
       return leftWidth;
     } else if (this.rowState === -1) {
@@ -311,8 +311,8 @@ export default class Swipeable extends Component<PropType, StateType> {
     const left = renderLeftActions && (
       <Animated.View
         style={[
-          styles.leftActions, 
-          leftActionsContainerStyle, 
+          styles.leftActions,
+          leftActionsContainerStyle,
           {transform: [{translateX: this._leftActionTranslate}]}
         ]}
       >

src/interactableComponents/drawer/index.js

@@ -26,7 +26,7 @@ const ITEM_PROP_TYPES = {
 
 /**
  * @description: Interactable Drawer component
- * @extendslink: 
+ * @extendslink:
  */
 export default class Drawer extends PureBaseComponent {
   static displayName = 'Drawer';
@@ -72,6 +72,10 @@ export default class Drawer extends PureBaseComponent {
      * The items' text style
      */
     itemsTextStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.number]),
+    /**
+     * Perform the animation in natively
+     */
+    useNativeAnimations: PropTypes.bool,
   };
 
   static defaultProps = {
@@ -95,7 +99,7 @@ export default class Drawer extends PureBaseComponent {
   }
 
   UNSAFE_componentWillReceiveProps(nextProps) {
-    if (JSON.stringify(this.props.leftItem) !== JSON.stringify(nextProps.leftItem) || 
+    if (JSON.stringify(this.props.leftItem) !== JSON.stringify(nextProps.leftItem) ||
     JSON.stringify(this.props.rightItems) !== JSON.stringify(nextProps.rightItems)) {
       this.closeDrawer();
     }
@@ -178,7 +182,7 @@ export default class Drawer extends PureBaseComponent {
     if (_.size(rightItems) > 0) {
       const items = rightItems.reverse();
       const size = numberOfItems && numberOfItems >= 0 ? numberOfItems : items.length;
-      
+
       for (let i = 0; i < size; i++) {
         total += this.getItemWidth(items[i]);
       }
@@ -201,21 +205,21 @@ export default class Drawer extends PureBaseComponent {
     const rightSpring = equalWidths ? 0 : 30;
     const rightWidth = this.getRightItemsTotalWidth();
     const rightBound = rightWidth > 0 ? -rightWidth - rightSpring : 0;
-    
+
     return {
       right: _.isEmpty(leftItem) ? 0 : leftBound, left: _.isEmpty(rightItems) ? 0 : rightBound};
   }
   getSnapPoints() {
     const {leftItem, rightItems, damping, tension} = this.getThemeProps();
     const size = rightItems ? rightItems.length : 0;
-    
+
     const left = !_.isEmpty(leftItem) ? {x: this.getItemWidth(leftItem), damping, tension} : {};
     const initial = {x: 0, damping, tension};
     const last = rightItems && !_.isEmpty(rightItems[0]) ?
       {x: -(this.getRightItemsTotalWidth()), damping, tension} : {};
 
     switch (size) {
-      case 0: 
+      case 0:
         return [left, initial];
       default:
         return [left, initial, last];
@@ -227,9 +231,9 @@ export default class Drawer extends PureBaseComponent {
 
     const first = {id: 'first', influenceArea: {left: -(this.getRightItemsTotalWidth(1))}};
     const second = {id: 'second', influenceArea: {left: -(this.getRightItemsTotalWidth(size - 1))}};
-    
+
     switch (size) {
-      case 0: 
+      case 0:
       case 1:
         return [];
       case 2:
@@ -243,7 +247,7 @@ export default class Drawer extends PureBaseComponent {
     const size = rightItems ? rightItems.length : 0;
     const interval = 65;
     const inputRanges = [];
-    
+
     for (let i = 0; i < size; i++) {
       const itemWidth = this.getItemWidth(rightItems[i]);
       const end = itemWidth - (size * BLEED);
@@ -256,13 +260,13 @@ export default class Drawer extends PureBaseComponent {
 
   onLayout = (event) => {
     const {width, height} = event.nativeEvent.layout;
-    
+
     const typography = height >= SCALE_POINT ? Typography.text70 : Typography.text80;
     const textTopMargin = height > SCALE_POINT ? 8 : 0;
     const itemPadding = height >= SCALE_POINT ? ITEM_PADDING : 8;
-    
+
     this.setState({width, height, typography, textTopMargin, itemPadding});
-  }; 
+  };
 
   renderLeftItem() {
     const {leftItem, itemsTintColor, itemsIconSize, itemsTextStyle} = this.getThemeProps();
@@ -331,7 +335,7 @@ export default class Drawer extends PureBaseComponent {
                 ]}
                 {...this.getAnimationConfig()}
               />}
-              {leftItem && leftItem.text && 
+              {leftItem && leftItem.text &&
               <Animated.Text
                 numberOfLines={1}
                 style={
@@ -426,7 +430,7 @@ export default class Drawer extends PureBaseComponent {
           ]}
           {...this.getAnimationConfig()}
         />}
-        {item.text && 
+        {item.text &&
         <Animated.Text
           numberOfLines={1}
           style={
@@ -473,7 +477,7 @@ export default class Drawer extends PureBaseComponent {
     if (migrate) {
       return <NewDrawer ref={this.drawer} {...this.getThemeProps()} />;
     }
-    
+
     const {style, onPress, rightItems} = this.getThemeProps();
     const Container = onPress ? TouchableOpacity : View;
     const backgroundColor = _.get(rightItems, '[0].background', ITEM_BG);
@@ -483,7 +487,7 @@ export default class Drawer extends PureBaseComponent {
       <View style={[style, this.styles.container, {backgroundColor}]} onLayout={this.onLayout}>
         {rightItems && this.renderRightItems()}
         {this.renderLeftItem()}
-        
+
         <Interactable.View
           ref={el => (this.interactableElem = el)}
           horizontalOnly
@@ -499,15 +503,15 @@ export default class Drawer extends PureBaseComponent {
           style={[this.styles.interactable, {width: containerWidth * 2}]}
         >
           <View style={{backgroundColor: Colors.white}}>
-            <Container 
+            <Container
               style={[this.styles.childrenContainer, {width: containerWidth}]}
               activeOpacity={0.7}
-              onPress={this.onPress} 
+              onPress={this.onPress}
             >
               {this.props.children}
             </Container>
           </View>
-          {rightItems && 
+          {rightItems &&
             <View style={{width: containerWidth, flexDirection: 'row'}}>
               {_.map(rightItems, this.renderGhostButton)}
             </View>

src/interactableComponents/drawer/newDrawer.js

@@ -73,7 +73,11 @@ class NewDrawer extends PureBaseComponent {
     /**
      * The items' text style
      */
-    itemsTextStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.number])
+    itemsTextStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.number]),
+    /**
+     * Perform the animation in natively
+     */
+    useNativeAnimations: PropTypes.bool,
   };
 
   constructor(props) {