Skip to content
This repository has been archived by the owner on May 7, 2023. It is now read-only.

Commit

Permalink
Migrate to reanimated v2 for logo animation (#431)
Browse files Browse the repository at this point in the history 
* Migrate to react-native-reanimated-v2 for logo animation in [SiginIn] page

* Fix test fail
  • Loading branch information
@DevYuns
DevYuns authored Jul 21, 2021
1 parent ff86843 commit 7f60fed
Show file tree
Hide file tree
Showing 5 changed files with 37 additions and 95 deletions.
3 changes: 1 addition & 2 deletions client/.ncurc.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@
"react-native-reanimated",
"react-native-screens",
"react-native-safe-area-context",
"@types/react-native",
"react-native-redash"
"@types/react-native"
]
}
1 change: 0 additions & 1 deletion client/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
93 changes: 34 additions & 59 deletions client/src/components/pages/SignIn/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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';
Expand Down Expand Up @@ -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<number>(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 (
<Container>
<StatusBarBrightness />

<StyledScrollView>
<AnimatedTouchableOpacity
style={logoAnimStyle}
testID="theme-test"
onPress={(): void => changeThemeType()}
style={{
zIndex: 15,
position: 'absolute',
left: logoPositionX,
top: logoPositionY,
transform: [{scale: logoScale}],
}}>
onPress={(): void => changeThemeType()}>
<Image
style={{width: logoSize, height: logoSize, resizeMode: 'cover'}}
style={{width: LOGO_SIZE, height: LOGO_SIZE, resizeMode: 'cover'}}
source={themeType === 'dark' ? IC_LOGO_D : IC_LOGO_W}
/>
</AnimatedTouchableOpacity>
Expand Down
2 changes: 2 additions & 0 deletions client/test/jestSetup.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
33 changes: 0 additions & 33 deletions client/yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4136,11 +4136,6 @@ [email protected], 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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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=

[email protected]:
version "5.1.0"
resolved "https://registry.yarnpkg.com/parse5/-/parse5-5.1.0.tgz#c59341c9723f414c452975564c7c00a68d58acd2"
Expand Down Expand Up @@ -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"

[email protected]:
version "3.2.0"
resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-3.2.0.tgz#06113c6b208f982d68ab5c3cebd199ca93db6941"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down

0 comments on commit 7f60fed

Please sign in to comment.