@momo-kits/foundation 0.165.1-beta.3 → 0.165.1-beta.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Application/BottomTab/index.tsx +19 -35
- package/Application/utils.tsx +0 -40
- package/package.json +1 -1
|
@@ -8,6 +8,7 @@ import { createStackNavigator } from '@react-navigation/stack';
|
|
|
8
8
|
import React, { useContext, useEffect, useLayoutEffect } from 'react';
|
|
9
9
|
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
|
10
10
|
import {
|
|
11
|
+
NativeModules,
|
|
11
12
|
Platform,
|
|
12
13
|
StatusBar,
|
|
13
14
|
StyleSheet,
|
|
@@ -24,12 +25,7 @@ import { Icon } from '../../Icon';
|
|
|
24
25
|
import { exportFontFamily, Text } from '../../Text';
|
|
25
26
|
import StackScreen from '../StackScreen';
|
|
26
27
|
import { BottomTabProps } from '../types';
|
|
27
|
-
import {
|
|
28
|
-
getOptions,
|
|
29
|
-
getStackOptions,
|
|
30
|
-
useAppState,
|
|
31
|
-
useFloatingArrowBack,
|
|
32
|
-
} from '../utils';
|
|
28
|
+
import { getOptions, getStackOptions, useAppState } from '../utils';
|
|
33
29
|
import BottomTabBar from './BottomTabBar';
|
|
34
30
|
import { ApplicationContext, MiniAppContext } from '../../Context';
|
|
35
31
|
|
|
@@ -217,7 +213,6 @@ const BottomTab: React.FC<BottomTabProps> = ({
|
|
|
217
213
|
const indicatorAnimated = useSharedValue(0);
|
|
218
214
|
const activeIndex = React.useRef(initialIndex > 0 ? initialIndex : 0);
|
|
219
215
|
const itemWidth = dimensions.width / tabs.length;
|
|
220
|
-
const reportFloatingArrowBack = useFloatingArrowBack();
|
|
221
216
|
|
|
222
217
|
const indicatorStyle = useAnimatedStyle(() => ({
|
|
223
218
|
width: itemWidth,
|
|
@@ -238,33 +233,18 @@ const BottomTab: React.FC<BottomTabProps> = ({
|
|
|
238
233
|
});
|
|
239
234
|
}, [itemWidth, indicatorAnimated]);
|
|
240
235
|
|
|
241
|
-
//
|
|
242
|
-
//
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
);
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
* On the first tab the stack card owns the swipe and runs the usual transition. On any other
|
|
254
|
-
* tab it must not: every tab lives inside that single card, and the gesture pops it with
|
|
255
|
-
* `StackActions.pop()` aimed at the stack rather than a back the tab router could claim — so
|
|
256
|
-
* the swipe would take all the tabs with it instead of returning to the first one. Turning the
|
|
257
|
-
* card gesture off there would leave the swipe doing nothing, so hand it to the host's
|
|
258
|
-
* floating-arrow interaction instead.
|
|
259
|
-
*/
|
|
260
|
-
const syncBackOwnership = (index: number) => {
|
|
261
|
-
const isFirstTab = index === 0;
|
|
262
|
-
|
|
263
|
-
navigation?.setOptions({
|
|
264
|
-
gestureEnabled: Platform.OS === 'ios' && isFirstTab,
|
|
265
|
-
});
|
|
266
|
-
reportFloatingArrowBack(!isFirstTab);
|
|
267
|
-
};
|
|
236
|
+
// TEMP: commented out to test whether the blur reset is needed on a real host.
|
|
237
|
+
// Without it, pushing a screen from a tab other than the first leaves the flag true, so that
|
|
238
|
+
// pushed screen gets the host floating-arrow instead of its own card swipe-back.
|
|
239
|
+
// useFocusEffect(
|
|
240
|
+
// React.useCallback(() => {
|
|
241
|
+
// NativeModules?.MiniAppModule?.setShouldUseFloatingArrowBack?.(
|
|
242
|
+
// activeIndex.current !== 0,
|
|
243
|
+
// );
|
|
244
|
+
// return () =>
|
|
245
|
+
// NativeModules?.MiniAppModule?.setShouldUseFloatingArrowBack?.(false);
|
|
246
|
+
// }, []),
|
|
247
|
+
// );
|
|
268
248
|
|
|
269
249
|
const onFocus = (e: any) => {
|
|
270
250
|
activeIndex.current = tabs.findIndex(i => e.target.includes(i.name));
|
|
@@ -272,7 +252,11 @@ const BottomTab: React.FC<BottomTabProps> = ({
|
|
|
272
252
|
duration: 200,
|
|
273
253
|
});
|
|
274
254
|
|
|
275
|
-
|
|
255
|
+
const isFirstTab = activeIndex.current === 0;
|
|
256
|
+
navigation?.setOptions({
|
|
257
|
+
gestureEnabled: Platform.OS === 'ios' && isFirstTab,
|
|
258
|
+
});
|
|
259
|
+
NativeModules?.MiniAppModule?.setShouldUseFloatingArrowBack?.(!isFirstTab);
|
|
276
260
|
};
|
|
277
261
|
|
|
278
262
|
const handler: {
|
package/Application/utils.tsx
CHANGED
|
@@ -334,45 +334,6 @@ const useNativeCanGoBack = () => {
|
|
|
334
334
|
);
|
|
335
335
|
};
|
|
336
336
|
|
|
337
|
-
/**
|
|
338
|
-
* Hands the swipe back to the host's floating-arrow interaction while a bottom tab other than
|
|
339
|
-
* the first one is showing.
|
|
340
|
-
*
|
|
341
|
-
* The whole tab navigator lives inside a single stack card, and the card gesture pops that card
|
|
342
|
-
* through `StackActions.pop()` aimed at the stack — it never dispatches a back the tab router
|
|
343
|
-
* could claim. So on tab 2 a swipe would take all four tabs with it instead of returning to tab
|
|
344
|
-
* 1. The host already owns an interaction for exactly this, so report the state and let it run.
|
|
345
|
-
*
|
|
346
|
-
* Reports `false` on unmount: the flag lives on the host and would otherwise outlive the tabs
|
|
347
|
-
* that asked for it.
|
|
348
|
-
*/
|
|
349
|
-
const useFloatingArrowBack = () => {
|
|
350
|
-
const lastValue = useRef<boolean | undefined>(undefined);
|
|
351
|
-
|
|
352
|
-
const report = useCallback((shouldUse: boolean) => {
|
|
353
|
-
if (lastValue.current === shouldUse) {
|
|
354
|
-
return;
|
|
355
|
-
}
|
|
356
|
-
|
|
357
|
-
const setShouldUseFloatingArrowBack =
|
|
358
|
-
NativeModules?.MiniAppModule?.setShouldUseFloatingArrowBack;
|
|
359
|
-
if (typeof setShouldUseFloatingArrowBack !== 'function') {
|
|
360
|
-
return;
|
|
361
|
-
}
|
|
362
|
-
|
|
363
|
-
lastValue.current = shouldUse;
|
|
364
|
-
try {
|
|
365
|
-
setShouldUseFloatingArrowBack(shouldUse);
|
|
366
|
-
} catch (error) {
|
|
367
|
-
console.warn('[BottomTab] setShouldUseFloatingArrowBack failed:', error);
|
|
368
|
-
}
|
|
369
|
-
}, []);
|
|
370
|
-
|
|
371
|
-
useEffect(() => () => report(false), [report]);
|
|
372
|
-
|
|
373
|
-
return report;
|
|
374
|
-
};
|
|
375
|
-
|
|
376
337
|
/**
|
|
377
338
|
* Union of the two animation runtimes an internal foundation component might
|
|
378
339
|
* receive. Public Screen props still accept React Native Animated.Value only;
|
|
@@ -524,7 +485,6 @@ export {
|
|
|
524
485
|
useComponentId,
|
|
525
486
|
useAppState,
|
|
526
487
|
useNativeCanGoBack,
|
|
527
|
-
useFloatingArrowBack,
|
|
528
488
|
useNormalizedSharedValue,
|
|
529
489
|
SwipeBackHaptic,
|
|
530
490
|
};
|