Added more animations

This commit is contained in:
Arnaud Vergnet 2020-04-17 00:08:39 +02:00
parent 96394972eb
commit 26cf3cf2c3
2 changed files with 34 additions and 7 deletions

View file

@ -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>
);
}
}

View file

@ -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