chore: publish

- @react-navigation/core@5.0.0-alpha.8
 - @react-navigation/stack@5.0.0-alpha.15

packages/core/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.0.0-alpha.8](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/core@5.0.0-alpha.7...@react-navigation/core@5.0.0-alpha.8) (2019-09-04)
+
+**Note:** Version bump only for package @react-navigation/core
+
+
+
+
+
 # [5.0.0-alpha.7](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/core@5.0.0-alpha.5...@react-navigation/core@5.0.0-alpha.7) (2019-08-31)
 
 

packages/core/package.json

@@ -6,7 +6,7 @@
     "react-native",
     "react-navigation"
   ],
-  "version": "5.0.0-alpha.7",
+  "version": "5.0.0-alpha.8",
   "license": "MIT",
   "repository": {
     "type": "git",

packages/core/src/NavigationContext.tsx

@@ -1,22 +1,11 @@
 import * as React from 'react';
-import {
-  NavigationProp,
-  ParamListBase,
-  PartialState,
-  Route,
-  NavigationState,
-} from './types';
+import { NavigationProp, ParamListBase } from './types';
 
 /**
  * Context which holds the navigation prop for a screen.
  */
-const NavigationContext = React.createContext<{
-  navigation: NavigationProp<ParamListBase, string, any, any> | undefined;
-  route:
-    | Route<string> & {
-        state?: NavigationState | PartialState<NavigationState>;
-      }
-    | undefined;
-}>({ navigation: undefined, route: undefined });
+const NavigationContext = React.createContext<
+  NavigationProp<ParamListBase, string, any, any> | undefined
+>(undefined);
 
 export default NavigationContext;

packages/core/src/NavigationRouteContext.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { Route } from './types';
+
+/**
+ * Context which holds the route prop for a screen.
+ */
+const NavigationContext = React.createContext<Route<string> | undefined>(
+  undefined
+);
+
+export default NavigationContext;

packages/core/src/SceneView.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { NavigationStateContext } from './NavigationContainer';
 import NavigationContext from './NavigationContext';
+import NavigationRouteContext from './NavigationRouteContext';
 import StaticContainer from './StaticContainer';
 import EnsureSingleNavigator from './EnsureSingleNavigator';
 import {
@@ -76,33 +77,27 @@ export default function SceneView<
     ]
   );
 
-  const navigationContext = React.useMemo(
-    () => ({
-      navigation,
-      route,
-    }),
-    [navigation, route]
-  );
-
   return (
-    <NavigationContext.Provider value={navigationContext}>
-      <NavigationStateContext.Provider value={context}>
-        <EnsureSingleNavigator>
-          <StaticContainer
-            name={screen.name}
-            // @ts-ignore
-            render={screen.component || screen.children}
-            navigation={navigation}
-            route={route}
-          >
-            {'component' in screen && screen.component !== undefined ? (
-              <screen.component navigation={navigation} route={route} />
-            ) : 'children' in screen && screen.children !== undefined ? (
-              screen.children({ navigation, route })
-            ) : null}
-          </StaticContainer>
-        </EnsureSingleNavigator>
-      </NavigationStateContext.Provider>
+    <NavigationContext.Provider value={navigation}>
+      <NavigationRouteContext.Provider value={route}>
+        <NavigationStateContext.Provider value={context}>
+          <EnsureSingleNavigator>
+            <StaticContainer
+              name={screen.name}
+              // @ts-ignore
+              render={screen.component || screen.children}
+              navigation={navigation}
+              route={route}
+            >
+              {'component' in screen && screen.component !== undefined ? (
+                <screen.component navigation={navigation} route={route} />
+              ) : 'children' in screen && screen.children !== undefined ? (
+                screen.children({ navigation, route })
+              ) : null}
+            </StaticContainer>
+          </EnsureSingleNavigator>
+        </NavigationStateContext.Provider>
+      </NavigationRouteContext.Provider>
     </NavigationContext.Provider>
   );
 }

packages/core/src/index.tsx

@@ -7,6 +7,7 @@ export { default as NavigationContainer } from './NavigationContainer';
 export { default as createNavigator } from './createNavigator';
 
 export { default as NavigationContext } from './NavigationContext';
+export { default as NavigationRouteContext } from './NavigationRouteContext';
 
 export { default as useNavigationBuilder } from './useNavigationBuilder';
 export { default as useNavigation } from './useNavigation';

packages/core/src/useFocusEvents.tsx

