diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/common/BottomDrawer.tsx | 13 | ||||
| -rw-r--r-- | src/components/search/SearchBar.tsx | 20 | ||||
| -rw-r--r-- | src/components/search/SearchResultsBackground.tsx | 20 | ||||
| -rw-r--r-- | src/components/taggs/TaggsBar.tsx | 41 | ||||
| -rw-r--r-- | src/routes/main/MainStackScreen.tsx | 18 |
5 files changed, 63 insertions, 49 deletions
diff --git a/src/components/common/BottomDrawer.tsx b/src/components/common/BottomDrawer.tsx index bef9434a..173823b1 100644 --- a/src/components/common/BottomDrawer.tsx +++ b/src/components/common/BottomDrawer.tsx @@ -78,12 +78,13 @@ const BottomDrawer: React.FC<BottomDrawerProps> = (props) => { <Animated.View style={[ styles.backgroundView, - { - backgroundColor: Animated.interpolateColors(bgAlpha, { - inputRange: [0, 1], - outputColorRange: ['rgba(0,0,0,0.3)', 'rgba(0,0,0,0)'], - }), - }, + // TODO: (Leon) use reanimated v2 + // { + // backgroundColor: Animated.interpolateColors(bgAlpha, { + // inputRange: [0, 1], + // outputColorRange: ['rgba(0,0,0,0.3)', 'rgba(0,0,0,0)'], + // }), + // }, ]} /> </TouchableWithoutFeedback> diff --git a/src/components/search/SearchBar.tsx b/src/components/search/SearchBar.tsx index 4824b56f..7b833406 100644 --- a/src/components/search/SearchBar.tsx +++ b/src/components/search/SearchBar.tsx @@ -109,14 +109,18 @@ const SearchBar: React.FC<SearchBarProps> = ({ /* * Animated nodes used in search bar activation animation. */ - const marginRight: Animated.Node<number> = interpolate(top, { - inputRange: [-SCREEN_HEIGHT, 0], - outputRange: [0, 58], - }); - const opacity: Animated.Node<number> = interpolate(top, { - inputRange: [-SCREEN_HEIGHT, 0], - outputRange: [0, 1], - }); + // TODO: (Leon) use reanimated v2 + const marginRight = 0; + // const marginRight: Animated.Node<number> = interpolate(top, { + // inputRange: [-SCREEN_HEIGHT, 0], + // outputRange: [0, 58], + // }); + // TODO: (Leon) use reanimated v2 + const opacity = 0; + // const opacity: Animated.Node<number> = interpolate(top, { + // inputRange: [-SCREEN_HEIGHT, 0], + // outputRange: [0, 1], + // }); return ( <View style={styles.container}> diff --git a/src/components/search/SearchResultsBackground.tsx b/src/components/search/SearchResultsBackground.tsx index 2833553d..3d7fab4e 100644 --- a/src/components/search/SearchResultsBackground.tsx +++ b/src/components/search/SearchResultsBackground.tsx @@ -10,14 +10,18 @@ const SearchResultsBackground: React.FC<SearchResultsBackgroundProps> = ({ top, children, }) => { - const opacityBackground: Animated.Node<number> = interpolate(top, { - inputRange: [-SCREEN_HEIGHT, 0], - outputRange: [0, 1], - }); - const opacityContent: Animated.Node<number> = interpolate(top, { - inputRange: [-SCREEN_HEIGHT / 40, 0], - outputRange: [0, 1], - }); + // TODO: (Leon) use reanimated v2 + const opacityBackground = 0; + // const opacityBackground: Animated.Node<number> = interpolate(top, { + // inputRange: [-SCREEN_HEIGHT, 0], + // outputRange: [0, 1], + // }); + // TODO: (Leon) use reanimated v2 + const opacityContent = 0; + // const opacityContent: Animated.Node<number> = interpolate(top, { + // inputRange: [-SCREEN_HEIGHT / 40, 0], + // outputRange: [0, 1], + // }); return ( <Animated.View style={[styles.container, {opacity: opacityBackground, top}]}> diff --git a/src/components/taggs/TaggsBar.tsx b/src/components/taggs/TaggsBar.tsx index 567b58de..a87da3e2 100644 --- a/src/components/taggs/TaggsBar.tsx +++ b/src/components/taggs/TaggsBar.tsx @@ -112,25 +112,28 @@ const TaggsBar: React.FC<TaggsBarProps> = ({ loadData(); } }, [taggsNeedUpdate, user]); - - const shadowOpacity: Animated.Node<number> = interpolate(y, { - inputRange: [ - PROFILE_CUTOUT_BOTTOM_Y + profileBodyHeight, - PROFILE_CUTOUT_BOTTOM_Y + profileBodyHeight + 20, - ], - outputRange: [0, 0.2], - extrapolate: Extrapolate.CLAMP, - }); - const paddingTop: Animated.Node<number> = interpolate(y, { - inputRange: [ - PROFILE_CUTOUT_BOTTOM_Y + - profileBodyHeight - - (useSafeAreaInsets().top + 10), - PROFILE_CUTOUT_BOTTOM_Y + profileBodyHeight, - ], - outputRange: [10, useSafeAreaInsets().top], - extrapolate: Extrapolate.CLAMP, - }); +// TODO: (Leon) use reanimated v2 + const shadowOpacity = 0; + // const shadowOpacity: Animated.Node<number> = interpolate(y, { + // inputRange: [ + // PROFILE_CUTOUT_BOTTOM_Y + profileBodyHeight, + // PROFILE_CUTOUT_BOTTOM_Y + profileBodyHeight + 20, + // ], + // outputRange: [0, 0.2], + // extrapolate: Extrapolate.CLAMP, + // }); + // TODO: (Leon) use reanimated v2 + const paddingTop = 0; + // const paddingTop: Animated.Node<number> = interpolate(y, { + // inputRange: [ + // PROFILE_CUTOUT_BOTTOM_Y + + // profileBodyHeight - + // (useSafeAreaInsets().top + 10), + // PROFILE_CUTOUT_BOTTOM_Y + profileBodyHeight, + // ], + // outputRange: [10, useSafeAreaInsets().top], + // extrapolate: Extrapolate.CLAMP, + // }); return taggs.length > 0 ? ( <View diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx index 8068b893..b72ab779 100644 --- a/src/routes/main/MainStackScreen.tsx +++ b/src/routes/main/MainStackScreen.tsx @@ -98,10 +98,11 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => { cardOverlayEnabled: true, cardStyleInterpolator: ({current: {progress}}) => ({ cardStyle: { - opacity: progress.interpolate({ - inputRange: [0, 0.5, 0.9, 1], - outputRange: [0, 0.25, 0.7, 1], - }), + // TODO: (Leon) use reanimated v2 + // opacity: progress.interpolate({ + // inputRange: [0, 0.5, 0.9, 1], + // outputRange: [0, 0.25, 0.7, 1], + // }), }, }), }; @@ -348,10 +349,11 @@ export const modalStyle: StackNavigationOptions = { cardOverlayEnabled: true, cardStyleInterpolator: ({current: {progress}}) => ({ cardStyle: { - opacity: progress.interpolate({ - inputRange: [0, 0.5, 0.9, 1], - outputRange: [0, 0.25, 0.7, 1], - }), + // TODO: (Leon) use reanimated v2 + // opacity: progress.interpolate({ + // inputRange: [0, 0.5, 0.9, 1], + // outputRange: [0, 0.25, 0.7, 1], + // }), }, }), }; |