@momo-kits/foundation 0.167.2-beta.1 → 0.168.1-beta.1

package/Application/BottomTab/index.tsx

@@ -27,7 +27,11 @@ import StackScreen from '../StackScreen';
 import { BottomTabProps } from '../types';
 import { getOptions, getStackOptions, useAppState } from '../utils';
 import BottomTabBar from './BottomTabBar';
+import { DuoTabBar } from './DuoTabBar';
+import { DuoBarCompressionProvider } from './DuoBarCompression';
 import { ApplicationContext, MiniAppContext } from '../../Context';
+import { useScreenLayout } from '../../Layout';
+import { getHeaderRowOptions } from '../../Layout/utils';
 
 const Tab = createBottomTabNavigator();
 const Stack = createStackNavigator();
@@ -36,7 +40,7 @@ const TabScreen: React.FC<any> = ({ route, navigation }) => {
   const { navigator } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
   const { nested, options, screen, initialParams } = route?.params;
-  const insets = useSafeAreaInsets();
+  const headerStyleOptions = getHeaderRowOptions(useScreenLayout());
 
   const opacityValue = 0.3;
   const scaleValue = 0.97;
@@ -139,11 +143,7 @@ const TabScreen: React.FC<any> = ({ route, navigation }) => {
     return (
       <Animated.View style={[styles.container, tabAnimatedStyle]}>
         <Stack.Navigator
-          screenOptions={{
-            headerStyle: {
-              height: 52 + insets.top,
-            },
-          }}
+          screenOptions={headerStyleOptions}
         >
           <Stack.Screen
             name="Stack"
@@ -174,11 +174,7 @@ const TabScreen: React.FC<any> = ({ route, navigation }) => {
       <NavigationIndependentTree>
         <NavigationContainer>
           <Stack.Navigator
-            screenOptions={{
-              headerStyle: {
-                height: 52 + insets.top,
-              },
-            }}
+            screenOptions={headerStyleOptions}
           >
             <Stack.Screen
               name="Stack"
@@ -205,8 +201,10 @@ const BottomTab: React.FC<BottomTabProps> = ({
   navigation,
   initialRouteName,
   floatingButton,
+  compressionBehavior,
 }) => {
   const { theme, navigator } = useContext(ApplicationContext);
+  const { isIPhoneDuo } = useScreenLayout();
   const dimensions = useWindowDimensions();
   const insets = useSafeAreaInsets();
   const initialIndex = tabs.findIndex(i => i.name === initialRouteName);
@@ -279,139 +277,152 @@ const BottomTab: React.FC<BottomTabProps> = ({
     },
   };
 
+  const isIOS = Platform.OS === 'ios';
+  const bottomInset = isIOS ? Math.min(insets.bottom, 21) : insets.bottom;
+
   return (
-    <Tab.Navigator
-      screenOptions={{
-        headerShown: false,
-        headerTransparent: true,
-        headerBackground: undefined,
-        tabBarLabelPosition: 'below-icon',
-        tabBarBackground: () => (
-          <View
-            style={[
-              styles.container,
-              {
-                backgroundColor: theme.colors.background.surface,
-              },
-            ]}
-          >
-            <Animated.View style={[styles.indicatorContainer, indicatorStyle]}>
-              <View
-                style={[
-                  styles.indicator,
-                  { backgroundColor: theme.colors.primary },
-                ]}
-              />
-            </Animated.View>
-          </View>
-        ),
-      }}
-      tabBar={props => (
-        <BottomTabBar
-          {...props}
-          floatingButton={floatingButton}
-          inactiveTintColor={theme.colors.text.hint}
-          activeTintColor={theme.colors.primary}
-          style={[
-            {
-              height:
-                64 +
-                (Platform.OS === 'ios'
-                  ? Math.min(insets.bottom, 21)
-                  : insets.bottom),
-            },
-          ]}
-        />
-      )}
-      initialRouteName={initialRouteName}
+    <DuoBarCompressionProvider
+      behavior={compressionBehavior}
+      tabCount={tabs.length}
+      hasQr={!!floatingButton}
     >
-      {tabs.map((item, index) => {
-        const isNum = !isNaN(parseInt(`${item?.badgeLabel}`, 10));
-        const isDot = typeof item?.badgeLabel === 'string' && !item?.badgeLabel;
-        const isNumZero = isNum && Number(item.badgeLabel) === 0;
-
-        let badgeLabel = item?.badgeLabel;
-        if (isNumZero) {
-          badgeLabel = undefined;
+      <Tab.Navigator
+        screenOptions={{
+          headerShown: false,
+          headerTransparent: true,
+          headerBackground: undefined,
+          tabBarLabelPosition: 'below-icon',
+          tabBarBackground: () => (
+            <View
+              style={[
+                styles.container,
+                {
+                  backgroundColor: theme.colors.background.surface,
+                },
+              ]}
+            >
+              <Animated.View
+                style={[styles.indicatorContainer, indicatorStyle]}
+              >
+                <View
+                  style={[
+                    styles.indicator,
+                    { backgroundColor: theme.colors.primary },
+                  ]}
+                />
+              </Animated.View>
+            </View>
+          ),
+        }}
+        tabBar={props =>
+          isIPhoneDuo ? (
+            <DuoTabBar
+              {...props}
+              floatingButton={floatingButton}
+              inactiveTintColor={theme.colors.text.hint}
+              activeTintColor={theme.colors.primary}
+            />
+          ) : (
+            <BottomTabBar
+              {...props}
+              floatingButton={floatingButton}
+              inactiveTintColor={theme.colors.text.hint}
+              activeTintColor={theme.colors.primary}
+              style={[{ height: 64 + bottomInset }]}
+            />
+          )
         }
+        initialRouteName={initialRouteName}
+      >
+        {tabs.map((item, index) => {
+          const isNum = !isNaN(parseInt(`${item?.badgeLabel}`, 10));
+          const isDot =
+            typeof item?.badgeLabel === 'string' && !item?.badgeLabel;
+          const isNumZero = isNum && Number(item.badgeLabel) === 0;
 
-        let badgeStyle: {
-          marginRight: number;
-          top: number;
-          backgroundColor: string;
-          width?: number;
-        } = {
-          marginRight: -8,
-          top: -4,
-          backgroundColor: Colors.orange_03,
-        };
+          let badgeLabel = item?.badgeLabel;
+          if (isNumZero) {
+            badgeLabel = undefined;
+          }
 
-        if (isNum) {
-          badgeStyle = {
-            marginRight: -4,
+          let badgeStyle: {
+            marginRight: number;
+            top: number;
+            backgroundColor: string;
+            width?: number;
+          } = {
+            marginRight: -8,
             top: -4,
-            backgroundColor: Colors.red_03,
-          };
-        }
-        if (isDot) {
-          badgeStyle = {
-            marginRight: -2,
-            top: -2,
             backgroundColor: Colors.orange_03,
-            width: 12,
           };
-        }
 
-        return (
-          <Tab.Screen
-            key={`BottomTab-${item.name}`}
-            name={item.name}
-            component={TabScreen}
-            initialParams={{ ...item, nested, index }}
-            listeners={handler}
-            options={{
-              tabBarLabel: ({ focused, color }) => {
-                return (
-                  <Text
-                    numberOfLines={1}
-                    typography={
-                      focused ? 'label_xs_medium' : 'description_xs_regular'
-                    }
-                    color={color}
-                  >
-                    {item.label}
-                  </Text>
-                );
-              },
-              title: item.label,
-              tabBarStyle: [
-                {
-                  height: 64,
-                },
-                styles.tabStyle,
-              ],
-              tabBarBadge: badgeLabel,
-              tabBarBadgeStyle: [
-                {
-                  borderColor: 'white',
-                  borderWidth: 2,
-                  fontSize: 10,
-                  lineHeight: 14,
-                  fontWeight: 'bold',
-                  alignSelf: 'center',
-                  fontFamily: exportFontFamily('bold'),
+          if (isNum) {
+            badgeStyle = {
+              marginRight: -4,
+              top: -4,
+              backgroundColor: Colors.red_03,
+            };
+          }
+          if (isDot) {
+            badgeStyle = {
+              marginRight: -2,
+              top: -2,
+              backgroundColor: Colors.orange_03,
+              width: 12,
+            };
+          }
+
+          return (
+            <Tab.Screen
+              key={`BottomTab-${item.name}`}
+              name={item.name}
+              component={TabScreen}
+              initialParams={{ ...item, nested, index }}
+              listeners={handler}
+              options={{
+                tabBarLabel: ({ focused, color }) => {
+                  return (
+                    <Text
+                      numberOfLines={1}
+                      typography={
+                        focused ? 'label_xs_medium' : 'description_xs_regular'
+                      }
+                      color={color}
+                    >
+                      {item.label}
+                    </Text>
+                  );
                 },
-                badgeStyle,
-              ],
-              tabBarIcon: ({ color }) => (
-                <Icon source={item.icon} color={color} size={28} />
-              ),
-              ...item,
-            }}
-          />
-        );
-      })}
-    </Tab.Navigator>
+                title: item.label,
+                tabBarStyle: [
+                  {
+                    height: 64,
+                  },
+                  styles.tabStyle,
+                ],
+                tabBarBadge: badgeLabel,
+                tabBarBadgeStyle: [
+                  {
+                    borderColor: 'white',
+                    borderWidth: 2,
+                    fontSize: 10,
+                    lineHeight: 14,
+                    fontWeight: 'bold',
+                    alignSelf: 'center',
+                    fontFamily: exportFontFamily('bold'),
+                  },
+                  badgeStyle,
+                ],
+                tabBarIcon: ({ color }) => (
+                  <Icon source={item.icon} color={color} size={28} />
+                ),
+                ...item,
+              }}
+            />
+          );
+        })}
+      </Tab.Navigator>
+    </DuoBarCompressionProvider>
   );
 };
 

package/Application/Components/DuoGlassBackground.tsx

@@ -0,0 +1,158 @@
+import React, { useContext } from 'react';
+import { StyleSheet, View } from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import Animated, {
+  Extrapolation,
+  interpolate,
+  useAnimatedStyle,
+} from 'react-native-reanimated';
+import { ApplicationContext } from '../../Context';
+import { Shadow } from '../../Consts';
+import { Image } from '../../Image';
+import { AnimatedCompatValue, useNormalizedSharedValue } from '../utils';
+
+// extended headers run their gradient this far below the header, as off Duo
+const EXTENDED_GRADIENT_EXTRA = 52;
+// scroll distance over which the extended gradient collapses to the header
+const EXTENDED_COLLAPSE_DISTANCE = 100;
+// scroll distance over which the bar material fades in
+const FADE_DISTANCE = 16;
+const TRANSLUCENT_ALPHA = 'CC';
+
+/**
+ * iPhone Duo header background: translucent bar running edge to edge, behind the
+ * status bar column too, shown once content scrolls under it
+ */
+const DuoGlassBackground: React.FC<{
+  animatedValue?: AnimatedCompatValue;
+  // scroll offset where the bar starts to show, e.g. below an animated banner
+  fadeStart?: number;
+}> = ({ animatedValue, fadeStart = 0 }) => {
+  const { theme } = useContext(ApplicationContext);
+  const sharedValue = useNormalizedSharedValue(animatedValue);
+
+  const fadeStyle = useAnimatedStyle(() => ({
+    opacity: interpolate(
+      sharedValue.value,
+      [fadeStart, fadeStart + FADE_DISTANCE],
+      [0, 1],
+      Extrapolation.CLAMP,
+    ),
+  }));
+
+  return (
+    <View pointerEvents={'none'} style={StyleSheet.absoluteFill}>
+      <Animated.View
+        style={[
+          StyleSheet.absoluteFill,
+          styles.translucentBar,
+          {
+            backgroundColor:
+              theme.colors.background.surface + TRANSLUCENT_ALPHA,
+            borderBottomColor: theme.colors.border.default,
+          },
+          fadeStyle,
+        ]}
+      />
+    </View>
+  );
+};
+
+/**
+ * pink header gradient drawn under the content, fading out on scroll as main's extended
+ * header does: header-high for default headers, 52 taller (collapsing) for extended
+ */
+const DuoScrollGradient: React.FC<{
+  animatedValue?: AnimatedCompatValue;
+  gradientColor?: string;
+  headerBackground?: string;
+  heightHeader: number;
+  extended?: boolean;
+  // quick return header: the gradient leaves with the content instead of fading
+  followScroll?: boolean;
+}> = ({
+  animatedValue,
+  gradientColor,
+  headerBackground,
+  heightHeader,
+  extended,
+  followScroll,
+}) => {
+  const { theme } = useContext(ApplicationContext);
+  const sharedValue = useNormalizedSharedValue(animatedValue);
+  const color = gradientColor ?? theme.colors.gradient;
+  const image = headerBackground ?? theme.assets?.headerBackground;
+
+  const scrollStyle = useAnimatedStyle(() => {
+    if (followScroll) {
+      return {
+        height: heightHeader + (extended ? EXTENDED_GRADIENT_EXTRA : 0),
+        transform: [{ translateY: -Math.max(sharedValue.value, 0) }],
+      };
+    }
+    let height = heightHeader;
+    if (extended) {
+      height = interpolate(
+        sharedValue.value,
+        [0, EXTENDED_COLLAPSE_DISTANCE],
+        [heightHeader + EXTENDED_GRADIENT_EXTRA, heightHeader],
+        Extrapolation.CLAMP,
+      );
+    }
+    return {
+      height,
+      opacity: interpolate(
+        sharedValue.value,
+        [0, EXTENDED_GRADIENT_EXTRA],
+        [1, 0],
+        Extrapolation.CLAMP,
+      ),
+    };
+  });
+
+  if (!color) {
+    return null;
+  }
+
+  return (
+    <Animated.View
+      pointerEvents={'none'}
+      style={[styles.gradient, scrollStyle]}
+    >
+      <LinearGradient
+        colors={[color, color + '00']}
+        style={StyleSheet.absoluteFill}
+      >
+        {!!image && (
+          <Image
+            style={styles.gradientFill}
+            source={{ uri: image }}
+            loading={false}
+          />
+        )}
+      </LinearGradient>
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  translucentBar: {
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    ...Shadow.Light,
+  },
+  gradient: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    overflow: 'hidden',
+  },
+  // banner image keeps its 375:154 shape, the gradient box clips it
+  gradientFill: {
+    width: '100%',
+    position: 'absolute',
+    aspectRatio: 375 / 154,
+  },
+});
+
+export { DuoGlassBackground, DuoScrollGradient };

package/Application/Components/DuoQuickReturnHeader.tsx

@@ -0,0 +1,42 @@
+import React, { createContext, useContext } from 'react';
+import { StackHeaderProps, Header } from '@react-navigation/stack';
+import Animated, {
+  SharedValue,
+  useAnimatedStyle,
+} from 'react-native-reanimated';
+
+// how far the header is pushed above the top edge
+const DuoHeaderOffsetContext = createContext<SharedValue<number> | undefined>(
+  undefined,
+);
+
+/**
+ * iPhone Duo header that leaves with the content and comes back when scrolling back
+ */
+const DuoQuickReturnHeader: React.FC<
+  StackHeaderProps & { offset: SharedValue<number> }
+> = ({ offset, ...props }) => {
+  const style = useAnimatedStyle(() => ({
+    transform: [{ translateY: -offset.value }],
+  }));
+
+  return (
+    <DuoHeaderOffsetContext.Provider value={offset}>
+      <Animated.View pointerEvents={'box-none'} style={style}>
+        <Header {...props} />
+      </Animated.View>
+    </DuoHeaderOffsetContext.Provider>
+  );
+};
+
+/**
+ * side bar controls render inside the header; this cancels its offset so they stay put
+ */
+const useSideBarCounterStyle = () => {
+  const offset = useContext(DuoHeaderOffsetContext);
+  return useAnimatedStyle(() => ({
+    transform: [{ translateY: offset ? offset.value : 0 }],
+  }));
+};
+
+export { DuoQuickReturnHeader, useSideBarCounterStyle };

package/Application/Components/HeaderAnimated.tsx

@@ -28,9 +28,15 @@ const HeaderAnimated: React.FC<HeaderAnimatedProps> = ({
 }) => {
   const sharedValue = useNormalizedSharedValue(animatedValue);
   const animatedStyle = useAnimatedStyle(() => {
-    const scale = useScale
-      ? interpolate(sharedValue.value, [-300, 0, 300], [4, 1, 1], Extrapolation.CLAMP)
-      : 1;
+    let scale = 1;
+    if (useScale) {
+      scale = interpolate(
+        sharedValue.value,
+        [-300, 0, 300],
+        [4, 1, 1],
+        Extrapolation.CLAMP,
+      );
+    }
     const opacity = interpolate(
       sharedValue.value,
       [0, 150, 300],