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

Migrate to reanimated v2 for logo animation #431

Merged
merged 2 commits into from
Jul 21, 2021
Merged

Migrate to reanimated v2 for logo animation #431

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
331b7cd
Migrate to react-native-reanimated-v2 for logo animation in [SiginIn]…
DevYuns Jul 21, 2021
9c38ed4
Fix test fail
DevYuns Jul 21, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions client/.ncurc.json
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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