Fix and Tweak Animations

src/components/common/EdgeAnim.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { ViewProps } from 'react-native'
+import { Platform, ViewProps } from 'react-native'
 import Animated, {
   AnimateProps,
   ComplexAnimationBuilder,
@@ -19,6 +19,7 @@ import Animated, {
 
 export const DEFAULT_ANIMATION_DURATION_MS = 300
 export const LAYOUT_ANIMATION = LinearTransition.duration(DEFAULT_ANIMATION_DURATION_MS)
+export const MAX_LIST_ITEMS_ANIM = 10
 
 type AnimBuilder = typeof ComplexAnimationBuilder
 type AnimTypeFadeIns = 'fadeIn' | 'fadeInDown' | 'fadeInUp' | 'fadeInLeft' | 'fadeInRight'
@@ -33,8 +34,17 @@ interface Anim {
 }
 
 interface Props extends AnimateProps<ViewProps> {
+  /**
+   * disable animation
+   * anim => disable animation but still render a container view
+   * view => render the children with no container view
+   * */
+  disableType?: 'anim' | 'view'
   enter?: Anim
   exit?: Anim
+
+  /** only animate on ios */
+  ios?: boolean
   visible?: boolean
 }
 
@@ -77,11 +87,19 @@ const getAnimBuilder = (anim?: Anim) => {
   return builder
 }
 
-export const EdgeAnim = ({ children, enter, exit, visible = true, ...rest }: Props) => {
+export const EdgeAnim = ({ children, disableType, enter, exit, ios = false, visible = true, ...rest }: Props): JSX.Element | null => {
   if (!visible) return null
   const entering = getAnimBuilder(enter)
   const exiting = getAnimBuilder(exit)
 
+  if (disableType === 'anim' || (ios && Platform.OS !== 'ios')) {
+    return <Animated.View {...rest}>{children}</Animated.View>
+  }
+
+  if (disableType === 'view') {
+    return <>{children}</>
+  }
+
   return (
     <Animated.View layout={LAYOUT_ANIMATION} entering={entering} exiting={exiting} {...rest}>
       {children}

src/components/scenes/CoinRankingScene.tsx

@@ -15,7 +15,7 @@ import { useSelector } from '../../types/reactRedux'
 import { EdgeSceneProps } from '../../types/routerTypes'
 import { debugLog, enableDebugLogType, LOG_COINRANK } from '../../util/logger'
 import { fetchRates } from '../../util/network'
-import { EdgeAnim } from '../common/EdgeAnim'
+import { EdgeAnim, MAX_LIST_ITEMS_ANIM } from '../common/EdgeAnim'
 import { SceneWrapper, SceneWrapperInfo } from '../common/SceneWrapper'
 import { CoinRankRow } from '../data/row/CoinRankRow'
 import { showError } from '../services/AirshipInstance'
@@ -81,8 +81,9 @@ const CoinRankingComponent = (props: Props) => {
     const key = `${index}-${item}-${rank}-${currencyCode}-${lastUsedFiat}`
     debugLog(LOG_COINRANK, `renderItem ${key.toString()}`)
 
+    const disableType = index >= MAX_LIST_ITEMS_ANIM ? 'view' : undefined
     return (
-      <EdgeAnim enter={{ type: 'fadeInRight', distance: 20 * (index + 1) }}>
+      <EdgeAnim disableType={disableType} enter={{ type: 'fadeInDown', distance: 20 * (index + 1) }}>
         <CoinRankRow
           navigation={navigation}
           index={item}

src/components/scenes/GettingStartedScene.tsx

@@ -211,7 +211,7 @@ export const GettingStartedScene = (props: Props) => {
               )
             })}
           </HeroContainer>
-          <EdgeAnim enter={{ type: 'fadeInDown', duration: ANIM_DURATION, distance: 20 }}>
+          <EdgeAnim ios enter={{ type: 'fadeInDown', duration: ANIM_DURATION, distance: 20 }}>
             <Pagination>
               {Array.from({ length: paginationCount + (isFinalSwipeEnabled ? 0 : 1) }).map((_, index) => (
                 <Pressable key={index} onPress={() => handlePressIndicator(index)}>
@@ -235,10 +235,10 @@ export const GettingStartedScene = (props: Props) => {
               })}
             </Sections>
             <Space horizontal={2}>
-              <EdgeAnim enter={{ type: 'fadeInDown', duration: ANIM_DURATION, distance: 40 }}>
+              <EdgeAnim ios enter={{ type: 'fadeInDown', duration: ANIM_DURATION, distance: 40 }}>
                 <MainButton onPress={handlePressSignUp} label={lstrings.account_get_started} />
               </EdgeAnim>
-              <EdgeAnim enter={{ type: 'fadeInDown', duration: ANIM_DURATION, distance: 60 }}>
+              <EdgeAnim ios enter={{ type: 'fadeInDown', duration: ANIM_DURATION, distance: 60 }}>
                 <MainButton type="escape" onPress={handlePressSignIn} label={lstrings.getting_started_button_sign_in} />
               </EdgeAnim>
             </Space>

src/components/scenes/TransactionListScene.tsx

@@ -22,7 +22,7 @@ import { FlatListItem } from '../../types/types'
 import { fetchInfo } from '../../util/network'
 import { calculateSpamThreshold, darkenHexColor, unixToLocaleDateTime, zeroString } from '../../util/utils'
 import { AssetStatusCard } from '../cards/AssetStatusCard'
-import { EdgeAnim } from '../common/EdgeAnim'
+import { EdgeAnim, MAX_LIST_ITEMS_ANIM } from '../common/EdgeAnim'
 import { SceneWrapper, SceneWrapperInfo } from '../common/SceneWrapper'
 import { withWallet } from '../hoc/withWallet'
 import { useTheme } from '../services/ThemeContext'
@@ -225,15 +225,17 @@ function TransactionListComponent(props: Props) {
     if (item == null) {
       return <EmptyLoader />
     }
+
+    const disableType = index >= MAX_LIST_ITEMS_ANIM ? 'view' : undefined
     if (typeof item === 'string') {
       return (
-        <EdgeAnim enter={{ type: 'fadeInLeft', distance: 30 * (index + 1) }}>
+        <EdgeAnim disableType={disableType} enter={{ type: 'fadeInDown', distance: 30 * (index + 1) }}>
           <SectionHeader title={item} />
         </EdgeAnim>
       )
     }
     return (
-      <EdgeAnim enter={{ type: 'fadeInRight', distance: 30 * (index + 1) }}>
+      <EdgeAnim disableType={disableType} enter={{ type: 'fadeInDown', distance: 30 * (index + 1) }}>
         <TransactionListRow navigation={navigation} transaction={item} wallet={wallet} />
       </EdgeAnim>
     )

src/components/themed/WalletListSwipeable.tsx

@@ -9,7 +9,7 @@ import { useDispatch, useSelector } from '../../types/reactRedux'
 import { NavigationProp } from '../../types/routerTypes'
 import { FlatListItem } from '../../types/types'
 import { getTokenIdForced } from '../../util/CurrencyInfoHelpers'
-import { EdgeAnim } from '../common/EdgeAnim'
+import { EdgeAnim, MAX_LIST_ITEMS_ANIM } from '../common/EdgeAnim'
 import { InsetStyles } from '../common/SceneWrapper'
 import { searchWalletList } from '../services/SortedWalletList'
 import { useTheme } from '../services/ThemeContext'
@@ -101,16 +101,17 @@ function WalletListSwipeableComponent(props: Props) {
 
     const { token, tokenId, wallet, walletId } = item.item
 
+    const disableType = index >= MAX_LIST_ITEMS_ANIM ? 'view' : undefined
     if (wallet != null) {
       return (
-        <EdgeAnim enter={{ type: 'fadeInRight', distance: 20 * (index + 1) }}>
+        <EdgeAnim disableType={disableType} enter={{ type: 'fadeInDown', distance: 20 * (index + 1) }}>
           <WalletListSwipeableCurrencyRow navigation={navigation} token={token} tokenId={tokenId} wallet={wallet} />
         </EdgeAnim>
       )
     }
     if (walletId != null) {
       return (
-        <EdgeAnim enter={{ type: 'fadeInRight', distance: 20 * (index + 1) }}>
+        <EdgeAnim disableType={disableType} enter={{ type: 'fadeInDown', distance: 20 * (index + 1) }}>
           <WalletListSwipeableLoadingRow navigation={navigation} walletId={walletId} />
         </EdgeAnim>
       )