From ee5feb1679c3a0cc58dfef404234957c2ab072e8 Mon Sep 17 00:00:00 2001 From: Paul Puey Date: Sat, 13 Jan 2024 15:55:13 -0800 Subject: [PATCH 1/2] Fix welcome scene animations on android Disable layout animations that are also gesture animated. These are broken on Android --- src/components/common/EdgeAnim.tsx | 11 +++++++++-- src/components/scenes/GettingStartedScene.tsx | 6 +++--- 2 files changed, 12 insertions(+), 5 deletions(-) diff --git a/src/components/common/EdgeAnim.tsx b/src/components/common/EdgeAnim.tsx index 073764e18cd..70d5ee7abc7 100644 --- a/src/components/common/EdgeAnim.tsx +++ b/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, @@ -35,6 +35,9 @@ interface Anim { interface Props extends AnimateProps { enter?: Anim exit?: Anim + + /** only animate on ios */ + ios?: boolean visible?: boolean } @@ -77,11 +80,15 @@ const getAnimBuilder = (anim?: Anim) => { return builder } -export const EdgeAnim = ({ children, enter, exit, visible = true, ...rest }: Props) => { +export const EdgeAnim = ({ children, enter, exit, ios = false, visible = true, ...rest }: Props) => { if (!visible) return null const entering = getAnimBuilder(enter) const exiting = getAnimBuilder(exit) + if (ios && Platform.OS !== 'ios') { + return {children} + } + return ( {children} diff --git a/src/components/scenes/GettingStartedScene.tsx b/src/components/scenes/GettingStartedScene.tsx index 1c5662054d4..c24b8734814 100644 --- a/src/components/scenes/GettingStartedScene.tsx +++ b/src/components/scenes/GettingStartedScene.tsx @@ -211,7 +211,7 @@ export const GettingStartedScene = (props: Props) => { ) })} - + {Array.from({ length: paginationCount + (isFinalSwipeEnabled ? 0 : 1) }).map((_, index) => ( handlePressIndicator(index)}> @@ -235,10 +235,10 @@ export const GettingStartedScene = (props: Props) => { })} - + - + From fc7c88578aa1ba5657c8a1f416939e44827da55e Mon Sep 17 00:00:00 2001 From: Paul Puey Date: Sat, 13 Jan 2024 17:19:02 -0800 Subject: [PATCH 2/2] Speed up txlist and walletlist loading. --- src/components/common/EdgeAnim.tsx | 17 ++++++++++++++--- src/components/scenes/CoinRankingScene.tsx | 5 +++-- src/components/scenes/TransactionListScene.tsx | 8 +++++--- src/components/themed/WalletListSwipeable.tsx | 7 ++++--- 4 files changed, 26 insertions(+), 11 deletions(-) diff --git a/src/components/common/EdgeAnim.tsx b/src/components/common/EdgeAnim.tsx index 70d5ee7abc7..29cf7b7c7ae 100644 --- a/src/components/common/EdgeAnim.tsx +++ b/src/components/common/EdgeAnim.tsx @@ -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,6 +34,12 @@ interface Anim { } interface Props extends AnimateProps { + /** + * 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 @@ -80,13 +87,17 @@ const getAnimBuilder = (anim?: Anim) => { return builder } -export const EdgeAnim = ({ children, enter, exit, ios = false, 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 (ios && Platform.OS !== 'ios') { - return {children} + if (disableType === 'anim' || (ios && Platform.OS !== 'ios')) { + return {children} + } + + if (disableType === 'view') { + return <>{children} } return ( diff --git a/src/components/scenes/CoinRankingScene.tsx b/src/components/scenes/CoinRankingScene.tsx index 1df694c659c..d4f040d6086 100644 --- a/src/components/scenes/CoinRankingScene.tsx +++ b/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 ( - + } + + const disableType = index >= MAX_LIST_ITEMS_ANIM ? 'view' : undefined if (typeof item === 'string') { return ( - + ) } return ( - + ) diff --git a/src/components/themed/WalletListSwipeable.tsx b/src/components/themed/WalletListSwipeable.tsx index b7a37d0d982..b5405a66346 100644 --- a/src/components/themed/WalletListSwipeable.tsx +++ b/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 ( - + ) } if (walletId != null) { return ( - + )