Added animated accordions in group selection

src/components/Lists/GroupListAccordion.js

@@ -2,8 +2,10 @@
 
 import * as React from 'react';
 import {IconButton, List, withTheme} from 'react-native-paper';
-import {FlatList} from "react-native";
+import {FlatList, View} from "react-native";
 import {stringMatchQuery} from "../../utils/Search";
+import Collapsible from "react-native-collapsible";
+import * as Animatable from "react-native-animatable";
 
 type Props = {
     item: Object,
@@ -20,14 +22,18 @@ type State = {
 }
 
 const LIST_ITEM_HEIGHT = 64;
+const AnimatedListIcon = Animatable.createAnimatableComponent(List.Icon);
 
 class GroupListAccordion extends React.Component<Props, State> {
 
+    chevronRef: Object;
+
     constructor(props) {
         super(props);
         this.state = {
             expanded: props.item.id === "0",
         }
+        this.chevronRef = React.createRef();
     }
 
     shouldComponentUpdate(nextProps: Props, nextSate: State) {
@@ -39,7 +45,10 @@ class GroupListAccordion extends React.Component<Props, State> {
             || (nextProps.favoriteNumber !== this.props.favoriteNumber);
     }
 
-    onPress = () => this.setState({expanded: !this.state.expanded});
+    onPress = () => {
+        this.chevronRef.current.transitionTo({ rotate: this.state.expanded ? '0deg' : '180deg' });
+        this.setState({expanded: !this.state.expanded})
+    };
 
     keyExtractor = (item: Object) => item.id.toString();
 
@@ -82,7 +91,8 @@ class GroupListAccordion extends React.Component<Props, State> {
     render() {
         const item = this.props.item;
         return (
-            <List.Accordion
+            <View>
+                <List.Item
                     title={item.name}
                     expanded={this.state.expanded}
                     onPress={this.onPress}
@@ -98,8 +108,16 @@ class GroupListAccordion extends React.Component<Props, State> {
                                 color={this.props.theme.colors.tetrisScore}
                             />
                             : null}
+                    right={(props) => <AnimatedListIcon
+                        ref={this.chevronRef}
+                        {...props}
+                        icon={"chevron-down"}
+                        useNativeDriver
+                    />}
+                />
+                <Collapsible
+                    collapsed={!this.state.expanded}
                 >
-                {/*$FlowFixMe*/}
                     <FlatList
                         data={item.content}
                         extraData={this.props.currentSearchString}
@@ -107,10 +125,11 @@ class GroupListAccordion extends React.Component<Props, State> {
                         keyExtractor={this.keyExtractor}
                         listKey={item.id}
                         // Performance props, see https://reactnative.dev/docs/optimizing-flatlist-configuration
-                    // getItemLayout={this.itemLayout} // Broken with search
+                        getItemLayout={this.itemLayout} // Broken with search
                         removeClippedSubviews={true}
                     />
-            </List.Accordion>
+                </Collapsible>
+            </View>
         );
     }
 }

src/components/Sidebar/SideBarSection.js

@@ -1,12 +1,11 @@
 // @flow
 
 import * as React from 'react';
-import {FlatList} from "react-native";
+import {FlatList, View} from "react-native";
 import {Drawer, List, withTheme} from 'react-native-paper';
 import {Linking} from "expo";
 import Collapsible from "react-native-collapsible";
 import * as Animatable from "react-native-animatable";
-import {View} from "react-native-animatable";
 
 type Props = {
     navigation: Object,