exempt native tablet from desktop tabbar style

This commit is contained in:
Samuel Newman
2024-03-31 15:44:50 -07:00
parent 47b21dbce2
commit 2ec6d662d9
+10 -8
View File
@@ -1,11 +1,12 @@
import React, {useRef, useMemo, useEffect, useState, useCallback} from 'react' import React, {useCallback,useEffect, useMemo, useRef, useState} from 'react'
import {StyleSheet, View, ScrollView, LayoutChangeEvent} from 'react-native' import {LayoutChangeEvent,ScrollView, StyleSheet, View} from 'react-native'
import {Text} from '../util/text/Text'
import {PressableWithHover} from '../util/PressableWithHover' import {isNative, isNativeTablet} from '#/platform/detection'
import {usePalette} from 'lib/hooks/usePalette' import {usePalette} from 'lib/hooks/usePalette'
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
import {PressableWithHover} from '../util/PressableWithHover'
import {Text} from '../util/text/Text'
import {DraggableScrollView} from './DraggableScrollView' import {DraggableScrollView} from './DraggableScrollView'
import {isNative} from '#/platform/detection'
export interface TabBarProps { export interface TabBarProps {
testID?: string testID?: string
@@ -36,8 +37,9 @@ export function TabBar({
() => ({borderBottomColor: indicatorColor || pal.colors.link}), () => ({borderBottomColor: indicatorColor || pal.colors.link}),
[indicatorColor, pal], [indicatorColor, pal],
) )
const {isDesktop, isTablet} = useWebMediaQueries() const {isTabletOrDesktop} = useWebMediaQueries()
const styles = isDesktop || isTablet ? desktopStyles : mobileStyles const styles =
isTabletOrDesktop && !isNativeTablet ? desktopStyles : mobileStyles
useEffect(() => { useEffect(() => {
if (isNative) { if (isNative) {
@@ -137,7 +139,7 @@ export function TabBar({
onPress={() => onPressItem(i)}> onPress={() => onPressItem(i)}>
<View style={[styles.itemInner, selected && indicatorStyle]}> <View style={[styles.itemInner, selected && indicatorStyle]}>
<Text <Text
type={isDesktop || isTablet ? 'xl-bold' : 'lg-bold'} type={isTabletOrDesktop ? 'xl-bold' : 'lg-bold'}
testID={testID ? `${testID}-${item}` : undefined} testID={testID ? `${testID}-${item}` : undefined}
style={selected ? pal.text : pal.textLight}> style={selected ? pal.text : pal.textLight}>
{item} {item}