From 7f60fedcc7724b897f5d233f50cf5f3228393047 Mon Sep 17 00:00:00 2001 From: Dean Date: Wed, 21 Jul 2021 15:51:37 +0900 Subject: [PATCH] Migrate to reanimated v2 for logo animation (#431) * Migrate to react-native-reanimated-v2 for logo animation in [SiginIn] page * Fix test fail --- client/.ncurc.json | 3 +- client/package.json | 1 - client/src/components/pages/SignIn/index.tsx | 93 +++++++------------- client/test/jestSetup.ts | 2 + client/yarn.lock | 33 ------- 5 files changed, 37 insertions(+), 95 deletions(-) diff --git a/client/.ncurc.json b/client/.ncurc.json index 6aa2ac415..86859dee7 100644 --- a/client/.ncurc.json +++ b/client/.ncurc.json @@ -8,7 +8,6 @@ "react-native-reanimated", "react-native-screens", "react-native-safe-area-context", - "@types/react-native", - "react-native-redash" + "@types/react-native" ] } diff --git a/client/package.json b/client/package.json index ee09da98b..dd6e6580a 100644 --- a/client/package.json +++ b/client/package.json @@ -80,7 +80,6 @@ "react-native-modalbox": "^2.0.2", "react-native-pager-view": "5.0.12", "react-native-reanimated": "~2.2.0", - "react-native-redash": "^14.2.4", "react-native-safe-area-context": "3.2.0", "react-native-scalable-image": "^1.1.0", "react-native-screens": "~3.4.0", diff --git a/client/src/components/pages/SignIn/index.tsx b/client/src/components/pages/SignIn/index.tsx index 18859057e..a78d83998 100644 --- a/client/src/components/pages/SignIn/index.tsx +++ b/client/src/components/pages/SignIn/index.tsx @@ -11,12 +11,10 @@ import { View, } from 'react-native'; import Animated, { - block, - clockRunning, - cond, - not, - set, - useCode, + interpolate, + useAnimatedStyle, + useSharedValue, + withSpring, } from 'react-native-reanimated'; import {Button, EditText, StatusBarBrightness, useTheme} from 'dooboo-ui'; import { @@ -35,7 +33,6 @@ import type { UserSignInEmailMutation, UserSignInEmailMutationResponse, } from '../../../__generated__/UserSignInEmailMutation.graphql'; -import {delay, spring, useClock, useValue} from 'react-native-redash'; import {showAlertForError, validateEmail} from '../../../utils/common'; import {signInEmail, signInWithApple} from '../../../relay/queries/User'; import styled, {css} from '@emotion/native'; @@ -294,76 +291,54 @@ const SignIn: FC = () => { // console.log('appOwnership', Constants.appOwnership); }, []); - const logoSize = 80; - const logoTransformAnimValue = useValue(0); + const LOGO_SIZE = 80; + const logoAnimValue = useSharedValue(0); const {width: screenWidth, height: screenHeight} = Dimensions.get('window'); const logoInitialPosition = { - x: (screenWidth - logoSize) * 0.5, - y: screenHeight * 0.5 - logoSize, + x: (screenWidth - LOGO_SIZE) * 0.5, + y: screenHeight * 0.5 - LOGO_SIZE, }; - const logoFinalPosition = { - x: 30, - y: 80, - }; + useEffect(() => { + logoAnimValue.value = withSpring(1, {stiffness: 36, mass: 1.5}); + }, [logoAnimValue]); + + const logoAnimStyle = useAnimatedStyle(() => { + const left = interpolate( + logoAnimValue.value, + [0, 1], + [logoInitialPosition.x, 30], + ); - const logoScale = logoTransformAnimValue.interpolate({ - inputRange: [0, 1], - outputRange: [2, 1], - }); + const top = interpolate( + logoAnimValue.value, + [0, 1], + [logoInitialPosition.y, 80], + ); - const logoPositionX = logoTransformAnimValue.interpolate({ - inputRange: [0, 1], - outputRange: [logoInitialPosition.x, logoFinalPosition.x], - }); + const scale = interpolate(logoAnimValue.value, [0, 1], [2, 1]); - const logoPositionY = logoTransformAnimValue.interpolate({ - inputRange: [0, 1], - outputRange: [logoInitialPosition.y, logoFinalPosition.y], + return { + zIndex: 15, + position: 'absolute', + left, + top, + transform: [{scale}], + }; }); - const animating = useValue(0); - const clock = useClock(); - - useCode(() => block([delay(set(animating, 1), 100)]), []); - - useCode( - () => - block([ - cond(animating, [ - set( - logoTransformAnimValue, - spring({ - clock, - to: 1, - from: 0, - config: {mass: 1.5, stiffness: 36}, - }), - ), - ]), - cond(not(clockRunning(clock)), set(animating, 0)), - ]), - [], - ); - return ( changeThemeType()} - style={{ - zIndex: 15, - position: 'absolute', - left: logoPositionX, - top: logoPositionY, - transform: [{scale: logoScale}], - }}> + onPress={(): void => changeThemeType()}> diff --git a/client/test/jestSetup.ts b/client/test/jestSetup.ts index 2e1817114..25db0cf30 100644 --- a/client/test/jestSetup.ts +++ b/client/test/jestSetup.ts @@ -4,6 +4,8 @@ import mockAsyncStorage from '@react-native-async-storage/async-storage/jest/asy jest.mock('@react-native-async-storage/async-storage', () => mockAsyncStorage); +global.__reanimatedWorkletInit = jest.fn(); + const customGlobal: GlobalWithFetchMock = global as GlobalWithFetchMock & // eslint-disable-next-line no-undef typeof globalThis; diff --git a/client/yarn.lock b/client/yarn.lock index 11c56641e..df35e26f6 100644 --- a/client/yarn.lock +++ b/client/yarn.lock @@ -4136,11 +4136,6 @@ abort-controller@3.0.0, abort-controller@^3.0.0: dependencies: event-target-shim "^5.0.0" -abs-svg-path@^0.1.1: - version "0.1.1" - resolved "https://registry.yarnpkg.com/abs-svg-path/-/abs-svg-path-0.1.1.tgz#df601c8e8d2ba10d4a76d625e236a9a39c2723bf" - integrity sha1-32Acjo0roQ1KdtYl4japo5wnI78= - absolute-path@^0.0.0: version "0.0.0" resolved "https://registry.yarnpkg.com/absolute-path/-/absolute-path-0.0.0.tgz#a78762fbdadfb5297be99b15d35a785b2f095bf7" @@ -12450,13 +12445,6 @@ normalize-path@^3.0.0, normalize-path@~3.0.0: resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65" integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA== -normalize-svg-path@^1.0.1: - version "1.1.0" - resolved "https://registry.yarnpkg.com/normalize-svg-path/-/normalize-svg-path-1.1.0.tgz#0e614eca23c39f0cffe821d6be6cd17e569a766c" - integrity sha512-r9KHKG2UUeB5LoTouwDzBy2VxXlHsiM6fyLQvnJa0S5hrhzqElH/CH7TUGhT1fVvIYBIKf3OpY4YJ4CK+iaqHg== - dependencies: - svg-arc-to-cubic-bezier "^3.0.0" - normalize-url@^2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-2.0.1.tgz#835a9da1551fa26f70e92329069a23aa6574d7e6" @@ -12986,11 +12974,6 @@ parse-srcset@^1.0.2: resolved "https://registry.yarnpkg.com/parse-srcset/-/parse-srcset-1.0.2.tgz#f2bd221f6cc970a938d88556abc589caaaa2bde1" integrity sha1-8r0iH2zJcKk42IVWq8WJyqqiveE= -parse-svg-path@^0.1.2: - version "0.1.2" - resolved "https://registry.yarnpkg.com/parse-svg-path/-/parse-svg-path-0.1.2.tgz#7a7ec0d1eb06fa5325c7d3e009b859a09b5d49eb" - integrity sha1-en7A0esG+lMlx9PgCbhZoJtdSes= - parse5@5.1.0: version "5.1.0" resolved "https://registry.yarnpkg.com/parse5/-/parse5-5.1.0.tgz#c59341c9723f414c452975564c7c00a68d58acd2" @@ -14078,15 +14061,6 @@ react-native-reanimated@~2.2.0: mockdate "^3.0.2" string-hash-64 "^1.0.3" -react-native-redash@^14.2.4: - version "14.2.4" - resolved "https://registry.yarnpkg.com/react-native-redash/-/react-native-redash-14.2.4.tgz#5dbb4b2f1a7441bb304fe3494b89e0dc9010c8ef" - integrity sha512-/1R9UxXv3ffKcrbxolqa2B247Cgd3ikyEm2q1VlBng77Es6PAD4LAOXQ83pBavvwNfOsbhF3ebkbMpJcLaVt3Q== - dependencies: - abs-svg-path "^0.1.1" - normalize-svg-path "^1.0.1" - parse-svg-path "^0.1.2" - react-native-safe-area-context@3.2.0: version "3.2.0" resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-3.2.0.tgz#06113c6b208f982d68ab5c3cebd199ca93db6941" @@ -15806,11 +15780,6 @@ supports-hyperlinks@^2.0.0: has-flag "^4.0.0" supports-color "^7.0.0" -svg-arc-to-cubic-bezier@^3.0.0: - version "3.2.0" - resolved "https://registry.yarnpkg.com/svg-arc-to-cubic-bezier/-/svg-arc-to-cubic-bezier-3.2.0.tgz#390c450035ae1c4a0104d90650304c3bc814abe6" - integrity sha512-djbJ/vZKZO+gPoSDThGNpKDO+o+bAeA4XQKovvkNCqnIS2t+S4qnLAGQhyyrulhCFRl1WWzAp0wUDV8PpTVU3g== - svg-parser@^2.0.0, svg-parser@^2.0.2: version "2.0.4" resolved "https://registry.yarnpkg.com/svg-parser/-/svg-parser-2.0.4.tgz#fdc2e29e13951736140b76cb122c8ee6630eb6b5" @@ -16790,10 +16759,8 @@ watchpack@^1.6.1: resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.7.5.tgz#1267e6c55e0b9b5be44c2023aed5437a2c26c453" integrity sha512-9P3MWk6SrKjHsGkLT2KHXdQ/9SNkyoJbabxnKOoJepsvJjJG8uYTR3yTPxPQvNDI3w4Nz1xnE0TLHK4RIVe/MQ== dependencies: - chokidar "^3.4.1" graceful-fs "^4.1.2" neo-async "^2.5.0" - watchpack-chokidar2 "^2.0.1" optionalDependencies: chokidar "^3.4.1" watchpack-chokidar2 "^2.0.1"