@kiosinc/commons-rn 0.1.19 → 0.1.20

package/lib/module/components/TextInput.js

@@ -15,6 +15,7 @@ export const TextInputStyled = ({
 export const TextInput = ({
   errorMessage,
   secureTextEntry,
+  rightIcon,
   ...rest
 }) => {
   const [status, setStatus] = React.useState('checked');
@@ -28,13 +29,13 @@ export const TextInput = ({
   }, /*#__PURE__*/React.createElement(TextInputStyled, _extends({
     width: "100%",
     secureTextEntry: shouldShowPassword && secureTextEntry
-  }, rest)), secureTextEntry && /*#__PURE__*/React.createElement(View, {
+  }, rest)), (secureTextEntry || rightIcon) && /*#__PURE__*/React.createElement(View, {
     pt: "4",
     justifyContent: "center",
     alignSelf: "flex-end",
     position: "absolute",
     width: 48
-  }, /*#__PURE__*/React.createElement(ToggleButton, {
+  }, rightIcon ?? /*#__PURE__*/React.createElement(ToggleButton, {
     icon: shouldShowPassword ? 'eye' : 'eye-off',
     size: 20,
     onPress: onButtonToggle
@@ -47,6 +48,7 @@ export const TextInput = ({
     size: 14,
     width: 20,
     margin: "0",
+    bg: 'background',
     iconColor: theme.colors.error
   }), /*#__PURE__*/React.createElement(Text, {
     variant: "bodySmall",

package/lib/module/components/TextInput.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","TextInput","T","ToggleButton","useTheme","View","IconButton","Text","useRestyle","spacing","border","backgroundColor","backgroundColorShorthand","composeRestyleFunctions","spacingShorthand","layout","position","restyleFunctions","TextInputStyled","rest","props","createElement","errorMessage","secureTextEntry","status","setStatus","useState","onButtonToggle","shouldShowPassword","theme","justifyContent","_extends","width","pt","alignSelf","icon","size","onPress","Fragment","flexDirection","alignItems","pb","margin","iconColor","colors","error","variant","color"],"sourceRoot":"../../../src","sources":["components/TextInput.tsx"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SACEC,SAAS,IAAIC,CAAC,EAEdC,YAAY,EACZC,QAAQ,QACH,oBAAoB;AAC3B,SAASC,IAAI,QAAQ,QAAQ;AAC7B,SAASC,UAAU,QAAQ,cAAc;AACzC,SAASC,IAAI,QAAQ,QAAQ;AAC7B,SACEC,UAAU,EACVC,OAAO,EACPC,MAAM,EACNC,eAAe,EACfC,wBAAwB,EAIxBC,uBAAuB,EAIvBC,gBAAgB,EAChBC,MAAM,EACNC,QAAQ,QAEH,kBAAkB;AAWzB,MAAMC,gBAAgB,GAAGJ,uBAAuB,CAA0B,CACxEJ,OAAO,EACPK,gBAAgB,EAChBC,MAAM,EACNC,QAAQ,EACRN,MAAM,EACNC,eAAe,EACfC,wBAAwB,CACzB,CAAC;AAOF,OAAO,MAAMM,eAAe,GAAGA,CAAC;EAAE,GAAGC;AAAY,CAAC,KAAK;EACrD,MAAMC,KAAK,GAAGZ,UAAU,CAACS,gBAAgB,EAASE,IAAI,CAAC;EAEvD,oBAAOnB,KAAA,CAAAqB,aAAA,CAACnB,CAAC,EAAKkB,KAAQ,CAAC;AACzB,CAAC;AAED,OAAO,MAAMnB,SAA0B,GAAGA,CAAC;EACzCqB,YAAY;EACZC,eAAe;EACf,GAAGJ;AACL,CAAC,KAAK;EACJ,MAAM,CAACK,MAAM,EAAEC,SAAS,CAAC,GAAGzB,KAAK,CAAC0B,QAAQ,CAAC,SAAS,CAAC;EAErD,MAAMC,cAAc,GAAGA,CAAA,KAAM;IAC3BF,SAAS,CAACD,MAAM,KAAK,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC;EAC3D,CAAC;EAED,MAAMI,kBAAkB,GAAGJ,MAAM,KAAK,SAAS;EAC/C,MAAMK,KAAK,GAAGzB,QAAQ,CAAC,CAAC;EACxB,oBACEJ,KAAA,CAAAqB,aAAA,CAAChB,IAAI,qBACHL,KAAA,CAAAqB,aAAA,CAAChB,IAAI;IAACyB,cAAc,EAAC;EAAQ,gBAC3B9B,KAAA,CAAAqB,aAAA,CAACH,eAAe,EAAAa,QAAA;IACdC,KAAK,EAAC,MAAM;IACZT,eAAe,EAAEK,kBAAkB,IAAIL;EAAgB,GACnDJ,IAAI,CACT,CAAC,EACDI,eAAe,iBACdvB,KAAA,CAAAqB,aAAA,CAAChB,IAAI;IACH4B,EAAE,EAAC,GAAG;IACNH,cAAc,EAAC,QAAQ;IACvBI,SAAS,EAAC,UAAU;IACpBlB,QAAQ,EAAC,UAAU;IACnBgB,KAAK,EAAE;EAAG,gBAEVhC,KAAA,CAAAqB,aAAA,CAAClB,YAAY;IACXgC,IAAI,EAAEP,kBAAkB,GAAG,KAAK,GAAG,SAAU;IAC7CQ,IAAI,EAAE,EAAG;IACTC,OAAO,EAAEV;EAAe,CACzB,CACG,CAEJ,CAAC,EAEN,CAAC,CAACL,YAAY,iBACbtB,KAAA,CAAAqB,aAAA,CAAArB,KAAA,CAAAsC,QAAA,qBACEtC,KAAA,CAAAqB,aAAA,CAAChB,IAAI;IAACkC,aAAa,EAAC,KAAK;IAACC,UAAU,EAAC,QAAQ;IAACC,EAAE,EAAC;EAAG,gBAClDzC,KAAA,CAAAqB,aAAA,CAACf,UAAU;IACT6B,IAAI,EAAC,sBAAsB;IAC3BC,IAAI,EAAE,EAAG;IACTJ,KAAK,EAAE,EAAG;IACVU,MAAM,EAAC,GAAG;IACVC,SAAS,EAAEd,KAAK,CAACe,MAAM,CAACC;EAAM,CAC/B,CAAC,eACF7C,KAAA,CAAAqB,aAAA,CAACd,IAAI;IAACuC,OAAO,EAAC,WAAW;IAACC,KAAK,EAAC;EAAO,GACpCzB,YACG,CACF,CACN,CAEA,CAAC;AAEX,CAAC"}
+{"version":3,"names":["React","TextInput","T","ToggleButton","useTheme","View","IconButton","Text","useRestyle","spacing","border","backgroundColor","backgroundColorShorthand","composeRestyleFunctions","spacingShorthand","layout","position","restyleFunctions","TextInputStyled","rest","props","createElement","errorMessage","secureTextEntry","rightIcon","status","setStatus","useState","onButtonToggle","shouldShowPassword","theme","justifyContent","_extends","width","pt","alignSelf","icon","size","onPress","Fragment","flexDirection","alignItems","pb","margin","bg","iconColor","colors","error","variant","color"],"sourceRoot":"../../../src","sources":["components/TextInput.tsx"],"mappings":"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"}

package/lib/typescript/src/auth/screens/LoginScreen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LoginScreen.d.ts","sourceRoot":"","sources":["../../../../../src/auth/screens/LoginScreen.tsx"],"names":[],"mappings":";AA4BA,eAAO,MAAM,WAAW,mBA2IvB,CAAC"}
+{"version":3,"file":"LoginScreen.d.ts","sourceRoot":"","sources":["../../../../../src/auth/screens/LoginScreen.tsx"],"names":[],"mappings":";AA6BA,eAAO,MAAM,WAAW,mBAoIvB,CAAC"}

package/lib/typescript/src/auth/screens/ResetPassword.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ResetPassword.d.ts","sourceRoot":"","sources":["../../../../../src/auth/screens/ResetPassword.tsx"],"names":[],"mappings":";AAoBA,eAAO,MAAM,mBAAmB,mBAmE/B,CAAC"}
+{"version":3,"file":"ResetPassword.d.ts","sourceRoot":"","sources":["../../../../../src/auth/screens/ResetPassword.tsx"],"names":[],"mappings":";AAqBA,eAAO,MAAM,mBAAmB,mBAsE/B,CAAC"}

package/lib/typescript/src/auth/screens/SignUp.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SignUp.d.ts","sourceRoot":"","sources":["../../../../../src/auth/screens/SignUp.tsx"],"names":[],"mappings":";AAuBA,MAAM,MAAM,SAAS,GAAG;IACtB,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,eAAO,MAAM,YAAY,mBAqJxB,CAAC"}
+{"version":3,"file":"SignUp.d.ts","sourceRoot":"","sources":["../../../../../src/auth/screens/SignUp.tsx"],"names":[],"mappings":";AAwBA,MAAM,MAAM,SAAS,GAAG;IACtB,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,eAAO,MAAM,YAAY,mBAwJxB,CAAC"}

package/lib/typescript/src/auth/screens/SignUpPassword.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SignUpPassword.d.ts","sourceRoot":"","sources":["../../../../../src/auth/screens/SignUpPassword.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,KAAK,mBAAmB,GAAG;IACzB,KAAK,EAAE,SAAS,CAAC,aAAa,EAAE,gBAAgB,CAAC,CAAC;CACnD,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAuGxD,CAAC"}
+{"version":3,"file":"SignUpPassword.d.ts","sourceRoot":"","sources":["../../../../../src/auth/screens/SignUpPassword.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,KAAK,mBAAmB,GAAG;IACzB,KAAK,EAAE,SAAS,CAAC,aAAa,EAAE,gBAAgB,CAAC,CAAC;CACnD,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA0GxD,CAAC"}

package/lib/typescript/src/auth/screens/VerifyPhoneNumber.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VerifyPhoneNumber.d.ts","sourceRoot":"","sources":["../../../../../src/auth/screens/VerifyPhoneNumber.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,KAAK,4BAA4B,GAAG;IAClC,KAAK,EAAE,SAAS,CAAC,aAAa,EAAE,mBAAmB,CAAC,CAAC;CACtD,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAC5C,4BAA4B,CA6E7B,CAAC"}
+{"version":3,"file":"VerifyPhoneNumber.d.ts","sourceRoot":"","sources":["../../../../../src/auth/screens/VerifyPhoneNumber.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,KAAK,4BAA4B,GAAG;IAClC,KAAK,EAAE,SAAS,CAAC,aAAa,EAAE,mBAAmB,CAAC,CAAC;CACtD,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAC5C,4BAA4B,CAgF7B,CAAC"}

package/lib/typescript/src/components/TextInput.d.ts

@@ -5,6 +5,7 @@ import { type ThemeType } from '../theme';
 type RestyleProps = SpacingProps<ThemeType> & SpacingShorthandProps<ThemeType> & LayoutProps<ThemeType> & PositionProps<ThemeType> & BorderProps<ThemeType> & BackgroundColorProps<ThemeType> & BackgroundColorShorthandProps<ThemeType>;
 type Props = RestyleProps & TextInputProps & {
     errorMessage?: string;
+    rightIcon?: React.ReactNode;
 };
 export declare const TextInputStyled: ({ ...rest }: Props) => JSX.Element;
 export declare const TextInput: React.FC<Props>;

package/lib/typescript/src/components/TextInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../src/components/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAEL,KAAK,cAAc,EAGpB,MAAM,oBAAoB,CAAC;AAI5B,OAAO,EAML,KAAK,YAAY,EACjB,KAAK,WAAW,EAChB,KAAK,oBAAoB,EAEzB,KAAK,qBAAqB,EAC1B,KAAK,WAAW,EAChB,KAAK,aAAa,EAIlB,KAAK,6BAA6B,EACnC,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,UAAU,CAAC;AAE1C,KAAK,YAAY,GAAG,YAAY,CAAC,SAAS,CAAC,GACzC,qBAAqB,CAAC,SAAS,CAAC,GAChC,WAAW,CAAC,SAAS,CAAC,GACtB,aAAa,CAAC,SAAS,CAAC,GACxB,WAAW,CAAC,SAAS,CAAC,GACtB,oBAAoB,CAAC,SAAS,CAAC,GAC/B,6BAA6B,CAAC,SAAS,CAAC,CAAC;AAY3C,KAAK,KAAK,GAAG,YAAY,GACvB,cAAc,GAAG;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEJ,eAAO,MAAM,eAAe,gBAAiB,KAAK,gBAIjD,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAwDrC,CAAC"}
+{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../src/components/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAEL,KAAK,cAAc,EAGpB,MAAM,oBAAoB,CAAC;AAI5B,OAAO,EAML,KAAK,YAAY,EACjB,KAAK,WAAW,EAChB,KAAK,oBAAoB,EAEzB,KAAK,qBAAqB,EAC1B,KAAK,WAAW,EAChB,KAAK,aAAa,EAIlB,KAAK,6BAA6B,EACnC,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,UAAU,CAAC;AAE1C,KAAK,YAAY,GAAG,YAAY,CAAC,SAAS,CAAC,GACzC,qBAAqB,CAAC,SAAS,CAAC,GAChC,WAAW,CAAC,SAAS,CAAC,GACtB,aAAa,CAAC,SAAS,CAAC,GACxB,WAAW,CAAC,SAAS,CAAC,GACtB,oBAAoB,CAAC,SAAS,CAAC,GAC/B,6BAA6B,CAAC,SAAS,CAAC,CAAC;AAY3C,KAAK,KAAK,GAAG,YAAY,GACvB,cAAc,GAAG;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B,CAAC;AAEJ,eAAO,MAAM,eAAe,gBAAiB,KAAK,gBAIjD,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA4DrC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiosinc/commons-rn",
-  "version": "0.1.19",
+  "version": "0.1.20",
   "description": "Common Code",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/src/auth/screens/LoginScreen.tsx

@@ -7,6 +7,7 @@ import {
   LinkButton,
   KeyboardAvoidingView,
   Snackbar,
+  Header,
 } from '../../components';
 import { type NavigationProp, useNavigation } from '@react-navigation/native';
 import React, { useEffect, useState } from 'react';
@@ -64,105 +65,98 @@ export const LoginScreen = () => {
   };
 
   return (
-    <ParentView px="16" flex={1} justifyContent="center">
-      <KeyboardAvoidingView
-        alignSelf="center"
-        justifyContent={'center'}
-        width={{ phone: '100%', tablet: 372 }}
-      >
-        <View alignItems="center">
-          <AppLogo />
-          <Text py="48" variant="titleLarge">
-            {t('authentication.logIn')}
-          </Text>
-        </View>
-        <Controller
-          control={control}
-          render={({ field: { onChange, onBlur, value } }) => {
-            return (
-              <TextInput
-                my="5"
-                keyboardType="email-address"
-                autoCapitalize="none"
-                mode="outlined"
-                autoComplete="email"
-                error={!!errors.email?.message}
-                errorMessage={errors.email?.message}
-                onBlur={onBlur}
-                onChangeText={onChange}
-                value={value}
-                label={t('authentication.email')}
-              />
-            );
-          }}
-          name="email"
-        />
-        <Controller
-          control={control}
-          render={({ field: { onChange, onBlur, value } }) => {
-            return (
-              <TextInput
-                my="5"
-                secureTextEntry={true}
-                mode="outlined"
-                autoComplete="current-password"
-                error={!!errors.password?.message}
-                errorMessage={errors.password?.message}
-                onBlur={onBlur}
-                onChangeText={onChange}
-                value={value}
-                label={t('authentication.password')}
-              />
-            );
-          }}
-          name="password"
-        />
-        <LinkButton
-          alignSelf="flex-end"
-          mode="text"
-          onPress={() => {
-            navigation.navigate('ResetPassword');
-          }}
-        >
-          {t('authentication.forgotPassword')}
-        </LinkButton>
-        <Button
-          loading={isLoading}
-          mt="38"
-          mode="contained"
-          onPress={handleSubmit(onSubmit)}
+    <ParentView px="16">
+      <Header />
+      <View flex={1} justifyContent={'center'}>
+        <KeyboardAvoidingView
+          alignSelf="center"
+          justifyContent={'center'}
+          width={{ phone: '100%', tablet: 372 }}
         >
-          {t('authentication.logIn')}
-        </Button>
-        {Config.APP_NAME !== 'git' && (
-          <View
-            alignItems="center"
-            justifyContent="center"
-            pt="8"
-            flexDirection="row"
-          >
-            <Text variant="labelLarge">{t('authentication.newToApp')}</Text>
-            <LinkButton
-              mode="text"
-              onPress={() => {
-                navigation.navigate('SignUp');
-              }}
-            >
-              {t('authentication.signUp')}
-            </LinkButton>
+          <View alignItems="center">
+            <AppLogo />
+            <Text py="48" variant="titleLarge">
+              {t('authentication.logIn')}
+            </Text>
           </View>
-        )}
-        {navigation.canGoBack() && (
+          <Controller
+            control={control}
+            render={({ field: { onChange, onBlur, value } }) => {
+              return (
+                <TextInput
+                  my="5"
+                  keyboardType="email-address"
+                  autoCapitalize="none"
+                  mode="outlined"
+                  autoComplete="email"
+                  error={!!errors.email?.message}
+                  errorMessage={errors.email?.message}
+                  onBlur={onBlur}
+                  onChangeText={onChange}
+                  value={value}
+                  label={t('authentication.email')}
+                />
+              );
+            }}
+            name="email"
+          />
+          <Controller
+            control={control}
+            render={({ field: { onChange, onBlur, value } }) => {
+              return (
+                <TextInput
+                  my="5"
+                  secureTextEntry={true}
+                  mode="outlined"
+                  autoComplete="current-password"
+                  error={!!errors.password?.message}
+                  errorMessage={errors.password?.message}
+                  onBlur={onBlur}
+                  onChangeText={onChange}
+                  value={value}
+                  label={t('authentication.password')}
+                />
+              );
+            }}
+            name="password"
+          />
           <LinkButton
+            alignSelf="flex-end"
             mode="text"
             onPress={() => {
-              navigation.goBack();
+              navigation.navigate('ResetPassword');
             }}
           >
-            {t('cancel')}
+            {t('authentication.forgotPassword')}
           </LinkButton>
-        )}
-      </KeyboardAvoidingView>
+          <Button
+            loading={isLoading}
+            mt="38"
+            mode="contained"
+            onPress={handleSubmit(onSubmit)}
+          >
+            {t('authentication.logIn')}
+          </Button>
+          {Config.APP_NAME !== 'git' && (
+            <View
+              alignItems="center"
+              justifyContent="center"
+              pt="8"
+              flexDirection="row"
+            >
+              <Text variant="labelLarge">{t('authentication.newToApp')}</Text>
+              <LinkButton
+                mode="text"
+                onPress={() => {
+                  navigation.navigate('SignUp');
+                }}
+              >
+                {t('authentication.signUp')}
+              </LinkButton>
+            </View>
+          )}
+        </KeyboardAvoidingView>
+      </View>
     </ParentView>
   );
 };

package/src/auth/screens/ResetPassword.tsx

@@ -5,6 +5,7 @@ import {
   TextInput,
   Button,
   KeyboardAvoidingView,
+  Header,
 } from '../../components';
 import { type NavigationProp, useNavigation } from '@react-navigation/native';
 import React from 'react';
@@ -40,49 +41,52 @@ export const ResetPasswordScreen = () => {
   };
 
   return (
-    <ParentView justifyContent="center" px="16">
-      <KeyboardAvoidingView
-        alignSelf="center"
-        justifyContent={'center'}
-        width={{ phone: '100%', tablet: 372 }}
-      >
-        <View alignItems="center">
-          <Text py="48" textAlign="center" variant="titleLarge">
-            {t('authentication.enterYour')}
-          </Text>
-        </View>
-        <Controller
-          control={control}
-          render={({ field: { onChange, onBlur, value } }) => {
-            return (
-              <TextInput
-                keyboardType="email-address"
-                autoCapitalize="none"
-                mode="outlined"
-                autoComplete="email"
-                error={!!errors.email?.message}
-                errorMessage={errors.email?.message}
-                onBlur={onBlur}
-                onChangeText={onChange}
-                value={value}
-                label={t('authentication.email')}
-              />
-            );
-          }}
-          name="email"
-        />
-        <Button
-          loading={isLoading}
-          mt="16"
-          mode="contained"
-          onPress={handleSubmit(onSubmit)}
+    <ParentView px="16">
+      <Header />
+      <View flex={1} justifyContent={'center'}>
+        <KeyboardAvoidingView
+          alignSelf="center"
+          justifyContent={'center'}
+          width={{ phone: '100%', tablet: 372 }}
         >
-          {t('authentication.resetPassword')}
-        </Button>
-        <Button mt="48" mode="outlined" onPress={navigation.goBack}>
-          {t('cancel')}
-        </Button>
-      </KeyboardAvoidingView>
+          <View alignItems="center">
+            <Text py="48" textAlign="center" variant="titleLarge">
+              {t('authentication.enterYour')}
+            </Text>
+          </View>
+          <Controller
+            control={control}
+            render={({ field: { onChange, onBlur, value } }) => {
+              return (
+                <TextInput
+                  keyboardType="email-address"
+                  autoCapitalize="none"
+                  mode="outlined"
+                  autoComplete="email"
+                  error={!!errors.email?.message}
+                  errorMessage={errors.email?.message}
+                  onBlur={onBlur}
+                  onChangeText={onChange}
+                  value={value}
+                  label={t('authentication.email')}
+                />
+              );
+            }}
+            name="email"
+          />
+          <Button
+            loading={isLoading}
+            mt="16"
+            mode="contained"
+            onPress={handleSubmit(onSubmit)}
+          >
+            {t('authentication.resetPassword')}
+          </Button>
+          <Button mt="48" mode="outlined" onPress={navigation.goBack}>
+            {t('cancel')}
+          </Button>
+        </KeyboardAvoidingView>
+      </View>
     </ParentView>
   );
 };

package/src/auth/screens/SignUp.tsx

@@ -6,6 +6,7 @@ import {
   Button,
   LinkButton,
   KeyboardAvoidingView,
+  Header,
 } from '../../components';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
@@ -59,36 +60,19 @@ export const SignUpScreen = () => {
 
   return (
     <ParentView px="16" justifyContent="center">
-      <KeyboardAvoidingView
-        alignSelf="center"
-        justifyContent={'center'}
-        width={{ phone: '100%', tablet: 372 }}
-      >
-        <View alignItems="center">
-          <Text pb="40" variant="titleLarge">
-            {t('authentication.createAccountTitle')}
-          </Text>
-        </View>
-        <View justifyContent="center">
-          <Controller
-            control={control}
-            render={({ field: { onChange, onBlur, value } }) => {
-              return (
-                <TextInput
-                  my="5"
-                  mode="outlined"
-                  error={!!errors.displayName?.message}
-                  errorMessage={errors.displayName?.message}
-                  onBlur={onBlur}
-                  onChangeText={onChange}
-                  value={value}
-                  label={t('authentication.displayName')}
-                />
-              );
-            }}
-            name="displayName"
-          />
-          {Config.APP_NAME !== 'gusteau' && (
+      <Header />
+      <View flex={1} justifyContent={'center'}>
+        <KeyboardAvoidingView
+          alignSelf="center"
+          justifyContent={'center'}
+          width={{ phone: '100%', tablet: 372 }}
+        >
+          <View alignItems="center">
+            <Text pb="40" variant="titleLarge">
+              {t('authentication.createAccountTitle')}
+            </Text>
+          </View>
+          <View justifyContent="center">
             <Controller
               control={control}
               render={({ field: { onChange, onBlur, value } }) => {
@@ -96,85 +80,105 @@ export const SignUpScreen = () => {
                   <TextInput
                     my="5"
                     mode="outlined"
-                    error={!!errors.name?.message}
-                    errorMessage={errors.name?.message}
+                    error={!!errors.displayName?.message}
+                    errorMessage={errors.displayName?.message}
                     onBlur={onBlur}
                     onChangeText={onChange}
                     value={value}
-                    label={t('authentication.businessName')}
+                    label={t('authentication.displayName')}
                   />
                 );
               }}
-              name="name"
+              name="displayName"
             />
-          )}
-          <Controller
-            control={control}
-            render={({ field: { onChange, onBlur, value } }) => {
-              return (
-                <TextInput
-                  my="5"
-                  autoCapitalize="none"
-                  keyboardType="email-address"
-                  mode="outlined"
-                  autoComplete="email"
-                  error={!!errors.email?.message}
-                  errorMessage={errors.email?.message}
-                  onBlur={onBlur}
-                  onChangeText={onChange}
-                  value={value}
-                  label={t('authentication.email')}
-                />
-              );
-            }}
-            name="email"
-          />
-          <Controller
-            control={control}
-            render={({ field: { onChange, onBlur, value } }) => {
-              return (
-                <TextInput
-                  my="5"
-                  mode="outlined"
-                  error={!!errors.phoneNumber?.message}
-                  errorMessage={errors.phoneNumber?.message}
-                  onBlur={onBlur}
-                  onChangeText={onChange}
-                  value={value}
-                  label={t('authentication.phoneNumber')}
-                />
-              );
-            }}
-            name="phoneNumber"
-          />
-        </View>
-        <Button
-          loading={isCheckingIsRegistered}
-          mt="48"
-          onPress={handleSubmit(onSubmit)}
-          mode="contained"
-        >
-          {t('authentication.createAccount')}
-        </Button>
-        <View flexDirection="row" flexWrap="wrap" pt="10">
-          <Text>{t('authentication.byContinue')}</Text>
-          <LinkButton
-            labelStyle={style.termsAndConditions}
-            mode="text"
-            onPress={() => Linking.openURL(TERMS_OF_SERVICE)}
-          >
-            {t('authentication.termsAndConditions')}
-          </LinkButton>
-          <Text>{t('authentication.and')}</Text>
-          <LinkButton
-            labelStyle={style.privacyPolicy}
-            mode="text"
-            onPress={() => Linking.openURL(PRIVACY_POLICY)}
+            {Config.APP_NAME !== 'gusteau' && (
+              <Controller
+                control={control}
+                render={({ field: { onChange, onBlur, value } }) => {
+                  return (
+                    <TextInput
+                      my="5"
+                      mode="outlined"
+                      error={!!errors.name?.message}
+                      errorMessage={errors.name?.message}
+                      onBlur={onBlur}
+                      onChangeText={onChange}
+                      value={value}
+                      label={t('authentication.businessName')}
+                    />
+                  );
+                }}
+                name="name"
+              />
+            )}
+            <Controller
+              control={control}
+              render={({ field: { onChange, onBlur, value } }) => {
+                return (
+                  <TextInput
+                    my="5"
+                    autoCapitalize="none"
+                    keyboardType="email-address"
+                    mode="outlined"
+                    autoComplete="email"
+                    error={!!errors.email?.message}
+                    errorMessage={errors.email?.message}
+                    onBlur={onBlur}
+                    onChangeText={onChange}
+                    value={value}
+                    label={t('authentication.email')}
+                  />
+                );
+              }}
+              name="email"
+            />
+            <Controller
+              control={control}
+              render={({ field: { onChange, onBlur, value } }) => {
+                return (
+                  <TextInput
+                    my="5"
+                    mode="outlined"
+                    error={!!errors.phoneNumber?.message}
+                    errorMessage={errors.phoneNumber?.message}
+                    onBlur={onBlur}
+                    onChangeText={onChange}
+                    value={value}
+                    label={t('authentication.phoneNumber')}
+                  />
+                );
+              }}
+              name="phoneNumber"
+            />
+          </View>
+          <Button
+            loading={isCheckingIsRegistered}
+            mt="48"
+            onPress={handleSubmit(onSubmit)}
+            mode="contained"
           >
-            {t('authentication.privacyPolicy')}
-          </LinkButton>
-        </View>
-      </KeyboardAvoidingView>
+            {t('authentication.createAccount')}
+          </Button>
+          <View flexDirection="row" flexWrap="wrap" pt="10">
+            <Text>{t('authentication.byContinue')}</Text>
+            <LinkButton
+              labelStyle={style.termsAndConditions}
+              mode="text"
+              onPress={() => Linking.openURL(TERMS_OF_SERVICE)}
+            >
+              {t('authentication.termsAndConditions')}
+            </LinkButton>
+            <Text>{t('authentication.and')}</Text>
+            <LinkButton
+              labelStyle={style.privacyPolicy}
+              mode="text"
+              onPress={() => Linking.openURL(PRIVACY_POLICY)}
+            >
+              {t('authentication.privacyPolicy')}
+            </LinkButton>
+          </View>
+        </KeyboardAvoidingView>
+      </View>
     </ParentView>
   );
 };