♻️ (CardSkewUp) rename CardSkewUp into ConvexUp

Author: tpucci

src/transitions/CardSkewUp.tsx src/transitions/ConvexUp.tsxsrc/transitions/CardSkewUp.tsx renamed to src/transitions/ConvexUp.tsx

@@ -1,8 +1,9 @@
 import React, { Children } from 'react';
-import { StyleSheet, Dimensions } from 'react-native';
+import { StyleSheet, Dimensions, TouchableWithoutFeedback, View } from 'react-native';
 import Animated, { Easing } from 'react-native-reanimated';
 
 import { TransitionComponent } from './Transition';
+import { Navigation } from 'react-gondola/Navigation';
 
 const { height: SCREEN_HEIGHT } = Dimensions.get('window');
 
@@ -67,7 +68,7 @@ function runTiming(
   ]);
 }
 
-export class CardSkewUp extends TransitionComponent {
+export class ConvexUp extends TransitionComponent {
   state = {
     hidden: !this.props.directionForward,
   };
@@ -94,26 +95,35 @@ export class CardSkewUp extends TransitionComponent {
 
   render() {
     return (
-      <Animated.View
-        pointerEvents={this.state.hidden ? 'none' : 'auto'}
-        style={[
-          StyleSheet.absoluteFill,
-          { backgroundColor: '#000000aa', alignItems: 'center', justifyContent: 'center' },
-          { opacity: sub(new Value(1), this.trans) },
-        ]}
-      >
+      <View style={[StyleSheet.absoluteFill]} pointerEvents={this.state.hidden ? 'none' : 'auto'}>
         <Animated.View
-          style={{
-            transform: [
-              { perspective: 500 },
-              { rotateX: multiply(this.trans, -0.5) },
-              { translateY: multiply(this.trans, SCREEN_HEIGHT / 2) },
-            ],
-          }}
+          style={[StyleSheet.absoluteFill, { opacity: sub(new Value(1), this.trans) }]}
         >
-          {!this.state.hidden && Children.only(this.props.children)}
+          <TouchableWithoutFeedback
+            onPress={Navigation.instance.backHandlerDelegate.back}
+            style={StyleSheet.absoluteFill}
+          >
+            <View style={[StyleSheet.absoluteFill, { backgroundColor: '#000000aa' }]}></View>
+          </TouchableWithoutFeedback>
         </Animated.View>
-      </Animated.View>
+        <View
+          style={[StyleSheet.absoluteFill, { alignItems: 'center', justifyContent: 'center' }]}
+          pointerEvents="box-none"
+        >
+          <Animated.View
+            style={{
+              opacity: sub(new Value(1), this.trans),
+              transform: [
+                { perspective: 500 },
+                { rotateX: multiply(this.trans, -0.5) },
+                { translateY: multiply(this.trans, SCREEN_HEIGHT / 2) },
+              ],
+            }}
+          >
+            {!this.state.hidden && Children.only(this.props.children)}
+          </Animated.View>
+        </View>
+      </View>
     );
   }
 }

src/transitions/__tests__/CardSkewUp.test.tsx

@@ -0,0 +1,4 @@
+import { describeTransitioner } from '../utils/describeTransitioner';
+import { ConvexUp } from '../ConvexUp';
+
+describeTransitioner(ConvexUp);

src/transitions/__tests__/ConvexUp.test.tsx

@@ -2,7 +2,7 @@ export { None } from './None';
 export { SlideLeft } from './SlideLeft';
 export { SlideUp } from './SlideUp';
 export { RotateCrazy } from './RotateCrazy';
-export { CardSkewUp } from './CardSkewUp';
+export { ConvexUp } from './ConvexUp';
 export { TransitionComponent } from './Transition';
 
 // test utility