@boneframework/native-components 1.0.38 → 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.38",
+  "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,7 +10,7 @@ import useApi from "../hooks/useApi";
 import useAuth from "../hooks/useAuth";
 import userApi from "../api/users";
 
-function ActivateUserScreen({settings, loginRedirect}) {
+function ActivateUserScreen({settings, loginRedirect, resendActivationEmailRedirect}) {
     const STATUS_BEGIN = 'start_validating';
     const STATUS_VALIDATE = 'validate_email_token';
     const STATUS_RESEND = 'resend_email_token';
@@ -93,7 +93,7 @@ function ActivateUserScreen({settings, loginRedirect}) {
             .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/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/WelcomeScreen.tsx

@@ -7,7 +7,43 @@ import Button from '../components/Button';
 
 import colors from '../../../../config/colors';
 
-function WelcomeScreen({loginOnPress = () => {}, registerOnPress = () => {}, title = 'BONE FRAMEWORK', isLoading = false}) {
+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'
+        },
+    });
+
     return (
         <ImageBackground blurRadius={10} style={styles.background} source={require('../../../../assets/background.png')} >
             <ActivityIndicator visible={isLoading} type={'overlay'} />
@@ -22,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;