@boneframework/native-components 1.0.45 → 1.0.47

package/api/{client.js → client.ts}

@@ -1,10 +1,10 @@
-import {create} from 'apisauce';
+import {ApisauceInstance, create} from 'apisauce';
 
 import cache from '../utilities/cache';
 import settings from '../../../../config/settings';
 import cacheSettings from '../../../../config/cache';
 
-const apiClient = create({
+const apiClient: ApisauceInstance  = create({
     baseURL: settings.apiUrl
 });
 

package/components/ActivityIndicator.tsx

@@ -1,10 +1,16 @@
-import React, {useEffect, useRef} from 'react';
-import {View, StyleSheet} from "react-native";
+import React from 'react';
+import { StyleSheet, View } from "react-native";
 
+import useStyle from "@boneframework/native-components/hooks/useStyle";
 import Animation from "./Animation";
-import useStyle from "../hooks/useStyle";
 
-function ActivityIndicator({ visible = false , type="default", animationSource}) {
+interface ActivityIndicatorProps {
+    visible?: boolean;
+    type?: 'default' | 'overlay';
+    animationSource: string | undefined;
+}
+
+function ActivityIndicator({ visible = false , type ="default", animationSource}: ActivityIndicatorProps) {
     const defaultStyles = useStyle();
 
     if (!animationSource) {

package/components/ColorProvider.tsx

@@ -0,0 +1,10 @@
+import ColorContext from "@boneframework/native-components/contexts/colors";
+import { defaultTheme, ThemeColors } from "@boneframework/native-components/contexts/theme";
+
+const ColorProvider = ({value, children}: {value?: ThemeColors; children: React.ReactNode}) => {
+  return <ColorContext value={value ?? defaultTheme}>
+            {children}
+        </ColorContext>; 
+};
+
+export default ColorProvider; 

package/components/Screen.tsx

@@ -1,8 +1,9 @@
-import React from 'react';
-import {SafeAreaView, StyleSheet, View} from "react-native";
 import Constants from "expo-constants";
+import React from 'react';
+import { StyleSheet, View } from "react-native";
+import { SafeAreaView } from 'react-native-safe-area-context';
 
-function Screen({children, style}) {
+function Screen({children, style}: {children: any, style: any}) {
     return (
         <SafeAreaView style={[style, styles.screen]}>
             <View style={[style, styles.view]}>

package/contexts/colors.ts

@@ -0,0 +1,11 @@
+import { ThemeColors, defaultTheme } from "@boneframework/native-components/contexts/theme";
+import { createContext } from "react";
+
+const ColorContext = createContext<ThemeColors>(defaultTheme);
+
+type ColorsProviderProps = {
+    children: React.ReactNode;
+    value: ThemeColors;
+};
+
+export default ColorContext; 

package/contexts/theme.ts

@@ -0,0 +1,35 @@
+import { createContext } from 'react';
+
+type ThemeColors = {
+    primary: string;
+    secondary: string;
+    black: string;
+    white: string;
+    light: string;
+    whitish: string;
+    medium: string;
+    darkish: string;
+    dark: string;
+    danger: string;
+    bgGradient: string[];
+};
+
+const defaultTheme: ThemeColors = {
+    primary: '#fc5c65',
+    secondary: '#4ecdc4',
+    black: '#000',
+    white: '#fff',
+    light: '#f0f4f4',
+    whitish: '#ddd',
+    medium: '#999',
+    darkish: '#333',
+    dark: '#222',
+    danger: '#ff5200',
+    bgGradient: ['#001C50', '#003698']
+};
+
+const ThemeContext = createContext<ThemeColors>(defaultTheme);
+
+export default ThemeContext;
+export { defaultTheme, ThemeColors };
+

package/hooks/{useApi.js → useApi.ts}

@@ -1,19 +1,19 @@
-import {useState} from "react";
+import { useState } from "react";
 
-export default useApi = (apiFunc) => {
+const useApi = (apiFunc: any) => {
     const [error, setError] = useState(false);
     const [headers, setHeaders] = useState([]);
     const [data, setData] = useState([]);
     const [loading, setLoading] = useState(false);
 
-    const request = async (...args) => {
+    const request = async (...args: any[]) => {
         setLoading(true);
         const response = await apiFunc(...args)
-            .then(result => {
+            .then((result: any) => {
                 setError(!result.ok);
 
                 return result;
-            }, reason => {
+            }, (reason: any) => {
                 setError(true);
 
                 return {headers: [], data: reason};
@@ -29,3 +29,5 @@ export default useApi = (apiFunc) => {
 
     return {data, error, headers, loading, request}
 }
+
+export default useApi;

package/hooks/useAuth.ts

@@ -1,11 +1,8 @@
-import {useContext, useState} from "react";
+import { useContext } from "react";
 
 import AuthContext from "../contexts/auth";
-import authStorage from "../utilities/authStorage";
-import useApi from "./useApi";
-import usersApi from "../api/users";
 
-export default useAuth = () => {
+const useAuth = () => {
     const value = useContext(AuthContext);
 
     if (process.env.NODE_ENV !== 'production') {
@@ -16,3 +13,5 @@ export default useAuth = () => {
 
     return value;
 }
+
+export default useAuth;

package/hooks/useCache.ts

@@ -0,0 +1,7 @@
+import cache from '../utilities/cache'
+
+const useCache = () => {
+    return cache;
+};
+
+export default useCache;

package/hooks/{useCamera.js → useCamera.ts}

@@ -1,8 +1,9 @@
 import {useEffect} from "react";
 import { Camera } from 'expo-camera';
 import * as ImagePicker from "expo-image-picker";
+import {Alert} from "react-native";
 
-export default useCamera = () => {
+const useCamera = () => {
 
     const requestPermission = async () => {
         const { granted } = await Camera.requestCameraPermissionsAsync();
@@ -27,3 +28,5 @@ export default useCamera = () => {
 
     return {takePhoto};
 };
+
+export default useCamera;

package/hooks/useColors.ts

@@ -0,0 +1,9 @@
+import { useContext } from "react";
+
+import ColorContext from "../contexts/colors";
+
+const useColors = () => {
+    return useContext(ColorContext);
+}
+
+export default useColors;

package/hooks/{useLocation.js → useLocation.ts}

@@ -1,8 +1,8 @@
 import {useEffect, useState} from "react";
 import * as Location from "expo-location";
 
-export default useLocation = () => {
-    const [location, setLocation] = useState();
+const useLocation = () => {
+    const [location, setLocation] = useState({});
 
     const getLocation = async () => {
         try {
@@ -27,3 +27,5 @@ export default useLocation = () => {
 
     return location;
 };
+
+export default useLocation;

package/hooks/{useNavigationTheme.js → useNavigationTheme.ts}

@@ -1,9 +1,8 @@
-import {DarkTheme, DefaultTheme} from "@react-navigation/native";
+import { DarkTheme, DefaultTheme } from "@react-navigation/native";
 
-import useStyle from "./useStyle";
-import colors from "../../../../config/colors";
+import useStyle from "@boneframework/native-components/hooks/useStyle";
 
-export default useNavigationTheme = () => {
+const useNavigationTheme = () => {
     const style = useStyle();
     const theme = style.dark ? DarkTheme : DefaultTheme
     return {
@@ -17,3 +16,5 @@ export default useNavigationTheme = () => {
         dark: style.dark
     }
 };
+
+export default useNavigationTheme

package/hooks/useNotifications.ts

@@ -7,7 +7,7 @@ import Constants from "expo-constants";
 import expoPushTokensApi from "../api/notifications";
 import {useStorageState} from "./useStorageState";
 
-export default useNotifications = (notificationReceivedListener = notification => {}) => {
+const useNotifications = (notificationReceivedListener = notification => {}) => {
     const [[isPushTokenLoading, pushToken], setPushToken] = useStorageState('pushToken');
 
     useEffect(() => {
@@ -65,3 +65,5 @@ export default useNotifications = (notificationReceivedListener = notification =
         }
     };
 }
+
+export default useNotifications;

package/hooks/{usePhotos.js → usePhotos.ts}

@@ -1,10 +1,11 @@
 import {useEffect} from "react";
 import * as ImagePicker from "expo-image-picker";
+import {Alert} from "react-native";
 
-export default usePhotos = () => {
+const usePhotos = () => {
 
     const requestPermission = async () => {
-        const { granted} = await ImagePicker.requestMediaLibraryPermissionsAsync();
+        const { granted } = await ImagePicker.requestMediaLibraryPermissionsAsync();
 
         if (!granted) {
             Alert.alert(
@@ -26,3 +27,5 @@ export default usePhotos = () => {
 
     return {selectImage};
 };
+
+export default usePhotos;

package/hooks/useStyle.ts

@@ -0,0 +1,54 @@
+import { useState } from "react";
+import { Platform, useColorScheme } from "react-native";
+
+import useColors from "./useColors";
+
+const useStyle = () => {
+    const colorScheme = useColorScheme();
+    const [mode, setMode] = useState();
+    const dark = colorScheme == 'dark';
+    const colors = useColors();
+    console.log(colors);
+    console.log('xxxxxxx');
+    
+    const style = {
+        dark: dark,
+        text: {
+            color: dark ? colors.light : colors.dark,
+            ...Platform.select({
+                ios: {
+                    fontSize: 20,
+                    fontFamily: "Helvetica",
+                },
+                android: {
+                    fontSize: 18,
+                    fontFamily: "Roboto",
+                },
+            })
+        },
+        box: {
+            backgroundColor: dark ? colors.darkish : colors.white
+        },
+        errorText: {
+            color: dark ? colors.secondary : colors.primary
+        },
+        flipswitch: {
+            onColor: dark ? colors.secondary : colors.secondary,
+            offColor: dark ? colors.darkish : colors.white
+        },
+        navButton: {
+            color: dark ? colors.light : colors.white
+        },
+        formInput: {
+            backgroundColor: dark ? colors.darkish : colors.white,
+            text: dark ? colors.light : colors.dark,
+            placeholderTextColor: dark ? colors.medium : colors.medium
+        },
+        backgroundColor: dark ? colors.dark : colors.light,
+        colors: colors
+    };
+
+    return style;
+};
+
+export default useStyle;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boneframework/native-components",
-  "version": "1.0.45",
+  "version": "1.0.47",
   "description": "Expo React Native Components for Bone Framework",
   "main": "src/Bone.ts",
   "scripts": {
@@ -31,25 +31,25 @@
   "dependencies": {
     "@react-native-async-storage/async-storage": "^2.0.0",
     "@react-native-community/datetimepicker": "^8.2.0",
-    "@react-native-community/netinfo": "^11.3.2",
-    "apisauce": "^3.0.1",
+    "@react-native-community/netinfo": "^11.4.1",
+    "apisauce": "^3.1.0",
     "dayjs": "^1.11.13",
-    "expo-auth-session": "^5.5.2",
-    "expo-camera": "^15.0.13",
-    "expo-constants": "^16.0",
-    "expo-device": "^6.0.2",
-    "expo-image": "^1.12.13",
-    "expo-image-picker": "^15.0.7",
-    "expo-linear-gradient": "~13.0.2",
-    "expo-location": "~17.0.1",
-    "expo-notifications": "^0.28.19",
-    "expo-router": "^3.5.23",
-    "expo-secure-store": "^13.0.2",
+    "expo-auth-session": "^6.0.0",
+    "expo-camera": "^16.0.5",
+    "expo-constants": "^17.0.3",
+    "expo-device": "^7.0.1",
+    "expo-image": "^2.0.0",
+    "expo-image-picker": "^16.0.2",
+    "expo-linear-gradient": "~14.0.1",
+    "expo-location": "~18.0.1",
+    "expo-notifications": "^0.29.8",
+    "expo-router": "^4.0.5",
+    "expo-secure-store": "^14.0.0",
     "formik": "^2.4.6",
     "jwt-decode": "^4.0.0",
-    "lottie-react-native": "^7.1.0",
+    "lottie-react-native": "^7.3.4",
     "react": "18.3.1",
-    "react-native-gesture-handler": "^2.20.2",
+    "react-native-gesture-handler": "^2.21.0",
     "react-native-maps": "^1.20.0",
     "react-native-progress": "^5.0.1",
     "toggle-switch-react-native": "^3.3.0",

package/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "compilerOptions": {},
+  "extends": "expo/tsconfig.base"
+}

package/utilities/{authStorage.js → authStorage.ts}

@@ -1,6 +1,5 @@
 import * as SecureStore from 'expo-secure-store';
 import AsyncStorage from "@react-native-async-storage/async-storage";
-import jwtDecode from 'jwt-decode';
 
 const userKey = 'user';
 const tokenKey = 'authToken';
@@ -17,19 +16,19 @@ const storeAuthToken = async token => {
     await storeSecure(tokenKey, token, 'error storing the auth token');
 };
 
-const getAuthToken = async () => {
+const getAuthToken = async (): Promise<any> => {
     return await fetchSecure(tokenKey);
 };
 
-const removeAuthToken = () => {
+const removeAuthToken: () => void = (): void => {
     removeSecure(tokenKey);
 }
 
-const removeUser = () => {
+const removeUser: () => void = (): void => {
     remove(userKey);
 }
 
-const removeSecure = async key => {
+const removeSecure : (key: string) => Promise<void> = async (key: string): Promise<void> => {
     try {
         await SecureStore.deleteItemAsync(key);
     } catch (error) {
@@ -37,7 +36,7 @@ const removeSecure = async key => {
     }
 }
 
-const storeSecure = async (key, value, errorMessage = 'error storing value') => {
+const storeSecure = async (key: string, value, errorMessage = 'error storing value') => {
     try {
         await SecureStore.setItemAsync(key, JSON.stringify(value));
     } catch (error) {
@@ -45,7 +44,7 @@ const storeSecure = async (key, value, errorMessage = 'error storing value') =>
     }
 }
 
-const fetchSecure = async key => {
+const fetchSecure = async (key: string): Promise<any> => {
     try {
         return JSON.parse(await SecureStore.getItemAsync(key));
     } catch (error) {
@@ -53,7 +52,7 @@ const fetchSecure = async key => {
     }
 }
 
-const store = async (key, value, errorMessage = 'error storing value') => {
+const store = async (key: string, value: any, errorMessage: string = 'error storing value'): Promise<void> => {
     try {
         await AsyncStorage.setItem(key, JSON.stringify(value));
     } catch (error) {
@@ -61,7 +60,7 @@ const store = async (key, value, errorMessage = 'error storing value') => {
     }
 }
 
-const fetch = async key => {
+const fetch: (key: string) => Promise<any> = async (key: string): Promise<any> => {
     try {
         return JSON.parse(await AsyncStorage.getItem(key));
     } catch (error) {
@@ -69,7 +68,7 @@ const fetch = async key => {
     }
 }
 
-const remove = async key => {
+const remove: (key: string) => Promise<void> = async (key: string): Promise<void> => {
     try {
         await AsyncStorage.removeItem(key);
     } catch (error) {

package/hooks/useCache.js

@@ -1,7 +0,0 @@
-import {useEffect} from "react";
-
-import cache from '../utility/cache'
-
-export default useCache = () => {
-    return cache;
-};

package/hooks/useStyle.js

@@ -1,44 +0,0 @@
-import {useEffect, useState} from "react";
-import {Platform, useColorScheme} from "react-native";
-
-import colors from "../../../../config/colors";
-import logger from "../utilities/logger";
-
-export default useStyle = () => {
-    const colorScheme = useColorScheme();
-    const [mode, setMode] = useState();
-    const dark = colorScheme == 'dark'
-    const style = {
-        dark: dark,
-        text: {
-            color: dark ? colors.light : colors.dark,
-            ...Platform.select({
-                ios: {
-                    fontSize: 20,
-                    fontFamily: "Helvetica",
-                },
-                android: {
-                    fontSize: 18,
-                    fontFamily: "Roboto",
-                },
-            })
-        },
-        box: {},
-        errorText: {},
-        flipswitch: {},
-        navButton: {},
-        formInput: {},
-        backgroundColor: dark ? colors.dark : colors.light,
-        colors: colors
-    };
-
-    style.box.backgroundColor = dark ? style.colors.darkish : style.colors.white;
-    style.flipswitch.onColor = dark ? style.colors.secondary : style.colors.secondary;
-    style.flipswitch.offColor = dark ? style.colors.darkish : style.colors.medium;
-    style.formInput.backgroundColor = dark ? style.colors.darkish : style.colors.white;
-    style.formInput.text = dark ? style.colors.medium : style.colors.dark;
-    style.errorText.color = dark ? style.colors.secondary : style.colors.primary;
-    style.navButton.color = dark ? style.colors.light : style.colors.white;
-
-    return style;
-};