Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 0215532

Browse files
committed
chore: updated patch and add new hook
1 parent 654c8c9 commit 0215532

File tree

5 files changed

+151
-135
lines changed

5 files changed

+151
-135
lines changed

‎@react-navigation+stack+6.0.7.patch‎

Lines changed: 0 additions & 68 deletions
This file was deleted.

‎App.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,11 @@ const Stack = createStackNavigator();
99
export default () => (
1010
<NavigationContainer>
1111
<Stack.Navigator>
12-
<Stack.Screen name="home" component={Home} />
12+
<Stack.Screen name="home" component={Home} options={{title: "Home"}}/>
1313
<Stack.Screen
1414
name="modal"
1515
component={Modal}
16-
options={{ presentation: "modal" }}
16+
options={{ title: "Scrollable Modal",presentation: "modal" }}
1717
/>
1818
</Stack.Navigator>
1919
</NavigationContainer>
Lines changed: 82 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,100 @@
1+
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
2+
index 35a863b..66239cd 100644
3+
--- a/node_modules/@react-navigation/stack/lib/typescript/src/index.d.ts
4+
+++ b/node_modules/@react-navigation/stack/lib/typescript/src/index.d.ts
5+
@@ -22,6 +22,8 @@ export { default as CardAnimationContext } from './utils/CardAnimationContext';
6+
export { default as GestureHandlerRefContext } from './utils/GestureHandlerRefContext';
7+
export { default as useCardAnimation } from './utils/useCardAnimation';
8+
export { default as useGestureHandlerRef } from './utils/useGestureHandlerRef';
9+
+export { CardModalGestureContext } from './utils/CardModalGestureContext';
10+
+
11+
/**
12+
* Types
13+
*/
14+
diff --git a/node_modules/@react-navigation/stack/lib/typescript/src/utils/CardModalGestureContext.d.ts b/node_modules/@react-navigation/stack/lib/typescript/src/utils/CardModalGestureContext.d.ts
15+
new file mode 100644
16+
index 0000000..590bf05
17+
--- /dev/null
18+
+++ b/node_modules/@react-navigation/stack/lib/typescript/src/utils/CardModalGestureContext.d.ts
19+
@@ -0,0 +1,9 @@
20+
+import * as React from 'react';
21+
+import type { Animated } from 'react-native';
22+
+
23+
+export interface CardModalGestureContextType {
24+
+ scrollableGestureRef: React.RefObject<any>;
25+
+ cardModalTranslateY: Animated.Value;
26+
+}
27+
+
28+
+export declare const CardModalGestureContext: React.Context<CardModalGestureContextType>;
29+
diff --git a/node_modules/@react-navigation/stack/src/index.tsx b/node_modules/@react-navigation/stack/src/index.tsx
30+
index f20d3fb..d914384 100644
31+
--- a/node_modules/@react-navigation/stack/src/index.tsx
32+
+++ b/node_modules/@react-navigation/stack/src/index.tsx
33+
@@ -31,6 +31,7 @@ export { default as CardAnimationContext } from './utils/CardAnimationContext';
34+
export { default as GestureHandlerRefContext } from './utils/GestureHandlerRefContext';
35+
export { default as useCardAnimation } from './utils/useCardAnimation';
36+
export { default as useGestureHandlerRef } from './utils/useGestureHandlerRef';
37+
+export { CardModalGestureContext } from './utils/CardModalGestureContext';
38+
39+
/**
40+
* Types
41+
diff --git a/node_modules/@react-navigation/stack/src/utils/CardModalGestureContext.ts b/node_modules/@react-navigation/stack/src/utils/CardModalGestureContext.ts
42+
new file mode 100644
43+
index 0000000..c2e32db
44+
--- /dev/null
45+
+++ b/node_modules/@react-navigation/stack/src/utils/CardModalGestureContext.ts
46+
@@ -0,0 +1,9 @@
47+
+import React from 'react';
48+
+import { Animated } from 'react-native';
49+
+
50+
+interface CardModalGestureContextType {
51+
+ scrollableGestureRef: React.RefObject<any>;
52+
+ cardModalTranslateY: Animated.Value;
53+
+}
54+
+
55+
+export const CardModalGestureContext = React.createContext<CardModalGestureContextType | null>(null)
56+
\ No newline at end of file
157
diff --git a/node_modules/@react-navigation/stack/src/views/Stack/Card.tsx b/node_modules/@react-navigation/stack/src/views/Stack/Card.tsx
2-
index a013ff9..c99c5ab 100755
58+
index a013ff9..6a6e5f9 100755
359
--- a/node_modules/@react-navigation/stack/src/views/Stack/Card.tsx
460
+++ b/node_modules/@react-navigation/stack/src/views/Stack/Card.tsx
5-
@@ -89,6 +89,8 @@ const hasOpacityStyle = (style: any) => {
6-
return false;
7-
};
61+
@@ -21,6 +21,7 @@ import type {
62+
TransitionSpec,
63+
} from '../../types';
64+
import CardAnimationContext from '../../utils/CardAnimationContext';
65+
+import { CardModalGestureContext } from '../../utils/CardModalGestureContext';
66+
import getDistanceForDirection from '../../utils/getDistanceForDirection';
67+
import getInvertedMultiplier from '../../utils/getInvertedMultiplier';
68+
import memoize from '../../utils/memoize';
69+
@@ -294,6 +295,8 @@ export default class Card extends React.Component<Props> {
70+
case GestureState.END: {
71+
this.isSwiping.setValue(FALSE);
872

9-
+export const CardContext = React.createContext(null)
73+
+ this.isSwiping.removeListener
1074
+
11-
export default class Card extends React.Component<Props> {
12-
static defaultProps = {
13-
shadowEnabled: false,
14-
@@ -303,8 +305,15 @@ export default class Card extends React.Component<Props> {
75+
let distance;
76+
let translation;
77+
let velocity;
78+
@@ -303,8 +306,16 @@ export default class Card extends React.Component<Props> {
1579
gestureDirection === 'vertical-inverted'
1680
) {
1781
distance = layout.height;
1882
- translation = nativeEvent.translationY;
1983
- velocity = nativeEvent.velocityY;
20-
+ // translation = nativeEvent.translationY;
84+
+ // @ts-ignore
2185
+ if(this.props.gesture._offset < 0) {
86+
+ // @ts-ignore
2287
+ translation = this.props.gesture._offset - this.props.gesture._value;
2388
+ velocity = nativeEvent.velocityY / 2;
2489
+ }else{
90+
+ // @ts-ignore
2591
+ translation = this.props.gesture._value;
2692
+ velocity = nativeEvent.velocityY;
2793
+ }
2894
} else {
2995
distance = layout.width;
3096
translation = nativeEvent.translationX;
31-
@@ -392,7 +401,7 @@ export default class Card extends React.Component<Props> {
97+
@@ -392,7 +403,7 @@ export default class Card extends React.Component<Props> {
3298
return {
3399
maxDeltaX: 15,
34100
minOffsetY: 5,
@@ -37,19 +103,19 @@ index a013ff9..c99c5ab 100755
37103
enableTrackpadTwoFingerGesture,
38104
};
39105
} else if (gestureDirection === 'vertical-inverted') {
40-
@@ -425,6 +434,7 @@ export default class Card extends React.Component<Props> {
106+
@@ -425,6 +436,7 @@ export default class Card extends React.Component<Props> {
41107
}
42108

43109
private contentRef = React.createRef<View>();
44110
+ private scrollableGestureRef = React.createRef<any>();
45111

46112
render() {
47113
const {
48-
@@ -526,10 +536,12 @@ export default class Card extends React.Component<Props> {
114+
@@ -526,10 +538,12 @@ export default class Card extends React.Component<Props> {
49115
style={[styles.container, containerStyle, customContainerStyle]}
50116
pointerEvents="box-none"
51117
>
52-
+ <CardContext.Provider value={{ scrollableGestureRef: this.scrollableGestureRef, cardPanTranslateY: gesture }}>
118+
+ <CardModalGestureContext.Provider value={{ scrollableGestureRef: this.scrollableGestureRef, cardModalTranslateY: gesture }}>
53119
<PanGestureHandler
54120
enabled={layout.width !== 0 && gestureEnabled}
55121
onGestureEvent={handleGestureEvent}
@@ -58,11 +124,11 @@ index a013ff9..c99c5ab 100755
58124
{...this.gestureActivationCriteria()}
59125
>
60126
<Animated.View
61-
@@ -563,6 +575,7 @@ export default class Card extends React.Component<Props> {
127+
@@ -563,6 +577,7 @@ export default class Card extends React.Component<Props> {
62128
</CardSheet>
63129
</Animated.View>
64130
</PanGestureHandler>
65-
+ </CardContext.Provider>
131+
+ </CardModalGestureContext.Provider>
66132
</Animated.View>
67133
</View>
68134
</CardAnimationContext.Provider>

‎src/Modal.tsx‎

Lines changed: 10 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,8 @@
1-
import React, { useCallback, useContext, useRef } from "react";
2-
import {
3-
Button,
4-
FlatList,
5-
FlatListProps,
6-
StyleSheet,
7-
Text,
8-
View,
9-
} from "react-native";
10-
import {
11-
NativeViewGestureHandler,
12-
NativeViewGestureHandlerProps,
13-
} from "react-native-gesture-handler";
14-
import { useNavigation } from "@react-navigation/core";
15-
import { CardContext } from "@react-navigation/stack/src/views/Stack/Card";
16-
import Animated, {
17-
runOnJS,
18-
scrollTo,
19-
useAnimatedRef,
20-
useAnimatedScrollHandler,
21-
useSharedValue,
22-
} from "react-native-reanimated";
1+
import React from "react";
2+
import { FlatList, FlatListProps, StyleSheet, Text, View } from "react-native";
3+
import { NativeViewGestureHandler } from "react-native-gesture-handler";
4+
import Animated, { useAnimatedRef } from "react-native-reanimated";
5+
import { useCardModalGestureInteraction } from "./useCardModalGestureInteraction";
236

247
const AnimatedFlatList =
258
Animated.createAnimatedComponent<FlatListProps<any>>(FlatList);
@@ -28,8 +11,9 @@ const data = Array(40)
2811
.fill(0)
2912
.map((_, index) => `${index}`);
3013

31-
const keyExtractor = (item) => `item-${item}`;
14+
const keyExtractor = (item: any) => `item-${item}`;
3215

16+
// @ts-ignore
3317
const renderItem = ({ item }) => (
3418
<View style={styles.item}>
3519
<Text>{item}</Text>
@@ -38,32 +22,9 @@ const renderItem = ({ item }) => (
3822

3923
export const Modal = () => {
4024
const scrollableRef = useAnimatedRef<FlatList>();
41-
const { scrollableGestureRef, cardPanTranslateY } = useContext(CardContext);
42-
const allowScrollable = useSharedValue(true);
4325

44-
const setCardPanTranslateYOffset = useCallback((value: number) => {
45-
// console.log("offset", -value);
46-
cardPanTranslateY.setOffset(-value);
47-
}, []);
48-
49-
const handleScroll = useAnimatedScrollHandler(
50-
{
51-
onBeginDrag: ({ contentOffset: { y } }) => {
52-
runOnJS(setCardPanTranslateYOffset)(y);
53-
},
54-
onScroll: ({ contentOffset: { y } }) => {
55-
if (y <= 0 || !allowScrollable.value) {
56-
scrollTo(scrollableRef, 0, 0, false);
57-
}
58-
},
59-
},
60-
[allowScrollable, setCardPanTranslateYOffset]
61-
);
62-
63-
cardPanTranslateY.addListener(({ value }) => {
64-
// console.log("cardPanTranslateY", value);
65-
allowScrollable.value = value <= 0;
66-
});
26+
const { scrollableGestureRef, handleScrolling } =
27+
useCardModalGestureInteraction(scrollableRef);
6728

6829
return (
6930
<NativeViewGestureHandler ref={scrollableGestureRef}>
@@ -72,7 +33,7 @@ export const Modal = () => {
7233
data={data}
7334
keyExtractor={keyExtractor}
7435
scrollEventThrottle={16}
75-
onScroll={handleScroll}
36+
onScroll={handleScrolling}
7637
style={styles.container}
7738
contentContainerStyle={styles.contentContainer}
7839
renderItem={renderItem}
Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import { useCallback, useContext, useEffect } from "react";
2+
import { CardModalGestureContext } from "@react-navigation/stack";
3+
import {
4+
runOnJS,
5+
scrollTo,
6+
useAnimatedScrollHandler,
7+
useSharedValue,
8+
} from "react-native-reanimated";
9+
import type { FlatList, ScrollView } from "react-native";
10+
11+
export const useCardModalGestureInteraction = (
12+
scrollableRef: React.RefObject<ScrollView | FlatList>
13+
) => {
14+
// context
15+
const { scrollableGestureRef, cardModalTranslateY } = useContext(CardModalGestureContext);
16+
17+
// variables
18+
const lockScrolling = useSharedValue(true);
19+
20+
// callback
21+
const setCardPanTranslateYOffset = useCallback((value: number) => {
22+
cardModalTranslateY.setOffset(-value);
23+
}, []);
24+
const setLockScrolling = useCallback(
25+
({ value }) => {
26+
lockScrolling.value = value > 0;
27+
},
28+
[lockScrolling]
29+
);
30+
const handleScrolling = useAnimatedScrollHandler(
31+
{
32+
onBeginDrag: ({ contentOffset: { y } }) => {
33+
runOnJS(setCardPanTranslateYOffset)(y);
34+
},
35+
onScroll: ({ contentOffset: { y } }) => {
36+
if (y <= 0 || lockScrolling.value) {
37+
// @ts-ignore
38+
scrollTo(scrollableRef, 0, 0, false);
39+
}
40+
},
41+
},
42+
[lockScrolling, setCardPanTranslateYOffset]
43+
);
44+
45+
// effects
46+
useEffect(() => {
47+
const listener = cardModalTranslateY.addListener(setLockScrolling);
48+
return () => {
49+
cardModalTranslateY.removeListener(listener);
50+
};
51+
}, []);
52+
53+
return {
54+
scrollableGestureRef,
55+
handleScrolling,
56+
};
57+
};

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /