react-native-navigation-bar-color removed and converted functions to …

…expo-navigation-bar.
Alperengozum · Feb 17, 2024 · d34d3e4 · d34d3e4
1 parent c0c8f3b
commit d34d3e4
Show file tree

Hide file tree

Showing 10 changed files with 157 additions and 174 deletions.
diff --git a/android/app/build.gradle b/android/app/build.gradle
@@ -86,7 +86,7 @@ android {
         applicationId 'com.alperengozum.sleepwell'
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 02
+        versionCode 200001
         versionName "0.2"
 
         buildConfigField("boolean", "REACT_NATIVE_UNSTABLE_USE_RUNTIME_SCHEDULER_ALWAYS", (findProperty("reactNative.unstable_useRuntimeSchedulerAlways") ?: true).toString())

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sleepwell",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "main": "node_modules/expo/AppEntry.js",
   "scripts": {
     "start": "expo start",
@@ -23,6 +23,7 @@
     "expo-alarm": "^0.1.0",
     "expo-constants": "~14.4.2",
     "expo-localization": "~14.3.0",
+    "expo-navigation-bar": "~2.3.0",
     "expo-notifications": "~0.20.1",
     "expo-splash-screen": "~0.20.5",
     "expo-status-bar": "~1.6.0",
@@ -38,7 +39,6 @@
     "react-native-gesture-handler": "~2.12.0",
     "react-native-google-mobile-ads": "12.6.0",
     "react-native-material-datetime-picker": "^0.2.1",
-    "react-native-navigation-bar-color": "^2.0.1",
     "react-native-reanimated": "3.3.0",
     "react-native-safe-area-context": "4.6.3",
     "react-native-screens": "~3.22.0",

diff --git a/src/components/lists/CycleList.tsx b/src/components/lists/CycleList.tsx
@@ -10,161 +10,159 @@ import {getCalendars} from "expo-localization";
 import {setAlarm} from "expo-alarm";
 
 interface List {
-	name: string | number;
-	type: ListType;
-	desc?: string;
-	icon?: React.ReactNode;
-	onClick?: () => void;
+  name: string | number;
+  type: ListType;
+  desc?: string;
+  icon?: React.ReactNode;
+  onClick?: () => void;
 }
 
 enum ListType {
-	HEADER,
-	ITEM
+  HEADER,
+  ITEM
 }
 
 export const createIntentAlarm = (date: Date, type?: SleepType, cycleCount?: number): void => {
-	//TODO add success modal
-	let createDate: Date = new Date();
-	setAlarm({
-		hour: date.getHours(),
-		minutes: date.getMinutes(),
-		message: type || SleepType.SLEEP
-	}).then((e) => {
-		SleepStore.addSleep({
-			end: date, start: createDate, type: type || SleepType.SLEEP, cycle: cycleCount || undefined
-		})
-		}
-	)
+  //TODO add success modal
+  let createDate: Date = new Date();
+  setAlarm({
+    hour: date.getHours(),
+    minutes: date.getMinutes(),
+    message: type || SleepType.SLEEP
+  })
+  SleepStore.addSleep({
+    end: date, start: createDate, type: type || SleepType.SLEEP, cycle: cycleCount || undefined
+  })
 }
 
 export const formatHour = (hours: string, is24Hour: undefined | boolean): string => {
-	if (is24Hour) {
-		return hours;
-	} else {
-		let formattedHours = parseInt(hours) % 12;
-		formattedHours = formattedHours ? formattedHours : 12;
-		if (formattedHours < 10) {
-			return "0" + formattedHours.toString();
-		}
-		return formattedHours.toString();
-	}
+  if (is24Hour) {
+    return hours;
+  } else {
+    let formattedHours = parseInt(hours) % 12;
+    formattedHours = formattedHours ? formattedHours : 12;
+    if (formattedHours < 10) {
+      return "0" + formattedHours.toString();
+    }
+    return formattedHours.toString();
+  }
 }
 
 export const addHours = (date: Date, hours: number): Date => {
-	return new Date(date.getTime() + hours * 3600000);
+  return new Date(date.getTime() + hours * 3600000);
 }
 
 export const CycleList = (props: { params: any; }) => {
-	const [is24Hour, setIs24Hour] = useState<boolean | undefined>(undefined);
-	const [list, setList] = useState<Array<List>>([
-		{
-			name: "Sleep",
-			desc: "Wake up at",
-			type: ListType.HEADER,
-			icon: <Icon color="white" as={MaterialCommunityIcons} name="power-sleep" size="2xl"/>
-		},
-	]);
+  const [is24Hour, setIs24Hour] = useState<boolean | undefined>(undefined);
+  const [list, setList] = useState<Array<List>>([
+    {
+      name: "Sleep",
+      desc: "Wake up at",
+      type: ListType.HEADER,
+      icon: <Icon color="white" as={MaterialCommunityIcons} name="power-sleep" size="2xl"/>
+    },
+  ]);
 
-	useEffect(() => {
-		const findTimeFormat = async () => {
-			setIs24Hour(getCalendars()[0].uses24hourClock || false)
-		}
-		findTimeFormat();
-	}, [])
+  useEffect(() => {
+    const findTimeFormat = async () => {
+      setIs24Hour(getCalendars()[0].uses24hourClock || false)
+    }
+    findTimeFormat();
+  }, [])
 
-	const buildList = (params: any) => {
-		//Calculate when to go to bed
-		if (!params) {
-			return console.error("where are the params?")
-		}
-		if (!params.isStart) {
-			let tempList: Array<List> = [];
-			list.find((d: List) => d.name == "Sleep")!.desc = "Go to bed at";
-			for (let i = 6; i >= 1; i--) {
-				let date = addHours(new Date(params.time), -i * 1.5)
-				date = addHours(date, -(SettingsStore.getSettings(SettingsType.FALL_ASLEEP)![0]!.value || 0) / 60)
-				tempList.push({
-					type: ListType.ITEM,
-					name: i,
-					desc: `${formatHour(("0" + date.getHours()).slice(-2), is24Hour)}:${("0" + date.getMinutes()).slice(-2)}`,
-					onClick: () => createIntentAlarm(date, SleepType.SLEEP, i)
-				})
-			}
-			setList([list[0], ...tempList])
-		}
-		if (params.isStart) {
-			let tempList: Array<List> = [];
-			list.find((d: List) => d.name == "Sleep")!.desc = "Wake up at";
-			for (let i = 6; i >= 1; i--) {
-				let date = addHours(new Date(params.time), i * 1.5)
-				date = addHours(date, (SettingsStore.getSettings(SettingsType.FALL_ASLEEP)![0]!.value || 0) / 60)
-				tempList.push({
-					type: ListType.ITEM,
-					name: i,
-					desc: `${formatHour(("0" + date.getHours()).slice(-2), is24Hour)}:${("0" + date.getMinutes()).slice(-2)}`,
-					onClick: () => createIntentAlarm(date, SleepType.SLEEP, i)
-				})
-			}
-			setList([list[0], ...tempList])
-		}
-	}
+  const buildList = (params: any) => {
+    //Calculate when to go to bed
+    if (!params) {
+      return console.error("where are the params?")
+    }
+    if (!params.isStart) {
+      let tempList: Array<List> = [];
+      list.find((d: List) => d.name == "Sleep")!.desc = "Go to bed at";
+      for (let i = 6; i >= 1; i--) {
+        let date = addHours(new Date(params.time), -i * 1.5)
+        date = addHours(date, -(SettingsStore.getSettings(SettingsType.FALL_ASLEEP)![0]!.value || 0) / 60)
+        tempList.push({
+          type: ListType.ITEM,
+          name: i,
+          desc: `${formatHour(("0" + date.getHours()).slice(-2), is24Hour)}:${("0" + date.getMinutes()).slice(-2)}`,
+          onClick: () => createIntentAlarm(date, SleepType.SLEEP, i)
+        })
+      }
+      setList([list[0], ...tempList])
+    }
+    if (params.isStart) {
+      let tempList: Array<List> = [];
+      list.find((d: List) => d.name == "Sleep")!.desc = "Wake up at";
+      for (let i = 6; i >= 1; i--) {
+        let date = addHours(new Date(params.time), i * 1.5)
+        date = addHours(date, (SettingsStore.getSettings(SettingsType.FALL_ASLEEP)![0]!.value || 0) / 60)
+        tempList.push({
+          type: ListType.ITEM,
+          name: i,
+          desc: `${formatHour(("0" + date.getHours()).slice(-2), is24Hour)}:${("0" + date.getMinutes()).slice(-2)}`,
+          onClick: () => createIntentAlarm(date, SleepType.SLEEP, i)
+        })
+      }
+      setList([list[0], ...tempList])
+    }
+  }
 
-	const stickyHeaderIndices = list
-		.map((item, index) => {
-			if (item.type === ListType.HEADER) {
-				return index;
-			} else {
-				return null;
-			}
-		})
-		.filter((item: number | null) => item !== null) as number[];
+  const stickyHeaderIndices = list
+    .map((item, index) => {
+      if (item.type === ListType.HEADER) {
+        return index;
+      } else {
+        return null;
+      }
+    })
+    .filter((item: number | null) => item !== null) as number[];
 
-	useEffect(() => {
-		buildList(props.params);
-	}, [])
+  useEffect(() => {
+    buildList(props.params);
+  }, [])
 
-	useEffect(() => {
-		const findTimeFormat = async () => {
-			setIs24Hour(getCalendars()[0].uses24hourClock || false)
-		}
-		findTimeFormat();
-	}, [])
+  useEffect(() => {
+    const findTimeFormat = async () => {
+      setIs24Hour(getCalendars()[0].uses24hourClock || false)
+    }
+    findTimeFormat();
+  }, [])
 
-	return (
-		<View width={"100%"} h={"100%"} mt={50}>
-			<FlashList
-				data={list}
-				renderItem={({item}) => {
-					if (item!.type === ListType.HEADER) {
-						// Rendering header
-						return <GenericHeaderCard>
-							<HStack mr={10} justifyContent="space-between" alignItems="center" textAlign="center">
-								<Text color="white" fontSize="lg">{item.name}</Text>
-								<Text color="white" fontSize="lg">{item.desc}</Text>
-							</HStack>
-						</GenericHeaderCard>;
-					} else if (item.type == ListType.ITEM) {
-						return <GenericCard style={{marginVertical: 10}} onPress={item.onClick || undefined}>
-							<HStack my={5} mr={10} justifyContent="space-between" alignItems="center" textAlign="center">
-								<VStack mx={5}>
-									<Text color="white" fontSize="lg">{item.name + " Sleep Cycles"}</Text>
-									<Text color="gray.400" fontSize="md">{"Equals " + item.name * 1.5 + " hours sleep."}</Text>
-								</VStack>
-								<Text color="purple.700" bold fontSize="xl">{item.desc}</Text>
-							</HStack>
-						</GenericCard>
-					} else {
-						return <React.Fragment/>
-					}
+  return (
+    <View width={"100%"} h={"100%"} mt={50}>
+      <FlashList
+        data={list}
+        renderItem={({item}) => {
+          if (item!.type === ListType.HEADER) {
+            // Rendering header
+            return <GenericHeaderCard>
+              <HStack mr={10} justifyContent="space-between" alignItems="center" textAlign="center">
+                <Text color="white" fontSize="lg">{item.name}</Text>
+                <Text color="white" fontSize="lg">{item.desc}</Text>
+              </HStack>
+            </GenericHeaderCard>;
+          } else if (item.type == ListType.ITEM) {
+            return <GenericCard style={{marginVertical: 10}} onPress={item.onClick || undefined}>
+              <HStack my={5} mr={10} justifyContent="space-between" alignItems="center" textAlign="center">
+                <VStack mx={5}>
+                  <Text color="white" fontSize="lg">{item.name + " Sleep Cycles"}</Text>
+                  <Text color="gray.400" fontSize="md">{"Equals " + item.name * 1.5 + " hours sleep."}</Text>
+                </VStack>
+                <Text color="purple.700" bold fontSize="xl">{item.desc}</Text>
+              </HStack>
+            </GenericCard>
+          } else {
+            return <React.Fragment/>
+          }
 
-				}}
-				stickyHeaderIndices={stickyHeaderIndices}
-				getItemType={(item) => {
-					// To achieve better performance, specify the type based on the item
-					return typeof item === "string" ? "sectionHeader" : "row";
-				}}
-				estimatedItemSize={10}
-			/>
-		</View>
-	);
+        }}
+        stickyHeaderIndices={stickyHeaderIndices}
+        getItemType={(item) => {
+          // To achieve better performance, specify the type based on the item
+          return typeof item === "string" ? "sectionHeader" : "row";
+        }}
+        estimatedItemSize={10}
+      />
+    </View>
+  );
 };
diff --git a/src/router/MainNavigator.tsx b/src/router/MainNavigator.tsx
@@ -2,7 +2,6 @@ import {createNativeStackNavigator} from "@react-navigation/native-stack";
 import React from "react";
 import {BottomTabNavigator} from "./BottomTabNavigator";
 import Cycle from "../screen/Cycle";
-import Powernap from "../screen/Powernap";
 import Info from "../screen/Info";
 
 const Stack = createNativeStackNavigator();
@@ -12,7 +11,6 @@ export function MainNavigator() {
     <Stack.Navigator initialRouteName="Main">
         <Stack.Screen name="Main" component={BottomTabNavigator} options={{headerShown: false}}/>
         <Stack.Screen name="Cycle" component={Cycle} options={{headerShown: false}}/>
-        <Stack.Screen name="Powernap" component={Powernap} options={{headerShown: false}}/>
         <Stack.Screen name="Info" component={Info} options={{headerShown: false}}/>
     </Stack.Navigator>
   );

diff --git a/src/screen/Calculate.tsx b/src/screen/Calculate.tsx
@@ -1,20 +1,20 @@
 import React, {useEffect} from "react";
 import CalculatorHeader from "../components/headers/CalculatorHeader";
 import {CalculatorList} from "../components/lists/CalculatorList";
-import {hideNavigationBar} from "react-native-navigation-bar-color";
 import {useNavigation} from "@react-navigation/native";
+import * as NavigationBar from 'expo-navigation-bar';
 
 
 export default function Calculate() {
 
   const navigation = useNavigation();
 
-  useEffect(()=>{
+  useEffect(() => {
     const unsubscribe = navigation.addListener('focus', () => {
-      //hideNavigationBar()
-  });
-  return unsubscribe;
-}, [navigation])
+      NavigationBar.setVisibilityAsync('hidden');
+    });
+    return unsubscribe;
+  }, [navigation])
 
   return (
     <CalculatorHeader>

diff --git a/src/screen/Cycle.tsx b/src/screen/Cycle.tsx
@@ -1,15 +1,16 @@
 import React, {useEffect} from "react";
 import CycleHeader from "../components/headers/CycleHeader";
 import {CycleList} from "../components/lists/CycleList";
-import {showNavigationBar} from "react-native-navigation-bar-color";
 import {useNavigation} from "@react-navigation/native";
+import * as NavigationBar from "expo-navigation-bar";
+
 
 export default function Cycle(props) {
   const navigation = useNavigation();
 
   useEffect(()=>{
     const unsubscribe = navigation.addListener('focus', () => {
-      showNavigationBar()
+      NavigationBar.setVisibilityAsync('visible');
     });
     return unsubscribe;
   }, [navigation])