be-components 0.1.1 → 0.1.3

package/src/{AuthenticateWizard → Authenticator}/api/index.ts

@@ -1,13 +1,9 @@
 import axios from "axios"
-import type { AuthExecutionRequestProps, AuthStrategyIdentifierProps, AuthStrategyProps, PlayerTokenProps, PublicPlayerProps } from "./types";
+import type { AuthCheckResponseProps, AuthExecutionRequestProps, AuthStrategyIdentifierProps, AuthStrategyProps, CompanyMemberProps, CompanyProps, PlayerTokenProps } from "./types";
+import { APIOverrides } from "../../ApiOverrides";
 
-const AUTH_ENDPOINTS = {
-    DEVELOPMENT: 'http://localhost:5000',
-    STAGING: 'https://stage-be-auth-svc.herokuapp.com',
-    PRODUCTION: 'https://api.players.bettoredge.com'
-}
 
-let AUTH_SVC_API = ''
+let AUTH_SVC_API = '';
 
 export {
     AuthenticateApi,
@@ -15,8 +11,27 @@ export {
 }
 
 const AuthenticateApi = {
-    setEnvironment: (env:'PRODUCTION'|'STAGING'|'DEVELOPMENT') => {
-        AUTH_SVC_API = AUTH_ENDPOINTS[env];
+    setEnvironment: () => {
+        const endpoints = APIOverrides.getEndpoints();
+        console.log('setting env!!!')
+        AUTH_SVC_API = endpoints['AUTH_SVC_API'] as string;
+    },
+    authCheck: async(attribute:'email'|'phone'|'username', value:string):Promise<AuthCheckResponseProps> => {
+        const resp = await axios.post(`${AUTH_SVC_API}/v1/authenticate/check`, { attribute, value })
+        return resp.data.auth_response
+    },
+    authForgot: async(attribute:'email'|'phone'|'username', value:string):Promise<AuthCheckResponseProps> => {
+        const resp = await axios.post(`${AUTH_SVC_API}/v1/authenticate/forgot`, { attribute, value })
+        return resp.data.auth_response
+    },
+    authLogin: async(attribute:'email'|'phone'|'username', value:string, token:string, verification_session_id?:string):Promise<{ result:'success'|'fail', message:string, access_token?:string, refresh_token?:string, expire_datetime?:any }> => {
+        const resp = await axios.post(`${AUTH_SVC_API}/v1/authenticate/login`, { attribute, verification_session_id }, {
+            auth: {
+              username: value,
+              password: token
+            }
+          })
+          return resp.data.login_response
     },
     authenticateLocal : async(username:string, password:string, device_id:string):Promise<{ access_token:string, refresh_token:string, expire_datetime:string }> => {
         const resp = await axios.post(`${AUTH_SVC_API}/v1/players/player/authenticate`, { username, password, device_id })
@@ -33,22 +48,7 @@ const AuthenticateApi = {
         let resp = await axios.post(`${AUTH_SVC_API}/v1/players/player/phone/verify`, { token, device_id })
         return resp.data
     }, 
-    getMyDetails : async():Promise<PublicPlayerProps> => {
-        const resp = await axios.get(`${AUTH_SVC_API}/v1/players/player/me`)
-        return resp.data.player
-    },
-    forgotUsername : async(attribute:string, attribute_value:string):Promise<void> => {
-        await axios.post(`${AUTH_SVC_API}/v1/players/player/forgot/username`, { attribute, attribute_value })
-        return
-    },
-    forgotPassword : async(attribute:string, attribute_value:string):Promise<void> => {
-        await axios.post(`${AUTH_SVC_API}/v1/players/player/forgot/password`, { attribute, attribute_value })
-        return
-    },
-    resetPassword : async(password:string, repassword:string, verify_code:string):Promise<void> => {
-        await axios.post(`${AUTH_SVC_API}/v1/players/player/reset/password`, { password, repassword, verify_code })
-        return
-    },
+    
     getShortToken : async():Promise<PlayerTokenProps> => {
         const resp = await axios.get(`${AUTH_SVC_API}/v1/players/tokens/short`)
         return resp.data.player_token
@@ -59,17 +59,14 @@ const AuthenticateApi = {
     },
     executeAuthStrategy: async(auth_execution_request:AuthExecutionRequestProps):Promise<{ result:'success'|'fail', device_id:string, message:string, auth_strategy_id:string, verification_session_id:string, session_expire_datetime:any, auth_strategy_identifier_id:string }> => {
         const resp = await axios.post(`${AUTH_SVC_API}/v1/authenticate/strategy/try`, { auth_execution_request })
-        console.log(resp.data)
         return resp.data
     },
-    verifyAuthStrategyIdentifier: async(auth_strategy_identifier_id:string, verification_session_id:string, token:string, device_id?:string):Promise<{ result: 'success'|'fail', access_token?:string, refresh_token?:string, expire_datetime?:any }> => {
+    verifyAuthStrategyIdentifier: async(auth_strategy_identifier_id:string, verification_session_id:string, token:string, device_id:string):Promise<{ result: 'success'|'fail', access_token?:string, refresh_token?:string, expire_datetime?:any }> => {
         const resp = await axios.post(`${AUTH_SVC_API}/v1/authenticate/strategy/identifier/verify`, { auth_strategy_identifier_id, verification_session_id, token, device_id });
-        console.log(resp.data)
         return resp.data
     },
-    getCompanyById: async(company_id:string) => {
+    getCompanyById: async(company_id:string):Promise<{ company:CompanyProps, company_members:CompanyMemberProps[] }> => {
         const resp = await axios.get(`${AUTH_SVC_API}/v1/companies/company/id/${company_id}`)
-        console.log(resp.data)
         return resp.data
     }
 }
@@ -160,5 +157,4 @@ isPhoneValid : (phone:string):{ valid: boolean, error?:string } => {
     if(phone.length === 10){ return { valid:true } }
     return { valid:false, error: 'Phone number must be a US 10 digit number' }
 }
-
 }

package/src/{AuthenticateWizard → Authenticator}/api/types.d.ts

@@ -1,28 +1,4 @@
-export interface PublicPlayerProps {
-    player_id:string,
-    username:string,
-    email:string,
-    dob?:string,
-    first_name:string,
-    phone:number,
-    premium_tier_id?:string,
-    zip?:string;
-    last_name:string; 
-    type:string,
-    role:'admin'|'player'|'company'|'support'|'guest',
-    create_datetime:any,
-    verified:boolean,
-    home_location:string,
-    anonymous?:boolean,
-    auto_generated?:boolean,
-    no_password?:boolean,
-    show_name:string,
-    profile_pic?:string,
-    vouched_id?:string,
-    phone_verified:boolean,
-    bio?:string,
-    vouched_status:'unverified' | 'failed' | 'verified',
-}
+
 
 export interface PlayerTokenProps {
     player_token_id:string, 
@@ -36,9 +12,6 @@ export interface PlayerTokenProps {
     expire_datetime:any
 }
 
-
-
-
 export interface AuthStrategyProps {
     auth_strategy_id:string,
     name: string,
@@ -49,6 +22,15 @@ export interface AuthStrategyProps {
     last_update_datetime:any 
 }
 
+export interface AuthCheckResponseProps { 
+    result: 'success'|'fail',
+    message:string,
+    verification_session_id?:string,
+    attribute?: 'email'|'phone'|'username',
+    value?: string,
+    next?: 'password' | 'token'
+}
+
 export interface AuthIdentifierProps {
     auth_identifier_id:string,
     attribute: string,
@@ -67,6 +49,7 @@ export interface AuthStrategyIdentifierProps {
     priority:number,
     optional?:boolean,
     secure_text_entry?:boolean,
+    primary_login?:boolean,
     label:string,
     token_required?:boolean,
     description:string,

package/src/Authenticator/index.tsx

@@ -0,0 +1,109 @@
+import React, { useEffect, useState } from 'react';
+import StrategyForm from './Components/StrategyForm';
+import { AuthenticateApi } from './api';
+import { View, Image } from 'react-native';
+import LoginForm from './Components/LoginForm';
+import { Text } from '../Components';
+import Colors from '../constants/colors';
+import type { CompanyProps } from './api/types';
+
+
+
+type AuthenticateWizardProps = {
+    auth_strategy_id:string,
+    width:number,
+    company_id?:string,
+    default_view?:'login'|'register'
+    distinct_id:string,
+    source:string,
+    opt_in_url?:string,
+    referral_code?:string,
+    visible?:boolean,
+    onAuthenticated: (access_token:string, refresh_token:string, expire_datetime:any) => void
+}
+
+const Authenticator = ({ auth_strategy_id, distinct_id, default_view, company_id, source, referral_code, width, opt_in_url, onAuthenticated }:AuthenticateWizardProps) => {
+    const [ loaded, setLoaded ] = useState(false);
+    const [ company, setCompany ] = useState<CompanyProps>();
+    const [ active_view, setActiveView ] = useState(default_view ?? 'register')
+
+    useEffect(() => {
+        getWidgetData();
+    },[])
+
+    const getWidgetData = async() => {
+        AuthenticateApi.setEnvironment();
+        if(company_id){
+            const company_resp = await AuthenticateApi.getCompanyById(company_id)
+            setCompany(company_resp.company)
+        }
+        setLoaded(true);
+    }
+
+    const handleAuthenticated = async(access_token:string, refresh_token:string, expire_datetime:any) => {
+        return onAuthenticated(access_token, refresh_token, expire_datetime)
+    }
+
+    if(!loaded){ return <></> }
+    return (
+        <View style={{ flex:1 }}>
+            {company ?
+            <View style={{ padding:20, flexDirection:'row', alignItems:'center', borderTopRightRadius:22, borderTopLeftRadius:22, borderBottomWidth:1, borderColor:Colors.accents.accent200 }}>
+                <View style={{ flex:1, marginRight:10 }}>
+                    <Text size={28} weight='bold' color={Colors.brand.midnight}>{active_view == 'login' ? 'Log In!': 'Welcome!'}</Text>
+                    <Text style={{ marginTop:5 }} color={Colors.brand.midnight} size={14} weight='semibold' textAlign='left'>{active_view == 'login' ? 'Continue to login with':'Complete the form below to participate with'} {company?.company_name ?? 'Bettoredge'}</Text>
+                </View>
+                <View>
+                    <Image
+                        source={{ uri: company?.company_image?.url }}
+                        style={{ width: width * 0.15, height: width * 0.15, borderRadius:8 }}
+                        resizeMode='cover'
+                    />
+                </View>         
+            </View>
+            :<></>}
+            <StrategyForm
+                visible={active_view == 'register' ? true : false}
+                width={width}
+                onLogin={() => setActiveView('login')}
+                auth_strategy_id={auth_strategy_id}
+                company_id={company_id}
+                device_id={distinct_id}
+                source={source}
+                referral_code={referral_code}
+                opt_in_url={opt_in_url}
+                onAuthenticated={handleAuthenticated}
+            />
+            <LoginForm
+                width={width}
+                visible={ active_view == 'login' ? true : false }
+                onAuthenticated={handleAuthenticated}
+                onRegister={() => setActiveView('register')}
+            />
+        </View>
+    )
+}
+
+export default Authenticator
+
+/*
+        {authenticated ?
+                <Spring
+                    style={{ position:'absolute', backgroundColor:Colors.shades.white, borderTopRightRadius:22, borderTopLeftRadius:22, top:0, left:0, right:0, bottom:0, justifyContent:'center', alignItems:'center' }}
+                    to={0}
+                    from={500}
+                    slide="vertical"
+                >
+                        <View style={{ flex:1, justifyContent:'center', alignItems:'center' }}>
+                            <View style={{ marginTop: 30 }}>
+                                <Image
+                                    source={{ uri: 'https://res.cloudinary.com/hoabts6mc/image/upload/v1704746039/be_logo_2_idjbro.png' }}
+                                    style={{ height:width * 0.5, width:width * 0.5 }}
+                                    resizeMode="cover"
+                                />
+                            </View>
+                        </View>
+                </Spring>
+            :<></>}
+
+*/

package/src/Components/Button.tsx

@@ -30,7 +30,7 @@ type ButtonProps = {
 const Button = ({ title, style, title_weight, disabled, loading, title_size, padding, borderRadiusOverride, avatar_url, title_color, borderWidth, borderColor, backgroundColor, borderRadius, onPress }:ButtonProps) => {
     let input_style = style ?? {}
     const getBorderRadiusOverride = () => {
-        if(!borderRadiusOverride){ return { borderRadius: borderRadius??4 } }
+        if(!borderRadiusOverride){ return { borderRadius: borderRadius??22 } }
         return { ...borderRadiusOverride }
     }
 

package/src/Components/Icons.tsx

@@ -658,6 +658,62 @@ type IconProps = {
     )
 }
 
+const PhoneIcon = ({ color, size } : IconProps) => {
+    const ratio = .7727
+    let height = size ?? 14
+    let width = height * ratio
+    return (
+        <svg width={`${width}px`} height={`${height}px`} viewBox="0 0 17 22" version="1.1" xmlns="http://www.w3.org/2000/svg">
+            <title>phone-svgrepo-com</title>
+            <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+                <g id="phone-svgrepo-com" transform="translate(1.438912, 1.000000)" stroke={color ?? Colors.brand.midnight} stroke-width="2">
+                    <path d="M14.0067027,15.5000775 L14.0067027,4.5000225 C14.069603,3.37367687 13.684301,2.26821134 12.9347973,1.42505713 C12.1852936,0.58190291 11.1326883,0.0695803479 10.0066827,0 L4.00666266,0 C2.88071703,0.0695803479 1.82805177,0.58190291 1.07858802,1.42505713 C0.329114272,2.26821134 -0.0562676553,3.37367687 0.00665265933,4.5000225 L0.00665265933,15.5000775 C-0.0562676553,16.6263831 0.329114272,17.7317887 1.07858802,18.5748929 C1.82805177,19.4180971 2.88071703,19.9303997 4.00666266,20 L10.0066827,20 C11.1326883,19.9303997 12.1852936,19.4180971 12.9347973,18.5748929 C13.684301,17.7317887 14.069603,16.6263831 14.0067027,15.5000775 L14.0067027,15.5000775 Z" id="Path"></path>
+                    <line x1="9.00687766" y1="3.000015" x2="5.00685766" y2="3.000015" id="Path"></line>
+                </g>
+            </g>
+        </svg>
+    )
+}
+
+
+const EmailIcon = ({ color, size } : IconProps) => {
+    const ratio = .8181
+    let width = size ?? 14
+    let height = width * ratio
+    return (
+        <svg width={`${width}px`} height={`${height}px`} viewBox="0 0 22 18" version="1.1" xmlns="http://www.w3.org/2000/svg">
+        <title>email-svgrepo-com</title>
+        <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+            <g id="email-svgrepo-com" transform="translate(1.000000, 1.000000)" stroke={color ?? Colors.brand.midnight} stroke-width="2">
+                <path d="M1.11111111,2.22222222 L8,7.38888889 C9.18522222,8.27777778 10.8147778,8.27777778 12,7.38888889 L18.8888889,2.22222222" id="Path" stroke-linejoin="round"></path>
+                <rect id="Rectangle" x="0" y="0" width="20" height="15.5555556" rx="1"></rect>
+            </g>
+        </g>
+    </svg>
+    )
+}
+
+const BirthdayIcon = ({ color, size } : IconProps) => {
+    const ratio = .958
+    let height = size ?? 14
+    let width = height * ratio
+    return (
+        <svg width={`${width}px`} height={`${height}px`} viewBox="0 0 23 24" version="1.1" xmlns="http://www.w3.org/2000/svg">
+        <title>birthday-card-invitation-svgrepo-com</title>
+        <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+            <g id="birthday-card-invitation-svgrepo-com" fill={color ?? Colors.brand.midnight} fill-rule="nonzero">
+                <path d="M22.0403438,9.3645 L20.3392969,7.75045312 L20.3392969,3.18304687 C20.3392969,2.92148437 20.1273281,2.70951562 19.8657656,2.70951562 L15.0264375,2.70951562 L12.9365625,0.726609375 C11.915625,-0.242203125 10.3160625,-0.242203125 9.29503125,0.726609375 L7.20520312,2.70951562 L2.365875,2.70951562 C2.1043125,2.70951562 1.89234375,2.92148437 1.89234375,3.18304687 L1.89234375,7.75045312 L0.147609375,9.40589062 C-0.042140625,9.58589062 -0.0481875,9.88382812 0.130078125,10.0753594 C0.211828125,10.16325 7.89342187,15.8377969 7.89342187,15.8377969 L1.52517187,21.8800781 C1.36954687,22.0276875 1.25953125,22.207875 1.19798438,22.4021719 C1.03964062,22.1668594 0.9470625,21.8836875 0.9470625,21.579375 L0.9470625,12.7727344 C0.9470625,12.5111719 0.73509375,12.2992031 0.47353125,12.2992031 C0.21196875,12.2992031 0,12.5111719 0,12.7727344 L0,21.579375 C0,22.8550312 0.990375,23.9029687 2.24245312,23.996625 C2.28534375,24.001125 19.94625,24.001125 19.9891875,23.996625 C21.2412187,23.9029219 22.2314533,22.8549375 22.2314533,21.579375 L22.2314533,9.82626562 C22.2314533,9.66520312 22.1904844,9.51473437 22.0403438,9.3645 Z M9.946875,1.41360938 C10.602375,0.791625 11.6292656,0.791765625 12.2846719,1.41360938 L13.6504687,2.70951562 L8.58098437,2.70951562 L9.946875,1.41360938 Z M1.21125,9.7021875 L1.89234375,9.05596875 L1.89234375,9.24159375 C1.89234375,9.50315625 2.1043125,9.715125 2.365875,9.715125 C2.6274375,9.715125 2.83940625,9.50315625 2.83940625,9.24159375 L2.83940625,3.65657813 L14.8336406,3.65657813 C14.8349531,3.65657813 14.8363125,3.65676563 14.837625,3.65676563 C14.8388906,3.65676563 14.8401562,3.65657813 14.8413281,3.65657813 L19.3921406,3.65657813 L19.3921406,9.25129687 C19.3921406,9.51285937 19.6041094,9.72482812 19.8656719,9.72482812 C20.1272344,9.72482812 20.3392031,9.51285937 20.3392031,9.25129687 L20.3392031,9.05596875 L21.0260156,9.70767187 L13.6464844,15.1815 L12.9365156,14.5078594 C11.9155781,13.5390469 10.3160156,13.5389531 9.29498437,14.5078594 L8.59078125,15.1759687 L1.21125,9.7021875 Z M20.1229219,22.878375 C20.1023906,22.9298437 20.0374219,23.0454844 19.8794531,23.0552812 C19.8552656,23.0565 2.37628125,23.0565 2.35223437,23.0552812 C2.194125,23.0455781 2.12929687,22.9298437 2.10876562,22.878375 C2.08729687,22.8245625 2.0510625,22.6867031 2.17701562,22.567125 L8.91089062,16.1777812 C8.94257812,16.154625 8.97173438,16.1271562 8.99770312,16.0954688 L9.946875,15.1948594 C10.274625,14.8838906 10.6952344,14.7284062 11.1157969,14.7284062 C11.5363594,14.7284062 11.9569687,14.8839375 12.2847187,15.1948594 L20.054625,22.567125 C20.180625,22.6866562 20.1443437,22.8245625 20.1229219,22.878375 Z M21.2844375,21.5793281 C21.2844375,21.8837344 21.1918594,22.1667656 21.0335156,22.402125 C20.9719688,22.2079219 20.8619531,22.0277344 20.7063281,21.8800781 L14.3439375,15.8432344 L21.2844375,10.6950937 L21.2844375,21.5793281 L21.2844375,21.5793281 Z" id="Shape"></path>
+                <path d="M7.498125,5.2335 C7.24354687,5.2335 7.04409375,5.43295312 7.04409375,5.68753125 L7.04409375,7.49971875 L5.1174375,7.49971875 L5.1174375,5.68753125 C5.1174375,5.43295313 4.9145625,5.2335 4.65571875,5.2335 C4.40109375,5.2335 4.20164063,5.43295312 4.20164063,5.68753125 L4.20164063,10.2201094 C4.20164063,10.4746875 4.40109375,10.6741406 4.65571875,10.6741406 C4.91465625,10.6741406 5.1174375,10.4746875 5.1174375,10.2201094 L5.1174375,8.40792187 L7.04404688,8.40792187 L7.04404688,10.2201094 C7.04404688,10.4746875 7.2435,10.6741406 7.49807813,10.6741406 C7.7570625,10.6741406 7.95989063,10.4746875 7.95989063,10.2201094 L7.95989063,5.68753125 C7.95989063,5.43295313 7.7570625,5.2335 7.498125,5.2335 Z" id="Path"></path>
+                <path d="M12.4064531,7.59215625 C12.5886094,7.33776563 12.6846562,7.0385625 12.6846562,6.7246875 C12.6846562,5.9025 12.0157031,5.23354688 11.1935156,5.23354688 L10.1026875,5.23354688 C9.85223438,5.23354688 9.64851562,5.43721875 9.64851562,5.68757812 L9.64851562,10.2201563 C9.64846875,10.46625 9.85640625,10.6741875 10.1026875,10.6741875 C10.1089219,10.6741875 10.114125,10.672875 10.1179687,10.6712344 C10.1225156,10.6731094 10.1276719,10.6741875 10.1333906,10.6741875 L11.4931406,10.6741875 C12.4170469,10.6741875 13.1686875,9.919125 13.1686875,8.991 C13.1686875,8.42817188 12.8844375,7.90771875 12.4064531,7.59215625 Z M10.5643594,6.14939063 L11.1935156,6.14939063 C11.5161094,6.14939063 11.7687656,6.40204687 11.7687656,6.72464063 C11.7687656,7.050375 11.5107188,7.31535937 11.1935156,7.31535937 L10.5643594,7.31535937 L10.5643594,6.14939063 L10.5643594,6.14939063 Z M11.4931406,9.75825 L10.5643594,9.75825 L10.5643594,8.23120313 L11.4925313,8.23120313 C11.9188594,8.23870313 12.2527969,8.57240625 12.2527969,8.99095313 C12.2527969,9.41376562 11.9188594,9.75079688 11.4931406,9.75825 Z" id="Shape"></path>
+                <path d="M15.5724844,5.2335 L14.6660156,5.2335 C14.4114375,5.2335 14.2119844,5.43295313 14.2119844,5.68753125 L14.2119844,10.2201094 C14.2119844,10.4705156 14.4156094,10.6741875 14.6660156,10.6741875 L15.5724844,10.6741875 C17.0682187,10.6741875 18.2851406,9.450375 18.2851406,7.94615625 C18.2851406,6.45042188 17.0682656,5.2335 15.5724844,5.2335 Z M15.5724844,9.75829687 L15.1277344,9.75829687 L15.1277344,9.75829687 L15.1277344,6.14939063 L15.5724844,6.14939063 C16.5632344,6.14939063 17.3693437,6.95545313 17.3693437,7.94615625 C17.3692969,8.95476563 16.5799687,9.75075 15.5724844,9.75829687 Z" id="Shape"></path>
+            </g>
+        </g>
+    </svg>
+    )
+}
+
+
+
 
 
 export default {
@@ -671,10 +727,13 @@ export default {
     TrophyIcon,
     ListIcon,
     UserIcon,
+    PhoneIcon,
+    EmailIcon,
     InProgressIcon,
     LockClosedIcon,
     CloseIcon,
     BettorEdgeIcon,
+    BirthdayIcon,
     CheckIcon,
     ImageIcon,
     MenuIcon,

package/src/Components/ImageUploader.tsx

@@ -0,0 +1,104 @@
+ // Set your cloud name and unsigned upload preset here:
+ const YOUR_CLOUD_NAME = "hoabts6mc";
+ const YOUR_UNSIGNED_UPLOAD_PRESET = "be_auth_svc";
+ import React, { useRef } from "react";
+import { TouchableOpacity } from "react-native";
+
+
+type CldUploaderProps = {
+  onFinishUpload : (obj:any) => void
+    onStartUpload?: () => void,
+    onCancelUpload?: () => void,
+  children?:any,
+  public_id: string
+}
+const ImageUploader = ({ onFinishUpload, public_id, children }:CldUploaderProps) => {
+    const upload_ref:any = useRef()
+
+  const processFile = async (e:any) => {
+    var file = e.target.files[0];
+
+    var POST_URL =
+      "https://api.cloudinary.com/v1_1/" + YOUR_CLOUD_NAME + "/auto/upload";
+
+    var XUniqueUploadId = +new Date();
+
+    processFile();
+
+    function processFile() {
+      var size = file.size;
+      var sliceSize = 20000000;
+      var start = 0;
+
+      setTimeout(loop, 3);
+
+      function loop() {
+        var end = start + sliceSize;
+
+        if (end > size) {
+          end = size;
+        }
+        var s = slice(file, start, end);
+        send(s, start, end - 1, size);
+        if (end < size) {
+          start += sliceSize;
+          setTimeout(loop, 3);
+        }
+      }
+    }
+
+    const send = (piece:any, start:any, end:any, size:any) => {
+
+      var formdata = new FormData();
+
+      formdata.append("file", piece);
+      formdata.append("cloud_name", YOUR_CLOUD_NAME);
+      formdata.append("upload_preset", YOUR_UNSIGNED_UPLOAD_PRESET);
+      formdata.append("public_id", public_id);
+
+      var xhr = new XMLHttpRequest();
+      xhr.open("POST", POST_URL, false);
+      xhr.setRequestHeader("X-Unique-Upload-Id", XUniqueUploadId as any);
+      xhr.setRequestHeader(
+        "Content-Range",
+        "bytes " + start + "-" + end + "/" + size
+      );
+
+      xhr.onload = function () {
+        // do something to response
+        onFinishUpload(JSON.parse(this.responseText))
+      };
+
+      xhr.send(formdata);
+    }
+
+    function slice(file:any, start:any, end:any) {
+      var slice = file.mozSlice
+        ? file.mozSlice
+        : file.webkitSlice
+        ? file.webkitSlice
+        : file.slice
+        ? file.slice
+        : noop;
+
+      return slice.bind(file)(start, end);
+    }
+
+    function noop() {}
+  };
+
+  const handleClick = () => {
+    if(!upload_ref?.current) { return console.log('no ref') }
+    upload_ref.current.click() 
+  }
+
+    return (
+         <TouchableOpacity style={{ padding:10 }} onPress={() => handleClick()}>
+            <input ref={upload_ref as any} style={{ display:'none' }} type="file"  onChange={processFile} />
+            {children}
+        </TouchableOpacity>
+    );
+
+}
+
+export default ImageUploader;

package/src/Components/Spring.tsx

@@ -1,36 +1,41 @@
 import React from 'react';
-import { useSpring, animated } from '@react-spring/web';
+import { useSpring, animated, easings } from '@react-spring/web';
 
 type SpringViewProps = {
     style?: any,
     slide: 'vertical'|'horizontal'
     from: number,
+    onResolve?:() => void,
     to:number,
     children: any
 }
-const SpringView = ({ style, children, from, to, slide }:SpringViewProps) => {
+const SpringView = ({ style, children, from, to, slide, onResolve }:SpringViewProps) => {
+    
     let config:any = {
         from: { x: from},
-        to: { x: to }
+        to: { x: to },
+        friction: 120,
+        tension: 280
     }
     if(slide == 'vertical'){
         config = {
             from: { y: from},
-            to: { y: to }
+            to: { y: to },
+            onResolve: () => { if(onResolve){ onResolve() } },
+            easing: easings.easeInBounce
         }
     }
 
-    const springs = useSpring(config)
 
 
+    const props = useSpring(config)
+
     return (
         <animated.div
-        style={{
-            ...springs,
-            ...style
-        }}
-    >
-        {children}
+            onAnimationEnd={() => console.log('animation has ended')}
+            style={{ ...style, ...props}}
+        >
+            {children}
         </animated.div>
     )
 }

package/src/Components/TextInput.tsx

@@ -9,13 +9,16 @@ type TextInputProps = {
     autoFocus?:boolean,
     keyboardType?:string,
     textContentType?:string,
+    editable?:boolean,
     secureTextEntry?:boolean,
+    onSubmitEditing?: (evt:any) => void,
+    onBlur?: (evt:any) => void,
     placeholderTextColor?:string,
     onChangeText:(text:string) => void,
     style?:any
 }
 
-const TextInput = ({ onChangeText, placeholderTextColor, value, placeholder, style, autoFocus, keyboardType, textContentType, secureTextEntry } : TextInputProps) => {
+const TextInput = ({ onChangeText, placeholderTextColor, value, placeholder, style, autoFocus, keyboardType, textContentType, editable, secureTextEntry, onSubmitEditing, onBlur } : TextInputProps) => {
 
     return (
         <RNTextInput
@@ -27,17 +30,20 @@ const TextInput = ({ onChangeText, placeholderTextColor, value, placeholder, sty
                 fontFamily:'barlow-bold', 
                 fontSize:16,
                 borderColor:Colors.shades.shade600,
-                backgroundColor:Colors.shades.white,
+                backgroundColor:editable == false ? Colors.shades.shade100 : Colors.shades.white,
                 ...style 
             }}
+            editable={editable ?? true}
             placeholder={placeholder}
             value={value}
+            onSubmitEditing={onSubmitEditing}
+            onBlur={onBlur}
             secureTextEntry={secureTextEntry}
             placeholderTextColor={placeholderTextColor}
             autoFocus={autoFocus}
             textContentType={textContentType as any}
             keyboardType={keyboardType as any}
-            onChangeText={(text) => onChangeText(text)}
+            onChangeText={onChangeText}
         />
     )
 }

package/src/Font.css

@@ -1,23 +1,23 @@
 @font-face {
     font-family: 'barlow-bold';
     src: local('Barlow-Bold'),
-    url('./fonts/Barlow-Bold.ttf')
+    url('./Assets/fonts/Barlow-Bold.ttf')
 }
 
 @font-face {
     font-family: 'barlow-semibold';
     src: local('Barlow-SemiBold'),
-    url('./fonts/Barlow-SemiBold.ttf')
+    url('./Assets/fonts/Barlow-SemiBold.ttf')
 }
 
 @font-face {
     font-family: 'barlow-regular';
     src: local('Barlow-Regular'),
-    url('./fonts/Barlow-Regular.ttf')
+    url('./Assets/fonts/Barlow-Regular.ttf')
 }
 
 @font-face {
     font-family: 'barlow-light';
     src: local('Barlow-Light'),
-    url('./fonts/Barlow-Light.ttf')
+    url('./Assets/fonts/Barlow-Light.ttf')
 }