feat: Flyttade tabbarna längst ner (#145)

Co-authored-by: Rickard Natt och Dag <rickard@hey.com>

packages/app/components/child.component.js

@@ -1,4 +1,4 @@
-import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs'
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
 import {
   useCalendar,
   useClassmates,
@@ -7,10 +7,10 @@ import {
   useSchedule,
 } from '@skolplattformen/api-hooks'
 import {
+  BottomNavigation,
+  BottomNavigationTab,
   Icon,
   Layout,
-  Tab,
-  TabBar,
   Text,
   TopNavigation,
   TopNavigationAction,
@@ -25,7 +25,7 @@ import { Classmates } from './classmates.component'
 import { NewsList } from './newsList.component'
 import { NotificationsList } from './notificationsList.component'
 
-const { Navigator, Screen } = createMaterialTopTabNavigator()
+const { Navigator, Screen } = createBottomTabNavigator()
 
 const NewsScreen = () => {
   const child = useChild()
@@ -94,34 +94,34 @@ const NotificationsIcon = (props) => (
 const CalendarIcon = (props) => <Icon {...props} name="calendar-outline" />
 const ClassIcon = (props) => <Icon {...props} name="people-outline" />
 
-const TopTabBar = ({ navigation, state }) => (
-  <TabBar
+const BottomTabBar = ({ navigation, state }) => (
+  <BottomNavigation
     selectedIndex={state.index}
     onSelect={(index) => navigation.navigate(state.routeNames[index])}
   >
-    <Tab
+    <BottomNavigationTab
       title={(props) => <TabTitle {...props}>Nyheter</TabTitle>}
       icon={NewsIcon}
     />
-    <Tab
+    <BottomNavigationTab
       title={(props) => <TabTitle {...props}>Aviseringar</TabTitle>}
       icon={NotificationsIcon}
     />
-    <Tab
+    <BottomNavigationTab
       title={(props) => <TabTitle {...props}>Kalender</TabTitle>}
       icon={CalendarIcon}
     />
-    <Tab
+    <BottomNavigationTab
       title={(props) => <TabTitle {...props}>Klassen</TabTitle>}
       icon={ClassIcon}
     />
-  </TabBar>
+  </BottomNavigation>
 )
 
 const TabNavigator = ({ initialRouteName = 'Nyheter' }) => (
   <Navigator
     initialRouteName={initialRouteName}
-    tabBar={(props) => <TopTabBar {...props} />}
+    tabBar={(props) => <BottomTabBar {...props} />}
   >
     <Screen name="Nyheter" component={NewsScreen} />
     <Screen name="Notifieringar" component={NotificationsScreen} />

packages/app/components/childContext.component.js

@@ -3,7 +3,6 @@ import React, { createContext, useContext } from 'react'
 export const ChildContext = createContext({})
 
 export const ChildProvider = ({ child, children }) => {
-  console.log('Provider', child)
   return <ChildContext.Provider value={child}>{children}</ChildContext.Provider>
 }
 

packages/app/ios/Podfile.lock

@@ -514,4 +514,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: 7bddab1af6a6ea5128a2a6f6013968c5d4d00e7f
 
-COCOAPODS: 1.10.0
+COCOAPODS: 1.10.1

packages/app/package.json

@@ -16,7 +16,7 @@
     "@react-native-async-storage/async-storage": "1.13.4",
     "@react-native-community/cookies": "5.0.1",
     "@react-native-community/masked-view": "0.1.10",
-    "@react-navigation/material-top-tabs": "5.3.13",
+    "@react-navigation/bottom-tabs": "^5.11.7",
     "@react-navigation/native": "5.9.2",
     "@react-navigation/stack": "5.14.2",
     "@skolplattformen/api-hooks": "1.5.1",

packages/app/yarn.lock

@@ -1307,6 +1307,14 @@
   resolved "https://registry.yarnpkg.com/@react-native-community/masked-view/-/masked-view-0.1.10.tgz#5dda643e19e587793bc2034dd9bf7398ad43d401"
   integrity sha512-rk4sWFsmtOw8oyx8SD3KSvawwaK7gRBSEIy2TAwURyGt+3TizssXP1r8nx3zY+R7v2vYYHXZ+k2/GULAT/bcaQ==
 
+"@react-navigation/bottom-tabs@^5.11.7":
+  version "5.11.7"
+  resolved "https://registry.yarnpkg.com/@react-navigation/bottom-tabs/-/bottom-tabs-5.11.7.tgz#a1d220afe02b6897c0705ddc40265e65c01fa0ba"
+  integrity sha512-O8B/5GiME589fc6ltqV3iJxCdWXhplx+9i7tPbwx4SxKm1e1N9jdL9H8bsx+SWcMBelGfGeZ2WqRwMJzjQDT3Q==
+  dependencies:
+    color "^3.1.3"
+    react-native-iphone-x-helper "^1.3.0"
+
 "@react-navigation/core@^5.15.1":
   version "5.15.1"
   resolved "https://registry.yarnpkg.com/@react-navigation/core/-/core-5.15.1.tgz#dab5192277c606d9acbea511dac407c2834b5fbe"
@@ -1318,13 +1326,6 @@
     query-string "^6.13.6"
     react-is "^16.13.0"
 
-"@react-navigation/material-top-tabs@5.3.13":
-  version "5.3.13"
-  resolved "https://registry.yarnpkg.com/@react-navigation/material-top-tabs/-/material-top-tabs-5.3.13.tgz#951353f96c081ab18c4e0053a0c28ebce5e46d28"
-  integrity sha512-3+EyD0WICtf6HdZYP+EnunNfESv2I/JeQOV06Q+U2C2p42+UKAHAc3Eqwd45GdVUuRlH1dQ7HRP40xVJXYDcEQ==
-  dependencies:
-    color "^3.1.3"
-
 "@react-navigation/native@5.9.2":
   version "5.9.2"
   resolved "https://registry.yarnpkg.com/@react-navigation/native/-/native-5.9.2.tgz#2075774c3627d58a324e1b5dfc5f4f356a1ab7e9"