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,35 +91,45 @@ class GroupListAccordion extends React.Component<Props, State> {
     render() {
         const item = this.props.item;
         return (
-            <List.Accordion
+            <View>
-                title={item.name}
+                <List.Item
-                expanded={this.state.expanded}
+                    title={item.name}
-                onPress={this.onPress}
+                    expanded={this.state.expanded}
-                style={{
+                    onPress={this.onPress}
-                    height: this.props.height,
+                    style={{
-                    justifyContent: 'center',
+                        height: this.props.height,
-                }}
+                        justifyContent: 'center',
-                left={props =>
+                    }}
-                    item.id === "0"
+                    left={props =>
-                    ? <List.Icon
+                        item.id === "0"
+                            ? <List.Icon
+                                {...props}
+                                icon={"star"}
+                                color={this.props.theme.colors.tetrisScore}
+                            />
+                            : null}
+                    right={(props) => <AnimatedListIcon
+                        ref={this.chevronRef}
                         {...props}
-                        icon={"star"}
+                        icon={"chevron-down"}
-                        color={this.props.theme.colors.tetrisScore}
+                        useNativeDriver
-                    />
+                    />}
-                : null}
-            >
-                {/*$FlowFixMe*/}
-                <FlatList
-                    data={item.content}
-                    extraData={this.props.currentSearchString}
-                    renderItem={this.renderItem}
-                    keyExtractor={this.keyExtractor}
-                    listKey={item.id}
-                    // Performance props, see https://reactnative.dev/docs/optimizing-flatlist-configuration
-                    // getItemLayout={this.itemLayout} // Broken with search
-                    removeClippedSubviews={true}
                 />
-            </List.Accordion>
+                <Collapsible
+                    collapsed={!this.state.expanded}
+                >
+                    <FlatList
+                        data={item.content}
+                        extraData={this.props.currentSearchString}
+                        renderItem={this.renderItem}
+                        keyExtractor={this.keyExtractor}
+                        listKey={item.id}
+                        // Performance props, see https://reactnative.dev/docs/optimizing-flatlist-configuration
+                        getItemLayout={this.itemLayout} // Broken with search
+                        removeClippedSubviews={true}
+                    />
+                </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,