exempt native tablet from desktop tabbar style
This commit is contained in:
@@ -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}
|
||||||
|
|||||||
Reference in New Issue
Block a user