mirror of
https://github.com/zhigang1992/react-navigation-scrollable-modal.git
synced 2026-01-12 17:43:09 +08:00
250 lines
10 KiB
Diff
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>
|