@boneframework/native-components 1.0.39 → 1.0.40

package/components/Background.tsx

@@ -2,18 +2,18 @@ import React from 'react';
 import { ImageBackground } from "react-native";
 import { LinearGradient } from 'expo-linear-gradient';
 
-function Background({children, imagePath =  null, gradientColors  = null, ...rest}) {
-    if (imagePath === null && gradientColors === null) {
+function Background({children, imageSource =  null, gradientColors  = null, blurRadius= 10, ...rest}) {
+    if (imageSource === null && gradientColors === null) {
         return;
     }
 
-    if (imagePath !== null) {
-        return <ImageBackground source={require(imagePath)} {...rest}>
+    if (imageSource !== null) {
+        return <ImageBackground source={imageSource} blurRadius={blurRadius} {...rest}>
             { children }
         </ImageBackground>
     }
 
-    return <LinearGradient colors={gradientColors}>
+    return <LinearGradient colors={gradientColors} {...rest}>
         { children }
     </LinearGradient>
 }

package/components/ListItemSwipable.tsx

@@ -35,7 +35,7 @@ function ListItemSwipable({title, subtitle, image, IconComponent, onPress, rende
         },
         title: {
             color: style.text.color,
-            fontWeight: "500"
+            fontSize: 14
         },
         subtitle: {
             color: colors.medium

package/hooks/useApi.js

@@ -8,9 +8,20 @@ export default useApi = (apiFunc) => {
 
     const request = async (...args) => {
         setLoading(true);
-        const response = await apiFunc(...args);
+        const response = await apiFunc(...args)
+            .then(result => {
+                setError(!result.ok);
+
+                return result;
+            }, reason => {
+                setError(true);
+
+                return {headers: [], data: reason};
+            })
+            .catch(() => {
+                setError(true);
+            });
         setLoading(false);
-        setError(!response.ok);
         setHeaders(response.headers);
         setData(response.data);
         return response;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@boneframework/native-components",
-  "version": "1.0.39",
-  "description": "Expo Components for Bone Framework",
+  "version": "1.0.40",
+  "description": "Expo React Native Components for Bone Framework",
   "main": "src/Bone.ts",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
@@ -29,7 +29,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@react-native-async-storage/async-storage": "^1.24.0",
+    "@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",
@@ -39,18 +39,19 @@
     "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.11",
+    "expo-notifications": "^0.28.19",
     "expo-router": "^3.5.23",
     "expo-secure-store": "^13.0.2",
     "formik": "^2.4.6",
     "jwt-decode": "^4.0.0",
-    "lottie-react-native": "^6.7.2",
-    "react": "18.2.0",
-    "react-native-maps": "^1.17.3",
+    "lottie-react-native": "^7.1.0",
+    "react": "18.3.1",
+    "react-native-gesture-handler": "^2.20.2",
+    "react-native-maps": "^1.20.0",
     "react-native-progress": "^5.0.1",
     "toggle-switch-react-native": "^3.3.0",
-    "yup": "^1.4.0",
-    "expo-linear-gradient": "~13.0.2"
+    "yup": "^1.4.0"
   }
 }

package/screens/ActivateUserScreen.tsx

@@ -3,14 +3,17 @@ import {router, useGlobalSearchParams} from 'expo-router';
 import React, {useEffect, useState} from "react";
 
 import ActivityIndicator from "../components/ActivityIndicator";
+import Background from "../components/Background";
 import {ErrorMessage, Form, FormField, SubmitButton} from "../components/forms";
 import ResendActivationScreen from "../screens/ResendActivationlScreen";
 import SetPasswordScreen from "../screens/SetPasswordScreen";
 import useApi from "../hooks/useApi";
 import useAuth from "../hooks/useAuth";
+
 import userApi from "../api/users";
+import colors from '../../../../config/colors';
 
-function ActivateUserScreen({settings, loginRedirect, resendActivationEmailRedirect}) {
+function ActivateUserScreen({settings, loginRedirect, resendActivationEmailRedirect, backgroundSource = null}) {
     const STATUS_BEGIN = 'start_validating';
     const STATUS_VALIDATE = 'validate_email_token';
     const STATUS_RESEND = 'resend_email_token';
@@ -106,10 +109,10 @@ function ActivateUserScreen({settings, loginRedirect, resendActivationEmailRedir
     return (
         <>
             <ActivityIndicator visible={activationApi.loading || resendActivationApi.loading || validateEmailTokenApi.loading} type={'overlay'}/>
-            <ImageBackground blurRadius={10} style={styles.container} source={require('../../../../assets/background.png')} >
+            <Background blurRadius={10} style={styles.container} imageSource={backgroundSource} gradientColors={colors.bgGradient} >
                 { (status === STATUS_SET_PASSWORD || status === STATUS_VALIDATE)  && <SetPasswordScreen submitCallback={handleSubmit} error={error}/> }
                 { status === STATUS_RESEND && <ResendActivationScreen email={email} tokenError={tokenError} submitCallback={resendActivationEmail}/> }
-            </ImageBackground>
+            </Background>
         </>
     );
 }

package/screens/CheckEmailScreen.tsx

@@ -1,15 +1,16 @@
-import {ImageBackground, StyleSheet, View} from "react-native";
+import {StyleSheet, View} from "react-native";
 import React from "react";
 
-import Text from '../components/Text';
 import Animation from "../components/Animation";
+import Background from "../components/Background";
+import Text from '../components/Text';
 
 import colors from "../../../../config/colors";
 
-function CheckEmailScreen(props) {
+function CheckEmailScreen({backgroundSource = null}) {
 
     return (
-        <ImageBackground blurRadius={10} style={styles.container} source={require('../../../../assets/background.png')} >
+        <Background blurRadius={10} style={styles.container} imageSource={backgroundSource} gradientColors={colors.bgGradient} >
             <View style={styles.animationContainer}>
                 <Animation
                     autoPlay={true}
@@ -21,7 +22,7 @@ function CheckEmailScreen(props) {
                 <Text style={styles.activate}>Activate your account</Text>
                 <Text style={styles.info}>Check your email and click on the link to open the app and activate your account.</Text>
             </View>
-        </ImageBackground>
+        </Background>
     );
 }
 

package/screens/RegisterScreen.tsx

@@ -4,16 +4,19 @@ import {Image, ImageBackground, Keyboard, StyleSheet, TouchableOpacity, View} fr
 import * as Yup from 'yup'
 
 import ActivityIndicator from "../components/ActivityIndicator";
+import Background from "../components/Background";
 import useApi from "../hooks/useApi";
 import usersApi from '../api/users';
 import {ErrorMessage, FormField, Form, SubmitButton} from '../components/forms'
 import Icon from "../components/Icon";
 
+import colors from "../../../../config/colors";
+
 const validationSchema = Yup.object().shape({
     email: Yup.string().required().email().label('Email'),
 });
 
-function RegisterScreen({postRegisterUrl}) {
+function RegisterScreen({postRegisterUrl, backgroundSource = null}) {
     const registerApi = useApi(usersApi.register);
     const [error, setError] = useState();
     const onClose = () => router.back();
@@ -39,7 +42,7 @@ function RegisterScreen({postRegisterUrl}) {
     return (
         <>
         <ActivityIndicator visible={registerApi.loading} type={'overlay'}/>
-        <ImageBackground blurRadius={10} style={styles.background} source={require('../../../../assets/background.png')} >
+        <Background imageSource={backgroundSource} blurRadius={10} style={styles.background} gradientColors={colors.bgGradient} >
             <View style={styles.container}>
                 <TouchableOpacity style={styles.cancelButton} onPress={onClose}>
                     <Icon size={75} name={'chevron-left'} />
@@ -63,7 +66,7 @@ function RegisterScreen({postRegisterUrl}) {
                     <SubmitButton color="primary" title="Register" />
                 </Form>
             </View>
-        </ImageBackground>
+        </Background>
         </>
     );
 }

package/screens/UploadScreen.tsx

@@ -2,9 +2,8 @@ import React from 'react';
 import {Modal, StyleSheet, View} from "react-native";
 import * as Progress from 'react-native-progress';
 
-import colors from '../../../../config/colors'
-import Text from '../components/Text'
 import Animation from "../components/Animation";
+import colors from '../../../../config/colors';
 
 function UploadScreen({onDone, progress = 0, visible = false, animationSource = '../../../../assets/animations/done.json'}) {
     return (

package/screens/WelcomeScreen.tsx

@@ -1,8 +1,9 @@
-import ActivityIndicator from "@boneframework/native-components/components/ActivityIndicator";
 import {exchangeCodeAsync, makeRedirectUri, useAuthRequest} from "expo-auth-session";
 import React from 'react';
-import {Image, ImageBackground, StyleSheet, Text, View} from "react-native";
+import {Image, StyleSheet, Text, View} from "react-native";
 
+import ActivityIndicator from "../components/ActivityIndicator";
+import Background from '../components/Background';
 import Button from '../components/Button';
 
 import colors from '../../../../config/colors';
@@ -14,7 +15,8 @@ function WelcomeScreen({
     isLoading = false,
     logoTopMargin = 70,
     logoWidth = 150,
-    logoHeight = 105
+    logoHeight = 105,
+    backgroundSource = null
 }) {
     const styles = StyleSheet.create({
         background: {
@@ -45,7 +47,7 @@ function WelcomeScreen({
     });
 
     return (
-        <ImageBackground blurRadius={10} style={styles.background} source={require('../../../../assets/background.png')} >
+        <Background imageSource={backgroundSource} blurRadius={10} style={styles.background} gradientColors={colors.bgGradient}>
             <ActivityIndicator visible={isLoading} type={'overlay'} />
             <View style={styles.logoContainer}>
                 <Image style={styles.logo} source={require('../../../../assets/logo.png')} />
@@ -55,7 +57,7 @@ function WelcomeScreen({
                 <Button title="login" color="primary" onPress={loginOnPress} ></Button>
                 <Button title="register" color="secondary" onPress={registerOnPress}></Button>
             </View>
-        </ImageBackground>
+        </Background>
     );
 }