@fadyshawky/react-native-magic 2.0.1 → 2.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fadyshawky/react-native-magic",
-  "version": "2.0.1",
+  "version": "2.0.3",
   "description": "react native template with ready components, hooks, react navigation, redux, typescript, etc.",
   "keywords": [
     "react-native-magic",

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

@@ -61,8 +61,8 @@ export const Card = ({
 
 const styles = StyleSheet.create({
   card: {
-    padding: CommonSizes.spacing.md,
-    borderRadius: CommonSizes.borderRadius.lg,
+    padding: CommonSizes.spacing.medium,
+    borderRadius: CommonSizes.borderRadius.large,
     alignItems: 'center',
     justifyContent: 'flex-start',
     gap: scaleHeight(10),
@@ -71,7 +71,7 @@ const styles = StyleSheet.create({
   },
   blurContainer: {
     flex: 1,
-    padding: CommonSizes.spacing.md,
+    padding: CommonSizes.spacing.medium,
     alignItems: 'center',
     justifyContent: 'center',
   },
@@ -80,9 +80,9 @@ const styles = StyleSheet.create({
     height: scaleHeight(100),
   },
   title: {
-    fontSize: CommonSizes.font.medium,
+    fontSize: CommonSizes.fontSize.body2,
     textAlign: 'center',
-    marginBottom: CommonSizes.spacing.sm,
+    marginBottom: CommonSizes.spacing.small,
   },
   dotsContainer: {
     flexDirection: 'row',

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

@@ -22,7 +22,7 @@ const styles = StyleSheet.create({
     ...CommonStyles.normalText,
     fontWeight: '600',
     textAlign: 'center',
-    marginBottom: CommonSizes.spacing.xs,
+    marginBottom: CommonSizes.spacing.extraSmall,
   } as TextStyle,
   description: {
     ...CommonStyles.normalText,

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

@@ -87,7 +87,7 @@ export const ImageCropPickerButton: FC<IProps> = memo(
         style={style}
         iconStyle={iconStyle}
         imageStyle={imageStyle}
-        onPress={onPress}
+        onPressIn={onPress}
         backgroundImage={image}
         icon={icon}
         disabled={disabled}

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

@@ -61,7 +61,7 @@ export const OTPInput: React.FC<OTPInputProps> = ({
     <RTLAwareView style={{...styles.container, ...style}}>
       {[0, 1, 2, 3, 4, 5].map(index => (
         <PrimaryTextInput
-          containerStyle={{width: scaleWidth(78)}}
+          width={scaleWidth(78)}
           key={index}
           inputRef={ref => (inputRefs.current[index] = ref)}
           style={[
@@ -94,14 +94,14 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'space-between',
     width: '100%',
-    gap: CommonSizes.spacing.sm,
-    paddingHorizontal: CommonSizes.spacing.lg,
+    gap: CommonSizes.spacing.small,
+    paddingHorizontal: CommonSizes.spacing.large,
   },
   input: {
     flex: 1,
-    height: CommonSizes.spacing.xl,
+    height: CommonSizes.spacing.xxl,
     borderWidth: 1,
-    borderRadius: CommonSizes.borderRadius.md,
+    borderRadius: CommonSizes.borderRadius.medium,
     textAlign: 'center',
   },
 });

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

@@ -73,7 +73,7 @@ const styles = StyleSheet.create({
     width: 120,
     alignItems: 'center',
     justifyContent: 'center',
-    borderRadius: CommonSizes.borderRadius.sm,
+    borderRadius: CommonSizes.borderRadius.small,
     borderWidth: 1,
   } as ViewStyle,
   image: {
@@ -82,7 +82,7 @@ const styles = StyleSheet.create({
     resizeMode: 'contain',
     alignItems: 'center',
     justifyContent: 'center',
-    borderRadius: CommonSizes.borderRadius.sm,
+    borderRadius: CommonSizes.borderRadius.small,
     overflow: 'hidden',
   } as ImageStyle,
   icon: {

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

@@ -17,12 +17,12 @@ import {
   TouchablePlatformProps,
 } from '../../../types';
 import {useTheme} from '../../core/theme/ThemeProvider';
-import {CommonSizes} from '../../core/theme/commonSizes';
 import {createThemedStyles} from '../../core/theme/commonStyles';
 import {Theme} from '../../core/theme/types';
 import {IconPlatform} from './IconPlatform';
 import {TouchablePlatform} from './TouchablePlatform';
 import {scaleHeight, scaleSpacing} from '../../core/theme/scaling';
+import {CommonSizes} from '../../core/theme/commonSizes';
 
 interface IProps extends TouchablePlatformProps {
   label: string;
@@ -58,7 +58,7 @@ export const PrimaryButton: FC<IProps> = memo(
         return (
           <ActivityIndicator
             animating={true}
-            color={theme.colors.backgroundOpacity}
+            color={theme.colors.grayScale_50}
             size={'small'}
           />
         );
@@ -91,7 +91,7 @@ export const PrimaryButton: FC<IProps> = memo(
     return (
       <TouchablePlatform
         style={[styles.button, style] as ViewStyle[]}
-        highlightColor={theme.colors.mutedLavender30}
+        highlightColor={theme.colors.grayScale_50}
         {...props}>
         {content}
       </TouchablePlatform>
@@ -158,19 +158,19 @@ function mergeStylesWithDisabled(
     ...styles,
     button: {
       ...styles.button,
-      backgroundColor: theme.colors.mutedLavender30,
+      backgroundColor: theme.colors.grayScale_50,
       borderColor: outline
-        ? theme.colors.mutedLavender
+        ? theme.colors.grayScale_50
         : styles.button.borderColor,
       elevation: 0,
     } as ViewStyle,
     icon: {
       ...styles.icon,
-      tintColor: theme.colors.mutedLavender,
+      tintColor: theme.colors.grayScale_50,
     } as ImageStyle,
     label: {
       ...styles.label,
-      color: theme.colors.backgroundOpacity,
+      color: theme.colors.grayScale_50,
     } as TextStyle,
   };
 }
@@ -194,7 +194,7 @@ function createButtonStyles(theme: Theme) {
 
   const commonLabelStyle: TextStyle = {
     ...createThemedStyles(theme).h4_bold,
-    color: theme.colors.white,
+    color: theme.colors.grayScale_0,
     textAlign: 'center',
     textAlignVertical: 'center',
     ...Platform.select({
@@ -209,26 +209,26 @@ function createButtonStyles(theme: Theme) {
     height: 22,
     marginHorizontal: scaleSpacing(12),
     resizeMode: 'contain',
-    tintColor: theme.colors.indigoBlue,
+    tintColor: theme.colors.PlatinateBlue_700,
   };
 
   return {
     solid: StyleSheet.create({
       button: {
         ...commonButtonStyle,
-        backgroundColor: theme.colors.indigoBlue,
+        backgroundColor: theme.colors.PlatinateBlue_700,
       } as ViewStyle,
       label: theme.text.button,
       icon: {
         ...commonIcon,
-        tintColor: theme.colors.white,
+        tintColor: theme.colors.grayScale_0,
       },
     }),
 
     outline: StyleSheet.create({
       button: {
         ...commonButtonStyle,
-        borderColor: theme.colors.indigoBlue,
+        borderColor: theme.colors.PlatinateBlue_700,
         borderWidth: 2,
       } as ViewStyle,
       label: {
@@ -240,7 +240,7 @@ function createButtonStyles(theme: Theme) {
     outlineNegative: StyleSheet.create({
       button: {
         ...commonButtonStyle,
-        borderColor: theme.colors.mutedLavender,
+        borderColor: theme.colors.PlatinateBlue_700,
         borderWidth: 2,
       } as ViewStyle,
       label: {
@@ -248,7 +248,7 @@ function createButtonStyles(theme: Theme) {
       } as TextStyle,
       icon: {
         ...commonIcon,
-        tintColor: theme.colors.mutedLavender,
+        tintColor: theme.colors.PlatinateBlue_700,
       },
     }),
 
@@ -276,7 +276,7 @@ function createSmallSolidStyles(theme: Theme): IStyles {
       justifyContent: 'center',
       borderRadius: CommonSizes.borderRadius.xl,
       flexDirection: 'row',
-      backgroundColor: theme.colors.indigoBlue,
+      backgroundColor: theme.colors.PlatinateBlue_700,
       // width: 175,
     } as ViewStyle,
     label: {
@@ -286,7 +286,7 @@ function createSmallSolidStyles(theme: Theme): IStyles {
       width: 22,
       height: 22,
       resizeMode: 'contain',
-      tintColor: theme.colors.white,
+      tintColor: theme.colors.grayScale_0,
     } as ImageStyle,
   });
 }
@@ -302,18 +302,18 @@ function createSmallOutlineStyles(theme: Theme): IStyles {
       flexDirection: 'row',
       backgroundColor: 'transparent',
       width: 175,
-      borderColor: theme.colors.indigoBlue,
+      borderColor: theme.colors.PlatinateBlue_700,
       borderWidth: 1,
     } as ViewStyle,
     label: {
       ...commonStyles.normalText,
-      color: theme.colors.indigoBlue,
+      color: theme.colors.PlatinateBlue_700,
     } as TextStyle,
     icon: {
       width: 22,
       height: 22,
       resizeMode: 'contain',
-      tintColor: theme.colors.indigoBlue,
+      tintColor: theme.colors.PlatinateBlue_700,
     } as ImageStyle,
   });
 }

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

@@ -21,9 +21,8 @@ import {
   View,
   ViewStyle,
 } from 'react-native';
-import {Colors} from '../../core/theme/colors';
+import {useTheme} from '../../core/theme/ThemeProvider';
 import {isIos} from '../../core/theme/commonConsts';
-import {CommonSizes} from '../../core/theme/commonSizes';
 import {CommonStyles} from '../../core/theme/commonStyles';
 import {localization} from '../localization/localization';
 
@@ -53,31 +52,28 @@ interface IProps extends TextInputProps {
   inputContainerStyle?: ViewStyle;
 }
 
-export const PrimaryTextInput: FC<IProps> = memo(
+const PrimaryTextInput: FC<IProps> = memo(
   ({
-    style = styles.input,
-    blurOnSubmit = true,
-    disableFullscreenUI = true,
-    enablesReturnKeyAutomatically = true,
-    underlineColorAndroid = Colors.white,
-    placeholderTextColor = Colors.gray,
-    editable = true,
-    clearButtonMode = 'while-editing',
+    style,
+    containerStyle,
     label,
     error,
     hint,
-    containerStyle,
-    inputRef,
-    nextInputFocusRef,
-    onTouchStart,
+    required,
+    optional,
     onFocus,
     onBlur,
     onSubmitEditing,
-    required,
-    optional,
+    nextInputFocusRef,
+    inputRef,
+    onTouchStart,
+    editable = true,
     ...props
   }) => {
     const [isFocused, setFocused] = useState<boolean>(false);
+    const {theme} = useTheme();
+
+    const selectionColor = theme.colors.PlatinateBlue_700;
 
     const onLocalFocus = useCallback(
       (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
@@ -100,8 +96,9 @@ export const PrimaryTextInput: FC<IProps> = memo(
         isFocused,
         error,
         onTouchStart ? true : editable,
+        theme,
       );
-    }, [isFocused, error, editable, onTouchStart]);
+    }, [isFocused, error, editable, onTouchStart, theme]);
 
     const onLocalSubmitEditing = useCallback(
       (e: NativeSyntheticEvent<TextInputSubmitEditingEventData>) => {
@@ -117,9 +114,97 @@ export 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,
+      };
+
+      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]);
+
     return (
       <View style={[styles.container, containerStyle]}>
-        <Label text={label} required={required} optional={optional} />
+        <Label
+          text={label}
+          required={required}
+          optional={optional}
+          styles={styles}
+        />
         <TouchableOpacity
           style={[inputContainerStyle, props.inputContainerStyle]}
           onPress={onTouchStart}
@@ -135,33 +220,36 @@ export const PrimaryTextInput: FC<IProps> = memo(
             autoComplete="off"
           />
         </TouchableOpacity>
-        <BottomText error={error} hint={hint} />
+        <BottomText error={error} hint={hint} styles={styles} />
       </View>
     );
   },
 );
 
-const Label: FC<{text?: string; required?: boolean; optional?: boolean}> = memo(
-  ({text, required, optional}) => {
-    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;
+  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 BottomText: FC<{error?: string | null; hint?: string}> = memo(
-  ({error, hint}) => {
+const BottomText: FC<{error?: string | null; hint?: string; styles: any}> =
+  memo(({error, hint, styles}) => {
     if (error != null) {
       return <Text style={styles.error}>{error}</Text>;
     } else if (hint != null) {
@@ -169,108 +257,86 @@ const BottomText: FC<{error?: string | null; hint?: string}> = memo(
     } 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 ? styles.disabledInputContainer : styles.inputContainer;
+    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
+            },
+          }),
+        };
   } else {
     if (isFocused) {
-      return styles.focusedInputContainer;
+      return {
+        ...commonInputContainer,
+        ...Platform.select({
+          android: {
+            borderColor: theme.colors.grayScale_50,
+          },
+        }),
+      };
     } else if (!isEditable) {
-      return styles.disabledInputContainer;
+      return {
+        ...commonInputContainer,
+        ...Platform.select({
+          android: {
+            backgroundColor: theme.colors.grayScale_50,
+            borderColor: theme.colors.grayScale_50,
+          },
+        }),
+      };
     } else if (error) {
-      return styles.errorInputContainer;
+      return {
+        ...commonInputContainer,
+        ...Platform.select({
+          android: {
+            borderColor: theme.colors.error_400,
+          },
+        }),
+      };
     } else {
-      return styles.inputContainer;
+      return {
+        ...commonInputContainer,
+        ...Platform.select({
+          ios: {
+            paddingEnd: theme.spacing.xLarge, // 16px
+          },
+        }),
+      };
     }
   }
 }
 
-const selectionColor = Colors.blueNormalActive;
-
-const commonInputContainer: TextStyle = {
-  flexDirection: 'row',
-  alignItems: 'center',
-  justifyContent: 'center',
-  minHeight: CommonSizes.spacing.xl,
-  textAlignVertical: 'center',
-  textAlign: 'center',
-  backgroundColor: Colors.white,
-  borderRadius: CommonSizes.borderRadius.md,
-  borderWidth: CommonSizes.borderWidth.small,
-  borderColor: Colors.gray,
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'column',
-  } as ViewStyle,
-  input: {
-    ...CommonStyles.normalText,
-    flex: 1,
-    textAlignVertical: 'center',
-    paddingStart: CommonSizes.spacing.md,
-    ...Platform.select({
-      android: {
-        paddingEnd: CommonSizes.spacing.md,
-      },
-    }),
-  } as TextStyle,
-  inputContainer: {
-    ...commonInputContainer,
-    ...Platform.select({
-      ios: {
-        paddingEnd: CommonSizes.spacing.md,
-      },
-    }),
-  } as TextStyle,
-  errorInputContainer: {
-    ...commonInputContainer,
-    ...Platform.select({
-      android: {
-        borderColor: Colors.red,
-      },
-    }),
-  } as TextStyle,
-  disabledInputContainer: {
-    ...commonInputContainer,
-    ...Platform.select({
-      android: {
-        backgroundColor: Colors.gray,
-        borderColor: Colors.gray,
-      },
-    }),
-  } as TextStyle,
-  focusedInputContainer: {
-    ...commonInputContainer,
-    ...Platform.select({
-      android: {
-        borderColor: Colors.gray,
-      },
-    }),
-  } as TextStyle,
-  label: {
-    ...CommonStyles.body_regular,
-    paddingBottom: CommonSizes.spacing.xs,
-  } as TextStyle,
-  hint: {
-    ...CommonStyles.normalText,
-    fontWeight: '200',
-    fontSize: CommonSizes.font.small,
-    lineHeight: CommonSizes.lineHeight.small,
-    paddingTop: CommonSizes.spacing.xs,
-  } as TextStyle,
-  error: {
-    ...CommonStyles.normalText,
-    color: Colors.red,
-    fontSize: CommonSizes.font.small,
-    lineHeight: CommonSizes.lineHeight.small,
-    paddingTop: CommonSizes.spacing.xs,
-  } as TextStyle,
-});
+export {PrimaryTextInput};

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

@@ -46,13 +46,13 @@ export const RadioButton: FC<IProps> = memo(
 const commonLabel: TextStyle = {
   ...CommonStyles.normalText,
   flex: 1,
-  paddingStart: CommonSizes.spacing.xs,
+  paddingStart: CommonSizes.spacing.extraSmall,
 };
 
 const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
-    padding: CommonSizes.spacing.md,
+    padding: CommonSizes.spacing.medium,
     alignItems: 'center',
   } as ViewStyle,
   label: {