plz

components/jellify.tsx

@@ -1,5 +1,5 @@
 import _ from "lodash";
-import React, { useEffect } from "react";
+import React from "react";
 import { NavigationContainer } from "@react-navigation/native";
 import Navigation from "./navigation";
 import Login from "./Login/component";
@@ -10,8 +10,6 @@ import { PlayerProvider } from "../player/provider";
 import { useColorScheme } from "react-native";
 import { PortalProvider } from "tamagui";
 import { JellifyProvider, useJellifyContext } from "./provider";
-import { CarPlay } from "react-native-carplay"
-import CarPlayNavigation from "./CarPlay/Navigation";
 
 export default function Jellify(): React.JSX.Element {
 
@@ -27,17 +25,8 @@ export default function Jellify(): React.JSX.Element {
 function App(): React.JSX.Element {
 
   const isDarkMode = useColorScheme() === "dark";
-
-  const { carPlayConnected } = useJellifyContext();
-
   const { loggedIn } = useJellifyContext();
 
-  // useEffect(() => {
-  //   if (carPlayConnected)
-  //     CarPlay.setRootTemplate(CarPlayNavigation)
-  // }, [
-  //   carPlayConnected
-  // ])
 
   return (
     <NavigationContainer theme={isDarkMode ? JellifyDarkTheme : JellifyLightTheme}>

components/provider.tsx

@@ -2,6 +2,7 @@ import Client from "../api/client";
 import { isUndefined } from "lodash";
 import { createContext, ReactNode, useContext, useEffect, useState } from "react";
 import { CarPlay } from "react-native-carplay";
+import CarPlayNavigation from "./CarPlay/Navigation";
 
 interface JellifyContext {
     loggedIn: boolean;
@@ -21,11 +22,12 @@ const JellifyContextInitializer = () => {
     useEffect(() => {
   
       function onConnect() {
-        setCarPlayConnected(true)
+        setCarPlayConnected(true);
+        CarPlay.setRootTemplate(CarPlayNavigation)
       }
   
       function onDisconnect() {
-        setCarPlayConnected(false)
+        setCarPlayConnected(false);
       }
   
       CarPlay.registerOnConnect(onConnect);