@@ -12,7 +12,7 @@ type Options = {
  * Hook to take care of emitting `focus` and `blur` events.
  */
 export default function useFocusEvents({ state, emitter }: Options) {
-  const { navigation } = React.useContext(NavigationContext);
+  const navigation = React.useContext(NavigationContext);
   const lastFocusedKeyRef = React.useRef<string | undefined>();
 
   const currentFocusedKey = state.routes[state.index].key;

packages/core/src/useNavigation.tsx

@@ -10,7 +10,7 @@ import { NavigationProp, ParamListBase } from './types';
 export default function useNavigation<
   T extends NavigationProp<ParamListBase>
 >(): T {
-  const { navigation } = React.useContext(NavigationContext);
+  const navigation = React.useContext(NavigationContext);
 
   if (navigation === undefined) {
     throw new Error(

packages/core/src/useNavigationCache.tsx

@@ -43,7 +43,7 @@ export default function useNavigationCache<
   // Cache object which holds navigation objects for each screen
   // We use `React.useMemo` instead of `React.useRef` coz we want to invalidate it when deps change
   // In reality, these deps will rarely change, if ever
-  const { navigation: parentNavigation } = React.useContext(NavigationContext);
+  const parentNavigation = React.useContext(NavigationContext);
 
   const cache = React.useMemo(
     () => ({ current: {} as NavigationCache<State, ScreenOptions> }),

packages/core/src/useNavigationHelpers.tsx

@@ -37,9 +37,7 @@ export default function useNavigationHelpers<
   Action extends NavigationAction,
   EventMap extends { [key: string]: any }
 >({ onAction, getState, setState, emitter, router }: Options<State, Action>) {
-  const { navigation: parentNavigationHelpers } = React.useContext(
-    NavigationContext
-  );
+  const parentNavigationHelpers = React.useContext(NavigationContext);
   const { performTransaction } = React.useContext(NavigationStateContext);
 
   return React.useMemo(() => {

packages/core/src/useRoute.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import NavigationContext from './NavigationContext';
+import NavigationRouteContext from './NavigationRouteContext';
 import { ParamListBase, RouteProp } from './types';
 
 /**
@@ -10,7 +10,7 @@ import { ParamListBase, RouteProp } from './types';
 export default function useRoute<
   T extends RouteProp<ParamListBase, string>
 >(): T {
-  const { route } = React.useContext(NavigationContext);
+  const route = React.useContext(NavigationRouteContext);
 
   if (route === undefined) {
     throw new Error(

packages/stack/CHANGELOG.md

@@ -3,6 +3,62 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.0.0-alpha.15](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.14...@react-navigation/stack@5.0.0-alpha.15) (2019-09-04)
+
+
+### Features
+
+* add approximate android Q transition ([196cce0](https://github.com/react-navigation/navigation-ex/commit/196cce0))
+
+
+
+
+
+# [5.0.0-alpha.14](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.13...@react-navigation/stack@5.0.0-alpha.14) (2019-09-03)
+
+
+### Bug Fixes
+
+* change order of attaching nodes in card exec ([167d58c](https://github.com/react-navigation/navigation-ex/commit/167d58c))
+
+
+
+
+
+# [5.0.0-alpha.13](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.12...@react-navigation/stack@5.0.0-alpha.13) (2019-09-01)
+
+
+### Features
+
+* useForeground if possible in stack header backButton ([aa6313c](https://github.com/react-navigation/navigation-ex/commit/aa6313c))
+
+
+
+
+
+# [5.0.0-alpha.12](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.11...@react-navigation/stack@5.0.0-alpha.12) (2019-09-01)
+
+
+### Bug Fixes
+
+* defer running the animation to next frame ([c7a79a6](https://github.com/react-navigation/navigation-ex/commit/c7a79a6))
+* stack with gesture enabled ([55ec815](https://github.com/react-navigation/navigation-ex/commit/55ec815))
+
+
+
+
+
+# [5.0.0-alpha.11](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.10...@react-navigation/stack@5.0.0-alpha.11) (2019-09-01)
+
+
+### Features
+
+* optimizations in stack ([3f853d4](https://github.com/react-navigation/navigation-ex/commit/3f853d4))
+
+
+
+
+
 # [5.0.0-alpha.10](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.9...@react-navigation/stack@5.0.0-alpha.10) (2019-08-31)
 
 **Note:** Version bump only for package @react-navigation/stack

packages/stack/package.json

@@ -10,7 +10,7 @@
     "android",
     "stack"
   ],
-  "version": "5.0.0-alpha.10",
+  "version": "5.0.0-alpha.15",
   "license": "MIT",
   "repository": {
     "type": "git",

packages/stack/src/TransitionConfigs/CardStyleInterpolators.tsx

@@ -198,3 +198,34 @@ export function forRevealFromBottomAndroid({
     overlayStyle: { opacity: overlayOpacity },
   };
 }
+
+/**
+ * Standard Android-style reveal from the bottom for Android Q.
+ * TODO: Update this with correct values when AOSP is updated.
+ */
+export function forScaleFromCenterAndroid({
+  current,
+  next,
+}: CardInterpolationProps): CardInterpolatedStyle {
+  const cardOpacityFocused = interpolate(current.progress, {
+    inputRange: [0, 0.5, 1],
+    outputRange: [0, 1, 1],
+  });
+  const cardScaleFocused = interpolate(current.progress, {
+    inputRange: [0, 1],
+    outputRange: [0.9, 1],
+  });
+  const cardScaleUnFocused = next
+    ? interpolate(next.progress, {
+        inputRange: [0, 1],
+        outputRange: [1, 1.1],
+      })
+    : 1;
+
+  return {
+    containerStyle: {
+      opacity: cardOpacityFocused,
+      transform: [{ scale: cardScaleFocused }, { scale: cardScaleUnFocused }],
+    },
+  };
+}

packages/stack/src/TransitionConfigs/TransitionPresets.tsx

@@ -1,6 +1,7 @@
 import {
   forHorizontalIOS,
   forVerticalIOS,
+  forScaleFromCenterAndroid,
   forRevealFromBottomAndroid,
   forFadeFromBottomAndroid,
   forModalPresentationIOS,
@@ -8,6 +9,7 @@ import {
 import { forNoAnimation, forFade } from './HeaderStyleInterpolators';
 import {
   TransitionIOSSpec,
+  ScaleFromCenterAndroidSpec,
   RevealFromBottomAndroidSpec,
   FadeOutToBottomAndroidSpec,
   FadeInFromBottomAndroidSpec,
@@ -70,7 +72,7 @@ export const FadeFromBottomAndroid: TransitionPreset = {
 };
 
 /**
- * Standard Android navigation transition when opening or closing an Activity on Android >= 9 (Pie).
+ * Standard Android navigation transition when opening or closing an Activity on Android 9 (Pie).
  */
 export const RevealFromBottomAndroid: TransitionPreset = {
   gestureDirection: 'vertical',
@@ -82,6 +84,19 @@ export const RevealFromBottomAndroid: TransitionPreset = {
   headerStyleInterpolator: forNoAnimation,
 };
 
+/**
+ * Standard Android navigation transition when opening or closing an Activity on Android 10 (Q).
+ */
+export const ScaleFromCenterAndroid: TransitionPreset = {
+  gestureDirection: 'horizontal',
+  transitionSpec: {
+    open: ScaleFromCenterAndroidSpec,
+    close: ScaleFromCenterAndroidSpec,
+  },
+  cardStyleInterpolator: forScaleFromCenterAndroid,
+  headerStyleInterpolator: forNoAnimation,
+};
+
 /**
  * Default navigation transition for the current platform.
  */

packages/stack/src/TransitionConfigs/TransitionSpecs.tsx

@@ -53,3 +53,15 @@ export const RevealFromBottomAndroidSpec: TransitionSpec = {
     easing: Easing.bezier(0.35, 0.45, 0, 1),
   },
 };
+
+/**
+ * Approximate configuration for activity open animation from Android Q.
+ * TODO: Update this with correct values when AOSP is updated.
+ */
+export const ScaleFromCenterAndroidSpec: TransitionSpec = {
+  animation: 'timing',
+  config: {
+    duration: 425,
+    easing: Easing.bezier(0.35, 0.45, 0, 1),
+  },
+};

packages/stack/src/views/Stack/Card.tsx

@@ -13,7 +13,13 @@ import {
   PanGestureHandler,
   State as GestureState,
 } from 'react-native-gesture-handler';
-import { TransitionSpec, CardStyleInterpolator, Layout } from '../../types';
+import {
+  TransitionSpec,
+  CardStyleInterpolator,
+  Layout,
+  SpringConfig,
+  TimingConfig,
+} from '../../types';
 import memoize from '../../utils/memoize';
 import StackGestureContext from '../../utils/StackGestureContext';
 import PointerEventsView from './PointerEventsView';
@@ -50,12 +56,31 @@ type Props = ViewProps & {
   contentStyle?: StyleProp<ViewStyle>;
 };
 
+type AnimatedSpringConfig = {
+  damping: Animated.Value<number>;
+  mass: Animated.Value<number>;
+  stiffness: Animated.Value<number>;
+  restSpeedThreshold: Animated.Value<number>;
+  restDisplacementThreshold: Animated.Value<number>;
+  overshootClamping: Animated.Value<boolean>;
+};
+
+export type AnimatedTimingConfig = {
+  duration: Animated.Value<number>;
+  easing: Animated.EasingFunction;
+};
+
 type Binary = 0 | 1;
 
 const TRUE = 1;
+const TRUE_NODE = new Animated.Value(TRUE);
 const FALSE = 0;
-const NOOP = 0;
+const FALSE_NODE = new Animated.Value(FALSE);
+const NOOP_NODE = FALSE_NODE;
 const UNSET = -1;
+const UNSET_NODE = new Animated.Value(UNSET);
+
+const MINUS_ONE_NODE = UNSET_NODE;
 
 const DIRECTION_VERTICAL = -1;
 const DIRECTION_HORIZONTAL = 1;
@@ -110,7 +135,7 @@ if (Animated.proc) {
       damping: Animated.Adaptable<number>,
       mass: Animated.Adaptable<number>,
       stiffness: Animated.Adaptable<number>,
-      overshootClamping: Animated.Adaptable<number>,
+      overshootClamping: Animated.Adaptable<boolean>,
       restSpeedThreshold: Animated.Adaptable<number>,
       restDisplacementThreshold: Animated.Adaptable<number>,
       clock: Animated.Clock
@@ -174,6 +199,30 @@ if (Animated.proc) {
   };
 }
 
+function transformSpringConfigToAnimatedValues(
+  config: SpringConfig
+): AnimatedSpringConfig {
+  return {
+    damping: new Animated.Value(config.damping),
+    stiffness: new Animated.Value(config.stiffness),
+    mass: new Animated.Value(config.mass),
+    restDisplacementThreshold: new Animated.Value(
+      config.restDisplacementThreshold
+    ),
+    restSpeedThreshold: new Animated.Value(config.restSpeedThreshold),
+    overshootClamping: new Animated.Value(config.overshootClamping),
+  };
+}
+
+function transformTimingConfigToAnimatedValues(
+  config: TimingConfig
+): AnimatedTimingConfig {
+  return {
+    duration: new Animated.Value(config.duration),
+    easing: config.easing,
+  };
+}
+
 export default class Card extends React.Component<Props> {
   static defaultProps = {
     overlayEnabled: Platform.OS !== 'ios',
@@ -205,7 +254,9 @@ export default class Card extends React.Component<Props> {
       // If the style updates during render, setting the value here doesn't work
       // We need to defer it a bit so the animation starts properly
       requestAnimationFrame(() =>
-        this.isClosing.setValue(closing ? TRUE : FALSE)
+        requestAnimationFrame(() =>
+          this.isClosing.setValue(closing ? TRUE : FALSE)
+        )
       );
     }
   }
@@ -244,14 +295,34 @@ export default class Card extends React.Component<Props> {
     height: new Value(this.props.layout.height),
   };
 
+  openingSpecConfig =
+    this.props.transitionSpec.open.animation === 'timing'
+      ? transformTimingConfigToAnimatedValues(
+          this.props.transitionSpec.open.config
+        )
+      : transformSpringConfigToAnimatedValues(
+          this.props.transitionSpec.open.config
+        );
+
+  closingSpecConfig =
+    this.props.transitionSpec.close.animation === 'timing'
+      ? transformTimingConfigToAnimatedValues(
+          this.props.transitionSpec.close.config
+        )
+      : transformSpringConfigToAnimatedValues(
+          this.props.transitionSpec.close.config
+        );
+
   private distance = cond(
     eq(this.direction, DIRECTION_VERTICAL),
     this.layout.height,
     this.layout.width
   );
 
+  private gestureUntraversed = new Value(0);
   private gesture = new Value(0);
   private offset = new Value(0);
+  private velocityUntraversed = new Value(0);
   private velocity = new Value(0);
 
   private gestureState = new Value(0);
@@ -285,8 +356,8 @@ export default class Card extends React.Component<Props> {
   private runTransition = (isVisible: Binary | Animated.Node<number>) => {
     const { open: openingSpec, close: closingSpec } = this.props.transitionSpec;
 
-    return cond(eq(this.props.current, isVisible), NOOP, [
-      cond(clockRunning(this.clock), NOOP, [
+    return cond(eq(this.props.current, isVisible), NOOP_NODE, [
+      cond(clockRunning(this.clock), NOOP_NODE, [
         // Animation wasn't running before
         // Set the initial values and start the clock
         set(this.toValue, isVisible),
@@ -295,13 +366,17 @@ export default class Card extends React.Component<Props> {
         set(
           this.transitionVelocity,
           multiply(
-            cond(this.distance, divide(this.velocity, this.distance), 0),
+            cond(
+              this.distance,
+              divide(this.velocity, this.distance),
+              FALSE_NODE
+            ),
             -1
           )
         ),
-        set(this.frameTime, 0),
-        set(this.transitionState.time, 0),
-        set(this.transitionState.finished, FALSE),
+        set(this.frameTime, FALSE_NODE),
+        set(this.transitionState.time, FALSE_NODE),
+        set(this.transitionState.finished, FALSE_NODE),
         set(this.isVisible, isVisible),
         startClock(this.clock),
         call([this.isVisible], ([value]: ReadonlyArray<Binary>) => {
@@ -312,35 +387,49 @@ export default class Card extends React.Component<Props> {
         }),
       ]),
       cond(
-        eq(isVisible, 1),
+        eq(isVisible, TRUE_NODE),
         openingSpec.animation === 'spring'
           ? memoizedSpring(
               this.clock,
               { ...this.transitionState, velocity: this.transitionVelocity },
-              { ...openingSpec.config, toValue: this.toValue }
+              // @ts-ignore
+              {
+                ...(this.openingSpecConfig as AnimatedSpringConfig),
+                toValue: this.toValue,
+              }
             )
           : timing(
               this.clock,
               { ...this.transitionState, frameTime: this.frameTime },
-              { ...openingSpec.config, toValue: this.toValue }
+              {
+                ...(this.openingSpecConfig as AnimatedTimingConfig),
+                toValue: this.toValue,
+              }
             ),
         closingSpec.animation === 'spring'
           ? memoizedSpring(
               this.clock,
               { ...this.transitionState, velocity: this.transitionVelocity },
-              { ...closingSpec.config, toValue: this.toValue }
+              // @ts-ignore
+              {
+                ...(this.closingSpecConfig as AnimatedSpringConfig),
+                toValue: this.toValue,
+              }
             )
           : timing(
               this.clock,
               { ...this.transitionState, frameTime: this.frameTime },
-              { ...closingSpec.config, toValue: this.toValue }
+              {
+                ...(this.closingSpecConfig as AnimatedTimingConfig),
+                toValue: this.toValue,
+              }
             )
       ),
       cond(this.transitionState.finished, [
         // Reset values
-        set(this.isSwipeGesture, FALSE),
-        set(this.gesture, 0),
-        set(this.velocity, 0),
+        set(this.isSwipeGesture, FALSE_NODE),
+        set(this.gesture, FALSE_NODE),
+        set(this.velocity, FALSE_NODE),
         // When the animation finishes, stop the clock
         stopClock(this.clock),
         call([this.isVisible], ([value]: ReadonlyArray<Binary>) => {
@@ -364,34 +453,58 @@ export default class Card extends React.Component<Props> {
     multiply(this.velocity, SWIPE_VELOCITY_IMPACT)
   );
 
-  private exec = block([
+  private exec = [
+    set(
+      this.gesture,
+      multiply(
+        this.gestureUntraversed,
+        I18nManager.isRTL ? MINUS_ONE_NODE : TRUE_NODE
+      )
+    ),
+    set(
+      this.velocity,
+      multiply(
+        this.velocityUntraversed,
+        I18nManager.isRTL ? MINUS_ONE_NODE : TRUE_NODE
+      )
+    ),
     onChange(
       this.isClosing,
-      cond(this.isClosing, set(this.nextIsVisible, FALSE))
+      cond(this.isClosing, set(this.nextIsVisible, FALSE_NODE))
     ),
     onChange(
       this.nextIsVisible,
-      cond(neq(this.nextIsVisible, UNSET), [
+      cond(neq(this.nextIsVisible, UNSET_NODE), [
         // Stop any running animations
         cond(clockRunning(this.clock), [
           call([], this.handleTransitionEnd),
           stopClock(this.clock),
         ]),
-        set(this.gesture, 0),
+        set(this.gesture, FALSE_NODE),
         // Update the index to trigger the transition
         set(this.isVisible, this.nextIsVisible),
-        set(this.nextIsVisible, UNSET),
+        set(this.nextIsVisible, UNSET_NODE),
       ])
     ),
+  ];
+
+  private changeVisiblityExec = onChange(
+    this.isVisible,
+    call([this.isVisible], ([isVisible]) => (this.isVisibleValue = isVisible))
+  );
+
+  private execNoGesture = block([
+    ...this.exec,
+    this.runTransition(this.isVisible),
     onChange(
       this.isVisible,
       call([this.isVisible], ([isVisible]) => (this.isVisibleValue = isVisible))
     ),
+    this.changeVisiblityExec,
   ]);
 
-  private execNoGesture = this.runTransition(this.isVisible);
-
   private execWithGesture = block([
+    ...this.exec,
     onChange(
       this.isSwiping,
       call(
@@ -418,11 +531,11 @@ export default class Card extends React.Component<Props> {
     cond(
       eq(this.gestureState, GestureState.ACTIVE),
       [
-        cond(this.isSwiping, NOOP, [
+        cond(this.isSwiping, NOOP_NODE, [
           // We weren't dragging before, set it to true
-          set(this.isSwipeCancelled, FALSE),
-          set(this.isSwiping, TRUE),
-          set(this.isSwipeGesture, TRUE),
+          set(this.isSwipeCancelled, FALSE_NODE),
+          set(this.isSwiping, TRUE_NODE),
+          set(this.isSwipeGesture, TRUE_NODE),
           // Also update the drag offset to the last position
           set(this.offset, this.props.current),
         ]),
@@ -433,11 +546,15 @@ export default class Card extends React.Component<Props> {
             max(
               sub(
                 this.offset,
-                cond(this.distance, divide(this.gesture, this.distance), 1)
+                cond(
+                  this.distance,
+                  divide(this.gesture, this.distance),
+                  TRUE_NODE
+                )
               ),
-              0
+              FALSE_NODE
             ),
-            1
+            TRUE_NODE
           )
         ),
         // Stop animations while we're dragging
@@ -460,7 +577,7 @@ export default class Card extends React.Component<Props> {
           this.isSwipeCancelled,
           eq(this.gestureState, GestureState.CANCELLED)
         ),
-        set(this.isSwiping, FALSE),
+        set(this.isSwiping, FALSE_NODE),
         this.runTransition(
           cond(
             greaterThan(
@@ -469,26 +586,29 @@ export default class Card extends React.Component<Props> {
             ),
             cond(
               lessThan(
-                cond(eq(this.velocity, 0), this.gesture, this.velocity),
-                0
+                cond(
+                  eq(this.velocity, FALSE_NODE),
+                  this.gesture,
+                  this.velocity
+                ),
+                FALSE_NODE
               ),
-              TRUE,
-              FALSE
+              TRUE_NODE,
+              FALSE_NODE
             ),
             this.isVisible
           )
         ),
       ]
     ),
+    this.changeVisiblityExec,
   ]);
 
   private handleGestureEventHorizontal = Animated.event([
     {
       nativeEvent: {
-        translationX: (x: Animated.Adaptable<number>) =>
-          set(this.gesture, multiply(x, I18nManager.isRTL ? -1 : 1)),
-        velocityX: (x: Animated.Adaptable<number>) =>
-          set(this.velocity, multiply(x, I18nManager.isRTL ? -1 : 1)),
+        translationX: this.gestureUntraversed,
+        velocityX: this.velocityUntraversed,
         state: this.gestureState,
       },
     },
@@ -621,7 +741,6 @@ export default class Card extends React.Component<Props> {
     return (
       <StackGestureContext.Provider value={this.gestureRef}>
         <View pointerEvents="box-none" {...rest}>
-          <Animated.Code exec={this.exec} />
           <Animated.Code
             key={gestureEnabled ? 'gesture-code' : 'no-gesture-code'}
             exec={gestureEnabled ? this.execWithGesture : this.execNoGesture}

packages/stack/src/views/TouchableItem.tsx

@@ -52,6 +52,7 @@ export default class TouchableItem extends React.Component<Props> {
       return (
         <TouchableNativeFeedback
           {...rest}
+          useForeground={TouchableNativeFeedback.canUseNativeForeground()}
           background={TouchableNativeFeedback.Ripple(pressColor, borderless)}
         >
           <View style={style}>{React.Children.only(children)}</View>