@fadyshawky/react-native-magic 2.0.3 → 2.0.5

package/template/src/common/components/PrimaryTextInput.tsx

@@ -1,3 +1,4 @@
+import {GradientBorderView} from '@good-react-native/gradient-border';
 import React, {
   FC,
   memo,
@@ -17,14 +18,17 @@ import {
   TextInputProps,
   TextInputSubmitEditingEventData,
   TextStyle,
-  TouchableOpacity,
   View,
   ViewStyle,
 } from 'react-native';
 import {useTheme} from '../../core/theme/ThemeProvider';
+import {NewColors} from '../../core/theme/colors';
 import {isIos} from '../../core/theme/commonConsts';
+import {CommonSizes} from '../../core/theme/commonSizes';
 import {CommonStyles} from '../../core/theme/commonStyles';
+import {scaleHeight} from '../../core/theme/scaling';
 import {localization} from '../localization/localization';
+import {regexValidation} from '../validations/regexValidator';
 
 interface IProps extends TextInputProps {
   nextInputFocusRef?: MutableRefObject<any>;
@@ -33,6 +37,7 @@ interface IProps extends TextInputProps {
   label?: string;
   error?: string | null;
   hint?: string;
+  width?: ViewStyle['width'];
   autoComplete?:
     | 'off'
     | 'username'
@@ -50,30 +55,43 @@ interface IProps extends TextInputProps {
   required?: boolean;
   optional?: boolean;
   inputContainerStyle?: ViewStyle;
+  height?: ViewStyle['height'];
+  regex?: RegExp;
+  regexErrorMessage?: string;
 }
 
-const PrimaryTextInput: FC<IProps> = memo(
+export const PrimaryTextInput: FC<IProps> = memo(
   ({
     style,
-    containerStyle,
+    blurOnSubmit = true,
+    disableFullscreenUI = true,
+    enablesReturnKeyAutomatically = true,
+    underlineColorAndroid,
+    placeholderTextColor,
+    editable = true,
+    clearButtonMode = 'while-editing',
     label,
+    keyboardType = 'numeric',
     error,
     hint,
-    required,
-    optional,
+    containerStyle,
+    inputRef,
+    nextInputFocusRef,
+    onTouchStart,
     onFocus,
     onBlur,
     onSubmitEditing,
-    nextInputFocusRef,
-    inputRef,
-    onTouchStart,
-    editable = true,
+    required,
+    optional,
+    width,
+    height,
+    regex,
+    regexErrorMessage = 'Invalid format',
     ...props
   }) => {
     const [isFocused, setFocused] = useState<boolean>(false);
     const {theme} = useTheme();
-
-    const selectionColor = theme.colors.PlatinateBlue_700;
+    const [regexError, setRegexError] = useState<string | null>(null);
 
     const onLocalFocus = useCallback(
       (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
@@ -96,9 +114,8 @@ const PrimaryTextInput: FC<IProps> = memo(
         isFocused,
         error,
         onTouchStart ? true : editable,
-        theme,
       );
-    }, [isFocused, error, editable, onTouchStart, theme]);
+    }, [isFocused, error, editable, onTouchStart]);
 
     const onLocalSubmitEditing = useCallback(
       (e: NativeSyntheticEvent<TextInputSubmitEditingEventData>) => {
@@ -114,229 +131,202 @@ const PrimaryTextInput: FC<IProps> = memo(
       return onTouchStart ? 'none' : undefined;
     }, [onTouchStart]);
 
-    const styles = useMemo(() => {
-      const commonInputContainer: TextStyle = {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'center',
-        minHeight: theme.spacing.xxxLarge, // 32px
-        textAlignVertical: 'center',
-        textAlign: 'center',
-        backgroundColor: theme.colors.grayScale_0,
-        borderRadius: theme.borderRadius.large, // 12px
-        borderWidth: theme.borderWidth.small, // 1px
-        borderColor: theme.colors.grayScale_50,
-      };
+    const handleChangeText = useCallback(
+      (text: string) => {
+        setRegexError(null);
 
-      return StyleSheet.create({
-        container: {
-          flexDirection: 'column',
-        } as ViewStyle,
-        input: {
-          ...CommonStyles.normalText,
-          flex: 1,
-          textAlignVertical: 'center',
-          paddingStart: theme.spacing.xLarge, // 16px
-          ...Platform.select({
-            android: {
-              paddingEnd: theme.spacing.xLarge, // 16px
-            },
-          }),
-        } as TextStyle,
-        inputContainer: {
-          ...commonInputContainer,
-          ...Platform.select({
-            ios: {
-              paddingEnd: theme.spacing.xLarge, // 16px
-            },
-          }),
-        } as TextStyle,
-        errorInputContainer: {
-          ...commonInputContainer,
-          ...Platform.select({
-            android: {
-              borderColor: theme.colors.error_400,
-            },
-          }),
-        } as TextStyle,
-        disabledInputContainer: {
-          ...commonInputContainer,
-          ...Platform.select({
-            android: {
-              backgroundColor: theme.colors.grayScale_50,
-              borderColor: theme.colors.grayScale_50,
-            },
-          }),
-        } as TextStyle,
-        focusedInputContainer: {
-          ...commonInputContainer,
-          ...Platform.select({
-            android: {
-              borderColor: theme.colors.grayScale_50,
-            },
-          }),
-        } as TextStyle,
-        label: {
-          ...CommonStyles.body_regular,
-          paddingBottom: theme.spacing.small, // 4px
-        } as TextStyle,
-        hint: {
-          ...CommonStyles.normalText,
-          fontWeight: '200',
-          fontSize: theme.text.bodySmallRegular.fontSize, // 12px
-          lineHeight: theme.text.bodySmallRegular.lineHeight, // 16px
-          paddingTop: theme.spacing.small, // 4px
-        } as TextStyle,
-        error: {
-          ...CommonStyles.normalText,
-          color: theme.colors.error_400,
-          fontSize: theme.text.bodySmallRegular.fontSize, // 12px
-          lineHeight: theme.text.bodySmallRegular.lineHeight, // 16px
-          paddingTop: theme.spacing.small, // 4px
-        } as TextStyle,
-      });
-    }, [theme]);
+        if (regex) {
+          const validation = regexValidation(text, regex, regexErrorMessage);
+          if (!validation.isValid) {
+            setRegexError(validation.message);
+          }
+        }
+
+        if (props.onChangeText) {
+          props.onChangeText(text);
+        }
+      },
+      [regex, regexErrorMessage, props.onChangeText],
+    );
 
     return (
-      <View style={[styles.container, containerStyle]}>
-        <Label
-          text={label}
-          required={required}
-          optional={optional}
-          styles={styles}
-        />
-        <TouchableOpacity
-          style={[inputContainerStyle, props.inputContainerStyle]}
-          onPress={onTouchStart}
-          disabled={!onTouchStart}>
+      <View
+        style={{
+          justifyContent: 'space-between',
+          gap: CommonSizes.spacing.small,
+          width: width ?? '100%',
+        }}>
+        <GradientBorderView
+          gradientProps={{
+            colors: [theme.colors.mutedLavender, theme.colors.indigoBlue],
+          }}
+          style={{
+            borderWidth: CommonSizes.borderWidth.small,
+            borderRadius: CommonSizes.borderRadius.medium,
+            height: height ?? scaleHeight(84),
+            width: '100%',
+            backgroundColor: theme.colors.backgroundOpacity,
+          }}>
           <TextInput
             disableFullscreenUI={true}
             selectionColor={selectionColor}
             {...props}
             pointerEvents={pointerEvents}
             ref={inputRef}
-            style={[styles.input, style]}
+            style={[
+              {
+                ...theme.text.body1,
+                width: '100%',
+                zIndex: 2,
+                alignSelf: 'flex-start',
+                alignItems: 'center',
+                justifyContent: 'center',
+                flex: 1,
+                textAlignVertical: 'center',
+                paddingStart: CommonSizes.spacing.medium,
+                ...Platform.select({
+                  android: {
+                    paddingEnd: CommonSizes.spacing.medium,
+                  },
+                }),
+              },
+              style,
+            ]}
+            onChangeText={handleChangeText}
+            placeholderTextColor={theme.colors.tintColor}
             autoCapitalize="none"
             autoComplete="off"
+            keyboardType={keyboardType}
+            editable={editable}
           />
-        </TouchableOpacity>
-        <BottomText error={error} hint={hint} styles={styles} />
+        </GradientBorderView>
+        <BottomText error={error || regexError} hint={hint} />
       </View>
     );
   },
 );
 
-const Label: FC<{
-  text?: string;
-  required?: boolean;
-  optional?: boolean;
-  styles: any;
-}> = memo(({text, required, optional, styles}) => {
-  if (text != null) {
-    return (
-      <Text style={styles.label} numberOfLines={1}>
-        {text +
-          (required
-            ? localization.common.required
-            : optional
-            ? localization.common.optional
-            : '')}
-      </Text>
-    );
-  } else {
-    return null;
-  }
-});
+const Label: FC<{text?: string; required?: boolean; optional?: boolean}> = memo(
+  ({text, required, optional}) => {
+    const {theme} = useTheme();
+    if (text != null) {
+      return (
+        <Text
+          style={{
+            ...theme.text.label,
+            color: theme.colors.indigoBlue,
+          }}
+          numberOfLines={1}>
+          {text +
+            (required
+              ? localization.common.required
+              : optional
+              ? localization.common.optional
+              : '')}
+        </Text>
+      );
+    } else {
+      return null;
+    }
+  },
+);
 
-const BottomText: FC<{error?: string | null; hint?: string; styles: any}> =
-  memo(({error, hint, styles}) => {
+const BottomText: FC<{error?: string | null; hint?: string}> = memo(
+  ({error, hint}) => {
+    const {theme} = useTheme();
     if (error != null) {
-      return <Text style={styles.error}>{error}</Text>;
+      return (
+        <Text style={{...theme.text.body2, color: theme.colors.red}}>
+          {error}
+        </Text>
+      );
     } else if (hint != null) {
       return <Text style={styles.hint}>{hint}</Text>;
     } else {
       return null;
     }
-  });
+  },
+);
 
 function getInputContainerStyle(
   isFocused: boolean,
   error?: string | null,
   isEditable?: boolean,
-  theme?: any,
 ): ViewStyle {
-  const commonInputContainer: TextStyle = {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    minHeight: theme.spacing.xxxLarge, // 32px
-    textAlignVertical: 'center',
-    textAlign: 'center',
-    backgroundColor: theme.colors.grayScale_0,
-    borderRadius: theme.borderRadius.large, // 12px
-    borderWidth: theme.borderWidth.small, // 1px
-    borderColor: theme.colors.grayScale_50,
-  };
-
   if (isIos) {
-    return !isEditable
-      ? {
-          ...commonInputContainer,
-          ...Platform.select({
-            android: {
-              backgroundColor: theme.colors.grayScale_50,
-              borderColor: theme.colors.grayScale_50,
-            },
-          }),
-        }
-      : {
-          ...commonInputContainer,
-          ...Platform.select({
-            ios: {
-              paddingEnd: theme.spacing.xLarge, // 16px
-            },
-          }),
-        };
+    return !isEditable ? styles.disabledInputContainer : styles.inputContainer;
   } else {
     if (isFocused) {
-      return {
-        ...commonInputContainer,
-        ...Platform.select({
-          android: {
-            borderColor: theme.colors.grayScale_50,
-          },
-        }),
-      };
+      return styles.focusedInputContainer;
     } else if (!isEditable) {
-      return {
-        ...commonInputContainer,
-        ...Platform.select({
-          android: {
-            backgroundColor: theme.colors.grayScale_50,
-            borderColor: theme.colors.grayScale_50,
-          },
-        }),
-      };
+      return styles.disabledInputContainer;
     } else if (error) {
-      return {
-        ...commonInputContainer,
-        ...Platform.select({
-          android: {
-            borderColor: theme.colors.error_400,
-          },
-        }),
-      };
+      return styles.errorInputContainer;
     } else {
-      return {
-        ...commonInputContainer,
-        ...Platform.select({
-          ios: {
-            paddingEnd: theme.spacing.xLarge, // 16px
-          },
-        }),
-      };
+      return styles.inputContainer;
     }
   }
 }
 
-export {PrimaryTextInput};
+const selectionColor = NewColors.blueNormalActive;
+
+const commonInputContainer: TextStyle = {
+  flexDirection: 'row',
+  alignItems: 'center',
+  justifyContent: 'center',
+  minHeight: CommonSizes.spacing.extraLarge,
+  textAlignVertical: 'center',
+  textAlign: 'center',
+  width: '100%',
+  borderRadius: CommonSizes.borderRadius.medium,
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'column',
+  } as ViewStyle,
+  input: {
+    flex: 1,
+    textAlignVertical: 'center',
+    paddingStart: CommonSizes.spacing.medium,
+    ...Platform.select({
+      android: {
+        paddingEnd: CommonSizes.spacing.medium,
+      },
+    }),
+  } as TextStyle,
+  inputContainer: {
+    ...commonInputContainer,
+    ...Platform.select({
+      ios: {
+        paddingEnd: CommonSizes.spacing.medium,
+      },
+    }),
+  } as TextStyle,
+  errorInputContainer: {
+    ...commonInputContainer,
+    ...Platform.select({
+      android: {
+        borderColor: NewColors.red,
+      },
+    }),
+  } as TextStyle,
+  disabledInputContainer: {
+    ...commonInputContainer,
+  } as TextStyle,
+  focusedInputContainer: {
+    ...commonInputContainer,
+  } as TextStyle,
+  label: {
+    ...CommonStyles.body_regular,
+  } as TextStyle,
+  hint: {
+    ...CommonStyles.normalText,
+    fontWeight: '200',
+    lineHeight: CommonSizes.lineHeight.small,
+  } as TextStyle,
+  error: {
+    ...CommonStyles.normalText,
+    lineHeight: CommonSizes.lineHeight.small,
+  } as TextStyle,
+});

package/template/src/common/components/RadioIcon.tsx

@@ -1,6 +1,6 @@
 import React, {FC, memo, useMemo} from 'react';
 import {StyleSheet, View, ViewStyle} from 'react-native';
-import {PrimaryColors} from '../../core/theme/colors';
+import {NewColors} from '../../core/theme/colors';
 
 interface IProps {
   isSelected: boolean;
@@ -41,14 +41,14 @@ const commonInnerCircle: ViewStyle = {
 const styles = StyleSheet.create({
   outerCircle: {
     ...commonOuterCircle,
-    borderColor: PrimaryColors.PlatinateBlue_700,
+    borderColor: NewColors.blueNormalActive,
   } as ViewStyle,
   outerCircleSelected: {
     ...commonOuterCircle,
-    borderColor: PrimaryColors.PlatinateBlue_700,
+    borderColor: NewColors.blueNormalActive,
   } as ViewStyle,
   innerCircle: {
     ...commonInnerCircle,
-    backgroundColor: PrimaryColors.PlatinateBlue_700,
+    backgroundColor: NewColors.blueNormalActive,
   } as ViewStyle,
 });

package/template/src/common/components/SafeText.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import {Text, TextProps} from 'react-native';
+import {ensureString} from '../../core/utils/stringUtils';
+
+interface SafeTextProps extends TextProps {
+  children: React.ReactNode;
+}
+
+export const SafeText: React.FC<SafeTextProps> = ({children, ...props}) => {
+  // Process children to ensure all text nodes are strings
+  const processChildren = (node: React.ReactNode): React.ReactNode => {
+    // If it's a string or number, it's safe
+    if (typeof node === 'string' || typeof node === 'number') {
+      return node;
+    }
+
+    // If it's null or undefined, return empty string
+    if (node === null || node === undefined) {
+      return '';
+    }
+
+    // If it's a React element, process its children
+    if (React.isValidElement(node)) {
+      return React.cloneElement(
+        node,
+        node.props,
+        React.Children.map(node.props.children, processChildren),
+      );
+    }
+
+    // If it's an array, process each item
+    if (Array.isArray(node)) {
+      return node.map(processChildren);
+    }
+
+    // For any other value (objects, etc.), convert to string
+    return ensureString(node);
+  };
+
+  return <Text {...props}>{processChildren(children)}</Text>;
+};

package/template/src/common/components/SearchBar.tsx

@@ -1,27 +1,29 @@
 import React from 'react';
 import {
-  I18nManager,
-  KeyboardTypeOptions,
-  Platform,
-  StyleProp,
   StyleSheet,
   TextInput,
-  TextInputProps,
+  View,
+  ViewStyle,
   TextStyle,
   TouchableOpacity,
-  ViewStyle,
+  StyleProp,
+  Platform,
+  KeyboardTypeOptions,
+  TextInputProps,
+  I18nManager,
+  NativeModules,
 } from 'react-native';
-import Icon from 'react-native-vector-icons/Ionicons';
-import {CommonSizes} from '../../core/theme/commonSizes';
-import {createThemedStyles} from '../../core/theme/commonStyles';
 import {useTheme} from '../../core/theme/ThemeProvider';
-import {Languages} from '../localization/localization';
 import {
-  useLocalization,
   useRTL,
   useTranslation,
+  useLocalization,
 } from '../localization/LocalizationProvider';
+import {CommonSizes} from '../../core/theme/commonSizes';
 import {RTLAwareView} from './RTLAwareView';
+import Icon from 'react-native-vector-icons/Ionicons';
+import {createThemedStyles} from '../../core/theme/commonStyles';
+import {Languages} from '../localization/localization';
 
 interface SearchBarProps {
   value: string;
@@ -59,8 +61,8 @@ export const SearchBar: React.FC<SearchBarProps> = ({
   };
 
   const containerStyle: ViewStyle = {
-    backgroundColor: `${theme.colors.grayScale_0}20`,
-    borderColor: theme.colors.grayScale_25,
+    backgroundColor: `${theme.colors.white}20`,
+    borderColor: theme.colors.mutedLavender30,
   };
 
   // Set keyboard language specific properties
@@ -111,14 +113,14 @@ export const SearchBar: React.FC<SearchBarProps> = ({
         containerStyle,
         style as ViewStyle,
         {
-          backgroundColor: theme.colors.grayScale_0,
+          backgroundColor: theme.colors.surface,
           ...createThemedStyles(theme).dropShadow,
         },
       ]}>
       <Icon
         name="search"
         size={20}
-        color={theme.colors.grayScale_50}
+        color={theme.colors.mutedLavender}
         style={styles.searchIcon}
       />
       <TextInput
@@ -133,7 +135,7 @@ export const SearchBar: React.FC<SearchBarProps> = ({
           inputStyle as TextStyle,
         ]}
         placeholder={placeholder || t('search', 'common')}
-        placeholderTextColor={`${theme.colors.grayScale_50}80`}
+        placeholderTextColor={`${theme.colors.mutedLavender}80`}
         value={value}
         onChangeText={onChangeText}
         autoCapitalize="none"
@@ -146,7 +148,7 @@ export const SearchBar: React.FC<SearchBarProps> = ({
           <Icon
             name="close-circle"
             size={20}
-            color={theme.colors.grayScale_50}
+            color={theme.colors.mutedLavender}
           />
         </TouchableOpacity>
       )}

package/template/src/common/components/TryAgain.tsx

@@ -6,7 +6,7 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import {PrimaryColors} from '../../core/theme/colors';
+import {Colors, NewColors} from '../../core/theme/colors';
 import {CommonSizes} from '../../core/theme/commonSizes';
 import {CommonStyles} from '../../core/theme/commonStyles';
 import {localization} from '../localization/localization';
@@ -38,11 +38,11 @@ const styles = StyleSheet.create({
   title: {
     ...CommonStyles.normalText,
     textAlign: 'center',
-    marginBottom: CommonSizes.spacing.xSmall,
+    marginBottom: CommonSizes.spacing.extraSmall,
   } as TextStyle,
   description: {
     ...CommonStyles.normalText,
-    color: PrimaryColors.PlatinateBlue_700,
+    color: NewColors.blueNormalActive,
     textAlign: 'center',
     textDecorationLine: 'underline',
   } as TextStyle,

package/template/src/common/localization/localization.ts

@@ -8,7 +8,12 @@ import {setDateLocale} from './dateFormatter';
 import {loginLocalization} from './translations/loginLocalization';
 import {homeLocalization} from './translations/homeLocalization';
 import {profileLocalization} from './translations/profileLocalization';
+import {otpLocalization} from './translations/otpLocalization';
+import {passwordLocalization} from './translations/passwordLocalization';
+import {navigationLocalization} from './translations/navigationLocalization';
+import {mainNavigationLocalization} from './translations/mainNavigationLocalization';
 import {I18nManager} from 'react-native';
+import {posLocalization} from './translations/posLocalization';
 
 export enum Languages {
   en = 'en',
@@ -24,6 +29,11 @@ export const localization = {
   login: new LocalizedStrings(loginLocalization),
   home: new LocalizedStrings(homeLocalization),
   profile: new LocalizedStrings(profileLocalization),
+  otp: new LocalizedStrings(otpLocalization),
+  password: new LocalizedStrings(passwordLocalization),
+  navigation: new LocalizedStrings(navigationLocalization),
+  mainNavigation: new LocalizedStrings(mainNavigationLocalization),
+  pos: new LocalizedStrings(posLocalization),
 };
 
 export function getLanguage(): string {