diff --git a/src/components/Main.tsx b/src/components/Main.tsx index 58316790381..9efe625f750 100644 --- a/src/components/Main.tsx +++ b/src/components/Main.tsx @@ -252,6 +252,8 @@ const firstSceneScreenOptions: StackNavigationOptions & BottomTabNavigationOptio headerTitleAlign: 'center' } +const homeSceneOptions: StackNavigationOptions & BottomTabNavigationOptions = { ...defaultScreenOptions, ...firstSceneScreenOptions } + // ------------------------------------------------------------------------- // Tab router // ------------------------------------------------------------------------- @@ -408,7 +410,7 @@ const EdgeTabs = () => { headerShown: false }} > - + @@ -792,7 +794,7 @@ const EdgeAppStack = () => { const EdgeApp = () => { return ( SideMenu(props)} + drawerContent={SideMenu} initialRouteName="edgeAppStack" screenOptions={{ drawerPosition: 'right', diff --git a/src/components/common/SceneWrapper.tsx b/src/components/common/SceneWrapper.tsx index 81682e6fc8d..35232d0e3d0 100644 --- a/src/components/common/SceneWrapper.tsx +++ b/src/components/common/SceneWrapper.tsx @@ -319,6 +319,7 @@ interface SceneWrapperScrollViewProps extends Pick const CoinRankingComponent = (props: Props) => { + console.log('CoinRankingComponent') const theme = useTheme() const styles = getStyles(theme) const { navigation } = props diff --git a/src/components/scenes/GuiPluginListScene.tsx b/src/components/scenes/GuiPluginListScene.tsx index a187cb0ebcb..f2db10df7df 100644 --- a/src/components/scenes/GuiPluginListScene.tsx +++ b/src/components/scenes/GuiPluginListScene.tsx @@ -583,12 +583,13 @@ const getStyles = cacheStyles((theme: Theme) => ({ })) export const GuiPluginListScene = React.memo((props: OwnProps) => { + console.log('Rendering GuiPluginListScene') const { navigation, route } = props const { params = { forcedWalletResult: undefined } } = route const dispatch = useDispatch() const theme = useTheme() - const handleScroll = useSceneScrollHandler() + // const handleScroll = useSceneScrollHandler() const account = useSelector(state => state.core.account) const accountPlugins = useSelector(state => state.account.referralCache.accountPlugins) const accountReferral = useSelector(state => state.account.accountReferral) @@ -597,7 +598,6 @@ export const GuiPluginListScene = React.memo((props: OwnProps) => { const { countryCode, defaultIsoFiat, developerModeOn, stateProvinceCode } = useSelector(state => state.ui.settings) const direction = props.route.name === 'pluginListSell' ? 'sell' : 'buy' const disablePlugins = useSelector(state => state.ui.exchangeInfo[direction].disablePlugins) - const isFocused = useIsFocused() const debouncedNavigation = useAsyncNavigation(navigation) @@ -631,7 +631,7 @@ export const GuiPluginListScene = React.memo((props: OwnProps) => { React.useEffect(() => { // HACK: Latest React Navigation causes multiple mounts - if (!isFocused) return + if (!navigation.isFocused) return dispatch(checkAndSetRegion({ account, countryCode, stateProvinceCode })) // eslint-disable-next-line react-hooks/exhaustive-deps @@ -657,7 +657,7 @@ export const GuiPluginListScene = React.memo((props: OwnProps) => { deviceId={deviceId} disablePlugins={disablePlugins} forcedWalletResult={forcedWalletResultLocal} - onScroll={handleScroll} + // onScroll={handleScroll} insetStyle={insetStyle} navigation={debouncedNavigation} route={route} diff --git a/src/components/scenes/HomeScene.tsx b/src/components/scenes/HomeScene.tsx index 328f5f544b3..e68db469d3f 100644 --- a/src/components/scenes/HomeScene.tsx +++ b/src/components/scenes/HomeScene.tsx @@ -11,7 +11,6 @@ import { ENV } from '../../env' import { useAsyncEffect } from '../../hooks/useAsyncEffect' import { useHandler } from '../../hooks/useHandler' import { lstrings } from '../../locales/strings' -import { useSceneScrollHandler } from '../../state/SceneScrollState' import { config } from '../../theme/appConfig' import { EdgeTabsSceneProps, NavigationBase } from '../../types/routerTypes' import { getUi4ImageUri } from '../../util/CdnUris' @@ -57,7 +56,8 @@ export const filterContentPosts = (contentPosts?: ContentPost[], countryCode?: s }) } -export const HomeScene = (props: Props) => { +export const HomeSceneComponent = (props: Props) => { + console.log('HomeScene') const { navigation } = props const theme = useTheme() const styles = getStyles(theme) @@ -90,7 +90,7 @@ export const HomeScene = (props: Props) => { const handleViewAssetsPress = useHandler(() => { navigation.navigate('edgeTabs', { screen: 'walletsTab', params: { screen: 'walletList' } }) }) - const handleScroll = useSceneScrollHandler() + // const handleScroll = useSceneScrollHandler() // Set countryCode once useAsyncEffect( @@ -130,7 +130,6 @@ export const HomeScene = (props: Props) => { <> { ) } +const MemoizedHomeScene = React.memo(HomeSceneComponent) + +export const HomeScene = (props: Props) => { + return +} + const getStyles = cacheStyles((theme: Theme) => ({ backroundImageContainer: { alignItems: 'flex-start', diff --git a/src/components/scenes/WalletListScene.tsx b/src/components/scenes/WalletListScene.tsx index e62ac830dc5..9c0e09bdca6 100644 --- a/src/components/scenes/WalletListScene.tsx +++ b/src/components/scenes/WalletListScene.tsx @@ -27,6 +27,7 @@ import { WalletListSwipeable } from '../themed/WalletListSwipeable' interface Props extends WalletsTabSceneProps<'walletList'> {} export function WalletListScene(props: Props) { + console.log('WalletListScene') const { navigation } = props const theme = useTheme() const styles = getStyles(theme) diff --git a/src/components/themed/SideMenu.tsx b/src/components/themed/SideMenu.tsx index 232f0c26131..29c81d07683 100644 --- a/src/components/themed/SideMenu.tsx +++ b/src/components/themed/SideMenu.tsx @@ -44,7 +44,8 @@ import { EdgeText } from './EdgeText' const footerGradientStart = { x: 0, y: 0 } const footerGradientEnd = { x: 0, y: 0.75 } -export function SideMenu(props: DrawerContentComponentProps) { +const SideMenuComponent = (props: DrawerContentComponentProps) => { + console.log('SideMenu') // Fix this type assertion (seems like DrawerContentComponentProps works just // fine as NavigationBase?) const { navigation } = props as any as DrawerSceneProps<'edgeAppStack'> @@ -385,6 +386,15 @@ export function SideMenu(props: DrawerContentComponentProps) { ) } +// Only check navigation prop for changes since we don't use state or descriptors and those ALWAYS change +const checkProps = (prevProps: DrawerContentComponentProps, nextProps: DrawerContentComponentProps) => nextProps.navigation === prevProps.navigation + +const MemoizedSideMenu = React.memo(SideMenuComponent, checkProps) + +export const SideMenu = (props: DrawerContentComponentProps) => { + return +} + /** * Given a list of users from the core, * remove the given user, then organize the 3 most recent users, diff --git a/src/components/themed/WalletListSwipeable.tsx b/src/components/themed/WalletListSwipeable.tsx index 76d9c804b5c..62471095d51 100644 --- a/src/components/themed/WalletListSwipeable.tsx +++ b/src/components/themed/WalletListSwipeable.tsx @@ -53,6 +53,7 @@ function WalletListSwipeableComponent(props: Props) { onRefresh, onReset } = props + console.log('WalletListSwipeableComponent') // Subscriptions: const theme = useTheme() @@ -129,7 +130,7 @@ function WalletListSwipeableComponent(props: Props) { const data = React.useMemo(() => [...searchedWalletList, ...createWalletList], [searchedWalletList, createWalletList]) - const handleScroll = useSceneScrollHandler() + // const handleScroll = useSceneScrollHandler() const contentContainerStyle = useMemo(() => { return { @@ -150,7 +151,7 @@ function WalletListSwipeableComponent(props: Props) { ListHeaderComponent={header} refreshControl={refreshControl} renderItem={renderRow} - onScroll={handleScroll} + // onScroll={handleScroll} scrollIndicatorInsets={SCROLL_INDICATOR_INSET_FIX} /> )