native-base removed and replaced to @gluestack-ui/themed-native-base.

App.tsx

@@ -1,16 +1,17 @@
 import React, {useEffect} from 'react';
-import {NativeBaseProvider} from 'native-base';
+import {NativeBaseProvider} from '@gluestack-ui/themed-native-base';
 import 'react-native-gesture-handler';
 import {NavigationContainer} from "@react-navigation/native";
 import {StatusBar} from 'react-native';
 import {MainNavigator} from "./src/router/MainNavigator";
 import 'react-native-reanimated'
+import * as NavigationBar from "expo-navigation-bar";
 
 export default function App() {
 	useEffect(() => {
 		StatusBar.setHidden(true);
-		//changeNavigationBarColor("black", false, false);
-		//hideNavigationBar()
+		NavigationBar.setBackgroundColorAsync("black")
+		NavigationBar.setVisibilityAsync("hidden");
 	})
 	return (
 		<NativeBaseProvider>

app.json

@@ -3,7 +3,7 @@
   "expo": {
     "name": "Sleepwell",
     "slug": "Sleepwell",
-    "version": "0.2.1",
+    "version": "0.2.2",
     "orientation": "portrait",
     "icon": "./assets/icon.png",
     "userInterfaceStyle": "light",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sleepwell",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "main": "node_modules/expo/AppEntry.js",
   "scripts": {
     "start": "expo start",
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@expo/vector-icons": "^13.0.0",
+    "@gluestack-ui/themed-native-base": "^0.1.107-alpha2",
     "@gorhom/bottom-sheet": "^4.4.5",
     "@react-native-async-storage/async-storage": "1.18.2",
     "@react-navigation/bottom-tabs": "^6.4.0",
@@ -31,7 +32,6 @@
     "mobx-react": "^7.5.3",
     "moment": "^2.29.4",
     "moti": "^0.21.0",
-    "native-base": "^3.4.28",
     "react": "18.2.0",
     "react-native": "0.72.6",
     "react-native-animated-nav-tab-bar": "^3.1.8",
@@ -42,7 +42,7 @@
     "react-native-reanimated": "3.3.0",
     "react-native-safe-area-context": "4.6.3",
     "react-native-screens": "~3.22.0",
-    "react-native-svg": "13.9.0",
+    "react-native-svg": "13.4.0",
     "react-native-vector-icons": "^9.2.0",
     "styled-components": "^6.1.2"
   },

src/components/cards/FallAsleepCard.tsx

@@ -1,4 +1,4 @@
-import {HStack, Icon, IconButton, Text, View, VStack} from "native-base";
+import {HStack, Icon, IconButton, Text, View, VStack} from "@gluestack-ui/themed-native-base";
 import React from "react";
 import Ionicons from "react-native-vector-icons/Ionicons";
 import SettingsStore, {SettingsType} from "../../store/SettingsStore";
@@ -28,18 +28,16 @@ export const FallAsleepCard = () => {
           <HStack alignItems="center" justifyContent="flex-end" space={5}>
             <IconButton colorScheme="red"
                         borderRadius="15"
-                        size="md"
                         variant="outline"
-                        icon={<Icon as={Ionicons} name="remove-outline"/>}
+                        icon={<Icon as={Ionicons} name="remove-outline" size={8}/>}
                         onPress={onMinusPress}
             />
             <Text color="white"
                   fontSize="xl">{SettingsStore.getSettings(SettingsType.FALL_ASLEEP)![0].value || 0}</Text>
             <IconButton colorScheme="emerald"
                         borderRadius="15"
-                        size="md"
                         variant="outline"
-                        icon={<Icon as={Ionicons} name="add-outline"/>}
+                        icon={<Icon as={Ionicons} name="add-outline" size={8}/>}
                         onPress={onAddPress}
             />
           </HStack>

src/components/cards/GenericCard.tsx

@@ -1,5 +1,5 @@
 import {StyleProp, ViewStyle} from "react-native";
-import {Box, Pressable} from "native-base";
+import {Box, Pressable} from "@gluestack-ui/themed-native-base";
 import React, {useMemo} from "react";
 
 export const GenericCard = (props: Props) => {
@@ -12,7 +12,7 @@ export const GenericCard = (props: Props) => {
       <Pressable w="100%" onPress={onPress || undefined} android_ripple={onPress ? {
         color: "#9333ea",
         borderless: false,
-        radius: 0
+        radius: 1
       } : {}}>
         {children}
       </Pressable>

src/components/cards/GenericHeaderCard.tsx

@@ -1,7 +1,7 @@
 import {StyleProp, ViewStyle} from "react-native";
-import {Box} from "native-base";
+import {Box} from "@gluestack-ui/themed-native-base";
 import React from "react";
-import {InterfaceBoxProps} from "native-base/lib/typescript/components/primitives/Box";
+import {InterfaceBoxProps} from "@gluestack-ui/themed-native-base/lib/typescript/components/primitives/Box";
 
 
 export const GenericHeaderCard = (props: Props) => {

src/components/cards/SupportMeCard.tsx

@@ -1,4 +1,4 @@
-import {Button, HStack, Icon, Text, View, VStack} from "native-base";
+import {Button, HStack, Icon, Text, View, VStack} from "@gluestack-ui/themed-native-base";
 import React, {useEffect, useState} from "react";
 import SettingsStore, {SettingsType} from "../../store/SettingsStore";
 import {GenericCard} from "./GenericCard";
@@ -54,7 +54,7 @@ export const SupportMeCard = () => {
         height:40
         }}
         >
-        <Icon color="purple.700" as={MaterialCommunityIcons} name="heart"  flex={1} size={"2xl"}/>
+        <Icon color="purple.700" as={MaterialCommunityIcons} name="heart" flex={1} size={6}/>
       </MotiView>
       </VStack>
     }
@@ -65,7 +65,7 @@ export const SupportMeCard = () => {
                      variant="solid"
                      onPress={onPress}>
         <HStack alignItems="center" space={1}>
-          <Icon color="white" as={MaterialCommunityIcons} name="play-circle-outline" size="2xl"/>
+          <Icon color="white" as={MaterialCommunityIcons} name="play-circle-outline" size={6}/>
           <Text color="white" bold>Watch</Text>
         </HStack>
       </Button>

src/components/charts/SleepIndicatorChart.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import {Sleep} from "../../store/SleepStore";
 import {Observer} from "mobx-react";
 import {GenericCard} from "../cards/GenericCard";
-import {Divider, HStack, Text, VStack} from "native-base";
+import {Divider, HStack, Text, VStack} from "@gluestack-ui/themed-native-base";
 
 export const SleepIndicatorChart = ({sleeps}: { sleeps: Array<Sleep> | undefined }) => {
 

src/components/charts/SleepLineChart.tsx

@@ -4,7 +4,7 @@ import {Dimensions} from "react-native";
 import {Sleep} from "../../store/SleepStore";
 import {Observer} from "mobx-react";
 import {LineChart} from "react-native-chart-kit";
-import {Text} from "native-base";
+import {Text} from "@gluestack-ui/themed-native-base";
 
 export const SleepLineChart = ({sleeps}: {sleeps: Array<Sleep> | undefined }) => {
   return (

src/components/charts/SleepPieChart.tsx

@@ -4,7 +4,7 @@ import {Dimensions} from "react-native";
 import {Sleep} from "../../store/SleepStore";
 import {Observer} from "mobx-react";
 import {LineChart, PieChart} from "react-native-chart-kit";
-import {Text} from "native-base";
+import {Text} from "@gluestack-ui/themed-native-base";
 
 const sleepColors = ["#f3e8ff", "#e9d5ff", "#d8b4fe", "#c084fc", "#a855f7", "#9333ea", "#7e22ce", "#6b21a8", "#581c87", "#4c1d95", "#4527a0", "#382b7f", "#2d3a59", "#27303f", "#1e213a"]
 

src/components/clock/LiveClock.tsx

@@ -1,6 +1,6 @@
 import React, {useEffect, useState} from 'react';
 import moment from "moment";
-import {Text} from 'native-base';
+import {Text} from '@gluestack-ui/themed-native-base';
 
 export default function LiveClock(props) {
   const {is24Hour} = props;

src/components/headers/CalculatorHeader.tsx

@@ -1,6 +1,6 @@
 import React, {useEffect, useRef, useState} from "react";
 import {Animated, NativeScrollEvent, NativeSyntheticEvent, StyleSheet} from "react-native";
-import {Heading, HStack, Icon, IconButton, Text, View, VStack} from "native-base";
+import {Heading, HStack, Icon, IconButton, Text, View, VStack} from "@gluestack-ui/themed-native-base";
 import {useLinkTo} from "@react-navigation/native";
 import Ionicons from "react-native-vector-icons/Ionicons";
 import moment from "moment";
@@ -167,9 +167,8 @@ export default function CalculatorHeader(props: { children: React.ReactNode; })
           <IconButton
             colorScheme="purple"
             borderRadius="full"
-            size="lg"
             onPress={openInfoScreen}
-            icon={<Icon as={Ionicons} name="information-circle-outline" size="2xl"/>}
+            icon={<Icon as={Ionicons} name="information-circle-outline" size={8} />}
           />
         </HStack>
       </Animated.View>

src/components/headers/CycleHeader.tsx

@@ -1,6 +1,6 @@
 import React, {useRef} from "react";
 import {Animated, NativeScrollEvent, NativeSyntheticEvent, StyleSheet} from "react-native";
-import {Heading, HStack, Icon, IconButton, View} from "native-base";
+import {Heading, HStack, Icon, IconButton, View} from "@gluestack-ui/themed-native-base";
 import {useNavigation} from "@react-navigation/native";
 import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
 
@@ -145,9 +145,8 @@ export default function CycleHeader(props: { children: React.ReactNode; }) {
           <IconButton colorScheme="white"
                       borderRadius="full"
                       color="white"
-                      size="lg"
                       onPress={() => navigation.goBack()}
-                      icon={<Icon as={MaterialCommunityIcons} name="arrow-left" size="2xl" color="white"/>}
+                      icon={<Icon as={MaterialCommunityIcons} name="arrow-left" size={8} color="white"/>}
           />
           <Heading color="white" size="xl" letterSpacing={0.1} fontWeight="thin">
             Sleep until

src/components/headers/InfoHeader.tsx

@@ -1,6 +1,6 @@
 import React, {useRef} from "react";
 import {Animated, NativeScrollEvent, NativeSyntheticEvent, StyleSheet} from "react-native";
-import {Heading, HStack, Icon, IconButton, View} from "native-base";
+import {Heading, HStack, Icon, IconButton, View} from "@gluestack-ui/themed-native-base";
 import {useNavigation} from "@react-navigation/native";
 import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
 import Ionicons from "react-native-vector-icons/Ionicons";
@@ -146,9 +146,8 @@ export default function InfoHeader(props: { children: React.ReactNode; }) {
           <IconButton colorScheme="white"
                       borderRadius="full"
                       color="white"
-                      size="lg"
                       onPress={() => navigation.goBack()}
-                      icon={<Icon as={MaterialCommunityIcons} name="arrow-left" size="2xl" color="white"/>}
+                      icon={<Icon as={MaterialCommunityIcons} name="arrow-left" size={8} color="white"/>}
           />
           <Heading color="white" size="lg" letterSpacing={0.1} fontWeight="thin">
             Informations

src/components/headers/ReportsHeader.tsx

@@ -1,6 +1,6 @@
 import React, {useRef} from "react";
-import {Animated, NativeScrollEvent, NativeSyntheticEvent, StyleSheet} from "react-native";
-import {Heading, HStack, Icon, IconButton, Text, View, VStack} from "native-base";
+import {Animated, StyleSheet} from "react-native";
+import {Heading, HStack, Icon, IconButton, Text, View, VStack} from "@gluestack-ui/themed-native-base";
 import Ionicons from "react-native-vector-icons/Ionicons";
 import {SleepFilter} from "../../store/SleepStore";
 import {getMonthBefore} from "../../utils/DateUtils";
@@ -145,7 +145,7 @@ export default function ReportsHeader(props: { children: React.ReactNode, select
         ]}>
         <HStack justifyContent="space-between" alignItems="center" width="100%" height="100%" bgColor="black">
           <IconButton variant="ghost" colorScheme={"white"}
-                      icon={<Icon as={Ionicons} name="chevron-back-outline" color={"white"}/>}
+                      icon={<Icon as={Ionicons} name="chevron-back-outline" color={"white"} size={8}/>}
                       onPress={onLeftDateButtonPress}/>
           <VStack alignItems={"center"}>
             <Heading color="white" size="xl" letterSpacing={0.1} fontWeight="thin">
@@ -156,7 +156,7 @@ export default function ReportsHeader(props: { children: React.ReactNode, select
             </Text>
           </VStack>
           <IconButton variant="ghost" colorScheme={"white"}
-                      icon={<Icon as={Ionicons} name="chevron-forward-outline" color={"white"}/>}
+                      icon={<Icon as={Ionicons} name="chevron-forward-outline" color={"white"} size={8}/>}
                       isDisabled={selectedDate.end!.getTime() >= new Date().getTime()}
                       onPress={onRightDateButtonPress}/>
 

src/components/headers/SettingsHeader.tsx

@@ -1,6 +1,6 @@
 import React, {useRef} from "react";
 import {Animated, NativeScrollEvent, NativeSyntheticEvent, StyleSheet} from "react-native";
-import {Heading, HStack, IconButton, View} from "native-base";
+import {Heading, HStack, IconButton, View} from "@gluestack-ui/themed-native-base";
 
 export default function SettingsHeader(props: { children: React.ReactNode; }) {
 

src/components/lists/CalculatorList.tsx

@@ -1,6 +1,6 @@
 import React, {useEffect, useState} from "react";
 import {FlashList} from "@shopify/flash-list";
-import {Box, Center, Heading, HStack, Icon, Text, View, VStack} from "native-base";
+import {Box, Center, Heading, HStack, Icon, Text, View, VStack} from "@gluestack-ui/themed-native-base";
 import {GenericCard} from "../cards/GenericCard";
 import {GenericHeaderCard} from "../cards/GenericHeaderCard";
 import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
@@ -42,7 +42,7 @@ export const CalculatorList = () => {
         {
             name: "Sleep",
             type: ListType.HEADER,
-            icon: <Icon color="white" as={MaterialCommunityIcons} name="power-sleep" size="2xl"/>
+            icon: <Icon color="white" as={MaterialCommunityIcons} name="power-sleep" size={8}/>
         },
         {
             name: "Go to bed now",
@@ -65,7 +65,7 @@ export const CalculatorList = () => {
         {
             name: "Power nap",
             type: ListType.HEADER,
-            icon: <Icon color="white" as={MaterialCommunityIcons} name="desk" size="2xl"/>,
+            icon: <Icon color="white" as={MaterialCommunityIcons} name="desk" size={8}/>,
         },
         {
             name: "Take a power nap",

src/components/lists/CycleList.tsx

@@ -1,6 +1,6 @@
 import React, {useEffect, useState} from "react";
 import {FlashList} from "@shopify/flash-list";
-import {HStack, Icon, Text, View, VStack} from "native-base";
+import {HStack, Icon, Text, View, VStack} from "@gluestack-ui/themed-native-base";
 import {GenericCard} from "../cards/GenericCard";
 import {GenericHeaderCard} from "../cards/GenericHeaderCard";
 import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
@@ -59,7 +59,7 @@ export const CycleList = (props: { params: any; }) => {
       name: "Sleep",
       desc: "Wake up at",
       type: ListType.HEADER,
-      icon: <Icon color="white" as={MaterialCommunityIcons} name="power-sleep" size="2xl"/>
+      icon: <Icon color="white" as={MaterialCommunityIcons} name="power-sleep" size={8}/>
     },
   ]);
 

src/components/lists/InfoList.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import {FlashList} from "@shopify/flash-list";
-import {Button, HStack, Icon, Text, View, VStack} from "native-base";
+import {Button, HStack, Icon, Text, View, VStack} from "@gluestack-ui/themed-native-base";
 import {GenericCard} from "../cards/GenericCard";
 import {GenericHeaderCard} from "../cards/GenericHeaderCard";
 import {Linking} from "react-native";
@@ -41,30 +41,30 @@ export const InfoList = () => {
       link: "https://github.com/Alperengozum/Sleepwell",
       type: ListType.ITEM,
       buttonText: "Open Github Project",
-      icon: <Icon color="white" as={MaterialCommunityIcons} name="github" size="md"/>,
+      icon: <Icon color="white" as={MaterialCommunityIcons} name="github" size={6}/>,
     },
     {
       name: "Can I add new feature? 👋",
       desc: "Of course! Pull Request is Github are welcome.",
       link: "https://github.com/Alperengozum/Sleepwell/pulls",
       type: ListType.ITEM,
       buttonText: "Open Github Pulls",
-      icon: <Icon color="white" as={MaterialCommunityIcons} name="github" size="md"/>,
+      icon: <Icon color="white" as={MaterialCommunityIcons} name="github" size={6}/>,
     },
     {
       name: "I have a Issue",
       desc: "I'm sorry to hear that 😔. Please open Github Issue or mail me to fix it ASAP",
       link: "https://github.com/Alperengozum/Sleepwell/issues",
       type: ListType.ITEM,
       buttonText: "Open Github Issues",
-      icon: <Icon color="white" as={MaterialCommunityIcons} name="github" size="md"/>,
+      icon: <Icon color="white" as={MaterialCommunityIcons} name="github" size={6}/>,
     },
     {
       name: "I want to contact you",
       desc: "Wanna mail me?",
       link: "mailto:alperengozum0@gmail.com",
       type: ListType.ITEM,
-      icon: <Icon color="white" as={Ionicons} name="send-outline" size="md"/>,
+      icon: <Icon color="white" as={Ionicons} name="send-outline" size={6}/>,
       buttonText: "Send Mail"
     },
     {
@@ -73,7 +73,7 @@ export const InfoList = () => {
       link: "https://play.google.com/store/apps/dev?id=8842825248111634874",
       type: ListType.ITEM,
       buttonText: "Open Google Play Store",
-      icon: <Icon color="white" as={MaterialCommunityIcons} name="google-play" size="md"/>,
+      icon: <Icon color="white" as={MaterialCommunityIcons} name="google-play" size={6}/>,
     }
   ]
 
@@ -95,18 +95,24 @@ export const InfoList = () => {
           if (item!.type === ListType.HEADER) {
             // Rendering header
             return <GenericHeaderCard>
-              <HStack mr={10} justifyContent="space-between" alignItems="center" textAlign="center">
+              <HStack mr={10} justifyContent="space-between" alignItems="center" sx={{
+                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}}>
-              <HStack my={5} flex={1} justifyContent="space-between" alignItems="center" textAlign="center">
+              <HStack my={5} flex={1} justifyContent="space-between" alignItems="center" sx={{
+                textAlign: "center"
+              }}>
                 <VStack mx={5} space={2} flex={1} alignItems="center">
                   <Text color="white" fontSize="md">{item.name}</Text>
                   <Text color="gray.400" fontSize="sm">{item.desc}</Text>
-                  {item.link ? <Button endIcon={item.icon} variant="solid" colorScheme="purple" borderRadius={15}
+                  {item.link ? <Button endIcon={item.icon} variant="solid" _active={{
+                    bg: "$purple.800"
+                  }} bg={"$purple.600"} borderRadius={16}
                                        onPress={() => Linking.openURL(item.link)}>
                     {item.buttonText || "Link"}
                   </Button> : <React.Fragment/>}