AnimatableManager - removing component (#1537)

* AnimatableManager - removing component and it usages

* remove import

Author: Inbal-Tish

demo/src/demoApp.js

@@ -1,7 +1,6 @@
 import AsyncStorage from '@react-native-community/async-storage';
 import {Navigation} from 'react-native-navigation';
-import * as Animatable from 'react-native-animatable';
-import {AnimatableManager, Constants, Colors, Typography} from 'react-native-ui-lib'; // eslint-disable-line
+import {Constants, Colors, Typography} from 'react-native-ui-lib'; // eslint-disable-line
 import {registerScreens} from './screens';
 
 
@@ -27,21 +26,6 @@ import {registerScreens} from './screens';
 //   }
 // });
 
-// AnimatableManager.loadAnimationPresets({
-//   preset1: {
-//     animation: 'fadeIn',
-//     easing: 'ease-out-quint',
-//     duration: 1000,
-//     useNativeDriver: true,
-//   },
-//   preset2: {
-//     animation: 'fadeInLeft',
-//     easing: 'ease-out-expo',
-//     duration: 500,
-//     useNativeDriver: true,
-//   },
-// });
-
 // const customAnimationsDefinitions = {
 //   customAnimation1: {
 //     from: {opacity: 0, translateY: 20},
@@ -52,10 +36,6 @@ import {registerScreens} from './screens';
 //     to: {opacity: 1, translateY: 0},
 //   },
 // };
-// IMPORTANT! Make uilib's animations available globally for the app's use (option to pass adittional animation definitions)
-Animatable.initializeRegistryWithDefinitions(
-  AnimatableManager.loadAnimationDefinitions(/** customAnimationsDefinitions */)
-);
 
 function getDefaultNavigationStyle() {
   return {

demo/src/index.js

@@ -212,12 +212,6 @@ module.exports = {
       get CardScannerScreen() {
         return require('./screens/componentScreens/CardScannerScreen').default;
       },
-      get CardAnimationsScreen() {
-        return require('./screens/animationScreens/CardAnimationsScreen').default;
-      },
-      get ListAnimationsScreen() {
-        return require('./screens/animationScreens/ListAnimationsScreen').default;
-      },
       get ProgressBarScreen() {
         return require('./screens/componentScreens/ProgressBarScreen').default;
       },

demo/src/screens/MenuStructure.js

@@ -144,8 +144,6 @@ export const navigationData = {
       {title: 'Animated Image', tags: 'animated image', screen: 'unicorn.components.AnimatedImageScreen'},
       {title: 'Haptic feedback', tags: 'haptic feedback', screen: 'unicorn.components.HapticScreen'},
       {title: 'ProgressiveImage', tags: 'progressive image cover overlay', screen: 'unicorn.components.ProgressiveImageScreen'},
-      {title: 'List Animations', tags: 'animated card', screen: 'unicorn.animations.ListAnimationsScreen'},
-      {title: 'Card Animations', tags: 'animated card', screen: 'unicorn.animations.CardAnimationsScreen'},
       {title: 'Card Scanner', tags: 'card scanner process', screen: 'unicorn.animations.CardScannerScreen'},
       {title: 'Pan Dismissible', tags: 'pan swipe drag dismiss', screen: 'unicorn.components.PanDismissibleScreen'},
       {title: 'Pan Listener', tags: 'pan swipe drag listener', screen: 'unicorn.components.PanListenerScreen'},

demo/src/screens/animationScreens/CardAnimationsScreen.js

@@ -1,7 +1,8 @@
+import {sample} from 'lodash';
 import React, {Component} from 'react';
 import {StyleSheet, Alert, FlatList} from 'react-native';
 import * as Animatable from 'react-native-animatable';
-import {AnimatableManager, Colors, BorderRadiuses, ListItem, Text} from 'react-native-ui-lib';
+import {Colors, BorderRadiuses, ListItem, Text} from 'react-native-ui-lib';
 import orders, {OrderType} from '../../data/orders';
 
 type BasicListScreenState = {
@@ -20,12 +21,28 @@ export default class BasicListScreen extends Component<{}, BasicListScreenState>
     };
   }
 
+  getRandomDelay(delays = [20, 120, 220], options: any) {
+    return {
+      animation: 'fadeInLeft',
+      easing: 'ease-out-expo',
+      duration: 600,
+      delay: sample(delays),
+      useNativeDriver: true,
+      ...options
+    };
+  }
+
   keyExtractor = (item: OrderType) => item.name;
 
   renderRow(row: OrderType, id: number) {
     const statusColor = row.inventory.status === 'Paid' ? Colors.green30 : Colors.red30;
-    const animationProps = AnimatableManager.presets.fadeInRight;
-    const imageAnimationProps = AnimatableManager.getRandomDelay(undefined, undefined);
+    const animationProps = {
+      animation: 'fadeInRight',
+      easing: 'ease-out-expo',
+      duration: 500,
+      useNativeDriver: true
+    };
+    const imageAnimationProps = this.getRandomDelay(undefined, undefined);
 
     return (
       <Animatable.View {...animationProps}>

demo/src/screens/animationScreens/ListAnimationsScreen.js

@@ -1,7 +1,7 @@
 import React, {Component} from 'react';
 import {StyleSheet, Alert, FlatList} from 'react-native';
 import {View as AnimatableView} from 'react-native-animatable';
-import {AnimatableManager, Colors, ListItem, Text, Avatar, AvatarHelper} from 'react-native-ui-lib'; //eslint-disable-line
+import {Colors, ListItem, Text, Avatar, AvatarHelper} from 'react-native-ui-lib'; //eslint-disable-line
 import conversations from '../../data/conversations';
 
 
@@ -16,11 +16,22 @@ export default class ContactsListScreen extends Component {
     };
   }
 
+  getEntranceByIndex = (index = 0, options) => {
+    return {
+      animation: 'itemEntrance',
+      easing: 'ease-out-quint',
+      duration: 600,
+      delay: 10 + (Number(index) % 12) * 100,
+      useNativeDriver: true,
+      ...options
+    };
+  };
+
   keyExtractor = item => item.name;
 
   renderRow(row, id) {
     const initials = AvatarHelper.getInitials(row.name);
-    const animationProps = AnimatableManager.getEntranceByIndex(id);
+    const animationProps = this.getEntranceByIndex(id);
 
     return (
       <AnimatableView {...animationProps}>