From 26cf3cf2c336113279c894547f6ad91b822e0f38 Mon Sep 17 00:00:00 2001
From: Arnaud Vergnet <vergnet@etud.insa-toulouse.fr>
Date: Fri, 17 Apr 2020 00:08:39 +0200
Subject: [PATCH] Added more animations

---
 src/components/Custom/ErrorView.js     | 12 ++++++++---
 src/components/Lists/WebSectionList.js | 29 ++++++++++++++++++++++----
 2 files changed, 34 insertions(+), 7 deletions(-)

diff --git a/src/components/Custom/ErrorView.js b/src/components/Custom/ErrorView.js
index 436bfc6..e800486 100644
--- a/src/components/Custom/ErrorView.js
+++ b/src/components/Custom/ErrorView.js
@@ -6,6 +6,7 @@ import {StyleSheet, View} from "react-native";
 import {MaterialCommunityIcons} from "@expo/vector-icons";
 import i18n from 'i18n-js';
 import {ERROR_TYPE} from "../../utils/WebData";
+import * as Animatable from 'react-native-animatable';
 
 type Props = {
     navigation: Object,
@@ -124,10 +125,15 @@ class ErrorView extends React.PureComponent<Props, State> {
     render() {
         this.generateMessage();
         return (
-            <View style={{
+            <Animatable.View
+                style={{
                 ...styles.outer,
                 backgroundColor: this.colors.background
-            }}>
+            }}
+                animation={"zoomIn"}
+                duration={200}
+                useNativeDriver
+            >
                 <View style={styles.inner}>
                     <View style={styles.iconContainer}>
                         <MaterialCommunityIcons
@@ -147,7 +153,7 @@ class ErrorView extends React.PureComponent<Props, State> {
                             : this.getRetryButton())
                         : null}
                 </View>
-            </View>
+            </Animatable.View>
         );
     }
 }
diff --git a/src/components/Lists/WebSectionList.js b/src/components/Lists/WebSectionList.js
index 58a9ca1..a3990bf 100644
--- a/src/components/Lists/WebSectionList.js
+++ b/src/components/Lists/WebSectionList.js
@@ -8,6 +8,7 @@ import {Animated, RefreshControl, View} from "react-native";
 import ErrorView from "../Custom/ErrorView";
 import BasicLoadingScreen from "../Custom/BasicLoadingScreen";
 import {withCollapsible} from "../../utils/withCollapsible";
+import * as Animatable from 'react-native-animatable';
 
 type Props = {
     navigation: Object,
@@ -174,9 +175,29 @@ class WebSectionList extends React.PureComponent<Props, State> {
         index
     });
 
-    onListScroll= (event) => {
+    renderSectionHeader = (data: Object) => {
+        return (
+            <Animatable.View
+                animation={"fadeInUp"}
+                duration={500}
+                useNativeDriver
+            >
+                {this.props.renderSectionHeader(data)}
+            </Animatable.View>
+        );
+    }
 
-    };
+    renderItem = (data: Object) => {
+        return (
+            <Animatable.View
+                animation={"fadeInUp"}
+                duration={500}
+                useNativeDriver
+            >
+                {this.props.renderItem(data)}
+            </Animatable.View>
+        );
+    }
 
     render() {
         let dataset = [];
@@ -198,9 +219,9 @@ class WebSectionList extends React.PureComponent<Props, State> {
                         />
                     }
                     //$FlowFixMe
-                    renderSectionHeader={shouldRenderHeader ? this.props.renderSectionHeader : this.getEmptySectionHeader}
+                    renderSectionHeader={shouldRenderHeader ? this.renderSectionHeader : this.getEmptySectionHeader}
                     //$FlowFixMe
-                    renderItem={this.props.renderItem}
+                    renderItem={this.renderItem}
                     stickySectionHeadersEnabled={this.props.stickyHeader}
                     style={{minHeight: '100%'}}
                     ListEmptyComponent={this.state.refreshing