@kiosinc/commons-rn 0.1.18 → 0.1.20

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>
   );
 };

package/src/auth/screens/SignUpPassword.tsx

@@ -5,6 +5,7 @@ import {
   Button,
   KeyboardAvoidingView,
   TextInput,
+  Header,
 } from '../../components';
 import type { RouteProp } from '@react-navigation/native';
 import React from 'react';
@@ -57,72 +58,75 @@ export const SignUpPassword: React.FC<SignUpPasswordProps> = ({ route }) => {
 
   return (
     <ParentView justifyContent="center" px="16">
-      <KeyboardAvoidingView
-        alignSelf="center"
-        justifyContent={'center'}
-        width={{ phone: '100%', tablet: 372 }}
-      >
-        <View alignItems="center">
-          <Text textAlign="center" variant="titleLarge">
-            {t('authentication.createPassword')}
-          </Text>
-        </View>
-        <Controller
-          control={control}
-          render={({ field: { onChange, onBlur, value } }) => {
-            const passwordErrors = Object.values(
-              errors.password?.types ?? []
-            ).flat();
+      <Header />
+      <View flex={1} justifyContent={'center'}>
+        <KeyboardAvoidingView
+          alignSelf="center"
+          justifyContent={'center'}
+          width={{ phone: '100%', tablet: 372 }}
+        >
+          <View alignItems="center">
+            <Text textAlign="center" variant="titleLarge">
+              {t('authentication.createPassword')}
+            </Text>
+          </View>
+          <Controller
+            control={control}
+            render={({ field: { onChange, onBlur, value } }) => {
+              const passwordErrors = Object.values(
+                errors.password?.types ?? []
+              ).flat();
 
-            return (
-              <View mt="48">
-                <TextInput
-                  error={!!errors.password?.message}
-                  my="5"
-                  secureTextEntry={true}
-                  mode="outlined"
-                  autoComplete="new-password"
-                  onBlur={onBlur}
-                  onChangeText={onChange}
-                  value={value}
-                  label={t('authentication.password')}
-                />
-                <Text pt="4">{t('authentication.passwordMustContain')}</Text>
-                {passwordExpectations.map((expectation, index) => {
-                  const didExpectationFoundInErrors =
-                    passwordErrors?.includes(expectation) ?? false;
+              return (
+                <View mt="48">
+                  <TextInput
+                    error={!!errors.password?.message}
+                    my="5"
+                    secureTextEntry={true}
+                    mode="outlined"
+                    autoComplete="new-password"
+                    onBlur={onBlur}
+                    onChangeText={onChange}
+                    value={value}
+                    label={t('authentication.password')}
+                  />
+                  <Text pt="4">{t('authentication.passwordMustContain')}</Text>
+                  {passwordExpectations.map((expectation, index) => {
+                    const didExpectationFoundInErrors =
+                      passwordErrors?.includes(expectation) ?? false;
 
-                  return (
-                    <View flexDirection="row" alignItems="center" key={index}>
-                      <Text
-                        variant="bodySmall"
-                        color={
-                          isSubmitted
-                            ? didExpectationFoundInErrors
-                              ? 'error'
-                              : 'primary'
-                            : 'onBackground'
-                        }
-                      >
-                        {'•  ' + expectation}
-                      </Text>
-                    </View>
-                  );
-                })}
-              </View>
-            );
-          }}
-          name="password"
-        />
-        <Button
-          mt="48"
-          loading={isVerifyingPhoneNumber}
-          mode="contained"
-          onPress={handleSubmit(onSubmit)}
-        >
-          {t('continue')}
-        </Button>
-      </KeyboardAvoidingView>
+                    return (
+                      <View flexDirection="row" alignItems="center" key={index}>
+                        <Text
+                          variant="bodySmall"
+                          color={
+                            isSubmitted
+                              ? didExpectationFoundInErrors
+                                ? 'error'
+                                : 'primary'
+                              : 'onBackground'
+                          }
+                        >
+                          {'•  ' + expectation}
+                        </Text>
+                      </View>
+                    );
+                  })}
+                </View>
+              );
+            }}
+            name="password"
+          />
+          <Button
+            mt="48"
+            loading={isVerifyingPhoneNumber}
+            mode="contained"
+            onPress={handleSubmit(onSubmit)}
+          >
+            {t('continue')}
+          </Button>
+        </KeyboardAvoidingView>
+      </View>
     </ParentView>
   );
 };

package/src/auth/screens/VerifyPhoneNumber.tsx

@@ -6,6 +6,7 @@ import {
   LinkButton,
   OtpInputs,
   KeyboardAvoidingView,
+  Header,
 } from '../../components';
 import type { RouteProp } from '@react-navigation/native';
 import React from 'react';
