diff --git a/packages/mobile/src/components/drawer/Drawer.tsx b/packages/mobile/src/components/drawer/Drawer.tsx index e6bbba4fc4..266a37d7ef 100644 --- a/packages/mobile/src/components/drawer/Drawer.tsx +++ b/packages/mobile/src/components/drawer/Drawer.tsx @@ -1,22 +1,17 @@ import type { ReactNode } from 'react' -import { useCallback, useEffect, useRef, useState } from 'react' +import { useMemo, useCallback, useEffect, useRef, useState } from 'react' import type { GestureResponderEvent, ImageSourcePropType, - ImageStyle, LayoutChangeEvent, PanResponderGestureState, ViewStyle } from 'react-native' import { Animated, - Image, PanResponder, Platform, - StyleSheet, - Text, - TouchableOpacity, TouchableWithoutFeedback, View } from 'react-native' @@ -24,13 +19,11 @@ import type { Edge } from 'react-native-safe-area-context' import { SafeAreaView } from 'react-native-safe-area-context' import { useSelector } from 'react-redux' -import IconRemove from 'app/assets/images/iconRemove.svg' -import type { ThemeColors } from 'app/hooks/useThemedStyles' -import { useThemedStyles } from 'app/hooks/useThemedStyles' import { getAndroidNavigationBarHeight } from 'app/store/mobileUi/selectors' +import { makeStyles } from 'app/styles' import { attachToDy } from 'app/utils/animation' -import { useColor } from 'app/utils/theme' +import { DrawerHeader } from './DrawerHeader' import { FULL_DRAWER_HEIGHT } from './constants' const MAX_SHADOW_OPACITY = 0.15 @@ -42,94 +35,52 @@ const BACKGROUND_OPACITY = 0.5 // Controls the amount of friction in swiping when overflowing up or down const OVERFLOW_FRICTION = 4 -const createStyles = - (zIndex = 5, shouldAnimateShadow = true) => - (themeColors: ThemeColors) => - StyleSheet.create({ - drawer: { - backgroundColor: themeColors.neutralLight10, - position: 'absolute', - top: 0, - left: 0, - width: '100%', - elevation: zIndex, - zIndex, - shadowOpacity: shouldAnimateShadow ? 0 : MAX_SHADOW_OPACITY, - shadowRadius: 15, - borderTopRightRadius: BORDER_RADIUS, - borderTopLeftRadius: BORDER_RADIUS, - overflow: 'hidden' - }, - - fullDrawer: { - top: 0, - height: '100%' - }, - - content: { - height: 'auto' - }, - - fullScreenContent: { - height: '100%' - }, - - titleBarContainer: { - display: 'flex', - flexDirection: 'row', - alignItems: 'center', - justifyContent: 'center', - padding: 24 - }, - - dismissContainer: { - position: 'absolute', - top: 24, - left: 24 - }, - - titleContainer: { - display: 'flex', - flexDirection: 'row', - alignItems: 'center', - justifyContent: 'center', - paddingTop: 20 - }, - - titleIcon: { - marginRight: 12, - height: 24, - width: 24 - }, - - titleLabel: { - fontFamily: 'AvenirNextLTPro-Bold', - fontSize: 18, - color: themeColors.neutral - }, - - isOpen: { - shadowOpacity: 0.25, - shadowOffset: { - width: 50, - height: 15 - } - }, - - background: { - position: 'absolute', - backgroundColor: 'black', - top: 0, - height: '100%', - width: '100%' - }, - - skirt: { - backgroundColor: themeColors.neutralLight10, - width: '100%', - height: 800 - } - }) +export const useStyles = makeStyles( + ({ palette }, { zIndex = 5, shouldAnimateShadow = true }) => ({ + drawer: { + backgroundColor: palette.neutralLight10, + position: 'absolute', + top: 0, + left: 0, + width: '100%', + elevation: zIndex, + zIndex, + shadowOpacity: shouldAnimateShadow ? 0 : MAX_SHADOW_OPACITY, + shadowRadius: 15, + borderTopRightRadius: BORDER_RADIUS, + borderTopLeftRadius: BORDER_RADIUS, + overflow: 'hidden' + }, + fullDrawer: { + top: 0, + height: '100%' + }, + content: { + height: 'auto' + }, + fullScreenContent: { + height: '100%' + }, + dismissContainer: { + position: 'absolute', + top: 24, + left: 24 + }, + background: { + position: 'absolute', + backgroundColor: 'black', + top: 0, + height: '100%', + width: '100%' + }, + + skirt: { + backgroundColor: palette.neutralLight10, + width: '100%', + height: 800 + } + }) +) export enum DrawerAnimationStyle { STIFF = 'STIFF', @@ -277,47 +228,6 @@ export const springToValue = ({ }).start(finished) } -const DrawerHeader = ({ - onClose, - title, - titleIcon, - isFullscreen, - zIndex -}: { - onClose: () => void - title?: string - titleIcon?: ImageSourcePropType - isFullscreen?: boolean - zIndex?: number -}) => { - const styles = useThemedStyles(createStyles(zIndex)) - const closeColor = useColor('neutralLight4') - - return title || isFullscreen ? ( - - {isFullscreen && ( - - - - )} - {title && ( - - {titleIcon && ( - - )} - {title} - - )} - - ) : ( - - ) -} - // Only allow titleIcon with title type DrawerComponent = { (props: DrawerProps & { title: string }): React.ReactElement @@ -347,7 +257,11 @@ export const Drawer: DrawerComponent = ({ translationAnim: providedTranslationAnim, disableSafeAreaView }: DrawerProps) => { - const styles = useThemedStyles(createStyles(zIndex, shouldAnimateShadow)) + const stylesConfig = useMemo( + () => ({ zIndex, shouldAnimateShadow }), + [zIndex, shouldAnimateShadow] + ) + const styles = useStyles(stylesConfig) const androidNavigationBarHeight = useSelector(getAndroidNavigationBarHeight) const [drawerHeight, setDrawerHeight] = useState( @@ -363,12 +277,12 @@ export const Drawer: DrawerComponent = ({ // Position of the fully opened drawer const openPosition = FULL_DRAWER_HEIGHT - drawerHeight - const newTranslationAnim = useRef(new Animated.Value(initialPosition)).current - const translationAnim = providedTranslationAnim || newTranslationAnim + const newTranslationAnim = useRef(new Animated.Value(initialPosition)) + const translationAnim = providedTranslationAnim || newTranslationAnim.current - const shadowAnim = useRef(new Animated.Value(0)).current - const borderRadiusAnim = useRef(new Animated.Value(BORDER_RADIUS)).current - const backgroundOpacityAnim = useRef(new Animated.Value(0)).current + const shadowAnim = useRef(new Animated.Value(0)) + const borderRadiusAnim = useRef(new Animated.Value(BORDER_RADIUS)) + const backgroundOpacityAnim = useRef(new Animated.Value(0)) // Capture the intent of opening the drawer (for use in pan responder release). // Generally when releasing a pan responder, we don't want to update state until @@ -394,7 +308,7 @@ export const Drawer: DrawerComponent = ({ }) if (isFullscreen) { springToValue({ - animation: borderRadiusAnim, + animation: borderRadiusAnim.current, value: 0, drawerHeight, animationStyle, @@ -403,13 +317,13 @@ export const Drawer: DrawerComponent = ({ } if (shouldBackgroundDim) { springToValue({ - animation: shadowAnim, + animation: shadowAnim.current, value: MAX_SHADOW_OPACITY, drawerHeight, animationStyle }) springToValue({ - animation: backgroundOpacityAnim, + animation: backgroundOpacityAnim.current, value: BACKGROUND_OPACITY, drawerHeight, animationStyle @@ -418,9 +332,6 @@ export const Drawer: DrawerComponent = ({ }, [ translationAnim, - shadowAnim, - backgroundOpacityAnim, - borderRadiusAnim, shouldBackgroundDim, isFullscreen, animationStyle, @@ -446,7 +357,7 @@ export const Drawer: DrawerComponent = ({ }) if (isFullscreen) { springToValue({ - animation: borderRadiusAnim, + animation: borderRadiusAnim.current, value: BORDER_RADIUS, drawerHeight, animationStyle @@ -454,13 +365,13 @@ export const Drawer: DrawerComponent = ({ } if (shouldBackgroundDim) { springToValue({ - animation: shadowAnim, + animation: shadowAnim.current, value: 0, drawerHeight, animationStyle }) springToValue({ - animation: backgroundOpacityAnim, + animation: backgroundOpacityAnim.current, value: 0, drawerHeight, animationStyle @@ -469,9 +380,6 @@ export const Drawer: DrawerComponent = ({ }, [ translationAnim, - shadowAnim, - backgroundOpacityAnim, - borderRadiusAnim, isFullscreen, shouldBackgroundDim, animationStyle, @@ -488,7 +396,7 @@ export const Drawer: DrawerComponent = ({ } else { isOpenIntent.current = false if (!isOpen && shouldCloseToInitialOffset) { - borderRadiusAnim.setValue(0) + borderRadiusAnim.current.setValue(0) slideOut(initialOffsetOpenPosition) } else { slideOut(initialPosition) @@ -501,171 +409,197 @@ export const Drawer: DrawerComponent = ({ openPosition, initialPosition, shouldCloseToInitialOffset, - initialOffsetOpenPosition, - borderRadiusAnim + initialOffsetOpenPosition ]) - const panResponder = PanResponder.create({ - onMoveShouldSetPanResponder: (e, gestureState) => { - return Math.abs(gestureState.dy) > ON_MOVE_RESPONDER_DY - }, - /** - * Callback when the user is dragging on the drawer. - * There are two primary modes of operation: - * - Normal drawers that open by some UI action and can be swiped away by a user - * - Drawers that are partially showing on the screen (e.g. Now Playing) - * that start at an initial offset and can be dragged open - */ - onPanResponderMove: (e, gestureState) => { - if ( - isOpen || - isOpenIntent.current || - (!isOpen && shouldCloseToInitialOffset) - ) { - if (gestureState.dy > 0) { - // Dragging downwards - // Bound percentOpen to [0, 1] - const percentOpen = - (drawerHeight - - (!isOpenIntent.current ? drawerHeight : gestureState.dy)) / - drawerHeight - - if (isOpenIntent.current) { - const newTranslation = openPosition + gestureState.dy - attachToDy(translationAnim, newTranslation)(e) - - if (shouldBackgroundDim) { - const newOpacity = BACKGROUND_OPACITY * percentOpen - attachToDy(backgroundOpacityAnim, newOpacity)(e) - } - - if (isFullscreen) { - const newBorderRadius = BORDER_RADIUS * (1 - percentOpen) - attachToDy(borderRadiusAnim, newBorderRadius)(e) - } - - // If we are "closing" the drawer to an offset position - if (initialOffsetPosition) { - const borderRadiusInitialOffset = - shouldHaveRoundedBordersAtInitialOffset - ? // Border radius has rounded corners at the initial offset + const panResponder = useMemo( + () => + PanResponder.create({ + onMoveShouldSetPanResponder: (e, gestureState) => { + return Math.abs(gestureState.dy) > ON_MOVE_RESPONDER_DY + }, + /** + * Callback when the user is dragging on the drawer. + * There are two primary modes of operation: + * - Normal drawers that open by some UI action and can be swiped away by a user + * - Drawers that are partially showing on the screen (e.g. Now Playing) + * that start at an initial offset and can be dragged open + */ + onPanResponderMove: (e, gestureState) => { + if ( + isOpen || + isOpenIntent.current || + (!isOpen && shouldCloseToInitialOffset) + ) { + if (gestureState.dy > 0) { + // Dragging downwards + // Bound percentOpen to [0, 1] + const percentOpen = + (drawerHeight - + (!isOpenIntent.current ? drawerHeight : gestureState.dy)) / + drawerHeight + + if (isOpenIntent.current) { + const newTranslation = openPosition + gestureState.dy + attachToDy(translationAnim, newTranslation)(e) + + if (shouldBackgroundDim) { + const newOpacity = BACKGROUND_OPACITY * percentOpen + attachToDy(backgroundOpacityAnim.current, newOpacity)(e) + } + + if (isFullscreen) { + const newBorderRadius = BORDER_RADIUS * (1 - percentOpen) + attachToDy(borderRadiusAnim.current, newBorderRadius)(e) + } + + // If we are "closing" the drawer to an offset position + if (initialOffsetPosition) { + const borderRadiusInitialOffset = + shouldHaveRoundedBordersAtInitialOffset + ? // Border radius has rounded corners at the initial offset + BORDER_RADIUS + : // Border radius gains radius (quicklky) as the initial offset is + // left and the drawer drags open + BORDER_RADIUS * percentOpen * 5 + // Cap the border radius at the maximum (BORDER_RADIUS) + let newBorderRadius = Math.min( + borderRadiusInitialOffset, BORDER_RADIUS - : // Border radius gains radius (quicklky) as the initial offset is - // left and the drawer drags open - BORDER_RADIUS * percentOpen * 5 - // Cap the border radius at the maximum (BORDER_RADIUS) - let newBorderRadius = Math.min( - borderRadiusInitialOffset, - BORDER_RADIUS - ) - // On non-iOS platforms, bring the border radius back to 0 at the fully open state - if (Platform.OS !== 'ios') { - newBorderRadius = Math.min( - newBorderRadius, - BORDER_RADIUS * 2 * (1 - percentOpen) - ) + ) + // On non-iOS platforms, bring the border radius back to 0 at the fully open state + if (Platform.OS !== 'ios') { + newBorderRadius = Math.min( + newBorderRadius, + BORDER_RADIUS * 2 * (1 - percentOpen) + ) + } + attachToDy(borderRadiusAnim.current, newBorderRadius)(e) + } } - attachToDy(borderRadiusAnim, newBorderRadius)(e) - } - } - - // Dragging downwards with an initial offset - if (!isOpenIntent.current && shouldCloseToInitialOffset) { - const newTranslation = - initialOffsetOpenPosition + gestureState.dy / OVERFLOW_FRICTION - attachToDy(translationAnim, newTranslation)(e) - } - if (onPercentOpen) onPercentOpen(percentOpen) - } else if (gestureState.dy < 0) { - // Dragging upwards - // Bound percentOpen to [0, 1] - const percentOpen = - (-1 * - (isOpenIntent.current ? -1 * drawerHeight : gestureState.dy)) / - drawerHeight - - if (isOpenIntent.current) { - const newTranslation = - openPosition + gestureState.dy / OVERFLOW_FRICTION - attachToDy(translationAnim, newTranslation)(e) - } + // Dragging downwards with an initial offset + if (!isOpenIntent.current && shouldCloseToInitialOffset) { + const newTranslation = + initialOffsetOpenPosition + + gestureState.dy / OVERFLOW_FRICTION + attachToDy(translationAnim, newTranslation)(e) + } - // Dragging upwards with an initial offset - if (!isOpenIntent.current && shouldCloseToInitialOffset) { - const newTranslation = initialOffsetOpenPosition + gestureState.dy - attachToDy(translationAnim, newTranslation)(e) - - // Set up border animations so that - // - In the offset position, they are either 0 or BORDER_RADIUS - // - While dragging open, they have BORDER_RADIUS - // - While fully open, they are 0 - const borderRadiusInitialOffset = - shouldHaveRoundedBordersAtInitialOffset - ? BORDER_RADIUS - : BORDER_RADIUS * percentOpen * 5 - let newBorderRadius = Math.min( - borderRadiusInitialOffset, - BORDER_RADIUS - ) - // On non-iOS platforms, bring the border radius back to 0 at the fully open state - if (Platform.OS !== 'ios') { - newBorderRadius = Math.min( - newBorderRadius, - BORDER_RADIUS * 2 * (1 - percentOpen) - ) - } + if (onPercentOpen) onPercentOpen(percentOpen) + } else if (gestureState.dy < 0) { + // Dragging upwards + // Bound percentOpen to [0, 1] + const percentOpen = + (-1 * + (isOpenIntent.current + ? -1 * drawerHeight + : gestureState.dy)) / + drawerHeight + + if (isOpenIntent.current) { + const newTranslation = + openPosition + gestureState.dy / OVERFLOW_FRICTION + attachToDy(translationAnim, newTranslation)(e) + } - attachToDy(borderRadiusAnim, newBorderRadius)(e) - } + // Dragging upwards with an initial offset + if (!isOpenIntent.current && shouldCloseToInitialOffset) { + const newTranslation = + initialOffsetOpenPosition + gestureState.dy + attachToDy(translationAnim, newTranslation)(e) + + // Set up border animations so that + // - In the offset position, they are either 0 or BORDER_RADIUS + // - While dragging open, they have BORDER_RADIUS + // - While fully open, they are 0 + const borderRadiusInitialOffset = + shouldHaveRoundedBordersAtInitialOffset + ? BORDER_RADIUS + : BORDER_RADIUS * percentOpen * 5 + let newBorderRadius = Math.min( + borderRadiusInitialOffset, + BORDER_RADIUS + ) + // On non-iOS platforms, bring the border radius back to 0 at the fully open state + if (Platform.OS !== 'ios') { + newBorderRadius = Math.min( + newBorderRadius, + BORDER_RADIUS * 2 * (1 - percentOpen) + ) + } + + attachToDy(borderRadiusAnim.current, newBorderRadius)(e) + } - if (onPercentOpen) onPercentOpen(percentOpen) - } - } - if (onPanResponderMove) onPanResponderMove(e, gestureState) - }, - /** - * When the user releases their hold of the drawer - */ - onPanResponderRelease: (e, gestureState) => { - if ( - isOpen || - isOpenIntent.current || - (!isOpen && shouldCloseToInitialOffset) - ) { - // Close if open & drag is past cutoff - if ( - gestureState.vy > 0 && - gestureState.moveY > - FULL_DRAWER_HEIGHT - MOVE_CUTOFF_CLOSE * drawerHeight - ) { - if (shouldCloseToInitialOffset) { - slideOut(initialOffsetOpenPosition, gestureState.vy, onClose) - isOpenIntent.current = false - borderRadiusAnim.setValue(0) - } else { - slideOut(initialPosition, gestureState.vy, onClose) - isOpenIntent.current = false + if (onPercentOpen) onPercentOpen(percentOpen) + } } - } else { - slideIn(openPosition, gestureState.vy, onOpen) - isOpenIntent.current = true - // If an initial offset is defined, clear the border radius + if (onPanResponderMove) onPanResponderMove(e, gestureState) + }, + /** + * When the user releases their hold of the drawer + */ + onPanResponderRelease: (e, gestureState) => { if ( - shouldHaveRoundedBordersAtInitialOffset && - initialOffsetOpenPosition + isOpen || + isOpenIntent.current || + (!isOpen && shouldCloseToInitialOffset) ) { - borderRadiusAnim.setValue(0) + // Close if open & drag is past cutoff + if ( + gestureState.vy > 0 && + gestureState.moveY > + FULL_DRAWER_HEIGHT - MOVE_CUTOFF_CLOSE * drawerHeight + ) { + if (shouldCloseToInitialOffset) { + slideOut(initialOffsetOpenPosition, gestureState.vy, onClose) + isOpenIntent.current = false + borderRadiusAnim.current.setValue(0) + } else { + slideOut(initialPosition, gestureState.vy, onClose) + isOpenIntent.current = false + } + } else { + slideIn(openPosition, gestureState.vy, onOpen) + isOpenIntent.current = true + // If an initial offset is defined, clear the border radius + if ( + shouldHaveRoundedBordersAtInitialOffset && + initialOffsetOpenPosition + ) { + borderRadiusAnim.current.setValue(0) + } + } } + if (onPanResponderRelease) onPanResponderRelease(e, gestureState) } - } - if (onPanResponderRelease) onPanResponderRelease(e, gestureState) - } - }) + }), + [ + translationAnim, + drawerHeight, + initialOffsetOpenPosition, + isFullscreen, + initialOffsetPosition, + initialPosition, + isOpen, + onClose, + onOpen, + onPanResponderMove, + onPanResponderRelease, + onPercentOpen, + openPosition, + shouldBackgroundDim, + shouldCloseToInitialOffset, + shouldHaveRoundedBordersAtInitialOffset, + slideIn, + slideOut + ] + ) // NOTE: sk - Need to interpolate the border radius bc of a funky // issue with border radius under 1 in ios - const interpolatedBorderRadius = borderRadiusAnim.interpolate({ + const interpolatedBorderRadius = borderRadiusAnim.current.interpolate({ inputRange: [0, 0.99, 1, BORDER_RADIUS], outputRange: [0, 0, 1, BORDER_RADIUS] }) @@ -674,7 +608,7 @@ export const Drawer: DrawerComponent = ({ const renderBackgroundView = (options?: { pointerEvents: 'none' }) => ( ) // The background should be visible and touchable when the drawer is open @@ -737,10 +671,10 @@ export const Drawer: DrawerComponent = ({ style={[ styles.drawer, drawerStyle, - ...(isFullscreen ? [styles.fullDrawer] : []), + isFullscreen && styles.fullDrawer, { shadowOpacity: shouldAnimateShadow - ? shadowAnim + ? shadowAnim.current : MAX_SHADOW_OPACITY, transform: [ { diff --git a/packages/mobile/src/components/drawer/DrawerHeader.tsx b/packages/mobile/src/components/drawer/DrawerHeader.tsx new file mode 100644 index 0000000000..6bfe455fb1 --- /dev/null +++ b/packages/mobile/src/components/drawer/DrawerHeader.tsx @@ -0,0 +1,77 @@ +import type { ImageSourcePropType, ImageStyle } from 'react-native' +import { TouchableOpacity, View, Image, Text } from 'react-native' + +import IconRemove from 'app/assets/images/iconRemove.svg' +import { makeStyles } from 'app/styles' +import { useColor } from 'app/utils/theme' + +type DrawerHeaderProps = { + onClose: () => void + title?: string + titleIcon?: ImageSourcePropType + isFullscreen?: boolean +} + +export const useStyles = makeStyles(({ palette, typography, spacing }) => ({ + titleBarContainer: { + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', + padding: spacing(6) + }, + + dismissContainer: { + position: 'absolute', + top: spacing(6), + left: spacing(6) + }, + + titleContainer: { + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', + paddingTop: spacing(5) + }, + + titleIcon: { + marginRight: spacing(3), + height: spacing(6), + width: spacing(6) + }, + + titleLabel: { + fontFamily: typography.fontByWeight.bold, + fontSize: typography.fontSize.large, + color: palette.neutral + } +})) + +export const DrawerHeader = (props: DrawerHeaderProps) => { + const { onClose, title, titleIcon, isFullscreen } = props + const styles = useStyles() + const closeColor = useColor('neutralLight4') + + return title || isFullscreen ? ( + + {isFullscreen && ( + + + + )} + {title && ( + + {titleIcon && ( + + )} + {title} + + )} + + ) : ( + + ) +} diff --git a/packages/mobile/src/components/now-playing-drawer/NowPlayingDrawer.tsx b/packages/mobile/src/components/now-playing-drawer/NowPlayingDrawer.tsx index 5a5ff2fedc..e9c10f46ea 100644 --- a/packages/mobile/src/components/now-playing-drawer/NowPlayingDrawer.tsx +++ b/packages/mobile/src/components/now-playing-drawer/NowPlayingDrawer.tsx @@ -1,4 +1,11 @@ -import { useCallback, useContext, useEffect, useRef, useState } from 'react' +import { + memo, + useCallback, + useContext, + useEffect, + useRef, + useState +} from 'react' import { Genre, @@ -7,7 +14,6 @@ import { playerSelectors, playerActions } from '@audius/common' -import type { NativeStackNavigationProp } from '@react-navigation/native-stack' import type { Animated, GestureResponderEvent, @@ -24,7 +30,6 @@ import Drawer, { } from 'app/components/drawer' import { Scrubber } from 'app/components/scrubber' import { useDrawer } from 'app/hooks/useDrawer' -import type { AppTabScreenParamList } from 'app/screens/app-screen' import { AppTabNavigationContext } from 'app/screens/app-screen' import { NotificationsDrawerNavigationContext } from 'app/screens/notifications-screen/NotificationsDrawerNavigationContext' import { getAndroidNavigationBarHeight } from 'app/store/mobileUi/selectors' @@ -83,10 +88,15 @@ const useStyles = makeStyles(({ spacing }) => ({ type NowPlayingDrawerProps = { translationAnim: Animated.Value - navigation: NativeStackNavigationProp } -const NowPlayingDrawer = (props: NowPlayingDrawerProps) => { +/** + * Memoized to prevent rerender during bottom-bar navigation. + * It's rerendering because bottomTab render function rerenders a lot. + */ +export const NowPlayingDrawer = memo(function NowPlayngDrawer( + props: NowPlayingDrawerProps +) { const { translationAnim } = props const { navigation } = useContext(AppTabNavigationContext) const dispatch = useDispatch() @@ -314,6 +324,4 @@ const NowPlayingDrawer = (props: NowPlayingDrawerProps) => { ) -} - -export default NowPlayingDrawer +}) diff --git a/packages/mobile/src/components/now-playing-drawer/index.tsx b/packages/mobile/src/components/now-playing-drawer/index.tsx index 679b561826..18e20a0cce 100644 --- a/packages/mobile/src/components/now-playing-drawer/index.tsx +++ b/packages/mobile/src/components/now-playing-drawer/index.tsx @@ -1,2 +1,2 @@ -export { default } from './NowPlayingDrawer' +export { NowPlayingDrawer } from './NowPlayingDrawer' export * from './constants' diff --git a/packages/mobile/src/screens/app-screen/AppTabBar.tsx b/packages/mobile/src/screens/app-screen/AppTabBar.tsx index 1a2777888c..98dc63bc32 100644 --- a/packages/mobile/src/screens/app-screen/AppTabBar.tsx +++ b/packages/mobile/src/screens/app-screen/AppTabBar.tsx @@ -1,14 +1,11 @@ import { useRef } from 'react' import type { BottomTabBarProps } from '@react-navigation/bottom-tabs' -import type { NativeStackNavigationProp } from '@react-navigation/native-stack' import { Animated } from 'react-native' import { BottomTabBar } from 'app/components/bottom-tab-bar' import { FULL_DRAWER_HEIGHT } from 'app/components/drawer' -import NowPlayingDrawer from 'app/components/now-playing-drawer' - -import type { AppTabScreenParamList } from './AppTabScreen' +import { NowPlayingDrawer } from 'app/components/now-playing-drawer' type TabBarProps = BottomTabBarProps @@ -17,17 +14,10 @@ export const AppTabBar = (props: TabBarProps) => { // When the drawer is open, the bottom bar should hide (animated away). // When the drawer is closed, the bottom bar should reappear (animated in). const translationAnim = useRef(new Animated.Value(FULL_DRAWER_HEIGHT)).current - const { navigation } = props - // For some reason bottom-bar navigation doesn't have .push in type - const nowPlayingNavigation = - navigation as unknown as NativeStackNavigationProp return ( <> - + ) diff --git a/packages/mobile/src/screens/notifications-screen/NotificationsScreen.tsx b/packages/mobile/src/screens/notifications-screen/NotificationsScreen.tsx index db36bee557..47241044a2 100644 --- a/packages/mobile/src/screens/notifications-screen/NotificationsScreen.tsx +++ b/packages/mobile/src/screens/notifications-screen/NotificationsScreen.tsx @@ -25,7 +25,7 @@ const useStyles = makeStyles(({ palette }) => ({ * Memoized to prevent rerender during bottom-bar navigation. * It's rerendering because navigation context changes. */ -export const NotificationsScreen = memo(() => { +export const NotificationsScreen = memo(function NotificationsScreen() { const styles = useStyles() const dispatch = useDispatch() const isDrawerOpen = useDrawerStatus() === 'open' diff --git a/packages/mobile/src/screens/root-screen/RootScreen.tsx b/packages/mobile/src/screens/root-screen/RootScreen.tsx index 82c1ca6126..794429471e 100644 --- a/packages/mobile/src/screens/root-screen/RootScreen.tsx +++ b/packages/mobile/src/screens/root-screen/RootScreen.tsx @@ -2,7 +2,6 @@ import { useEffect, useState } from 'react' import { accountSelectors, Status } from '@audius/common' import type { NavigatorScreenParams } from '@react-navigation/native' -import { useNavigationState } from '@react-navigation/native' import { createNativeStackNavigator } from '@react-navigation/native-stack' import { setupBackend } from 'audius-client/src/common/store/backend/actions' import { useDispatch, useSelector } from 'react-redux' @@ -42,8 +41,6 @@ export const RootScreen = ({ isReadyToSetupBackend }: RootScreenProps) => { const accountStatus = useSelector(getAccountStatus) const [isInitting, setIsInittng] = useState(true) const { updateRequired } = useUpdateRequired() - const navState = useNavigationState((x) => x) - console.log(navState) useEffect(() => { // Setup the backend when ready