From 8f06843ba65be1b2a9b2f3f224e7e50cc043df91 Mon Sep 17 00:00:00 2001 From: Arnaud Vergnet Date: Sat, 8 May 2021 23:06:37 +0200 Subject: [PATCH] update react native paper --- package-lock.json | 23 +----- package.json | 2 +- .../Animations/AnimatedAccordion.tsx | 79 ++++++++++++++----- 3 files changed, 63 insertions(+), 41 deletions(-) diff --git a/package-lock.json b/package-lock.json index dea2b78..14ddce0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10669,13 +10669,13 @@ "integrity": "sha512-OKdpFVExEe4YM2uFHL/aStS9p0JaC6gBupjaW1QVHkGq22T2ASYwkhDvTnMS8BLOLWPx2fC3xEBzOcn2rh7EYw==" }, "react-native-paper": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/react-native-paper/-/react-native-paper-4.2.0.tgz", - "integrity": "sha512-+pM8olBygXP5cdUcPRC++BPb5DvdYPN2LJFIt2eXbT0GXs7kU7nG+hFRnsxu8awt6em6gcHVVw3ajvQGEl+CIg==", + "version": "4.8.1", + "resolved": "https://registry.npmjs.org/react-native-paper/-/react-native-paper-4.8.1.tgz", + "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", diff --git a/package.json b/package.json index ed2a768..ea2f0bf 100644 --- a/package.json +++ b/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", diff --git a/src/components/Animations/AnimatedAccordion.tsx b/src/components/Animations/AnimatedAccordion.tsx index 17fef0e..3634348 100644 --- a/src/components/Animations/AnimatedAccordion.tsx +++ b/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 { - chevronRef: { current: null | (typeof AnimatedListIcon & List.Icon) }; + viewRef: + | null + | (ClassicComponent> & ViewProps); + handleViewRef = ( + ref: ClassicComponent> & ViewProps + ) => (this.viewRef = ref); chevronIcon: string; @@ -55,6 +61,37 @@ class AnimatedAccordion extends React.Component { 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 { 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 { } toggleAccordion = () => { - const { expanded } = this.state; - if (this.chevronRef.current != null) { - this.chevronRef.current.transitionTo({ - rotate: expanded ? this.animStart : this.animEnd, - }); - this.setState((prevState: StateType): { expanded: boolean } => ({ - expanded: !prevState.expanded, - })); - } + // const { expanded } = this.state; + this.setState((prevState: StateType): { expanded: boolean } => ({ + expanded: !prevState.expanded, + })); }; render() { @@ -111,13 +144,17 @@ class AnimatedAccordion extends React.Component { titleStyle={state.expanded ? { color: colors.primary } : null} onPress={this.toggleAccordion} right={(iconProps) => ( - + + + )} left={props.left} />