Browse Source

update react native paper

Arnaud Vergnet 2 years ago
parent
commit
8f06843ba6
3 changed files with 63 additions and 41 deletions
  1. 4
    19
      package-lock.json
  2. 1
    1
      package.json
  3. 58
    21
      src/components/Animations/AnimatedAccordion.tsx

+ 4
- 19
package-lock.json View File

@@ -10669,13 +10669,13 @@
10669 10669
       "integrity": "sha512-OKdpFVExEe4YM2uFHL/aStS9p0JaC6gBupjaW1QVHkGq22T2ASYwkhDvTnMS8BLOLWPx2fC3xEBzOcn2rh7EYw=="
10670 10670
     },
10671 10671
     "react-native-paper": {
10672
-      "version": "4.2.0",
10673
-      "resolved": "https://registry.npmjs.org/react-native-paper/-/react-native-paper-4.2.0.tgz",
10674
-      "integrity": "sha512-+pM8olBygXP5cdUcPRC++BPb5DvdYPN2LJFIt2eXbT0GXs7kU7nG+hFRnsxu8awt6em6gcHVVw3ajvQGEl+CIg==",
10672
+      "version": "4.8.1",
10673
+      "resolved": "https://registry.npmjs.org/react-native-paper/-/react-native-paper-4.8.1.tgz",
10674
+      "integrity": "sha512-WgmqrDdcrr0ZbuiLCwMpmOMhl1n8uIvNulxsl2oCGtD8oeMkPJKHf4G/ONR+iNrSXcFbJek+uDRSmcGA5kDfUA==",
10675 10675
       "requires": {
10676 10676
         "@callstack/react-theme-provider": "^3.0.5",
10677 10677
         "color": "^3.1.2",
10678
-        "react-native-safe-area-view": "^0.14.9"
10678
+        "react-native-iphone-x-helper": "^1.3.1"
10679 10679
       }
10680 10680
     },
10681 10681
     "react-native-permissions": {
@@ -10715,21 +10715,6 @@
10715 10715
       "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-3.2.0.tgz",
10716 10716
       "integrity": "sha512-k2Nty4PwSnrg9HwrYeeE+EYqViYJoOFwEy9LxL5RIRfoqxAq/uQXNGwpUg2/u4gnKpBbEPa9eRh15KKMe/VHkA=="
10717 10717
     },
