|
@@ -4,12 +4,15 @@ import * as React from 'react';
|
4
|
4
|
import {StyleSheet, View} from "react-native";
|
5
|
5
|
import {FAB, IconButton, Surface, withTheme} from "react-native-paper";
|
6
|
6
|
import AutoHideComponent from "./AutoHideComponent";
|
|
7
|
+import * as Animatable from 'react-native-animatable';
|
|
8
|
+
|
|
9
|
+const AnimatedFAB = Animatable.createAnimatableComponent(FAB);
|
7
|
10
|
|
8
|
11
|
type Props = {
|
9
|
12
|
navigation: Object,
|
10
|
13
|
theme: Object,
|
11
|
14
|
onPress: Function,
|
12
|
|
- currentGroup: string,
|
|
15
|
+ seekAttention: boolean,
|
13
|
16
|
}
|
14
|
17
|
|
15
|
18
|
type State = {
|
|
@@ -42,7 +45,7 @@ class AnimatedBottomBar extends React.Component<Props, State> {
|
42
|
45
|
}
|
43
|
46
|
|
44
|
47
|
shouldComponentUpdate(nextProps: Props, nextState: State) {
|
45
|
|
- return (nextProps.currentGroup !== this.props.currentGroup)
|
|
48
|
+ return (nextProps.seekAttention !== this.props.seekAttention)
|
46
|
49
|
|| (nextState.currentMode !== this.state.currentMode);
|
47
|
50
|
}
|
48
|
51
|
|
|
@@ -76,7 +79,11 @@ class AnimatedBottomBar extends React.Component<Props, State> {
|
76
|
79
|
style={styles.container}>
|
77
|
80
|
<Surface style={styles.surface}>
|
78
|
81
|
<View style={styles.fabContainer}>
|
79
|
|
- <FAB
|
|
82
|
+ <AnimatedFAB
|
|
83
|
+ animation={this.props.seekAttention ? "jello" : undefined}
|
|
84
|
+ easing="ease-out"
|
|
85
|
+ iterationCount="infinite"
|
|
86
|
+ // useNativeDriver={true}
|
80
|
87
|
style={styles.fab}
|
81
|
88
|
icon="account-clock"
|
82
|
89
|
onPress={() => this.props.navigation.navigate('group-select')}
|