react-native-animatable - removing dep (#1544)

Author: Inbal-Tish

demo/src/screens/componentScreens/BasicListScreen.tsx

@@ -1,51 +1,18 @@
-import {sample} from 'lodash';
 import React, {Component} from 'react';
 import {StyleSheet, Alert, FlatList} from 'react-native';
-import * as Animatable from 'react-native-animatable';
-import {Colors, BorderRadiuses, ListItem, Text} from 'react-native-ui-lib';
+import {Colors, BorderRadiuses, View, Image, ListItem, Text} from 'react-native-ui-lib';
 import orders, {OrderType} from '../../data/orders';
 
-type BasicListScreenState = {
-  onEdit: boolean;
-  updating: boolean;
-}
-
-export default class BasicListScreen extends Component<{}, BasicListScreenState> {
-
-  constructor(props: any) {
-    super(props);
 
-    this.state = {
-      onEdit: false,
-      updating: false
-    };
-  }
-
-  getRandomDelay(delays = [20, 120, 220], options: any) {
-    return {
-      animation: 'fadeInLeft',
-      easing: 'ease-out-expo',
-      duration: 600,
-      delay: sample(delays),
-      useNativeDriver: true,
-      ...options
-    };
-  }
+export default class BasicListScreen extends Component {
 
   keyExtractor = (item: OrderType) => item.name;
 
   renderRow(row: OrderType, id: number) {
     const statusColor = row.inventory.status === 'Paid' ? Colors.green30 : Colors.red30;
-    const animationProps = {
-      animation: 'fadeInRight',
-      easing: 'ease-out-expo',
-      duration: 500,
-      useNativeDriver: true
-    };
-    const imageAnimationProps = this.getRandomDelay(undefined, undefined);
 
     return (
-      <Animatable.View {...animationProps}>
+      <View>
         <ListItem
           // @ts-expect-error
           activeBackgroundColor={Colors.dark60}
@@ -54,7 +21,7 @@ export default class BasicListScreen extends Component<{}, BasicListScreenState>
           onPress={() => Alert.alert(`pressed on order #${id + 1}`)}
         >
           <ListItem.Part left>
-            <Animatable.Image source={{uri: row.mediaUrl}} style={styles.image} {...imageAnimationProps} />
+            <Image source={{uri: row.mediaUrl}} style={styles.image}/>
           </ListItem.Part>
           <ListItem.Part middle column containerStyle={[styles.border, {paddingRight: 17}]}>
             <ListItem.Part containerStyle={{marginBottom: 3}}>
@@ -78,7 +45,7 @@ export default class BasicListScreen extends Component<{}, BasicListScreenState>
             </ListItem.Part>
           </ListItem.Part>
         </ListItem>
-      </Animatable.View>
+      </View>
     );
   }
 

demo/src/screens/componentScreens/ContactsListScreen.js

@@ -1,40 +1,17 @@
 import React, {Component} from 'react';
 import {StyleSheet, Alert, FlatList} from 'react-native';
-import {View as AnimatableView} from 'react-native-animatable';
-import {Colors, ListItem, Text, Avatar, AvatarHelper} from 'react-native-ui-lib'; //eslint-disable-line
+import {Colors, View, ListItem, Text, Avatar, AvatarHelper} from 'react-native-ui-lib'; //eslint-disable-line
 import conversations from '../../data/conversations';
 
 
 export default class ContactsListScreen extends Component {
-
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      onEdit: false,
-      updating: false
-    };
-  }
-
-  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;
+  keyExtractor = (item, index) => `${item.name}.${index}`;
 
   renderRow(row, id) {
     const initials = AvatarHelper.getInitials(row.name);
-    const animationProps = this.getEntranceByIndex(id);
 
     return (
-      <AnimatableView {...animationProps}>
+      <View>
         <ListItem
           key={id}
           onPress={() => Alert.alert(`pressed on contact #${id + 1}`)}
@@ -51,7 +28,7 @@ export default class ContactsListScreen extends Component {
             <Text text70>{row.name}</Text>
           </ListItem.Part>
         </ListItem>
-      </AnimatableView>
+      </View>
     );
   }
 

package.json

@@ -54,7 +54,6 @@
     "memoize-one": "^5.0.5",
     "moment": "^2.24.0",
     "prop-types": "^15.5.10",
-    "react-native-animatable": "^1.1.0",
     "react-native-color": "0.0.10",
     "react-native-redash": "^12.0.3",
     "react-native-text-size": "4.0.0-rc.1",
@@ -124,7 +123,7 @@
   "jest": {
     "preset": "react-native",
     "transformIgnorePatterns": [
-      "node_modules/(?!(@react-native|react-native|react-native-animatable|react-native-reanimated|react-native-redash)/)"
+      "node_modules/(?!(@react-native|react-native|react-native-reanimated|react-native-redash)/)"
     ],
     "testPathIgnorePatterns": [
       "/e2e/",