@boneframework/native-components 1.0.37 → 1.0.39

package/components/Background.tsx

@@ -0,0 +1,21 @@
+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) {
+        return;
+    }
+
+    if (imagePath !== null) {
+        return <ImageBackground source={require(imagePath)} {...rest}>
+            { children }
+        </ImageBackground>
+    }
+
+    return <LinearGradient colors={gradientColors}>
+        { children }
+    </LinearGradient>
+}
+
+export default Background;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boneframework/native-components",
-  "version": "1.0.37",
+  "version": "1.0.39",
   "description": "Expo Components for Bone Framework",
   "main": "src/Bone.ts",
   "scripts": {
@@ -50,6 +50,7 @@
     "react-native-maps": "^1.17.3",
     "react-native-progress": "^5.0.1",
     "toggle-switch-react-native": "^3.3.0",
-    "yup": "^1.4.0"
+    "yup": "^1.4.0",
+    "expo-linear-gradient": "~13.0.2"
   }
 }

package/screens/ActivateUserScreen.tsx

@@ -10,10 +10,7 @@ import useApi from "../hooks/useApi";
 import useAuth from "../hooks/useAuth";
 import userApi from "../api/users";
 
-import settings from "../../../../config/settings";
-import routes from "../../../../config/routes";
-
-function ActivateUserScreen() {
+function ActivateUserScreen({settings, loginRedirect, resendActivationEmailRedirect}) {
     const STATUS_BEGIN = 'start_validating';
     const STATUS_VALIDATE = 'validate_email_token';
     const STATUS_RESEND = 'resend_email_token';
@@ -83,7 +80,7 @@ function ActivateUserScreen() {
                 return;
             }
 
-            login(convertResponse(result.data)).then(router.navigate(routes.HOME));
+            login(convertResponse(result.data)).then(router.navigate(loginRedirect));
         } catch (error) {
             setError(error);
             console.error(error);
@@ -96,7 +93,7 @@ function ActivateUserScreen() {
             .request(email)
             .then(setStatus(STATUS_VALIDATE))
             .then(router.back())
-            .then(router.navigate(routes.USER_ACTIVATION_CHECK_EMAIL))
+            .then(router.navigate(resendActivationEmailRedirect))
             .catch(console.error);
     }
 

package/screens/EditProfileScreen.tsx

@@ -1,7 +1,6 @@
 import React, {useEffect, useState} from 'react';
 import {
     Alert,
-    Button,
     KeyboardAvoidingView,
     Platform,
     ScrollView,
@@ -9,27 +8,21 @@ import {
     TouchableWithoutFeedback,
     View
 } from "react-native"
-import {Field} from "formik";
-import * as FileSystem from 'expo-file-system';
-import {useAsyncStorage} from "@react-native-async-storage/async-storage";
 import * as Yup from "yup";
 
-import colors from '../../../../config/colors';
-import ImageInput from '../components/ImageInput';
 import Image from '../components/Image';
-import Screen from '../components/Screen';
-import Text from '../components/Text';
 import {Form, FormDateTimePicker, FormField, SubmitButton} from "../components/forms";
 import ActivityIndicator from "../components/ActivityIndicator";
 import UploadScreen from "./UploadScreen";
 import useApi from "../hooks/useApi";
 import userApi from "../api/users";
 import useAuth from "../hooks/useAuth";
-import useCache from "../hooks/useCache";
 import useCamera from "../hooks/useCamera";
 import usePhotos from "../hooks/usePhotos";
 import useStyle from "../hooks/useStyle";
 
+import colors from '../../../../config/colors';
+
 const validationSchema = Yup.object().shape({
     firstname: Yup.string().required().min(2).max(60).label('First name'),
     middlename: Yup.string().min(1).max(60).label('Middle name'),

package/screens/RegisterScreen.tsx

@@ -42,7 +42,7 @@ function RegisterScreen({postRegisterUrl}) {
         <ImageBackground blurRadius={10} style={styles.background} source={require('../../../../assets/background.png')} >
             <View style={styles.container}>
                 <TouchableOpacity style={styles.cancelButton} onPress={onClose}>
-                    <Icon size={75} name={'close'} />
+                    <Icon size={75} name={'chevron-left'} />
                 </TouchableOpacity>
                 <Image style={styles.logo} source={require('../../../../assets/logo.png')} />
 
@@ -81,6 +81,10 @@ const styles = StyleSheet.create({
     },
     background: {
         height: '100%'
+    },
+    cancelButton: {
+        top:10,
+        left:-20
     }
 })
 

package/screens/SetPasswordScreen.tsx

@@ -1,12 +1,10 @@
-import React, {useState} from 'react';
+import React from 'react';
 import {StyleSheet, View} from "react-native";
 import * as Yup from "yup";
 
 import {ErrorMessage, Form, FormField, SubmitButton} from "../components/forms";
 import Image from "../components/Image";
 
-import settings from "../../../../config/settings";
-
 const validationSchema = Yup.object().shape({
     password: Yup.string().required().min(4).label('Password'),
     confirm: Yup.string().required().oneOf([Yup.ref('password'), null], 'Passwords must match').label('Confirm')

package/screens/WelcomeScreen.tsx

@@ -3,10 +3,47 @@ import {exchangeCodeAsync, makeRedirectUri, useAuthRequest} from "expo-auth-sess
 import React from 'react';
 import {Image, ImageBackground, StyleSheet, Text, View} from "react-native";
 
-import Button from '../components/Button'
-import colors from '../../../../config/colors'
+import Button from '../components/Button';
+
+import colors from '../../../../config/colors';
+
+function WelcomeScreen({
+    loginOnPress = () => {},
+    registerOnPress = () => {},
+    title = 'BONE FRAMEWORK',
+    isLoading = false,
+    logoTopMargin = 70,
+    logoWidth = 150,
+    logoHeight = 105
+}) {
+    const styles = StyleSheet.create({
+        background: {
+            flex: 1,
+            justifyContent: 'flex-end',
+            alignItems: 'center',
+        },
+        logo: {
+            width: logoWidth,
+            height: logoHeight
+        },
+        logoContainer: {
+            position: 'absolute',
+            top: logoTopMargin,
+            alignItems: "center"
+        },
+        buttonContainer: {
+            width: "100%",
+            padding: 20
+        },
+        tagline: {
+            fontSize: 50,
+            fontWeight: 'bold',
+            paddingTop: 10,
+            color: colors.white,
+            textAlign: 'center'
+        },
+    });
 
-function WelcomeScreen({loginOnPress = () => {}, registerOnPress = () => {}, title = 'BONE FRAMEWORK', isLoading = false}) {
     return (
         <ImageBackground blurRadius={10} style={styles.background} source={require('../../../../assets/background.png')} >
             <ActivityIndicator visible={isLoading} type={'overlay'} />
@@ -21,32 +58,6 @@ function WelcomeScreen({loginOnPress = () => {}, registerOnPress = () => {}, tit
         </ImageBackground>
     );
 }
-const styles = StyleSheet.create({
-    background: {
-        flex: 1,
-        justifyContent: 'flex-end',
-        alignItems: 'center',
-    },
-    logo: {
-        width: 150,
-        height: 105
-    },
-    logoContainer: {
-        position: 'absolute',
-        top: 70,
-        alignItems: "center"
-    },
-    buttonContainer: {
-        width: "100%",
-        padding: 20
-    },
-    tagline: {
-        fontSize: 50,
-        fontWeight: 'bold',
-        paddingTop: 10,
-        color: colors.white,
-        textAlign: 'center'
-    },
-});
+
 
 export default WelcomeScreen;