10718
-    "react-native-safe-area-view": {
10719
-      "version": "0.14.9",
10720
-      "resolved": "https://registry.npmjs.org/react-native-safe-area-view/-/react-native-safe-area-view-0.14.9.tgz",
10721
-      "integrity": "sha512-WII/ulhpVyL/qbYb7vydq7dJAfZRBcEhg4/UWt6F6nAKpLa3gAceMOxBxI914ppwSP/TdUsandFy6lkJQE0z4A==",
10722
-      "requires": {
10723
-        "hoist-non-react-statics": "^2.3.1"
10724
-      },
10725
-      "dependencies": {
10726
-        "hoist-non-react-statics": {
10727
-          "version": "2.5.5",
10728
-          "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz",
10729
-          "integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw=="
10730
-        }
10731
-      }
10732
-    },
10733 10718
     "react-native-screens": {
10734 10719
       "version": "3.1.1",
10735 10720
       "resolved": "https://registry.npmjs.org/react-native-screens/-/react-native-screens-3.1.1.tgz",

+ 1
- 1
package.json View File

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

+ 58
- 21
src/components/Animations/AnimatedAccordion.tsx View File

@@ -18,10 +18,13 @@
18 18
  */
19 19
 
20 20
 import * as React from 'react';
21
-import { View, ViewStyle } from 'react-native';
21
+import { View, ViewProps, ViewStyle } from 'react-native';
22 22
 import { List, withTheme } from 'react-native-paper';
23 23
 import Collapsible from 'react-native-collapsible';
24 24
 import * as Animatable from 'react-native-animatable';
25
+import { AnimatableProperties } from 'react-native-animatable';
26
+import { ClassicComponent } from 'react';
27
+import GENERAL_STYLES from '../../constants/Styles';
25 28
 
26 29
 type PropsType = {
27 30
   theme: ReactNativePaper.Theme;
@@ -44,10 +47,13 @@ type StateType = {
44 47
   expanded: boolean;
45 48
 };
46 49
 
47
-const AnimatedListIcon = Animatable.createAnimatableComponent(List.Icon);
48
-
49 50
 class AnimatedAccordion extends React.Component<PropsType, StateType> {
50
-  chevronRef: { current: null | (typeof AnimatedListIcon & List.Icon) };
51
+  viewRef:
52
+    | null
53
+    | (ClassicComponent<AnimatableProperties<ViewStyle>> & ViewProps);
54
+  handleViewRef = (
55
+    ref: ClassicComponent<AnimatableProperties<ViewStyle>> & ViewProps
56
+  ) => (this.viewRef = ref);
51 57
 
52 58
   chevronIcon: string;
53 59
 
@@ -55,6 +61,37 @@ class AnimatedAccordion extends React.Component<PropsType, StateType> {
55 61
 
56 62
   animEnd: string;
57 63
 
64
+  getAccordionAnimation():
65
+    | Animatable.Animation
66
+    | string
67
+    | Animatable.CustomAnimation {
68
+    // I don't knwo why ts is complaining
69
+    // The type definitions must be broken because this is a valid style and it works
70
+    if (this.state.expanded) {
71
+      return {
72
+        from: {
73
+          // @ts-ignore
74
+          rotate: this.animStart,
75
+        },
76
+        to: {
77
+          // @ts-ignore
78
+          rotate: this.animEnd,
79
+        },
80
+      };
81
+    } else {
82
+      return {
83
+        from: {
84
+          // @ts-ignore
85
+          rotate: this.animEnd,
86
+        },
87
+        to: {
88
+          // @ts-ignore
89
+          rotate: this.animStart,
90
+        },
91
+      };
92
+    }
93
+  }
94
+
58 95
   constructor(props: PropsType) {
59 96
     super(props);
60 97
     this.chevronIcon = '';
@@ -63,12 +100,13 @@ class AnimatedAccordion extends React.Component<PropsType, StateType> {
63 100
     this.state = {
64 101
       expanded: props.opened != null ? props.opened : false,
65 102
     };
66
-    this.chevronRef = React.createRef();
103
+    this.viewRef = null;
67 104
     this.setupChevron();
68 105
   }
69 106
 
70 107
   shouldComponentUpdate(nextProps: PropsType): boolean {
71 108
     const { state, props } = this;
109
+    // TODO refactor this, it shouldn't even work
72 110
     if (nextProps.opened != null && nextProps.opened !== props.opened) {
73 111
       state.expanded = nextProps.opened;
74 112
     }
@@ -89,15 +127,10 @@ class AnimatedAccordion extends React.Component<PropsType, StateType> {
89 127
   }
90 128
 
91 129
   toggleAccordion = () => {
92
-    const { expanded } = this.state;
93
-    if (this.chevronRef.current != null) {
94
-      this.chevronRef.current.transitionTo({
95
-        rotate: expanded ? this.animStart : this.animEnd,
96
-      });
97
-      this.setState((prevState: StateType): { expanded: boolean } => ({
98
-        expanded: !prevState.expanded,
99
-      }));
100
-    }
130
+    // const { expanded } = this.state;
131
+    this.setState((prevState: StateType): { expanded: boolean } => ({
132
+      expanded: !prevState.expanded,
133
+    }));
101 134
   };
102 135
 
103 136
   render() {
@@ -111,13 +144,17 @@ class AnimatedAccordion extends React.Component<PropsType, StateType> {
111 144
           titleStyle={state.expanded ? { color: colors.primary } : null}
112 145
           onPress={this.toggleAccordion}
113 146
           right={(iconProps) => (
114
-            <AnimatedListIcon
115
-              ref={this.chevronRef}
116
-              style={iconProps.style}
117
-              icon={this.chevronIcon}
118
-              color={state.expanded ? colors.primary : iconProps.color}
119
-              useNativeDriver
120
-            />
147
+            <Animatable.View
148
+              animation={this.getAccordionAnimation()}
149
+              duration={300}
150
+              useNativeDriver={true}
151
+            >
152
+              <List.Icon
153
+                style={{ ...iconProps.style, ...GENERAL_STYLES.center }}
154
+                icon={this.chevronIcon}
155
+                color={state.expanded ? colors.primary : iconProps.color}
156
+              />
157
+            </Animatable.View>
121 158
           )}
122 159
           left={props.left}
123 160
         />

Loading…
Cancel
Save