update react native paper

package-lock.json

@@ -10669,13 +10669,13 @@
       "integrity": "sha512-OKdpFVExEe4YM2uFHL/aStS9p0JaC6gBupjaW1QVHkGq22T2ASYwkhDvTnMS8BLOLWPx2fC3xEBzOcn2rh7EYw=="
     },
     "react-native-paper": {
-      "version": "4.2.0",
+      "version": "4.8.1",
-      "resolved": "https://registry.npmjs.org/react-native-paper/-/react-native-paper-4.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/react-native-paper/-/react-native-paper-4.8.1.tgz",
-      "integrity": "sha512-+pM8olBygXP5cdUcPRC++BPb5DvdYPN2LJFIt2eXbT0GXs7kU7nG+hFRnsxu8awt6em6gcHVVw3ajvQGEl+CIg==",
+      "integrity": "sha512-WgmqrDdcrr0ZbuiLCwMpmOMhl1n8uIvNulxsl2oCGtD8oeMkPJKHf4G/ONR+iNrSXcFbJek+uDRSmcGA5kDfUA==",
       "requires": {
         "@callstack/react-theme-provider": "^3.0.5",
         "color": "^3.1.2",
-        "react-native-safe-area-view": "^0.14.9"
+        "react-native-iphone-x-helper": "^1.3.1"
       }
     },
     "react-native-permissions": {
@@ -10715,21 +10715,6 @@
       "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-3.2.0.tgz",
       "integrity": "sha512-k2Nty4PwSnrg9HwrYeeE+EYqViYJoOFwEy9LxL5RIRfoqxAq/uQXNGwpUg2/u4gnKpBbEPa9eRh15KKMe/VHkA=="
     },
-    "react-native-safe-area-view": {
-      "version": "0.14.9",
-      "resolved": "https://registry.npmjs.org/react-native-safe-area-view/-/react-native-safe-area-view-0.14.9.tgz",
-      "integrity": "sha512-WII/ulhpVyL/qbYb7vydq7dJAfZRBcEhg4/UWt6F6nAKpLa3gAceMOxBxI914ppwSP/TdUsandFy6lkJQE0z4A==",
-      "requires": {
-        "hoist-non-react-statics": "^2.3.1"
-      },
-      "dependencies": {
-        "hoist-non-react-statics": {
-          "version": "2.5.5",
-          "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz",
-          "integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw=="
-        }
-      }
-    },
     "react-native-screens": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/react-native-screens/-/react-native-screens-3.1.1.tgz",

package.json

@@ -43,7 +43,7 @@
     "react-native-linear-gradient": "2.5.6",
     "react-native-localize": "2.0.3",
     "react-native-modalize": "2.0.8",
-    "react-native-paper": "4.2.0",
+    "react-native-paper": "4.8.1",
     "react-native-permissions": "3.0.3",
     "react-native-push-notification": "5.1.1",
     "react-native-reanimated": "1.13.2",

src/components/Animations/AnimatedAccordion.tsx

@@ -18,10 +18,13 @@
  */
 
 import * as React from 'react';
-import { View, ViewStyle } from 'react-native';
+import { View, ViewProps, ViewStyle } from 'react-native';
 import { List, withTheme } from 'react-native-paper';
 import Collapsible from 'react-native-collapsible';
 import * as Animatable from 'react-native-animatable';
+import { AnimatableProperties } from 'react-native-animatable';
+import { ClassicComponent } from 'react';
+import GENERAL_STYLES from '../../constants/Styles';
 
 type PropsType = {
   theme: ReactNativePaper.Theme;
@@ -44,10 +47,13 @@ type StateType = {
   expanded: boolean;
 };
 
-const AnimatedListIcon = Animatable.createAnimatableComponent(List.Icon);
-
 class AnimatedAccordion extends React.Component<PropsType, StateType> {
-  chevronRef: { current: null | (typeof AnimatedListIcon & List.Icon) };
+  viewRef:
+    | null
+    | (ClassicComponent<AnimatableProperties<ViewStyle>> & ViewProps);
+  handleViewRef = (
+    ref: ClassicComponent<AnimatableProperties<ViewStyle>> & ViewProps
+  ) => (this.viewRef = ref);
 
   chevronIcon: string;
 
@@ -55,6 +61,37 @@ class AnimatedAccordion extends React.Component<PropsType, StateType> {
 
   animEnd: string;
 
+  getAccordionAnimation():
+    | Animatable.Animation
+    | string
+    | Animatable.CustomAnimation {
+    // I don't knwo why ts is complaining
+    // The type definitions must be broken because this is a valid style and it works
+    if (this.state.expanded) {
+      return {
+        from: {
+          // @ts-ignore
+          rotate: this.animStart,
+        },
+        to: {
+          // @ts-ignore
+          rotate: this.animEnd,
+        },
+      };
+    } else {
+      return {
+        from: {
+          // @ts-ignore
+          rotate: this.animEnd,
+        },
+        to: {
+          // @ts-ignore
+          rotate: this.animStart,
+        },
+      };
+    }
+  }
+
   constructor(props: PropsType) {
     super(props);
     this.chevronIcon = '';
@@ -63,12 +100,13 @@ class AnimatedAccordion extends React.Component<PropsType, StateType> {
     this.state = {
       expanded: props.opened != null ? props.opened : false,
     };
-    this.chevronRef = React.createRef();
+    this.viewRef = null;
     this.setupChevron();
   }
 
   shouldComponentUpdate(nextProps: PropsType): boolean {
     const { state, props } = this;
+    // TODO refactor this, it shouldn't even work
     if (nextProps.opened != null && nextProps.opened !== props.opened) {
       state.expanded = nextProps.opened;
     }
@@ -89,15 +127,10 @@ class AnimatedAccordion extends React.Component<PropsType, StateType> {
   }
 
   toggleAccordion = () => {
-    const { expanded } = this.state;
+    // const { expanded } = this.state;
-    if (this.chevronRef.current != null) {
+    this.setState((prevState: StateType): { expanded: boolean } => ({
-      this.chevronRef.current.transitionTo({
+      expanded: !prevState.expanded,
-        rotate: expanded ? this.animStart : this.animEnd,
+    }));
-      });
-      this.setState((prevState: StateType): { expanded: boolean } => ({
-        expanded: !prevState.expanded,
-      }));
-    }
   };
 
   render() {
@@ -111,13 +144,17 @@ class AnimatedAccordion extends React.Component<PropsType, StateType> {
           titleStyle={state.expanded ? { color: colors.primary } : null}
           onPress={this.toggleAccordion}
           right={(iconProps) => (
-            <AnimatedListIcon
+            <Animatable.View
-              ref={this.chevronRef}
+              animation={this.getAccordionAnimation()}
-              style={iconProps.style}
+              duration={300}
-              icon={this.chevronIcon}
+              useNativeDriver={true}
-              color={state.expanded ? colors.primary : iconProps.color}
+            >
-              useNativeDriver
+              <List.Icon
-            />
+                style={{ ...iconProps.style, ...GENERAL_STYLES.center }}
+                icon={this.chevronIcon}
+                color={state.expanded ? colors.primary : iconProps.color}
+              />
+            </Animatable.View>
           )}
           left={props.left}
         />