rainbow-me · jinchung · Oct 20, 2023 · Oct 20, 2023 · Oct 20, 2023
diff --git a/src/components/asset-list/RecyclerAssetList2/index.tsx b/src/components/asset-list/RecyclerAssetList2/index.tsx
@@ -70,7 +70,7 @@ function RecyclerAssetList({
           briefSectionsData={briefSectionsData}
           disablePullDownToRefresh={!!disablePullDownToRefresh}
           extendedState={extendedState}
-          scrollIndicatorInsets={{ bottom: 40, top: 40 }}
+          scrollIndicatorInsets={{ bottom: 40, top: 132 }}
           type={type}
         />
       </StickyHeaderManager>

diff --git a/src/components/floating-emojis/CopyFloatingEmojis.js b/src/components/floating-emojis/CopyFloatingEmojis.js
@@ -8,7 +8,6 @@ const CopyFloatingEmojis = ({
   children,
   disabled,
   onPress,
-  scaleTo,
   textToCopy,
   ...props
 }) => {
@@ -37,7 +36,6 @@ const CopyFloatingEmojis = ({
             }
           }}
           radiusAndroid={24}
-          scaleTo={scaleTo}
           wrapperProps={{
             containerStyle: {
               padding: 10,

diff --git a/src/components/floating-emojis/FloatingEmojis.js b/src/components/floating-emojis/FloatingEmojis.js
@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { Animated, View } from 'react-native';
 import FloatingEmoji from './FloatingEmoji';
+import GravityEmoji from './GravityEmoji';
 import { useTimeout } from '@/hooks';
 import { position } from '@/styles';
 
@@ -19,6 +20,7 @@ const FloatingEmojis = ({
   duration,
   emojis,
   fadeOut,
+  gravityEnabled,
   marginTop,
   opacity,
   opacityThreshold,
@@ -88,26 +90,39 @@ const FloatingEmojis = ({
           ...position.coverAsObject,
         }}
       >
-        {floatingEmojis.map(({ emojiToRender, x, y }, index) => (
-          <FloatingEmoji
-            centerVertically={centerVertically}
-            disableHorizontalMovement={disableHorizontalMovement}
-            disableVerticalMovement={disableVerticalMovement}
-            distance={Math.ceil(distance)}
-            duration={duration}
-            emoji={emojiToRender}
-            fadeOut={fadeOut}
-            index={index}
-            key={`${x}${y}`}
-            left={x}
-            marginTop={marginTop}
-            opacityThreshold={opacityThreshold}
-            scaleTo={scaleTo}
-            size={size}
-            top={y}
-            wiggleFactor={wiggleFactor}
-          />
-        ))}
+        {gravityEnabled
+          ? floatingEmojis.map(({ emojiToRender, x, y }, index) => (
+              <GravityEmoji
+                key={`${x}${y}`}
+                distance={Math.ceil(distance)}
+                duration={duration}
+                emoji={emojiToRender}
+                index={index}
+                left={x - size / 2}
+                size={size}
+                top={y}
+              />
+            ))
+          : floatingEmojis.map(({ emojiToRender, x, y }, index) => (
+              <FloatingEmoji
+                centerVertically={centerVertically}
+                disableHorizontalMovement={disableHorizontalMovement}
+                disableVerticalMovement={disableVerticalMovement}
+                distance={Math.ceil(distance)}
+                duration={duration}
+                emoji={emojiToRender}
+                fadeOut={fadeOut}
+                index={index}
+                key={`${x}${y}`}
+                left={x}
+                marginTop={marginTop}
+                opacityThreshold={opacityThreshold}
+                scaleTo={scaleTo}
+                size={size}
+                top={y}
+                wiggleFactor={wiggleFactor}
+              />
+            ))}
       </Animated.View>
     </View>
   );
@@ -123,6 +138,7 @@ FloatingEmojis.propTypes = {
   duration: PropTypes.number,
   emojis: PropTypes.arrayOf(PropTypes.string).isRequired,
   fadeOut: PropTypes.bool,
+  gravityEnabled: PropTypes.bool,
   marginTop: PropTypes.number,
   opacity: PropTypes.oneOfType([PropTypes.number, PropTypes.object]),
   opacityThreshold: PropTypes.number,

diff --git a/src/components/floating-emojis/FloatingEmojisTapHandler.js b/src/components/floating-emojis/FloatingEmojisTapHandler.js
@@ -8,16 +8,17 @@ export default function FloatingEmojisTapHandler({
   disabled = false,
   onNewEmoji,
   onPress,
+  yOffset,
   ...props
 }) {
   const handleTap = useCallback(
     ({ nativeEvent: { state, x, y } }) => {
       if (state === State.ACTIVE) {
-        onNewEmoji?.(x, y);
+        onNewEmoji?.(x, y + (yOffset || 0));
         onPress?.();
       }
     },
-    [onNewEmoji, onPress]
+    [onNewEmoji, onPress, yOffset]
   );
 
   return (

diff --git a/src/components/floating-emojis/FloatingEmojisTapper.js b/src/components/floating-emojis/FloatingEmojisTapper.js
@@ -9,6 +9,7 @@ export default function FloatingEmojisTapper({
   disabled,
   onPress,
   radiusAndroid,
+  yOffset,
   ...props
 }) {
   return (
@@ -24,6 +25,7 @@ export default function FloatingEmojisTapper({
           disabled={disabled}
           onNewEmoji={onNewEmoji}
           onPress={onPress}
+          yOffset={yOffset}
         >
           <ButtonPressAnimation
             disabled={disabled}

diff --git a/src/components/floating-emojis/GravityEmoji.tsx b/src/components/floating-emojis/GravityEmoji.tsx
@@ -0,0 +1,108 @@
+import React, { useLayoutEffect } from 'react';
+import Animated, {
+  Easing,
+  interpolate,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import { Emoji } from '../text';
+
+interface GravityEmojiProps {
+  distance: number;
+  emoji: string;
+  left: number;
+  size: number;
+  top: number;
+}
+
+const GravityEmoji = ({
+  distance,
+  emoji,
+  left,
+  size,
+  top,
+}: GravityEmojiProps) => {
+  const animation = useSharedValue(0);
+
+  const getRandomNumber = (spread = 180) =>
+    Math.random() * (spread - -spread) + -spread;
+
+  const randomSpin = getRandomNumber(1080);
+  const randomDistance = Math.random() * 200 + 300;
+
+  const duration = 2000;
+  const timeDilation = 1000;
+
+  // 👾 GRAVITY SIMULATION 👾 //
+  const g = 9.81;
+  const scaledGravity = g * timeDilation * timeDilation;
+
+  // Determine initial trajectory angle
+  const verticalBias = Math.random();
+  let theta: number;
+
+  if (verticalBias < 0.9) {
+    // 90% odds to move upwards
+    theta = (5 * Math.PI) / 3 + (verticalBias - 0.9) * ((2 * Math.PI) / 3);
+  } else {
+    // 10% odds to move downwards
+    theta = Math.PI / 3 + (verticalBias * 10 - 1) * ((4 * Math.PI) / 3);
+  }
+
+  // Determine initial velocities
+  const xBoost = 3;
+  const yBoost = 9;
+  const v0x = xBoost * randomDistance * Math.cos(theta) * timeDilation;
+  const v0y =
+    (verticalBias < 0.9 ? yBoost : 0.1) *
+    randomDistance *
+    Math.sin(theta) *
+    timeDilation;
+
+  useLayoutEffect(() => {
+    animation.value = withTiming(2, {
+      duration,
+      easing: Easing.linear,
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const animatedStyle = useAnimatedStyle(() => {
+    const progress = interpolate(animation.value, [0, 1], [0, distance]);
+
+    const scale = 0.5;
+    const rotate =
+      interpolate(progress, [0, distance], [0, randomSpin]) + 'deg';
+
+    const t = animation.value;
+    const translateX = (v0x * t) / timeDilation;
+    const translateY = (v0y * t + 0.5 * scaledGravity * t * t) / timeDilation;
+
+    return {
+      transform: [{ scale }, { translateX }, { translateY }, { rotate }],
+    };
+  });
+
+  return (
+    <Animated.View
+      style={[
+        {
+          left,
+          position: 'absolute',
+          top: top || size * -0.5,
+        },
+        animatedStyle,
+      ]}
+    >
+      <Emoji
+        name={emoji}
+        // @ts-expect-error – JS component
+        size={size}
+      />
+    </Animated.View>
+  );
+};
+
+const neverRerender = () => true;
+export default React.memo(GravityEmoji, neverRerender);
diff --git a/src/components/icons/TabBarIcon.tsx b/src/components/icons/TabBarIcon.tsx
@@ -17,6 +17,7 @@ type TabBarIconProps = {
   index: number;
   reanimatedPosition: SharedValue<number>;
   hideShadow?: boolean;
+  size?: number;
   tintBackdrop?: string;
   tintOpacity?: number;
 };
@@ -27,6 +28,7 @@ export function TabBarIcon({
   icon,
   index,
   reanimatedPosition,
+  size,
   tintBackdrop,
   tintOpacity,
 }: TabBarIconProps) {
@@ -171,14 +173,16 @@ export function TabBarIcon({
   return (
     <Animated.View style={hideShadow ? undefined : iconShadowBlack}>
       <Animated.View style={hideShadow ? undefined : iconShadow}>
-        <Box height={{ custom: 28 }} width={{ custom: 28 }}>
+        <Box height={{ custom: size || 28 }} width={{ custom: size || 28 }}>
           <Cover alignHorizontal="center" alignVertical="center">
-            <MaskedView maskElement={<Icon name={icon + 'InnerFill'} />}>
+            <MaskedView
+              maskElement={<Icon name={icon + 'InnerFill'} size={size} />}
+            >
               <Box
                 as={Animated.View}
-                height={{ custom: 28 }}
+                height={{ custom: size || 28 }}
                 style={innerFillColor}
-                width={{ custom: 28 }}
+                width={{ custom: size || 28 }}
               >
                 {hasTransparentInnerFill && (
                   <Box
@@ -192,23 +196,25 @@ export function TabBarIcon({
             </MaskedView>
           </Cover>
           <Cover alignHorizontal="center" alignVertical="center">
-            <MaskedView maskElement={<Icon name={icon} />}>
+            <MaskedView maskElement={<Icon name={icon} size={size} />}>
               <Box
                 as={Animated.View}
-                height={{ custom: 28 }}
+                height={{ custom: size || 28 }}
                 style={iconColor}
-                width={{ custom: 28 }}
+                width={{ custom: size || 28 }}
               />
             </MaskedView>
           </Cover>
           {!hasTransparentInnerFill && (
             <Cover alignHorizontal="center" alignVertical="center">
-              <MaskedView maskElement={<Icon name={icon + 'Inner'} />}>
+              <MaskedView
+                maskElement={<Icon name={icon + 'Inner'} size={size} />}
+              >
                 <Box
                   as={Animated.View}
-                  height={{ custom: 28 }}
+                  height={{ custom: size || 28 }}
                   style={innerIconColor}
-                  width={{ custom: 28 }}
+                  width={{ custom: size || 28 }}
                 >
                   <Box
                     as={Animated.View}

diff --git a/src/components/icons/svg/TabPoints.js b/src/components/icons/svg/TabPoints.js
diff --git a/src/components/icons/svg/TabPointsInner.js b/src/components/icons/svg/TabPointsInner.js
@@ -2,9 +2,13 @@ import React from 'react';
 import { Path } from 'react-native-svg';
 import Svg from '../Svg';
 
-const TabPointsInner = ({ colors = undefined, color = colors.white }) => {
+const TabPointsInner = ({
+  colors = undefined,
+  color = colors.white,
+  size = 28,
+}) => {
   return (
-    <Svg height="28" viewBox="0 0 28 28" width="28">
+    <Svg height={size} viewBox="0 0 28 28" width={size}>
       <Path
         clipRule="evenodd"
         d="M14.5888 6.29531C15.2565 5.44128 15.6535 5.40555 15.8185 5.44063C15.9835 5.4757 16.3317 5.66983 16.5942 6.72156C16.8401 7.70641 16.8935 9.03945 16.8291 10.4531C16.7656 11.8461 16.5927 13.2275 16.4336 14.2679C16.3913 14.5447 16.3502 14.7961 16.3127 15.0157C15.498 15.0451 14.6657 14.976 13.8299 14.7983C12.9938 14.6206 12.2051 14.3451 11.4726 13.9867C11.5276 13.7708 11.5923 13.5245 11.6662 13.2546C11.9441 12.2394 12.348 10.9071 12.8565 9.60872C13.3727 8.29108 13.9637 7.09502 14.5888 6.29531ZM21.166 16.3577C20.3121 16.1762 19.5077 15.8927 18.7621 15.523C18.8058 15.2702 18.8546 14.9747 18.9049 14.6457C19.0716 13.5552 19.2576 12.0794 19.3265 10.5669C19.3831 9.32375 19.3644 7.99114 19.1632 6.8068C22.251 8.77626 24.1021 12.3276 23.8248 16.0892C23.804 16.3712 23.5765 16.5812 23.2977 16.5816C22.596 16.5824 21.8825 16.51 21.166 16.3577ZM9.25489 12.5945C9.16699 12.9156 9.09134 13.2055 9.02844 13.4543C8.19724 13.4887 7.34737 13.4204 6.49381 13.239C5.77736 13.0867 5.09609 12.8627 4.45538 12.5765C4.20076 12.4628 4.07835 12.1784 4.17408 11.9123C5.45064 8.36345 8.58567 5.87224 12.2071 5.32861C11.5416 6.32866 10.9826 7.5383 10.5288 8.69692C9.97657 10.1066 9.54615 11.5305 9.25489 12.5945Z"

diff --git a/src/components/icons/svg/TabPointsInnerFill.js b/src/components/icons/svg/TabPointsInnerFill.js
@@ -2,9 +2,13 @@ import React from 'react';
 import { Path } from 'react-native-svg';
 import Svg from '../Svg';
 
-const TabPointsInnerFill = ({ colors = undefined, color = colors.black }) => {
+const TabPointsInnerFill = ({
+  colors = undefined,
+  color = colors.black,
+  size = 28,
+}) => {
   return (
-    <Svg height="28" viewBox="0 0 28 28" width="28">
+    <Svg height={size} viewBox="0 0 28 28" width={size}>
       <Path
         d="M13.5702 16.021C14.8553 16.2942 16.1359 16.3389 17.3696 16.1827C18.4332 16.8272 19.6212 17.3072 20.9063 17.5803C21.7092 17.751 22.5104 17.8325 23.2994 17.8315C24.2344 17.8304 25.0029 17.1135 25.0716 16.1811C25.4837 10.5913 21.7149 5.41595 16.079 4.21801C10.4432 3.02007 4.89522 6.21504 2.99806 11.4892C2.68159 12.369 3.09209 13.3365 3.94576 13.7178C4.66619 14.0396 5.4312 14.291 6.23411 14.4617C7.51923 14.7348 8.79978 14.7796 10.0335 14.6233C11.0971 15.2679 12.2851 15.7478 13.5702 16.021Z"
         fill={color}