initiale styling for custom bottom navigation bar

danny-zou18 · Jun 26, 2024 · 21246a0 · 21246a0
1 parent af27e82
commit 21246a0
Showing 1 changed file with 2 additions and 1 deletion.
diff --git a/lifescape-app/components/general/TabBar.tsx b/lifescape-app/components/general/TabBar.tsx
@@ -8,7 +8,7 @@ type TabBarProps = {
 
 const TabBar = ({ state, descriptors, navigation }: TabBarProps) => {
   return (
-    <View style={{ flexDirection: 'row' }}>
+    <View className='flex flex-row justify-between items-center absolute bottom-5 max-w-[95vw] mx-[20px] py-4 bg-black'>
       {state.routes.map((route:any, index:number) => {
         const { options } = descriptors[route.key];
         const label =
@@ -49,6 +49,7 @@ const TabBar = ({ state, descriptors, navigation }: TabBarProps) => {
             onLongPress={onLongPress}
             style={{ flex: 1 }}
             key={route.key}
+            className='flex items-center'
           >
             <Text style={{ color: isFocused ? '#673ab7' : '#222' }}>
               {label}