@@ -47,58 +48,61 @@ export const VerifyPhoneNumberScreen: React.FC<
 
   return (
     <ParentView justifyContent="center" px="16">
-      <KeyboardAvoidingView
-        alignSelf="center"
-        justifyContent={'center'}
-        width={{ phone: '100%', tablet: 372 }}
-      >
-        <View alignItems="center">
-          <Text pb="8" textAlign="center" variant="titleLarge">
-            {t('authentication.verifyYourNumber')}
-          </Text>
-          <Text
-            color="onSurfaceVariant"
-            pb="48"
-            textAlign="center"
-            variant="bodyLarge"
-          >
-            {t('authentication.codeSent')}
-          </Text>
-        </View>
-        <Controller
-          control={control}
-          render={({ field: { onChange, value } }) => {
-            return (
-              <OtpInputs
-                handleChange={onChange}
-                code={value}
-                numberOfInputs={6}
-              />
-            );
-          }}
-          name="code"
-        />
-        <Button
-          mt="48"
-          disabled={isResendingCode || isSigningUp}
-          loading={isSigningUp}
-          mode="contained"
-          onPress={handleSubmit(onSubmit)}
-        >
-          {t('continue')}
-        </Button>
-        <LinkButton
-          disabled={isResendingCode || isSigningUp}
-          loading={isResendingCode}
-          mt="48"
-          mode="text"
-          onPress={() => {
-            resendCode(params as any);
-          }}
+      <Header />
+      <View flex={1} justifyContent={'center'}>
+        <KeyboardAvoidingView
+          alignSelf="center"
+          justifyContent={'center'}
+          width={{ phone: '100%', tablet: 372 }}
         >
-          {t('authentication.resendCode')}
-        </LinkButton>
-      </KeyboardAvoidingView>
+          <View alignItems="center">
+            <Text pb="8" textAlign="center" variant="titleLarge">
+              {t('authentication.verifyYourNumber')}
+            </Text>
+            <Text
+              color="onSurfaceVariant"
+              pb="48"
+              textAlign="center"
+              variant="bodyLarge"
+            >
+              {t('authentication.codeSent')}
+            </Text>
+          </View>
+          <Controller
+            control={control}
+            render={({ field: { onChange, value } }) => {
+              return (
+                <OtpInputs
+                  handleChange={onChange}
+                  code={value}
+                  numberOfInputs={6}
+                />
+              );
+            }}
+            name="code"
+          />
+          <Button
+            mt="48"
+            disabled={isResendingCode || isSigningUp}
+            loading={isSigningUp}
+            mode="contained"
+            onPress={handleSubmit(onSubmit)}
+          >
+            {t('continue')}
+          </Button>
+          <LinkButton
+            disabled={isResendingCode || isSigningUp}
+            loading={isResendingCode}
+            mt="48"
+            mode="text"
+            onPress={() => {
+              resendCode(params as any);
+            }}
+          >
+            {t('authentication.resendCode')}
+          </LinkButton>
+        </KeyboardAvoidingView>
+      </View>
     </ParentView>
   );
 };

package/src/components/Alert.tsx

@@ -2,6 +2,9 @@ import React, { useState, useCallback } from 'react';
 import { Dialog, Text, useTheme } from 'react-native-paper';
 import { t } from 'i18next';
 import { Button } from './Button';
+import type { PlatformIOSStatic } from 'react-native';
+import { Platform } from 'react-native';
+import { StyleSheet } from 'react-native';
 
 interface ButtonProps {
   label: string;
@@ -85,9 +88,13 @@ export const Alert = () => {
 
   return (
     <Dialog
-      style={{
-        backgroundColor: theme.colors.background,
-      }}
+      style={
+        (Platform as PlatformIOSStatic).isPad
+          ? [styles.iPad, { backgroundColor: theme.colors.background }]
+          : {
+              backgroundColor: theme.colors.background,
+            }
+      }
       dismissable={isDismissable}
       dismissableBackButton={isDismissable}
       onDismiss={() => {
@@ -155,3 +162,7 @@ Alert.displayName = 'Alert';
 Alert.show = (params: AlertParams) => {
   rootLevelRef?.show(params);
 };
+
+const styles = StyleSheet.create({
+  iPad: { zIndex: 100, width: '30%', alignSelf: 'center' },
+});

package/src/components/Snackbar.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Platform, type PlatformIOSStatic, StyleSheet } from 'react-native';
 import { Snackbar as PSnackbar } from 'react-native-paper';
 
 interface SnackbarParams {
@@ -61,6 +62,7 @@ export const Snackbar = () => {
 
   return (
     <PSnackbar
+      style={(Platform as PlatformIOSStatic).isPad ? [styles.iPad] : {}}
       visible={isVisible}
       onDismiss={hide}
       action={
@@ -81,3 +83,7 @@ Snackbar.displayName = 'Snackbar';
 Snackbar.show = (params: SnackbarParams) => {
   rootLevelRef?.show(params);
 };
+
+const styles = StyleSheet.create({
+  iPad: { zIndex: 100, width: '30%', alignSelf: 'center' },
+});