Skip to content

Commit 287a281

Browse files
jbromajbroma
authored
fix: styling, types (#116)
### Summary - [x] - fixed 'See All' button on iOS text being ellipsized instead of being showing in full - [x] - fixed differences between padding for `Card.Cover` from RNP - [x] - removed old patch for RNP - [x] - use BottomTabScreen from RNBT instead of RNP - [x] - make BottomTabBar opaque on iOS - [x] - align top and bottom bars color-wise on both platforms ### Screenshots | ios | android | | - | - | | ![image](https://github.com/user-attachments/assets/611b3aeb-80cb-4129-810b-21f685d7aecf) | ![image](https://github.com/user-attachments/assets/0d075d34-dd3f-4740-af00-5bb5cf07f517) | ### Test plan - [x] - Apps on iOS and Android match visually
1 parent 6756dfa commit 287a281

File tree

22 files changed

+128
-108
lines changed

22 files changed

+128
-108
lines changed

‎packages/auth/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,14 @@
1313
"check-deps": "rnx-align-deps"
1414
},
1515
"dependencies": {
16-
"@bottom-tabs/react-navigation": "0.7.3",
16+
"@bottom-tabs/react-navigation": "0.7.6",
1717
"@module-federation/enhanced": "0.7.1",
1818
"@react-native-async-storage/async-storage": "2.0.0",
1919
"@react-navigation/native": "7.0.13",
2020
"@react-navigation/native-stack": "7.1.14",
2121
"react": "18.3.1",
2222
"react-native": "0.76.3",
23-
"react-native-bottom-tabs": "0.7.3",
23+
"react-native-bottom-tabs": "0.7.6",
2424
"react-native-edge-to-edge": "1.1.3",
2525
"react-native-paper": "5.12.5",
2626
"react-native-safe-area-context": "4.12.0",

‎packages/booking/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,14 +14,14 @@
1414
"check-deps": "rnx-align-deps"
1515
},
1616
"dependencies": {
17-
"@bottom-tabs/react-navigation": "0.7.3",
17+
"@bottom-tabs/react-navigation": "0.7.6",
1818
"@module-federation/enhanced": "0.7.1",
1919
"@react-native-async-storage/async-storage": "2.0.0",
2020
"@react-navigation/native": "7.0.13",
2121
"@react-navigation/native-stack": "7.1.14",
2222
"react": "18.3.1",
2323
"react-native": "0.76.3",
24-
"react-native-bottom-tabs": "0.7.3",
24+
"react-native-bottom-tabs": "0.7.6",
2525
"react-native-calendars": "1.1291.1",
2626
"react-native-edge-to-edge": "1.1.3",
2727
"react-native-paper": "5.12.5",

‎packages/booking/src/components/NavBar.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import React from 'react';
22
import {NativeStackHeaderProps} from '@react-navigation/native-stack';
3-
import {Appbar} from 'react-native-paper';
3+
import {Appbar, MD3Colors} from 'react-native-paper';
44

55
const NavBar = ({navigation, back, route, options}: NativeStackHeaderProps) => {
66
return (
7-
<Appbar.Header elevated>
7+
<Appbar.Header elevated style={{backgroundColor: MD3Colors.primary95}}>
88
{back ? <Appbar.BackAction onPress={navigation.goBack} /> : null}
99
<Appbar.Content title={options.title ?? route.name} />
1010
</Appbar.Header>

‎packages/booking/src/navigation/TabsNavigator.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,10 @@ const Tabs = createNativeBottomTabNavigator<TabsParamList>();
2020

2121
const TabsNavigator = () => {
2222
return (
23-
<Tabs.Navigator tabBarActiveTintColor={MD3Colors.primary50}>
23+
<Tabs.Navigator
24+
translucent={false}
25+
tabBarActiveTintColor={MD3Colors.primary50}
26+
barTintColor={MD3Colors.primary95}>
2427
<Tabs.Screen
2528
name="HomeNavigator"
2629
component={HomeNavigator}

‎packages/booking/src/screens/HomeScreen.tsx

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,8 @@ import {
99
} from 'react-native';
1010
import {CompositeScreenProps} from '@react-navigation/native';
1111
import {NativeStackScreenProps} from '@react-navigation/native-stack';
12-
import {
13-
Avatar,
14-
Card,
15-
Button,
16-
Divider,
17-
Text,
18-
MaterialBottomTabScreenProps,
19-
} from 'react-native-paper';
12+
import {NativeBottomTabScreenProps} from '@bottom-tabs/react-navigation';
13+
import {Avatar, Card, Button, Divider, Text} from 'react-native-paper';
2014
import {TabsParamList} from '../navigation/TabsNavigator';
2115
import {HomeStackParamList} from '../navigation/HomeNavigator';
2216
import upcomingBookings from '../data/upcomingBookings.json';
@@ -25,7 +19,7 @@ import featuredServices from '../data/featuredServices.json';
2519

2620
type Props = CompositeScreenProps<
2721
NativeStackScreenProps<HomeStackParamList>,
28-
MaterialBottomTabScreenProps<TabsParamList, 'HomeNavigator'>
22+
NativeBottomTabScreenProps<TabsParamList, 'HomeNavigator'>
2923
>;
3024

3125
const renderAppointment = ({item}: any) => (

‎packages/dashboard/ios/Podfile.lock

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1266,7 +1266,7 @@ PODS:
12661266
- ReactCommon/turbomodule/bridging
12671267
- ReactCommon/turbomodule/core
12681268
- Yoga
1269-
- react-native-bottom-tabs (0.7.3):
1269+
- react-native-bottom-tabs (0.7.6):
12701270
- DoubleConversion
12711271
- glog
12721272
- hermes-engine
@@ -1279,7 +1279,7 @@ PODS:
12791279
- React-featureflags
12801280
- React-graphics
12811281
- React-ImageManager
1282-
- react-native-bottom-tabs/common (= 0.7.3)
1282+
- react-native-bottom-tabs/common (= 0.7.6)
12831283
- React-NativeModulesApple
12841284
- React-RCTFabric
12851285
- React-rendererdebug
@@ -1291,7 +1291,7 @@ PODS:
12911291
- SDWebImageSVGCoder (>= 1.7.0)
12921292
- SwiftUIIntrospect (~> 1.0)
12931293
- Yoga
1294-
- react-native-bottom-tabs/common (0.7.3):
1294+
- react-native-bottom-tabs/common (0.7.6):
12951295
- DoubleConversion
12961296
- glog
12971297
- hermes-engine
@@ -1738,7 +1738,7 @@ PODS:
17381738
- SDWebImage (5.20.0):
17391739
- SDWebImage/Core (= 5.20.0)
17401740
- SDWebImage/Core (5.20.0)
1741-
- SDWebImageSVGCoder (1.7.0):
1741+
- SDWebImageSVGCoder (1.8.0):
17421742
- SDWebImage/Core (~> 5.6)
17431743
- SocketRocket (0.7.1)
17441744
- SwiftUIIntrospect (1.3.0)
@@ -2010,7 +2010,7 @@ SPEC CHECKSUMS:
20102010
React-logger: 26155dc23db5c9038794db915f80bd2044512c2e
20112011
React-Mapbuffer: ad1ba0205205a16dbff11b8ade6d1b3959451658
20122012
React-microtasksnativemodule: e771eb9eb6ace5884ee40a293a0e14a9d7a4343c
2013-
react-native-bottom-tabs: 826eeae1eec560ca818d433c4657cc5bdf14085e
2013+
react-native-bottom-tabs: efc4265bb52b9b7a67fc30965b51cdf84f5be3cd
20142014
react-native-safe-area-context: 458f6b948437afcb59198016b26bbd02ff9c3b47
20152015
React-nativeconfig: aeed6e2a8ac02b2df54476afcc7c663416c12bf7
20162016
React-NativeModulesApple: c5b7813da94136f50ef084fa1ac077332dcfc658
@@ -2043,7 +2043,7 @@ SPEC CHECKSUMS:
20432043
RNScreens: 949445ea5fb20daea35cbaba4f482ff98d1a50c6
20442044
RNVectorIcons: 07792a9538e8577c1263fcad187712e90d65d8fb
20452045
SDWebImage: 73c6079366fea25fa4bb9640d5fb58f0893facd8
2046-
SDWebImageSVGCoder: 15a300a97ec1c8ac958f009c02220ac0402e936c
2046+
SDWebImageSVGCoder: 8e10c8f6cc879c7dfb317b284e13dd589379f01c
20472047
SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748
20482048
SwiftUIIntrospect: fee9aa07293ee280373a591e1824e8ddc869ba5d
20492049
SwiftyRSA: 8c6dd1ea7db1b8dc4fb517a202f88bb1354bc2c6

‎packages/dashboard/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,14 +19,14 @@
1919
"check-deps": "rnx-align-deps"
2020
},
2121
"dependencies": {
22-
"@bottom-tabs/react-navigation": "0.7.3",
22+
"@bottom-tabs/react-navigation": "0.7.6",
2323
"@module-federation/enhanced": "0.7.1",
2424
"@react-native-async-storage/async-storage": "2.0.0",
2525
"@react-navigation/native": "7.0.13",
2626
"@react-navigation/native-stack": "7.1.14",
2727
"react": "18.3.1",
2828
"react-native": "0.76.3",
29-
"react-native-bottom-tabs": "0.7.3",
29+
"react-native-bottom-tabs": "0.7.6",
3030
"react-native-calendars": "1.1291.1",
3131
"react-native-edge-to-edge": "1.1.3",
3232
"react-native-paper": "5.12.5",

‎packages/dashboard/src/components/NavBar.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import React from 'react';
22
import {NativeStackHeaderProps} from '@react-navigation/native-stack';
3-
import {Appbar} from 'react-native-paper';
3+
import {Appbar, MD3Colors} from 'react-native-paper';
44

55
const NavBar = ({navigation, back, route, options}: NativeStackHeaderProps) => {
66
return (
7-
<Appbar.Header elevated>
7+
<Appbar.Header elevated style={{backgroundColor: MD3Colors.primary95}}>
88
{back ? <Appbar.BackAction onPress={navigation.goBack} /> : null}
99
<Appbar.Content title={options.title ?? route.name} />
1010
</Appbar.Header>

‎packages/dashboard/src/navigation/TabsNavigator.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,10 @@ const Tabs = createNativeBottomTabNavigator<TabsParamList>();
2323

2424
const TabsNavigator = () => {
2525
return (
26-
<Tabs.Navigator tabBarActiveTintColor={MD3Colors.primary50}>
26+
<Tabs.Navigator
27+
translucent={false}
28+
tabBarActiveTintColor={MD3Colors.primary50}
29+
barTintColor={MD3Colors.primary95}>
2730
<Tabs.Screen
2831
name="HomeNavigator"
2932
component={HomeNavigator}

‎packages/host/ios/Podfile.lock

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1266,7 +1266,7 @@ PODS:
12661266
- ReactCommon/turbomodule/bridging
12671267
- ReactCommon/turbomodule/core
12681268
- Yoga
1269-
- react-native-bottom-tabs (0.7.3):
1269+
- react-native-bottom-tabs (0.7.6):
12701270
- DoubleConversion
12711271
- glog
12721272
- hermes-engine
@@ -1279,7 +1279,7 @@ PODS:
12791279
- React-featureflags
12801280
- React-graphics
12811281
- React-ImageManager
1282-
- react-native-bottom-tabs/common (= 0.7.3)
1282+
- react-native-bottom-tabs/common (= 0.7.6)
12831283
- React-NativeModulesApple
12841284
- React-RCTFabric
12851285
- React-rendererdebug
@@ -1291,7 +1291,7 @@ PODS:
12911291
- SDWebImageSVGCoder (>= 1.7.0)
12921292
- SwiftUIIntrospect (~> 1.0)
12931293
- Yoga
1294-
- react-native-bottom-tabs/common (0.7.3):
1294+
- react-native-bottom-tabs/common (0.7.6):
12951295
- DoubleConversion
12961296
- glog
12971297
- hermes-engine
@@ -1759,7 +1759,7 @@ PODS:
17591759
- SDWebImage (5.20.0):
17601760
- SDWebImage/Core (= 5.20.0)
17611761
- SDWebImage/Core (5.20.0)
1762-
- SDWebImageSVGCoder (1.7.0):
1762+
- SDWebImageSVGCoder (1.8.0):
17631763
- SDWebImage/Core (~> 5.6)
17641764
- SocketRocket (0.7.1)
17651765
- SwiftUIIntrospect (1.3.0)
@@ -2034,7 +2034,7 @@ SPEC CHECKSUMS:
20342034
React-logger: 26155dc23db5c9038794db915f80bd2044512c2e
20352035
React-Mapbuffer: ad1ba0205205a16dbff11b8ade6d1b3959451658
20362036
React-microtasksnativemodule: e771eb9eb6ace5884ee40a293a0e14a9d7a4343c
2037-
react-native-bottom-tabs: 826eeae1eec560ca818d433c4657cc5bdf14085e
2037+
react-native-bottom-tabs: efc4265bb52b9b7a67fc30965b51cdf84f5be3cd
20382038
react-native-safe-area-context: 458f6b948437afcb59198016b26bbd02ff9c3b47
20392039
React-nativeconfig: aeed6e2a8ac02b2df54476afcc7c663416c12bf7
20402040
React-NativeModulesApple: c5b7813da94136f50ef084fa1ac077332dcfc658
@@ -2068,7 +2068,7 @@ SPEC CHECKSUMS:
20682068
RNScreens: 949445ea5fb20daea35cbaba4f482ff98d1a50c6
20692069
RNVectorIcons: 07792a9538e8577c1263fcad187712e90d65d8fb
20702070
SDWebImage: 73c6079366fea25fa4bb9640d5fb58f0893facd8
2071-
SDWebImageSVGCoder: 15a300a97ec1c8ac958f009c02220ac0402e936c
2071+
SDWebImageSVGCoder: 8e10c8f6cc879c7dfb317b284e13dd589379f01c
20722072
SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748
20732073
SwiftUIIntrospect: fee9aa07293ee280373a591e1824e8ddc869ba5d
20742074
SwiftyRSA: 8c6dd1ea7db1b8dc4fb517a202f88bb1354bc2c6

‎packages/host/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,15 +17,15 @@
1717
"check-deps": "rnx-align-deps"
1818
},
1919
"dependencies": {
20-
"@bottom-tabs/react-navigation": "0.7.3",
20+
"@bottom-tabs/react-navigation": "0.7.6",
2121
"@module-federation/enhanced": "0.7.1",
2222
"@react-native-async-storage/async-storage": "2.0.0",
2323
"@react-navigation/native": "7.0.13",
2424
"@react-navigation/native-stack": "7.1.14",
2525
"react": "18.3.1",
2626
"react-native": "0.76.3",
2727
"react-native-bootsplash": "6.2.6",
28-
"react-native-bottom-tabs": "0.7.3",
28+
"react-native-bottom-tabs": "0.7.6",
2929
"react-native-edge-to-edge": "1.1.3",
3030
"react-native-paper": "5.12.5",
3131
"react-native-safe-area-context": "4.12.0",

‎packages/host/src/App.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ const App = () => {
2828

2929
return (
3030
<NavigationContainer
31-
onReady={() => RNBootSplash.hide({fade: true, duration: 500})}>
31+
onReady={() => RNBootSplash.hide({fade: true})}>
3232
<MainNavigator />
3333
</NavigationContainer>
3434
);

‎packages/host/src/components/NavBar.tsx

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
import React from 'react';
22
import {NativeStackHeaderProps} from '@react-navigation/native-stack';
3-
import {Appbar} from 'react-native-paper';
3+
import {Appbar, MD3Colors} from 'react-native-paper';
44

55
const NavBar = ({navigation, back, route, options}: NativeStackHeaderProps) => {
66
return (
7-
<Appbar.Header elevated mode="center-aligned">
7+
<Appbar.Header
8+
elevated
9+
mode="center-aligned"
10+
style={{backgroundColor: MD3Colors.primary95}}>
811
{back ? <Appbar.BackAction onPress={navigation.goBack} /> : null}
912
<Appbar.Content title={options.title ?? route.name} />
1013
</Appbar.Header>

‎packages/host/src/navigation/MainNavigator.tsx

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,7 @@ const Main = createNativeStackNavigator<MainStackParamList>();
1818

1919
const MainNavigator = () => {
2020
return (
21-
<Main.Navigator
22-
screenOptions={{
23-
headerShown: false,
24-
}}>
21+
<Main.Navigator screenOptions={{headerShown: false}}>
2522
<Main.Screen name="Tabs" component={TabsNavigator} />
2623
<Main.Screen name="Booking" component={BookingScreen} />
2724
<Main.Screen name="Shopping" component={ShoppingScreen} />

‎packages/host/src/navigation/TabsNavigator.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,10 @@ const Tabs = createNativeBottomTabNavigator<TabsParamList>();
2020

2121
const TabsNavigator = () => {
2222
return (
23-
<Tabs.Navigator tabBarActiveTintColor={MD3Colors.primary50}>
23+
<Tabs.Navigator
24+
translucent={false}
25+
tabBarActiveTintColor={MD3Colors.primary50}
26+
barTintColor={MD3Colors.primary95}>
2427
<Tabs.Screen
2528
name="HomeNavigator"
2629
component={HomeNavigator}

‎packages/host/src/screens/HomeScreen.tsx

Lines changed: 26 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {
88
} from 'react-native';
99
import {CompositeScreenProps} from '@react-navigation/native';
1010
import {NativeStackScreenProps} from '@react-navigation/native-stack';
11+
import {NativeBottomTabScreenProps} from '@bottom-tabs/react-navigation';
1112
import {
1213
Avatar,
1314
Card,
@@ -16,7 +17,6 @@ import {
1617
Text,
1718
Title,
1819
Paragraph,
19-
MaterialBottomTabScreenProps,
2020
} from 'react-native-paper';
2121
import {TabsParamList} from '../navigation/TabsNavigator';
2222
import {HomeStackParamList} from '../navigation/HomeNavigator';
@@ -27,7 +27,7 @@ import recentArticles from '../data/recentArticles.json';
2727

2828
type Props = CompositeScreenProps<
2929
NativeStackScreenProps<HomeStackParamList>,
30-
MaterialBottomTabScreenProps<TabsParamList, 'HomeNavigator'>
30+
NativeBottomTabScreenProps<TabsParamList, 'HomeNavigator'>
3131
>;
3232

3333
const renderUpcoming = ({item}: any) => (
@@ -78,16 +78,18 @@ const renderDivider = () => <Divider style={styles.divider} />;
7878

7979
const HomeScreen = ({navigation}: Props) => {
8080
return (
81-
<ScrollView style={styles.container}
82-
contentInsetAdjustmentBehavior="automatic"
83-
>
81+
<ScrollView
82+
style={styles.container}
83+
contentInsetAdjustmentBehavior="automatic">
8484
<View style={styles.header}>
8585
<Text variant="titleLarge" style={styles.headerTitle}>
8686
Upcoming Appointments
8787
</Text>
8888
<Button
89+
compact
8990
mode="contained-tonal"
90-
onPress={() => navigation.navigate('Upcoming')}>
91+
onPress={() => navigation.navigate('Upcoming')}
92+
style={styles.button}>
9193
See All
9294
</Button>
9395
</View>
@@ -103,7 +105,11 @@ const HomeScreen = ({navigation}: Props) => {
103105
<Text variant="titleLarge" style={styles.headerTitle}>
104106
New Products
105107
</Text>
106-
<Button mode="contained-tonal" onPress={() => {}}>
108+
<Button
109+
compact
110+
mode="contained-tonal"
111+
onPress={() => {}}
112+
style={styles.button}>
107113
See All
108114
</Button>
109115
</View>
@@ -119,7 +125,11 @@ const HomeScreen = ({navigation}: Props) => {
119125
<Text variant="titleLarge" style={styles.headerTitle}>
120126
Recent News
121127
</Text>
122-
<Button mode="contained-tonal" onPress={() => {}}>
128+
<Button
129+
compact
130+
mode="contained-tonal"
131+
onPress={() => {}}
132+
style={styles.button}>
123133
See All
124134
</Button>
125135
</View>
@@ -135,7 +145,11 @@ const HomeScreen = ({navigation}: Props) => {
135145
<Text variant="titleLarge" style={styles.headerTitle}>
136146
Recent Articles
137147
</Text>
138-
<Button mode="contained-tonal" onPress={() => {}}>
148+
<Button
149+
compact
150+
mode="contained-tonal"
151+
onPress={() => {}}
152+
style={styles.button}>
139153
See All
140154
</Button>
141155
</View>
@@ -152,6 +166,9 @@ const HomeScreen = ({navigation}: Props) => {
152166
};
153167

154168
const styles = StyleSheet.create({
169+
button: {
170+
paddingHorizontal: 16,
171+
},
155172
container: {
156173
flex: 1,
157174
backgroundColor: '#fff',

0 commit comments

Comments
 (0)