Skip to content

Commit

Permalink
chore: sync latest stack
Browse files Browse the repository at this point in the history
  • Loading branch information
satya164 committed Apr 22, 2020
1 parent b4691d7 commit 90eff6a
Show file tree
Hide file tree
Showing 8 changed files with 170 additions and 130 deletions.
2 changes: 1 addition & 1 deletion packages/stack/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@
"devDependencies": {
"@react-native-community/bob": "^0.10.0",
"@react-native-community/masked-view": "^0.1.7",
"@react-navigation/stack": "^5.2.11",
"@react-navigation/stack": "^5.2.12",
"@types/color": "^3.0.1",
"@types/react": "^16.9.23",
"@types/react-native": "^0.61.22",
Expand Down
93 changes: 52 additions & 41 deletions packages/stack/scripts/stack.patch
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
diff -Naur ../../node_modules/@react-navigation/stack/src/index.tsx src/vendor/index.tsx
--- ../../node_modules/@react-navigation/stack/src/index.tsx 2020-04-18 01:38:52.000000000 +0200
+++ src/vendor/index.tsx 2020-04-18 01:41:48.000000000 +0200
--- ../../node_modules/@react-navigation/stack/src/index.tsx 2020-04-22 16:34:01.000000000 +0200
+++ src/vendor/index.tsx 2020-04-22 16:34:39.000000000 +0200
@@ -3,11 +3,6 @@
import * as TransitionSpecs from './TransitionConfigs/TransitionSpecs';
import * as TransitionPresets from './TransitionConfigs/TransitionPresets';
Expand All @@ -27,7 +27,7 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/index.tsx src/vendor/i
StackHeaderLeftButtonProps,
StackHeaderTitleProps,
diff -Naur ../../node_modules/@react-navigation/stack/src/navigators/createStackNavigator.tsx src/vendor/navigators/createStackNavigator.tsx
--- ../../node_modules/@react-navigation/stack/src/navigators/createStackNavigator.tsx 2020-04-18 01:38:52.000000000 +0200
--- ../../node_modules/@react-navigation/stack/src/navigators/createStackNavigator.tsx 2020-04-22 16:34:01.000000000 +0200
+++ src/vendor/navigators/createStackNavigator.tsx 1970-01-01 01:00:00.000000000 +0100
@@ -1,96 +0,0 @@
-import * as React from 'react';
Expand Down Expand Up @@ -127,8 +127,8 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/navigators/createStack
- typeof StackNavigator
->(StackNavigator);
diff -Naur ../../node_modules/@react-navigation/stack/src/types.tsx src/vendor/types.tsx
--- ../../node_modules/@react-navigation/stack/src/types.tsx 2020-04-18 01:38:52.000000000 +0200
+++ src/vendor/types.tsx 2020-04-18 01:39:36.000000000 +0200
--- ../../node_modules/@react-navigation/stack/src/types.tsx 2020-04-22 16:34:01.000000000 +0200
+++ src/vendor/types.tsx 2020-04-22 16:34:39.000000000 +0200
@@ -8,14 +8,28 @@
} from 'react-native';
import { EdgeInsets } from 'react-native-safe-area-context';
Expand Down Expand Up @@ -254,8 +254,8 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/types.tsx src/vendor/t

