Updates to animations for new gallery (#5119)

* tweaks to durations and animation settings for gallery

* fixed style issues from code linting

* added duration change for android that got missed

app/screens/gallery/footer/index.tsx

@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React, {forwardRef, useEffect, useRef, useState, useImperativeHandle} from 'react';
-import {Animated, StyleSheet} from 'react-native';
+import {Animated, Easing, StyleSheet} from 'react-native';
 import {injectIntl} from 'react-intl';
 import Clipboard from '@react-native-community/clipboard';
 
@@ -35,7 +35,8 @@ const Footer = forwardRef<FooterRef, FooterProps>((props: FooterProps, ref) => {
     const animate = (value: Animated.Value, show: boolean, callback?: () => void): Animated.CompositeAnimation => {
         const animation = Animated.timing(value, {
             toValue: show ? 1 : 0,
-            duration: 250,
+            duration: 200,
+            easing: Easing.inOut(Easing.quad),
             useNativeDriver: true,
         });
 

app/screens/gallery/gallery.js

@@ -45,7 +45,7 @@ export default class Gallery extends PureComponent {
     componentDidMount() {
         this.cancelTopBar = setTimeout(() => {
             this.initHeader();
-        }, Platform.OS === 'ios' ? 250 : 0);
+        }, Platform.OS === 'ios' ? 200 : 0);
     }
 
     componentWillUnmount() {
@@ -67,7 +67,7 @@ export default class Gallery extends PureComponent {
             sharedElementTransitions.push({
                 fromId: `gallery-${file.id}`,
                 toId: `image-${file.id}`,
-                interpolation: {mode: 'accelerateDecelerate'},
+                interpolation: {type: 'accelerateDecelerate', factor: 8},
             });
         }
 
@@ -147,7 +147,7 @@ export default class Gallery extends PureComponent {
             },
         };
         if (Platform.OS === 'ios') {
-            StatusBar.setHidden(!visible, 'slide');
+            StatusBar.setHidden(!visible, 'fade');
         }
         this.setState({footerVisible: visible});
         mergeNavigationOptions(this.props.componentId, options);

app/screens/gallery/gallery_viewer.tsx

@@ -4,7 +4,7 @@
 import React, {useEffect, useMemo, useRef, useState} from 'react';
 import {Platform, StyleSheet, View} from 'react-native';
 import {PanGestureHandler, PinchGestureHandler, State, TapGestureHandler, TapGestureHandlerStateChangeEvent} from 'react-native-gesture-handler';
-import Animated, {abs, add, and, call, clockRunning, cond, divide, eq, floor, greaterOrEq, greaterThan, multiply, neq, not, onChange, set, sub, useCode} from 'react-native-reanimated';
+import Animated, {abs, add, and, call, clockRunning, cond, divide, eq, floor, greaterOrEq, greaterThan, multiply, neq, not, onChange, set, sub, useCode, Easing} from 'react-native-reanimated';
 import {clamp, snapPoint, timing, useClock, usePanGestureHandler, usePinchGestureHandler, useTapGestureHandler, useValue, vec} from 'react-native-redash/lib/module/v1';
 import {isImage, isVideo} from '@utils/file';
 import {calculateDimensions} from '@utils/images';
@@ -213,12 +213,12 @@ const GalleryViewer = (props: GalleryProps) => {
                 ]),
             ),
             cond(and(eq(pan.state, State.END), neq(translateY, 0)), [
-                cond(greaterOrEq(abs(translateY), 50), [
+                cond(greaterOrEq(abs(translateY), 10), [
                     cond(not(clockRunning(clock)), call([], props.onClose)),
                 ], set(translateY, timing({from: translateY, to: 0}))),
             ]),
             cond(and(eq(pan.state, State.END), neq(translationX, 0)), [
-                set(translateX, timing({clock, from: translateX, to: snapTo, duration: 250})),
+                set(translateX, timing({clock, from: translateX, to: snapTo, duration: 150, easing: Easing.out(Easing.quad)})),
                 set(offsetX, translateX),
                 cond(not(clockRunning(clock)), [
                     vec.set(translate, 0),

app/utils/images.js

@@ -94,13 +94,14 @@ export function openGalleryAtIndex(index, files) {
             sharedElementTransitions.push({
                 fromId: `image-${file.id}`,
                 toId: `gallery-${file.id}`,
-                interpolation: {mode: 'overshoot'},
+                duration: 300,
+                interpolation: {type: 'accelerateDecelerate', factor: 9},
             });
         } else {
             contentPush.y = {
                 from: windowHeight,
                 to: 0,
-                duration: 300,
+                duration: 150,
                 interpolation: {mode: 'decelerate'},
             };
 
@@ -108,13 +109,13 @@ export function openGalleryAtIndex(index, files) {
                 contentPop.translationY = {
                     from: 0,
                     to: windowHeight,
-                    duration: 300,
+                    duration: 150,
                 };
             } else {
                 contentPop.y = {
                     from: 0,
                     to: windowHeight,
-                    duration: 300,
+                    duration: 150,
                 };
                 contentPop.alpha = {
                     from: 1,