Files
react-navigation-scrollable…/patches/@react-navigation+stack+6.0.7.patch
2021-09-14 20:17:35 +01:00

250 lines
10 KiB
Diff

diff --git a/node_modules/@react-navigation/stack/lib/typescript/src/index.d.ts b/node_modules/@react-navigation/stack/lib/typescript/src/index.d.ts
index 35a863b..d8dbca3 100644
--- a/node_modules/@react-navigation/stack/lib/typescript/src/index.d.ts
+++ b/node_modules/@react-navigation/stack/lib/typescript/src/index.d.ts
@@ -22,6 +22,8 @@ export { default as CardAnimationContext } from './utils/CardAnimationContext';
export { default as GestureHandlerRefContext } from './utils/GestureHandlerRefContext';
export { default as useCardAnimation } from './utils/useCardAnimation';
export { default as useGestureHandlerRef } from './utils/useGestureHandlerRef';
+export { ModalGestureContext, ModalGestureContextType } from './utils/ModalGestureContext';
+
/**
* Types
*/
diff --git a/node_modules/@react-navigation/stack/lib/typescript/src/utils/ModalGestureContext.ts b/node_modules/@react-navigation/stack/lib/typescript/src/utils/ModalGestureContext.ts
new file mode 100644
index 0000000..9cd9184
--- /dev/null
+++ b/node_modules/@react-navigation/stack/lib/typescript/src/utils/ModalGestureContext.ts
@@ -0,0 +1,9 @@
+import * as React from 'react';
+import type { Animated } from 'react-native';
+
+export interface ModalGestureContextType {
+ scrollableGestureRef: React.RefObject<any>;
+ modalTranslateY: Animated.Value;
+}
+
+export declare const ModalGestureContext: React.Context<ModalGestureContextType>;
diff --git a/node_modules/@react-navigation/stack/src/index.tsx b/node_modules/@react-navigation/stack/src/index.tsx
index f20d3fb..a8475dd 100644
--- a/node_modules/@react-navigation/stack/src/index.tsx
+++ b/node_modules/@react-navigation/stack/src/index.tsx
@@ -31,6 +31,7 @@ export { default as CardAnimationContext } from './utils/CardAnimationContext';
export { default as GestureHandlerRefContext } from './utils/GestureHandlerRefContext';
export { default as useCardAnimation } from './utils/useCardAnimation';
export { default as useGestureHandlerRef } from './utils/useGestureHandlerRef';
+export { ModalGestureContext } from './utils/ModalGestureContext';
/**
* Types
diff --git a/node_modules/@react-navigation/stack/src/utils/ModalGestureContext.ts b/node_modules/@react-navigation/stack/src/utils/ModalGestureContext.ts
new file mode 100644
index 0000000..8b35adf
--- /dev/null
+++ b/node_modules/@react-navigation/stack/src/utils/ModalGestureContext.ts
@@ -0,0 +1,10 @@
+import React from 'react';
+import { Animated } from 'react-native';
+
+export interface ModalGestureContextType {
+ scrollableGestureRef: React.RefObject<any>;
+ modalTranslateY: Animated.Value;
+}
+
+export const ModalGestureContext =
+ React.createContext<ModalGestureContextType | null>(null);
diff --git a/node_modules/@react-navigation/stack/src/views/ModalGestureProvider.tsx b/node_modules/@react-navigation/stack/src/views/ModalGestureProvider.tsx
new file mode 100644
index 0000000..cda7e29
--- /dev/null
+++ b/node_modules/@react-navigation/stack/src/views/ModalGestureProvider.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { ModalGestureContext, ModalGestureContextType } from "../utils/ModalGestureContext"
+
+interface ModalGestureProviderProps {
+ /**
+ * Context value.
+ *
+ * @type ModalGestureContextType
+ */
+ value: ModalGestureContextType;
+
+ /**
+ * Defines if current card is a iOS modal.
+ *
+ * @type boolean
+ * @default false
+ */
+ enabled?: boolean;
+
+ /**
+ * Child component
+ *
+ * @type React.ReactNode
+ */
+ children: React.ReactNode;
+}
+
+const ModalGestureProvider = ({
+ value,
+ children,
+ enabled = false
+}: ModalGestureProviderProps) => enabled ? (
+ <ModalGestureContext.Provider value={value}>
+ {children}
+ </ModalGestureContext.Provider>
+) : children;
+
+export default ModalGestureProvider;
\ No newline at end of file
diff --git a/node_modules/@react-navigation/stack/src/views/Stack/Card.tsx b/node_modules/@react-navigation/stack/src/views/Stack/Card.tsx
index a013ff9..fa5db2d 100755
--- a/node_modules/@react-navigation/stack/src/views/Stack/Card.tsx
+++ b/node_modules/@react-navigation/stack/src/views/Stack/Card.tsx
@@ -21,6 +21,7 @@ import type {
TransitionSpec,
} from '../../types';
import CardAnimationContext from '../../utils/CardAnimationContext';
+import ModalGestureProvider from '../ModalGestureProvider'
import getDistanceForDirection from '../../utils/getDistanceForDirection';
import getInvertedMultiplier from '../../utils/getInvertedMultiplier';
import memoize from '../../utils/memoize';
@@ -104,6 +105,8 @@ export default class Card extends React.Component<Props> {
) : null,
};
+ private scrollableGestureRef = React.createRef<any>();
+
componentDidMount() {
this.animate({ closing: this.props.closing });
this.isCurrentlyMounted = true;
@@ -294,6 +297,21 @@ export default class Card extends React.Component<Props> {
case GestureState.END: {
this.isSwiping.setValue(FALSE);
+ this.isSwiping.removeListener
+
+ /**
+ * if scrollable modal is enabled, and the gesture value is small than the scrollable offset,
+ * then we exit the method and reset gesture value.
+ */
+ if(this.scrollableGestureRef.current &&
+ // @ts-ignore
+ this.props.gesture._value < Math.abs(this.props.gesture._offset)
+ ) {
+ this.props.gesture.setValue(0);
+ this.props.gesture.setOffset(0);
+ return;
+ }
+
let distance;
let translation;
let velocity;
@@ -392,7 +410,7 @@ export default class Card extends React.Component<Props> {
return {
maxDeltaX: 15,
minOffsetY: 5,
- hitSlop: { bottom: -layout.height + distance },
+ hitSlop: this.scrollableGestureRef.current ? {} : { bottom: -layout.height + distance },
enableTrackpadTwoFingerGesture,
};
} else if (gestureDirection === 'vertical-inverted') {
@@ -448,6 +466,11 @@ export default class Card extends React.Component<Props> {
...rest
} = this.props;
+ const modalGestureValue = {
+ scrollableGestureRef: this.scrollableGestureRef,
+ modalTranslateY: gesture
+ }
+
const interpolationProps = this.getCardAnimation(
interpolationIndex,
current,
@@ -526,43 +549,49 @@ export default class Card extends React.Component<Props> {
style={[styles.container, containerStyle, customContainerStyle]}
pointerEvents="box-none"
>
- <PanGestureHandler
- enabled={layout.width !== 0 && gestureEnabled}
- onGestureEvent={handleGestureEvent}
- onHandlerStateChange={this.handleGestureStateChange}
- {...this.gestureActivationCriteria()}
+ <ModalGestureProvider
+ enabled={!next && getIsModalPresentation(styleInterpolator)}
+ value={modalGestureValue}
>
- <Animated.View
- needsOffscreenAlphaCompositing={hasOpacityStyle(cardStyle)}
- style={[styles.container, cardStyle]}
+ <PanGestureHandler
+ enabled={layout.width !== 0 && gestureEnabled}
+ onGestureEvent={handleGestureEvent}
+ onHandlerStateChange={this.handleGestureStateChange}
+ simultaneousHandlers={this.scrollableGestureRef}
+ {...this.gestureActivationCriteria()}
>
- {shadowEnabled && shadowStyle && !isTransparent ? (
- <Animated.View
- style={[
- styles.shadow,
- gestureDirection === 'horizontal'
- ? [styles.shadowHorizontal, styles.shadowLeft]
- : gestureDirection === 'horizontal-inverted'
- ? [styles.shadowHorizontal, styles.shadowRight]
- : gestureDirection === 'vertical'
- ? [styles.shadowVertical, styles.shadowTop]
- : [styles.shadowVertical, styles.shadowBottom],
- { backgroundColor },
- shadowStyle,
- ]}
- pointerEvents="none"
- />
- ) : null}
- <CardSheet
- ref={this.contentRef}
- enabled={pageOverflowEnabled}
- layout={layout}
- style={contentStyle}
+ <Animated.View
+ needsOffscreenAlphaCompositing={hasOpacityStyle(cardStyle)}
+ style={[styles.container, cardStyle]}
>
- {children}
- </CardSheet>
- </Animated.View>
- </PanGestureHandler>
+ {shadowEnabled && shadowStyle && !isTransparent ? (
+ <Animated.View
+ style={[
+ styles.shadow,
+ gestureDirection === 'horizontal'
+ ? [styles.shadowHorizontal, styles.shadowLeft]
+ : gestureDirection === 'horizontal-inverted'
+ ? [styles.shadowHorizontal, styles.shadowRight]
+ : gestureDirection === 'vertical'
+ ? [styles.shadowVertical, styles.shadowTop]
+ : [styles.shadowVertical, styles.shadowBottom],
+ { backgroundColor },
+ shadowStyle,
+ ]}
+ pointerEvents="none"
+ />
+ ) : null}
+ <CardSheet
+ ref={this.contentRef}
+ enabled={pageOverflowEnabled}
+ layout={layout}
+ style={contentStyle}
+ >
+ {children}
+ </CardSheet>
+ </Animated.View>
+ </PanGestureHandler>
+ </ModalGestureProvider>
</Animated.View>
</View>
</CardAnimationContext.Provider>