export type StackNavigationConfig = {
diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/Header.tsx src/vendor/views/Header/Header.tsx
--- ../../node_modules/@react-navigation/stack/src/views/Header/Header.tsx 2020-04-18 01:38:52.000000000 +0200
+++ src/vendor/views/Header/Header.tsx 2020-04-18 01:39:36.000000000 +0200
--- ../../node_modules/@react-navigation/stack/src/views/Header/Header.tsx 2020-04-22 16:34:01.000000000 +0200
+++ src/vendor/views/Header/Header.tsx 2020-04-22 16:34:39.000000000 +0200
@@ -1,12 +1,14 @@
import * as React from 'react';
-import { StackActions } from '@react-navigation/native';
Expand Down Expand Up @@ -335,8 +335,8 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/Header.ts
+
+export default Header;
diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderBackButton.tsx src/vendor/views/Header/HeaderBackButton.tsx
--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderBackButton.tsx 2020-04-18 01:38:52.000000000 +0200
+++ src/vendor/views/Header/HeaderBackButton.tsx 2020-04-18 01:39:36.000000000 +0200
--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderBackButton.tsx 2020-04-22 16:34:01.000000000 +0200
+++ src/vendor/views/Header/HeaderBackButton.tsx 2020-04-22 16:34:39.000000000 +0200
@@ -8,9 +8,9 @@
StyleSheet,
LayoutChangeEvent,
Expand All @@ -349,8 +349,8 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderBac

type Props = StackHeaderLeftButtonProps;
diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderBackground.tsx src/vendor/views/Header/HeaderBackground.tsx
--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderBackground.tsx 2020-04-18 01:38:52.000000000 +0200
+++ src/vendor/views/Header/HeaderBackground.tsx 2020-04-18 01:39:36.000000000 +0200
--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderBackground.tsx 2020-04-22 16:34:01.000000000 +0200
+++ src/vendor/views/Header/HeaderBackground.tsx 2020-04-22 16:34:39.000000000 +0200
@@ -1,6 +1,6 @@
import * as React from 'react';
import { Animated, StyleSheet, Platform, ViewProps } from 'react-native';
Expand All @@ -360,8 +360,8 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderBac
type Props = ViewProps & {
children?: React.ReactNode;
diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderContainer.tsx src/vendor/views/Header/HeaderContainer.tsx
--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderContainer.tsx 2020-04-18 01:38:52.000000000 +0200
+++ src/vendor/views/Header/HeaderContainer.tsx 2020-04-18 01:39:36.000000000 +0200
--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderContainer.tsx 2020-04-22 16:34:01.000000000 +0200
+++ src/vendor/views/Header/HeaderContainer.tsx 2020-04-22 16:34:39.000000000 +0200
@@ -1,11 +1,6 @@
import * as React from 'react';
import { View, StyleSheet, StyleProp, ViewStyle } from 'react-native';
Expand Down Expand Up @@ -413,8 +413,8 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderCon
);
})}
diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderSegment.tsx src/vendor/views/Header/HeaderSegment.tsx
--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderSegment.tsx 2020-04-18 01:38:52.000000000 +0200
+++ src/vendor/views/Header/HeaderSegment.tsx 2020-04-18 01:39:36.000000000 +0200
--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderSegment.tsx 2020-04-22 16:34:01.000000000 +0200
+++ src/vendor/views/Header/HeaderSegment.tsx 2020-04-22 16:34:39.000000000 +0200
@@ -8,7 +8,7 @@
ViewStyle,
} from 'react-native';
Expand All @@ -434,8 +434,8 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderSeg
};

diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderTitle.tsx src/vendor/views/Header/HeaderTitle.tsx
--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderTitle.tsx 2020-04-18 01:38:52.000000000 +0200
+++ src/vendor/views/Header/HeaderTitle.tsx 2020-04-18 01:39:36.000000000 +0200
--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderTitle.tsx 2020-04-22 16:34:01.000000000 +0200
+++ src/vendor/views/Header/HeaderTitle.tsx 2020-04-22 16:34:39.000000000 +0200
@@ -1,6 +1,6 @@
import * as React from 'react';
import { Animated, StyleSheet, Platform } from 'react-native';
Expand All @@ -445,8 +445,8 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderTit
type Props = React.ComponentProps<typeof Animated.Text> & {
tintColor?: string;
diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/Card.tsx src/vendor/views/Stack/Card.tsx
--- ../../node_modules/@react-navigation/stack/src/views/Stack/Card.tsx 2020-04-18 01:38:52.000000000 +0200
+++ src/vendor/views/Stack/Card.tsx 2020-04-18 01:39:36.000000000 +0200
--- ../../node_modules/@react-navigation/stack/src/views/Stack/Card.tsx 2020-04-22 16:34:01.000000000 +0200
+++ src/vendor/views/Stack/Card.tsx 2020-04-22 16:34:39.000000000 +0200
@@ -138,7 +138,7 @@

private interactionHandle: number | undefined;
Expand All @@ -457,8 +457,8 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/Card.tsx s
private animate = ({
closing,
diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/CardContainer.tsx src/vendor/views/Stack/CardContainer.tsx
--- ../../node_modules/@react-navigation/stack/src/views/Stack/CardContainer.tsx 2020-04-18 01:38:52.000000000 +0200
+++ src/vendor/views/Stack/CardContainer.tsx 2020-04-18 01:39:36.000000000 +0200
--- ../../node_modules/@react-navigation/stack/src/views/Stack/CardContainer.tsx 2020-04-22 16:34:01.000000000 +0200
+++ src/vendor/views/Stack/CardContainer.tsx 2020-04-22 16:34:39.000000000 +0200
@@ -1,10 +1,16 @@
import * as React from 'react';
import { Animated, View, StyleSheet, StyleProp, ViewStyle } from 'react-native';
Expand Down Expand Up @@ -488,20 +488,18 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/CardContai
>
<View style={styles.container}>
diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/CardStack.tsx src/vendor/views/Stack/CardStack.tsx
--- ../../node_modules/@react-navigation/stack/src/views/Stack/CardStack.tsx 2020-04-18 01:38:52.000000000 +0200
+++ src/vendor/views/Stack/CardStack.tsx 2020-04-18 01:39:36.000000000 +0200
@@ -9,9 +9,8 @@
ViewProps,
--- ../../node_modules/@react-navigation/stack/src/views/Stack/CardStack.tsx 2020-04-22 16:34:01.000000000 +0200
+++ src/vendor/views/Stack/CardStack.tsx 2020-04-22 16:35:12.000000000 +0200
@@ -7,7 +7,7 @@
Platform,
} from 'react-native';
import { EdgeInsets } from 'react-native-safe-area-context';
-// eslint-disable-next-line import/no-unresolved
import { ScreenContainer, Screen, screensEnabled } from 'react-native-screens'; // Import with * as to prevent getters being called
-import { Route, StackNavigationState } from '@react-navigation/native';
+import { NavigationState as StackNavigationState } from 'react-navigation';

import { MaybeScreenContainer, MaybeScreen } from '../Screens';
import { getDefaultHeaderHeight } from '../Header/HeaderSegment';
import { Props as HeaderContainerProps } from '../Header/HeaderContainer';
@@ -24,6 +23,7 @@
@@ -21,6 +21,7 @@
import { forNoAnimation as forNoAnimationCard } from '../../TransitionConfigs/CardStyleInterpolators';
import getDistanceForDirection from '../../utils/getDistanceForDirection';
import {
Expand All @@ -510,38 +508,39 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/CardStack.
StackHeaderMode,
StackCardMode,
diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/StackView.tsx src/vendor/views/Stack/StackView.tsx
--- ../../node_modules/@react-navigation/stack/src/views/Stack/StackView.tsx 2020-04-18 01:38:52.000000000 +0200
+++ src/vendor/views/Stack/StackView.tsx 2020-04-18 01:44:22.000000000 +0200
@@ -4,9 +4,9 @@
--- ../../node_modules/@react-navigation/stack/src/views/Stack/StackView.tsx 2020-04-22 16:34:01.000000000 +0200
+++ src/vendor/views/Stack/StackView.tsx 2020-04-22 16:38:12.000000000 +0200
@@ -4,9 +4,10 @@
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import {
StackActions,
- StackNavigationState,
- Route,
-} from '@react-navigation/native';
+ NavigationState as StackNavigationState,
+ NavigationActions,
+ SceneView,
+} from 'react-navigation';

import CardStack from './CardStack';
import KeyboardManager from '../KeyboardManager';
@@ -15,6 +15,7 @@
@@ -15,6 +16,7 @@
} from '../Header/HeaderContainer';
import SafeAreaProviderCompat from '../SafeAreaProviderCompat';
import {
+ Route,
StackNavigationHelpers,
StackNavigationConfig,
StackDescriptorMap,
@@ -24,6 +25,7 @@
@@ -24,6 +26,7 @@
state: StackNavigationState;
navigation: StackNavigationHelpers;
descriptors: StackDescriptorMap;
+ screenProps: unknown;
};

type State = {
@@ -292,7 +294,9 @@
@@ -292,7 +295,9 @@
return false;
}

Expand All @@ -552,7 +551,7 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/StackView.
}

return false;
@@ -320,14 +324,37 @@
@@ -320,23 +325,44 @@
return null;
}

