From 541adc5bc95da71dfc96b4ce0fd430ec2fc1cb66 Mon Sep 17 00:00:00 2001 From: Arjen de Vos Date: Tue, 6 Jun 2023 14:40:02 +0200 Subject: [PATCH 1/4] upgrade to v3 bottomtaps --- example/src/App.tsx | 49 ++++++++---- src/web/BottomTabBadgeWeb.tsx | 5 +- src/web/BottomTabWeb.tsx | 128 ++++++++++++++++++------------- src/web/BottomTabsWrapperWeb.tsx | 22 ++++-- 4 files changed, 126 insertions(+), 78 deletions(-) diff --git a/example/src/App.tsx b/example/src/App.tsx index a083b65..60ffd79 100644 --- a/example/src/App.tsx +++ b/example/src/App.tsx @@ -4,7 +4,13 @@ import { MD3DarkTheme, Provider as PaperProvider, } from 'react-native-paper'; -import { ColorSchemeName, LogBox, useColorScheme } from 'react-native'; +import { + ColorSchemeName, + Image, + LogBox, + useColorScheme, + View, +} from 'react-native'; import { SafeAreaProvider } from 'react-native-safe-area-context'; import AsyncBoundary from './helpers/AsyncBoundary'; @@ -22,7 +28,6 @@ import { import { BottomRoot, NavigationRoots, screens } from './Navigator'; import routes from './Routes'; import AsyncBoundaryScreen from './helpers/AsyncBoundaryScreen'; -import HeaderWeb from './HeaderWeb'; function getTheme(colorScheme: ColorSchemeName): typeof MD3LightTheme { const isDark = colorScheme === 'dark'; const baseTheme = colorScheme === 'dark' ? MD3DarkTheme : MD3LightTheme; @@ -43,17 +48,17 @@ let theme = createSimpleTheme({ accent: MD3LightTheme.colors.primary, backgroundColor: MD3LightTheme.colors.background, // Optional styling of bottom tabs - // bottomTabs: { - // backgroundColor: MD3LightTheme.colors.background, - // textColor: MD3LightTheme.colors.onBackground, - // rippleColor: MD3LightTheme.colors.primary, - // selectedTextColor: MD3LightTheme.colors.primary, - // activeIndicatorColor: MD3LightTheme.colors.secondary, - // fontSize: 10, - // fontStyle: 'italic', - // fontWeight: '900', - // fontFamily: 'Arial', - // }, + bottomTabs: { + backgroundColor: MD3LightTheme.colors.surface, + textColor: MD3LightTheme.colors.onSurfaceVariant, + rippleColor: MD3LightTheme.colors.primary, + selectedTextColor: MD3LightTheme.colors.onSecondaryContainer, + activeIndicatorColor: MD3LightTheme.colors.secondaryContainer, + fontSize: 10, + fontStyle: 'italic', + fontWeight: '900', + fontFamily: 'Arial', + }, // bottomTabs: { // rippleColor: MD3LightTheme.colors.secondaryContainer, // activeIndicatorColor: MD3LightTheme.colors.secondaryContainer, @@ -89,13 +94,29 @@ const navigationRoot = { { breakingPointWidth: 500, components: { - override: HeaderWeb, + // override: HeaderWeb, + start: ({ orientation }) => { + if (orientation === 'vertical') { + return null; + } + return ( + + + + ); + }, }, } ), [NavigationRoots.RootAuth]: createNormalRoot(routes.AuthScreen), [NavigationRoots.RootExample]: createNormalRoot(routes.HomeScreen), }; + export default function App() { const colorScheme = useColorScheme(); // Can be dark | light | no-preference const paperTheme = React.useMemo(() => getTheme(colorScheme), [colorScheme]); diff --git a/src/web/BottomTabBadgeWeb.tsx b/src/web/BottomTabBadgeWeb.tsx index 10d3e61..97c57ee 100644 --- a/src/web/BottomTabBadgeWeb.tsx +++ b/src/web/BottomTabBadgeWeb.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { Text, StyleSheet } from 'react-native'; import RidgeNavigationContext from '../contexts/RidgeNavigationContext'; -const defaultSize = 20; +const defaultSize = 18; type Props = React.ComponentProps & { visible?: boolean; @@ -32,9 +32,10 @@ function BottomTabBadgeWeb({ opacity: 1, backgroundColor, color: textColor, - fontSize: size * 0.5, + fontSize: size * 0.7, lineHeight: size, height: size, + fontWeight: '500', minWidth: size, borderRadius, }, diff --git a/src/web/BottomTabWeb.tsx b/src/web/BottomTabWeb.tsx index a61c46f..9ad298a 100644 --- a/src/web/BottomTabWeb.tsx +++ b/src/web/BottomTabWeb.tsx @@ -6,12 +6,12 @@ import { Pressable, Text, Platform, - useColorScheme, } from 'react-native'; import type { BottomTabType, Orientation } from '../navigationUtils'; import BottomTabBadge from './BottomTabBadgeWeb'; import RidgeNavigationContext from '../contexts/RidgeNavigationContext'; import { BottomTabLink } from 'react-native-ridge-navigation'; +import Color from 'color'; function BottomTabWeb({ isSelected, @@ -24,7 +24,6 @@ function BottomTabWeb({ bottomTab: BottomTabType; count?: string | number | undefined; }) { - const colorScheme = useColorScheme(); const { theme } = React.useContext(RidgeNavigationContext); return ( @@ -32,56 +31,64 @@ function BottomTabWeb({ {(linkProps) => ( [ - styles.touchable, - Platform.OS === 'web' - ? ({ transition: 'all 150ms' } as any) - : undefined, - - hovered - ? colorScheme === 'dark' - ? styles.touchableHoveredDark - : styles.touchableHovered - : undefined, - pressed - ? colorScheme === 'dark' - ? styles.touchablePressedDark - : styles.touchablePressed - : undefined, - ]} + style={styles.touchable} accessibilityRole="button" accessibilityLabel={bottomTab.title()} > - - - {count} - - - - - {bottomTab.title()} - - + {({ pressed, hovered }: any) => { + return ( + + + + {count} + + + + + + {bottomTab.title()} + + + ); + }} )} @@ -91,13 +98,24 @@ function BottomTabWeb({ const styles = StyleSheet.create({ touchable: { flex: 1, - maxWidth: 100, + maxWidth: 140, maxHeight: 100, - borderRadius: 5, - padding: 3, width: '100%', + paddingTop: 12, + paddingHorizontal: 12, + paddingBottom: 16, // margin: 3, }, + spacer: { + height: 4, + }, + iconWrapper: { + borderRadius: 16, + width: 64, + height: 32, + alignItems: 'center', + justifyContent: 'center', + }, touchableHovered: { backgroundColor: 'rgba(0, 0, 0, 0.04)', }, @@ -120,8 +138,9 @@ const styles = StyleSheet.create({ }, badge: { position: 'absolute', - top: 12, - right: 3, + top: -2, + right: 13, + zIndex: 100, }, verticalIcon: { width: 20, @@ -135,6 +154,7 @@ const styles = StyleSheet.create({ }, title: { fontSize: 13, + fontWeight: '500', fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"', }, diff --git a/src/web/BottomTabsWrapperWeb.tsx b/src/web/BottomTabsWrapperWeb.tsx index 3d5a686..249b2fa 100644 --- a/src/web/BottomTabsWrapperWeb.tsx +++ b/src/web/BottomTabsWrapperWeb.tsx @@ -69,6 +69,7 @@ export function OriginalBottomTabs({ {currentRoot?.components?.start ? ( ) : null} + {currentRoot.children.map((child, index) => ( Date: Tue, 6 Jun 2023 15:59:07 +0200 Subject: [PATCH 2/4] add drawer on big screen --- example/src/App.tsx | 13 +++- src/web/BottomTabWeb.tsx | 105 +++++++++++++++++++++++-------- src/web/BottomTabsWrapperWeb.tsx | 22 +++++-- 3 files changed, 106 insertions(+), 34 deletions(-) diff --git a/example/src/App.tsx b/example/src/App.tsx index 60ffd79..0ef5739 100644 --- a/example/src/App.tsx +++ b/example/src/App.tsx @@ -92,7 +92,7 @@ const navigationRoot = { [NavigationRoots.RootHome]: createBottomTabsRoot( [BottomRoot.Home, BottomRoot.Posts, BottomRoot.Account], { - breakingPointWidth: 500, + breakingPointWidth: 600, components: { // override: HeaderWeb, start: ({ orientation }) => { @@ -100,7 +100,16 @@ const navigationRoot = { return null; } return ( - + ( @@ -41,6 +46,7 @@ function BottomTabWeb({ - - {count} + {!aboveDrawerBreakingPoint && ( + + {count} + + )} + + + {aboveDrawerBreakingPoint && ( + + {bottomTab.title()} + + )} - + 443 + + )} + + + {!aboveDrawerBreakingPoint && ( + - - - - {bottomTab.title()} - + > + {bottomTab.title()} + + )} ); }} @@ -106,16 +137,38 @@ const styles = StyleSheet.create({ paddingBottom: 16, // margin: 3, }, + leftWrapper: { + flexDirection: 'row', + alignItems: 'center', + flexShrink: 0, + }, + badgeRight: { + flex: 1, + alignItems: 'flex-end', + justifyContent: 'center', + }, + touchableBig: { + maxWidth: '100%', + maxHeight: 64, + }, spacer: { height: 4, }, iconWrapper: { - borderRadius: 16, + borderRadius: 360, width: 64, height: 32, alignItems: 'center', justifyContent: 'center', }, + iconWrapperBig: { + height: 56, + width: '100%', + flexDirection: 'row', + justifyContent: 'flex-start', + paddingLeft: 6, + paddingRight: 16, + }, touchableHovered: { backgroundColor: 'rgba(0, 0, 0, 0.04)', }, diff --git a/src/web/BottomTabsWrapperWeb.tsx b/src/web/BottomTabsWrapperWeb.tsx index 249b2fa..8f921f1 100644 --- a/src/web/BottomTabsWrapperWeb.tsx +++ b/src/web/BottomTabsWrapperWeb.tsx @@ -16,13 +16,19 @@ function BottomTabsWrapperWeb({ children }: { children: any }) { const aboveBreakingPoint = useAboveBreakingPoint( getBreakingPointFromRoot(currentRoot) ); + + const aboveDrawerBreakingPoint = useAboveBreakingPoint(1240); + const orientation = aboveBreakingPoint ? 'horizontal' : 'vertical'; if (currentRoot?.type !== 'bottomTabs') { return children; } const inner = ( - + {children} ); @@ -42,9 +48,11 @@ function BottomTabsWrapperWeb({ children }: { children: any }) { export function OriginalBottomTabs({ children, orientation, + aboveDrawerBreakingPoint, }: { children: any; orientation: 'horizontal' | 'vertical'; + aboveDrawerBreakingPoint: boolean; }) { const { currentRoot } = useCurrentRoot(); const { theme } = React.useContext(OptimizedContext); @@ -64,15 +72,16 @@ export function OriginalBottomTabs({ backgroundColor: theme.bottomBar.backgroundColor, }, bottomStyles[orientation], + aboveDrawerBreakingPoint && bottomStyles.horizontalBig, ]} > {currentRoot?.components?.start ? ( ) : null} - {currentRoot.children.map((child, index) => ( Date: Tue, 6 Jun 2023 16:09:25 +0200 Subject: [PATCH 3/4] fix fontfamily --- example/src/App.tsx | 28 +++++++++++++--------------- src/web/BottomTabBadgeWeb.tsx | 9 +++++++-- src/web/BottomTabWeb.tsx | 25 +++++++++++++++---------- 3 files changed, 35 insertions(+), 27 deletions(-) diff --git a/example/src/App.tsx b/example/src/App.tsx index 0ef5739..92c83e1 100644 --- a/example/src/App.tsx +++ b/example/src/App.tsx @@ -54,10 +54,9 @@ let theme = createSimpleTheme({ rippleColor: MD3LightTheme.colors.primary, selectedTextColor: MD3LightTheme.colors.onSecondaryContainer, activeIndicatorColor: MD3LightTheme.colors.secondaryContainer, - fontSize: 10, - fontStyle: 'italic', - fontWeight: '900', - fontFamily: 'Arial', + fontSize: 13, + fontFamily: 'Montserrat', + fontWeight: '500', }, // bottomTabs: { // rippleColor: MD3LightTheme.colors.secondaryContainer, @@ -74,17 +73,16 @@ let theme = createSimpleTheme({ // activeIndicatorColor: MD3DarkTheme.colors.secondaryContainer, // }, // Optional styling of bottom tabs - // bottomTabs: { - // backgroundColor: MD3DarkTheme.colors.background, - // textColor: MD3DarkTheme.colors.onBackground, - // rippleColor: MD3DarkTheme.colors.primary, - // selectedTextColor: MD3DarkTheme.colors.primary, - // activeIndicatorColor: MD3DarkTheme.colors.secondary, - // fontSize: 10, - // fontStyle: 'italic', - // fontWeight: '900', - // fontFamily: 'sans-serif', - // }, + bottomTabs: { + backgroundColor: MD3DarkTheme.colors.surface, + textColor: MD3DarkTheme.colors.onSurfaceVariant, + rippleColor: MD3DarkTheme.colors.primary, + selectedTextColor: MD3DarkTheme.colors.onSecondaryContainer, + activeIndicatorColor: MD3DarkTheme.colors.secondaryContainer, + fontSize: 13, + fontFamily: 'Montserrat', + fontWeight: '500', + }, }, }); diff --git a/src/web/BottomTabBadgeWeb.tsx b/src/web/BottomTabBadgeWeb.tsx index 97c57ee..c5df810 100644 --- a/src/web/BottomTabBadgeWeb.tsx +++ b/src/web/BottomTabBadgeWeb.tsx @@ -8,12 +8,14 @@ type Props = React.ComponentProps & { visible?: boolean; children?: string | number; size?: number; + aboveDrawerBreakingPoint: boolean; }; function BottomTabBadgeWeb({ children, size = defaultSize, visible = true, + aboveDrawerBreakingPoint, ...rest }: Props) { const { theme } = React.useContext(RidgeNavigationContext); @@ -28,9 +30,12 @@ function BottomTabBadgeWeb({ diff --git a/src/web/BottomTabWeb.tsx b/src/web/BottomTabWeb.tsx index 33e5799..a42b20e 100644 --- a/src/web/BottomTabWeb.tsx +++ b/src/web/BottomTabWeb.tsx @@ -28,6 +28,8 @@ function BottomTabWeb({ }) { const { theme } = React.useContext(RidgeNavigationContext); + count = 3; + return ( {(linkProps) => ( @@ -84,8 +86,10 @@ function BottomTabWeb({ {aboveDrawerBreakingPoint && ( )} - {aboveDrawerBreakingPoint && ( + {aboveDrawerBreakingPoint && !!count && ( - 443 + + {count} + )} @@ -106,8 +115,10 @@ function BottomTabWeb({ {!aboveDrawerBreakingPoint && ( Date: Tue, 6 Jun 2023 16:13:01 +0200 Subject: [PATCH 4/4] fix fontfamily --- src/web/BottomTabWeb.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/web/BottomTabWeb.tsx b/src/web/BottomTabWeb.tsx index a42b20e..69d7f5f 100644 --- a/src/web/BottomTabWeb.tsx +++ b/src/web/BottomTabWeb.tsx @@ -65,7 +65,12 @@ function BottomTabWeb({ > {!aboveDrawerBreakingPoint && ( - {count} + + {count} + )}