This commit is contained in:
Dan Abramov
2024-12-01 20:17:50 +00:00
parent fc3ddd9713
commit 33e2ad7aa5
2 changed files with 15 additions and 2 deletions
+6 -2
View File
@@ -287,7 +287,7 @@ export function TabBar({
onLayout={e => { onLayout={e => {
contentSize.set(e.nativeEvent.layout.width) contentSize.set(e.nativeEvent.layout.width)
}} }}
style={{flexDirection: 'row'}}> style={{flexDirection: 'row', flexGrow: 1}}>
{items.map((item, i) => { {items.map((item, i) => {
return ( return (
<TabBarItem <TabBarItem
@@ -359,7 +359,7 @@ function TabBarItem({
) )
return ( return (
<View onLayout={handleLayout}> <View onLayout={handleLayout} style={{flexGrow: 1}}>
<PressableWithHover <PressableWithHover
testID={`${testID}-selector-${index}`} testID={`${testID}-selector-${index}`}
style={styles.item} style={styles.item}
@@ -385,15 +385,19 @@ const styles = StyleSheet.create({
flexDirection: 'row', flexDirection: 'row',
}, },
contentContainer: { contentContainer: {
flexGrow: 1,
backgroundColor: 'transparent', backgroundColor: 'transparent',
paddingHorizontal: CONTENT_PADDING, paddingHorizontal: CONTENT_PADDING,
}, },
item: { item: {
flexGrow: 1,
paddingTop: 10, paddingTop: 10,
paddingHorizontal: ITEM_PADDING, paddingHorizontal: ITEM_PADDING,
justifyContent: 'center', justifyContent: 'center',
}, },
itemInner: { itemInner: {
alignItems: 'center',
flexGrow: 1,
paddingBottom: 10, paddingBottom: 10,
borderBottomWidth: 3, borderBottomWidth: 3,
borderBottomColor: 'transparent', borderBottomColor: 'transparent',
+9
View File
@@ -142,15 +142,19 @@ const desktopStyles = StyleSheet.create({
width: 598, width: 598,
}, },
contentContainer: { contentContainer: {
flexGrow: 1,
paddingHorizontal: 0, paddingHorizontal: 0,
backgroundColor: 'transparent', backgroundColor: 'transparent',
}, },
item: { item: {
flexGrow: 1,
alignItems: 'stretch',
paddingTop: 14, paddingTop: 14,
paddingHorizontal: 14, paddingHorizontal: 14,
justifyContent: 'center', justifyContent: 'center',
}, },
itemInner: { itemInner: {
alignItems: 'center',
paddingBottom: 12, paddingBottom: 12,
borderBottomWidth: 3, borderBottomWidth: 3,
borderBottomColor: 'transparent', borderBottomColor: 'transparent',
@@ -169,15 +173,20 @@ const mobileStyles = StyleSheet.create({
flexDirection: 'row', flexDirection: 'row',
}, },
contentContainer: { contentContainer: {
flexGrow: 1,
backgroundColor: 'transparent', backgroundColor: 'transparent',
paddingHorizontal: 6, paddingHorizontal: 6,
}, },
item: { item: {
flexGrow: 1,
alignItems: 'stretch',
paddingTop: 10, paddingTop: 10,
paddingHorizontal: 10, paddingHorizontal: 10,
justifyContent: 'center', justifyContent: 'center',
}, },
itemInner: { itemInner: {
flexGrow: 1,
alignItems: 'center',
paddingBottom: 10, paddingBottom: 10,
borderBottomWidth: 3, borderBottomWidth: 3,
borderBottomColor: 'transparent', borderBottomColor: 'transparent',