Expand Down Expand Up @@ -587,11 +586,23 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/StackView.
+ };
+
private handleOpenRoute = ({ route }: { route: Route<string> }) => {
const { state, navigation } = this.props;

- if (
- state.routeNames.includes(route.name) &&
- !state.routes.some((r) => r.key === route.key)
- ) {
+ this.handleTransitionComplete();
this.setState((state) => ({
routes: state.replacingRouteKeys.length
? state.routes.filter((r) => !state.replacingRouteKeys.includes(r.key))
@@ -349,12 +376,11 @@
+
+ if (!state.routes.some((r) => r.key === route.key)) {
// If route isn't present in current state, assume that a close animation was cancelled
// So we need to add this route back to the state
- navigation.navigate(route);
+ navigation.dispatch(NavigationActions.navigate(route));
} else {
this.setState((state) => ({
routes: state.replacingRouteKeys.length
@@ -362,12 +388,11 @@
// If a route exists in state, trigger a pop
// This will happen in when the route was closed from the card component
// e.g. When the close animation triggered from a gesture ends
Expand All @@ -608,7 +619,7 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/StackView.
// We need to clean up any state tracking the route and pop it immediately
this.setState((state) => ({
routes: state.routes.filter((r) => r.key !== route.key),
@@ -371,22 +397,24 @@
@@ -384,22 +409,24 @@
private handleTransitionStart = (
{ route }: { route: Route<string> },
closing: boolean
Expand Down
15 changes: 12 additions & 3 deletions packages/stack/src/vendor/views/MaskedView.native.tsx
Original file line number Diff line number Diff line change
@@ -1,17 +1,26 @@
import * as React from 'react';
import { UIManager } from 'react-native';
import RNCMaskedView from '@react-native-community/masked-view';

type Props = React.ComponentProps<typeof RNCMaskedView> & {
type MaskedViewType = typeof import('@react-native-community/masked-view').default;

type Props = React.ComponentProps<MaskedViewType> & {
children: React.ReactElement;
};

let RNCMaskedView: MaskedViewType | undefined;

try {
RNCMaskedView = require('@react-native-community/masked-view').default;
} catch (e) {
// Ignore
}

const isMaskedViewAvailable =
// @ts-ignore
UIManager.getViewManagerConfig('RNCMaskedView') != null;

export default function MaskedView({ children, ...rest }: Props) {
if (isMaskedViewAvailable) {
if (isMaskedViewAvailable && RNCMaskedView) {
return <RNCMaskedView {...rest}>{children}</RNCMaskedView>;
}

Expand Down
71 changes: 71 additions & 0 deletions packages/stack/src/vendor/views/Screens.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
import * as React from 'react';
import { Animated, View, Platform, ViewProps } from 'react-native';

let Screens: typeof import('react-native-screens') | undefined;

try {
Screens = require('react-native-screens');
} catch (e) {
// Ignore
}

// The web implementation in react-native-screens seems buggy.
// The view doesn't become visible after coming back in some cases.
// So we use our custom implementation.
class WebScreen extends React.Component<
ViewProps & {
active: number;
children: React.ReactNode;
}
> {
render() {
const { active, style, ...rest } = this.props;

return (
<View
// @ts-ignore
hidden={!active}
style={[style, { display: active ? 'flex' : 'none' }]}
{...rest}
/>
);
}
}

const AnimatedWebScreen = Animated.createAnimatedComponent(WebScreen);

export const MaybeScreenContainer = ({
enabled,
...rest
}: ViewProps & {
enabled: boolean;
children: React.ReactNode;
}) => {
if (enabled && Platform.OS !== 'web' && Screens && Screens.screensEnabled()) {
return <Screens.ScreenContainer {...rest} />;
}

return <View {...rest} />;
};

export const MaybeScreen = ({
enabled,
active,
...rest
}: ViewProps & {
enabled: boolean;
active: number | Animated.AnimatedInterpolation;
children: React.ReactNode;
}) => {
if (enabled && Platform.OS === 'web') {
// @ts-ignore
return <AnimatedWebScreen active={active} {...rest} />;
}

if (enabled && Screens && Screens.screensEnabled()) {
// @ts-ignore
return <Screens.Screen active={active} {...rest} />;
}

return <View {...rest} />;
};
2 changes: 1 addition & 1 deletion packages/stack/src/vendor/views/Stack/Card.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -286,7 +286,7 @@ export default class Card extends React.Component<Props> {
getInvertedMultiplier(gestureDirection) >
distance / 2
? velocity !== 0 || translation !== 0
: false;
: this.props.closing;

this.animate({ closing, velocity });

Expand Down

0 comments on commit 90eff6a

Please sign in to comment.