diff --git a/src/components/Lists/GroupListAccordion.js b/src/components/Lists/GroupListAccordion.js index d753daf..012f0b9 100644 --- a/src/components/Lists/GroupListAccordion.js +++ b/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 { + 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 { || (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 { render() { const item = this.props.item; return ( - - item.id === "0" - ? + + item.id === "0" + ? + : null} + right={(props) => - : null} - > - {/*$FlowFixMe*/} - } /> - + + + + ); } } diff --git a/src/components/Sidebar/SideBarSection.js b/src/components/Sidebar/SideBarSection.js index 87dbbf6..6d2ff78 100644 --- a/src/components/Sidebar/SideBarSection.js +++ b/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,