chore: publish

- @react-navigation/example@5.0.0-alpha.11 - @react-navigation/stack@5.0.0-alpha.23
fix: fix vertical gesture
2026-01-13 22:42:25 +08:00 · 2019-10-04 00:54:40 +02:00 · 2019-10-04 00:53:26 +02:00 · 2019-10-04 00:12:56 +02:00 · 2019-10-04 00:01:45 +02:00
12 changed files with 288 additions and 114 deletions
--- a/packages/example/CHANGELOG.md
+++ b/packages/example/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.11](https://github.com/satya164/navigation-ex/compare/@react-navigation/example@5.0.0-alpha.10...@react-navigation/example@5.0.0-alpha.11) (2019-10-03)
+
+**Note:** Version bump only for package @react-navigation/example
+
+
+
+
+
 # [5.0.0-alpha.10](https://github.com/satya164/navigation-ex/compare/@react-navigation/example@5.0.0-alpha.9...@react-navigation/example@5.0.0-alpha.10) (2019-10-03)

 **Note:** Version bump only for package @react-navigation/example
--- a/packages/example/package.json
+++ b/packages/example/package.json
@@ -1,7 +1,7 @@
 {
  "name": "@react-navigation/example",
  "description": "Demo app to showcase various functionality of React Navigation",
-  "version": "5.0.0-alpha.10",
+  "version": "5.0.0-alpha.11",
  "private": true,
  "workspaces": {
    "nohoist": [
--- a/packages/example/src/Screens/AuthFlow.tsx
+++ b/packages/example/src/Screens/AuthFlow.tsx
@@ -14,11 +14,13 @@ type AuthStackParams = {
  'sign-in': undefined;
 };

-const SplashScreen = () => (
-  <View style={styles.content}>
-    <ActivityIndicator />
-  </View>
-);
+const SplashScreen = () => {
+  return (
+    <View style={styles.content}>
+      <ActivityIndicator />
+    </View>
+  );
+};

 const SignInScreen = ({
  setUserToken,
--- a/packages/example/src/Screens/CompatAPI.tsx
+++ b/packages/example/src/Screens/CompatAPI.tsx
@@ -19,27 +19,29 @@ type CompatStackParams = {

 const ArticleScreen: CompatScreenType<
  StackNavigationProp<CompatStackParams, 'Article'>
-> = ({ navigation }) => (
-  <React.Fragment>
-    <View style={styles.buttons}>
-      <Button
-        mode="contained"
-        onPress={() => navigation.push('Album')}
-        style={styles.button}
-      >
-        Push album
-      </Button>
-      <Button
-        mode="outlined"
-        onPress={() => navigation.goBack()}
-        style={styles.button}
-      >
-        Go back
-      </Button>
-    </View>
-    <Article author={{ name: navigation.getParam('author') }} />
-  </React.Fragment>
-);
+> = ({ navigation }) => {
+  return (
+    <React.Fragment>
+      <View style={styles.buttons}>
+        <Button
+          mode="contained"
+          onPress={() => navigation.push('Album')}
+          style={styles.button}
+        >
+          Push album
+        </Button>
+        <Button
+          mode="outlined"
+          onPress={() => navigation.goBack()}
+          style={styles.button}
+        >
+          Go back
+        </Button>
+      </View>
+      <Article author={{ name: navigation.getParam('author') }} />
+    </React.Fragment>
+  );
+};

 ArticleScreen.navigationOptions = ({ navigation }) => ({
  title: `Article by ${navigation.getParam('author')}`,
@@ -47,27 +49,29 @@ ArticleScreen.navigationOptions = ({ navigation }) => ({

 const AlbumsScreen: CompatScreenType<
  StackNavigationProp<CompatStackParams>
-> = ({ navigation }) => (
-  <React.Fragment>
-    <View style={styles.buttons}>
-      <Button
-        mode="contained"
-        onPress={() => navigation.push('Article', { author: 'Babel fish' })}
-        style={styles.button}
-      >
-        Push article
-      </Button>
-      <Button
-        mode="outlined"
-        onPress={() => navigation.goBack()}
-        style={styles.button}
-      >
-        Go back
-      </Button>
-    </View>
-    <Albums />
-  </React.Fragment>
-);
+> = ({ navigation }) => {
+  return (
+    <React.Fragment>
+      <View style={styles.buttons}>
+        <Button
+          mode="contained"
+          onPress={() => navigation.push('Article', { author: 'Babel fish' })}
+          style={styles.button}
+        >
+          Push article
+        </Button>
+        <Button
+          mode="outlined"
+          onPress={() => navigation.goBack()}
+          style={styles.button}
+        >
+          Go back
+        </Button>
+      </View>
+      <Albums />
+    </React.Fragment>
+  );
+};

 const CompatStack = createCompatNavigatorFactory(createStackNavigator)<
  StackNavigationProp<CompatStackParams>
--- a/packages/example/src/Screens/ModalPresentationStack.tsx
+++ b/packages/example/src/Screens/ModalPresentationStack.tsx
@@ -0,0 +1,131 @@
+import * as React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { Button } from 'react-native-paper';
+import { useSafeArea } from 'react-native-safe-area-context';
+import { RouteProp, ParamListBase } from '@react-navigation/core';
+import {
+  createStackNavigator,
+  StackNavigationProp,
+  TransitionPresets,
+} from '@react-navigation/stack';
+import Article from '../Shared/Article';
+import Albums from '../Shared/Albums';
+
+type SimpleStackParams = {
+  article: { author: string };
+  album: undefined;
+};
+
+type SimpleStackNavigation = StackNavigationProp<SimpleStackParams>;
+
+const ArticleScreen = ({
+  navigation,
+  route,
+}: {
+  navigation: SimpleStackNavigation;
+  route: RouteProp<SimpleStackParams, 'article'>;
+}) => {
+  const insets = useSafeArea();
+
+  return (
+    <React.Fragment>
+      <View style={[styles.buttons, { marginTop: insets.top }]}>
+        <Button
+          mode="contained"
+          onPress={() => navigation.push('album')}
+          style={styles.button}
+        >
+          Push album
+        </Button>
+        <Button
+          mode="outlined"
+          onPress={() => navigation.goBack()}
+          style={styles.button}
+        >
+          Go back
+        </Button>
+      </View>
+      <Article author={{ name: route.params.author }} />
+    </React.Fragment>
+  );
+};
+
+const AlbumsScreen = ({
+  navigation,
+}: {
+  navigation: SimpleStackNavigation;
+}) => {
+  const insets = useSafeArea();
+
+  return (
+    <React.Fragment>
+      <View style={[styles.buttons, { marginTop: insets.top }]}>
+        <Button
+          mode="contained"
+          onPress={() => navigation.push('article', { author: 'Babel fish' })}
+          style={styles.button}
+        >
+          Push article
+        </Button>
+        <Button
+          mode="outlined"
+          onPress={() => navigation.goBack()}
+          style={styles.button}
+        >
+          Go back
+        </Button>
+      </View>
+      <Albums />
+    </React.Fragment>
+  );
+};
+
+const ModalPresentationStack = createStackNavigator<SimpleStackParams>();
+
+type Props = {
+  options?: React.ComponentProps<typeof ModalPresentationStack.Navigator>;
+  navigation: StackNavigationProp<ParamListBase>;
+};
+
+export default function SimpleStackScreen({ navigation, options }: Props) {
+  navigation.setOptions({
+    header: null,
+  });
+
+  return (
+    <ModalPresentationStack.Navigator
+      mode="modal"
+      headerMode="none"
+      screenOptions={{
+        ...TransitionPresets.ModalPresentationIOS,
+        cardOverlayEnabled: true,
+        gestureEnabled: true,
+      }}
+      {...options}
+    >
+      <ModalPresentationStack.Screen
+        name="article"
+        component={ArticleScreen}
+        options={({ route }) => ({
+          title: `Article by ${route.params.author}`,
+        })}
+        initialParams={{ author: 'Gandalf' }}
+      />
+      <ModalPresentationStack.Screen
+        name="album"
+        component={AlbumsScreen}
+        options={{ title: 'Album' }}
+      />
+    </ModalPresentationStack.Navigator>
+  );
+}
+
+const styles = StyleSheet.create({
+  buttons: {
+    flexDirection: 'row',
+    padding: 8,
+  },
+  button: {
+    margin: 8,
+  },
+});
--- a/packages/example/src/Screens/SimpleStack.tsx
+++ b/packages/example/src/Screens/SimpleStack.tsx
@@ -22,53 +22,57 @@ const ArticleScreen = ({
 }: {
  navigation: SimpleStackNavigation;
  route: RouteProp<SimpleStackParams, 'article'>;
-}) => (
-  <React.Fragment>
-    <View style={styles.buttons}>
-      <Button
-        mode="contained"
-        onPress={() => navigation.push('album')}
-        style={styles.button}
-      >
-        Push album
-      </Button>
-      <Button
-        mode="outlined"
-        onPress={() => navigation.goBack()}
-        style={styles.button}
-      >
-        Go back
-      </Button>
-    </View>
-    <Article author={{ name: route.params.author }} />
-  </React.Fragment>
-);
+}) => {
+  return (
+    <React.Fragment>
+      <View style={styles.buttons}>
+        <Button
+          mode="contained"
+          onPress={() => navigation.push('album')}
+          style={styles.button}
+        >
+          Push album
+        </Button>
+        <Button
+          mode="outlined"
+          onPress={() => navigation.goBack()}
+          style={styles.button}
+        >
+          Go back
+        </Button>
+      </View>
+      <Article author={{ name: route.params.author }} />
+    </React.Fragment>
+  );
+};

 const AlbumsScreen = ({
  navigation,
 }: {
  navigation: SimpleStackNavigation;
-}) => (
-  <React.Fragment>
-    <View style={styles.buttons}>
-      <Button
-        mode="contained"
-        onPress={() => navigation.push('article', { author: 'Babel fish' })}
-        style={styles.button}
-      >
-        Push article
-      </Button>
-      <Button
-        mode="outlined"
-        onPress={() => navigation.goBack()}
-        style={styles.button}
-      >
-        Go back
-      </Button>
-    </View>
-    <Albums />
-  </React.Fragment>
-);
+}) => {
+  return (
+    <React.Fragment>
+      <View style={styles.buttons}>
+        <Button
+          mode="contained"
+          onPress={() => navigation.push('article', { author: 'Babel fish' })}
+          style={styles.button}
+        >
+          Push article
+        </Button>
+        <Button
+          mode="outlined"
+          onPress={() => navigation.goBack()}
+          style={styles.button}
+        >
+          Go back
+        </Button>
+      </View>
+      <Albums />
+    </React.Fragment>
+  );
+};

 const SimpleStack = createStackNavigator<SimpleStackParams>();

--- a/packages/example/src/index.tsx
+++ b/packages/example/src/index.tsx
@@ -22,8 +22,9 @@ import {
  StackNavigationProp,
 } from '@react-navigation/stack';

-import SimpleStackScreen from './Screens/SimpleStack';
-import BottomTabsScreen from './Screens/BottomTabs';
+import SimpleStack from './Screens/SimpleStack';
+import ModalPresentationStack from './Screens/ModalPresentationStack';
+import BottomTabs from './Screens/BottomTabs';
 import MaterialTopTabsScreen from './Screens/MaterialTopTabs';
 import MaterialBottomTabs from './Screens/MaterialBottomTabs';
 import AuthFlow from './Screens/AuthFlow';
@@ -42,21 +43,25 @@ type RootStackParamList = {
 };

 const SCREENS = {
-  'simple-stack': { title: 'Simple Stack', component: SimpleStackScreen },
-  'bottom-tabs': { title: 'Bottom Tabs', component: BottomTabsScreen },
-  'material-top-tabs': {
+  SimpleStack: { title: 'Simple Stack', component: SimpleStack },
+  ModalPresentationStack: {
+    title: 'Modal Presentation Stack',
+    component: ModalPresentationStack,
+  },
+  BottomTabs: { title: 'Bottom Tabs', component: BottomTabs },
+  MaterialTopTabs: {
    title: 'Material Top Tabs',
    component: MaterialTopTabsScreen,
  },
-  'material-bottom-tabs': {
+  MaterialBottomTabs: {
    title: 'Material Bottom Tabs',
    component: MaterialBottomTabs,
  },
-  'auth-flow': {
+  AuthFlow: {
    title: 'Auth Flow',
    component: AuthFlow,
  },
-  'compat-api': {
+  CompatAPI: {
    title: 'Compat Layer',
    component: CompatAPI,
  },
--- a/packages/stack/CHANGELOG.md
+++ b/packages/stack/CHANGELOG.md
@@ -3,6 +3,18 @@
 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.23](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.22...@react-navigation/stack@5.0.0-alpha.23) (2019-10-03)
+
+
+### Bug Fixes
+
+* fix passing insets to interpolator ([6f5f4b7](https://github.com/react-navigation/navigation-ex/commit/6f5f4b7))
+* fix vertical gesture ([a7c4a4d](https://github.com/react-navigation/navigation-ex/commit/a7c4a4d))
+
+
+
+
+
 # [5.0.0-alpha.22](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.21...@react-navigation/stack@5.0.0-alpha.22) (2019-10-03)

 **Note:** Version bump only for package @react-navigation/stack
--- a/packages/stack/package.json
+++ b/packages/stack/package.json
@@ -10,7 +10,7 @@
    "android",
    "stack"
  ],
-  "version": "5.0.0-alpha.22",
+  "version": "5.0.0-alpha.23",
  "license": "MIT",
  "repository": {
    "type": "git",
--- a/packages/stack/src/views/Stack/Card.tsx
+++ b/packages/stack/src/views/Stack/Card.tsx
@@ -14,6 +14,10 @@ import {
  PanGestureHandler,
  State as GestureState,
 } from 'react-native-gesture-handler';
+import { EdgeInsets } from 'react-native-safe-area-context';
+import PointerEventsView from './PointerEventsView';
+import memoize from '../../utils/memoize';
+import StackGestureContext from '../../utils/StackGestureContext';
 import {
  TransitionSpec,
  StackCardStyleInterpolator,
@@ -21,9 +25,6 @@ import {
  SpringConfig,
  TimingConfig,
 } from '../../types';
-import memoize from '../../utils/memoize';
-import StackGestureContext from '../../utils/StackGestureContext';
-import PointerEventsView from './PointerEventsView';

 type Props = ViewProps & {
  index: number;
@@ -33,6 +34,7 @@ type Props = ViewProps & {
  next?: Animated.Node<number>;
  current: Animated.Value<number>;
  layout: Layout;
+  insets: EdgeInsets;
  gestureDirection: 'horizontal' | 'vertical';
  onOpen: (isFinished: boolean) => void;
  onClose: (isFinished: boolean) => void;
@@ -368,7 +370,8 @@ export default class Card extends React.Component<Props> {
      this.props.index,
      this.props.current,
      this.props.next,
-      this.props.layout
+      this.props.layout,
+      this.props.insets
    );
  };

@@ -645,8 +648,8 @@ export default class Card extends React.Component<Props> {
  private handleGestureEventVertical = Animated.event([
    {
      nativeEvent: {
-        translationY: this.gesture,
-        velocityY: this.velocity,
+        translationY: this.gestureUntraversed,
+        velocityY: this.velocityUntraversed,
        state: this.gestureState,
      },
    },
@@ -661,7 +664,8 @@ export default class Card extends React.Component<Props> {
      index: number,
      current: Animated.Node<number>,
      next: Animated.Node<number> | undefined,
-      layout: Layout
+      layout: Layout,
+      insets: EdgeInsets
    ) =>
      styleInterpolator({
        index,
@@ -671,12 +675,7 @@ export default class Card extends React.Component<Props> {
        layouts: {
          screen: layout,
        },
-        insets: {
-          top: 0,
-          right: 0,
-          bottom: 0,
-          left: 0,
-        },
+        insets,
      })
  );

@@ -689,7 +688,8 @@ export default class Card extends React.Component<Props> {
    this.props.index,
    this.props.current,
    this.props.next,
-    this.props.layout
+    this.props.layout,
+    this.props.insets
  );

  private gestureActivationCriteria() {
@@ -739,6 +739,7 @@ export default class Card extends React.Component<Props> {
      current,
      next,
      layout,
+      insets,
      overlayEnabled,
      shadowEnabled,
      gestureEnabled,
@@ -755,7 +756,8 @@ export default class Card extends React.Component<Props> {
        index,
        current,
        next,
-        layout
+        layout,
+        insets
      );
    }

--- a/packages/stack/src/views/Stack/Stack.tsx
+++ b/packages/stack/src/views/Stack/Stack.tsx
@@ -292,6 +292,7 @@ export default class Stack extends React.Component<Props, State> {
  render() {
    const {
      mode,
+      insets,
      descriptors,
      state,
      navigation,
@@ -382,6 +383,7 @@ export default class Stack extends React.Component<Props, State> {
                  focused={focused}
                  closing={closingRoutes.includes(route.key)}
                  layout={layout}
+                  insets={insets}
                  current={current}
                  scene={scene}
                  previousScene={scenes[index - 1]}
--- a/packages/stack/src/views/Stack/StackItem.tsx
+++ b/packages/stack/src/views/Stack/StackItem.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { View, StyleSheet, StyleProp, ViewStyle } from 'react-native';
 import Animated from 'react-native-reanimated';
+import { EdgeInsets } from 'react-native-safe-area-context';
 import { StackNavigationState } from '@react-navigation/routers';
 import { Route } from '@react-navigation/core';
 import { Props as HeaderContainerProps } from '../Header/HeaderContainer';
@@ -19,6 +20,7 @@ type Props = TransitionPreset & {
  focused: boolean;
  closing: boolean;
  layout: Layout;
+  insets: EdgeInsets;
  current: Animated.Value<number>;
  previousScene?: Scene<Route<string>>;
  scene: Scene<Route<string>>;
@@ -93,6 +95,7 @@ export default class StackItem extends React.PureComponent<Props> {
    const {
      index,
      layout,
+      insets,
      active,
      focused,
      closing,
@@ -128,6 +131,7 @@ export default class StackItem extends React.PureComponent<Props> {
        transparent={cardTransparent}
        gestureDirection={gestureDirection}
        layout={layout}
+        insets={insets}
        current={current}
        next={scene.progress.next}
        closing={closing}
Author	SHA1	Message	Date
satyajit.happy	d8394cf919	chore: publish - @react-navigation/example@5.0.0-alpha.11 - @react-navigation/stack@5.0.0-alpha.23	2019-10-04 00:54:40 +02:00
satyajit.happy	a7c4a4d7cd	fix: fix vertical gesture	2019-10-04 00:53:26 +02:00
satyajit.happy	282b465ae1	chore: add example for modal presentation	2019-10-04 00:12:56 +02:00
satyajit.happy	6f5f4b7d35	fix: fix passing insets to interpolator	2019-10-04 00:01:45 +02:00