Browse Source

Added accordion animations

Arnaud Vergnet 4 years ago
parent
commit
46d293564f
2 changed files with 27 additions and 8 deletions
  1. 1
    0
      package.json
  2. 26
    8
      src/components/Sidebar/SideBarSection.js

+ 1
- 0
package.json View File

@@ -43,6 +43,7 @@
43 43
     "react-native-appearance": "~0.3.3",
44 44
     "react-native-autolink": "^3.0.0",
45 45
     "react-native-calendars": "^1.260.0",
46
+    "react-native-collapsible": "^1.5.2",
46 47
     "react-native-gesture-handler": "~1.6.0",
47 48
     "react-native-image-modal": "^1.0.1",
48 49
     "react-native-modalize": "^1.3.6",

+ 26
- 8
src/components/Sidebar/SideBarSection.js View File

@@ -4,6 +4,9 @@ import * as React from 'react';
4 4
 import {FlatList} from "react-native";
5 5
 import {Drawer, List, withTheme} from 'react-native-paper';
6 6
 import {Linking} from "expo";
7
+import Collapsible from "react-native-collapsible";
8
+import * as Animatable from "react-native-animatable";
9
+import {View} from "react-native-animatable";
7 10
 
8 11
 type Props = {
9 12
     navigation: Object,
@@ -19,6 +22,8 @@ type State = {
19 22
     expanded: boolean
20 23
 }
21 24
 
25
+const AnimatedListIcon = Animatable.createAnimatableComponent(List.Icon);
26
+
22 27
 const LIST_ITEM_HEIGHT = 48;
23 28
 
24 29
 class SideBarSection extends React.PureComponent<Props, State> {
@@ -29,10 +34,12 @@ class SideBarSection extends React.PureComponent<Props, State> {
29 34
 
30 35
     colors: Object;
31 36
     shouldExpand: boolean;
37
+    chevronRef: Object;
32 38
 
33 39
     constructor(props) {
34 40
         super(props);
35 41
         this.colors = props.theme.colors;
42
+        this.chevronRef = React.createRef();
36 43
     }
37 44
 
38 45
     /**
@@ -104,8 +111,10 @@ class SideBarSection extends React.PureComponent<Props, State> {
104 111
     };
105 112
 
106 113
     toggleAccordion = () => {
107
-        if ((!this.state.expanded && this.shouldExpand) || !this.shouldExpand)
114
+        if ((!this.state.expanded && this.shouldExpand) || !this.shouldExpand) {
115
+            this.chevronRef.current.transitionTo({ rotate: this.state.expanded ? '0deg' : '180deg' });
108 116
             this.setState({expanded: !this.state.expanded})
117
+        }
109 118
     };
110 119
 
111 120
     shouldRenderAccordion() {
@@ -140,13 +149,22 @@ class SideBarSection extends React.PureComponent<Props, State> {
140 149
             if (this.shouldExpand)
141 150
                 this.toggleAccordion();
142 151
             return (
143
-                <List.Accordion
144
-                    title={this.props.sectionName}
145
-                    expanded={this.state.expanded}
146
-                    onPress={this.toggleAccordion}
147
-                >
148
-                    {this.getFlatList()}
149
-                </List.Accordion>
152
+                <View>
153
+                    <List.Item
154
+                        title={this.props.sectionName}
155
+                        // expanded={this.state.expanded}
156
+                        onPress={this.toggleAccordion}
157
+                        right={(props) => <AnimatedListIcon
158
+                            ref={this.chevronRef}
159
+                            {...props}
160
+                            icon={"chevron-down"}
161
+                            useNativeDriver
162
+                        />}
163
+                    />
164
+                    <Collapsible collapsed={!this.state.expanded}>
165
+                        {this.getFlatList()}
166
+                    </Collapsible>
167
+                </View>
150 168
             );
151 169
         } else
152 170
             return this.getFlatList();

Loading…
Cancel
Save