@fadyshawky/react-native-magic 1.0.0

package/template/src/common/ImageResources.g.ts

@@ -0,0 +1,14 @@
+/* eslint-disable */
+/* tslint:disable */
+import {ImageURISource} from "react-native";
+
+/**
+ * This file is auto-generated by react-native-image-resource-generator
+ * !!! DO NOT EDIT !!!
+ * For more information check the documentation:
+ * https://github.com/svbutko/react-native-image-resource-generator
+*/
+
+export class ImageResources {
+
+}

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import {ImageBackground, StyleSheet, ViewStyle} from 'react-native';
+import {CommonStyles} from '../../core/theme/commonStyles';
+import {ImageResources} from '../ImageResources.g';
+
+interface BackgroundType {
+  children: React.ReactNode;
+  inverted?: boolean;
+  extraStyle?: ViewStyle;
+}
+
+export const Background = ({
+  children,
+  inverted,
+  extraStyle,
+}: BackgroundType) => {
+  const styles = StyleSheet.create({
+    imageContainer: {
+      ...CommonStyles.flex1,
+      flexGrow: 1,
+      // justifyContent: 'flex-end',
+    },
+  });
+
+  return (
+    <ImageBackground
+      resizeMode="cover"
+      style={{...styles.imageContainer, ...extraStyle}}
+      imageStyle={inverted ? {transform: [{rotateY: '180deg'}]} : undefined}
+      source={0}>
+      {children}
+    </ImageBackground>
+  );
+};

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

@@ -0,0 +1,31 @@
+import React, {FC, memo} from 'react';
+import {StyleSheet, Text, TextStyle, View} from 'react-native';
+import {CommonSizes} from '../../core/theme/commonSizes';
+import {CommonStyles} from '../../core/theme/commonStyles';
+
+interface IProps {
+  title: string;
+  description: string;
+}
+
+export const EmptyView: FC<IProps> = memo(({title, description}) => {
+  return (
+    <View style={CommonStyles.flexCenter}>
+      <Text style={styles.title}>{title}</Text>
+      <Text style={styles.description}>{description}</Text>
+    </View>
+  );
+});
+
+const styles = StyleSheet.create({
+  title: {
+    ...CommonStyles.normalText,
+    fontWeight: '600',
+    textAlign: 'center',
+    marginBottom: CommonSizes.spacing.extraSmall,
+  } as TextStyle,
+  description: {
+    ...CommonStyles.normalText,
+    textAlign: 'center',
+  } as TextStyle,
+});

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

@@ -0,0 +1,66 @@
+import React, {FC, useMemo} from 'react';
+import {FlatList, FlatListProps} from 'react-native';
+import {LoadState} from '../../../types';
+import {TryAgain} from './TryAgain';
+import {Separator} from './Separator';
+import {EmptyView} from './EmptyView';
+import {LoadingComponent} from './LoadingComponent';
+import {localization} from '../localization/localization';
+import {defaultKeyIdExtractor} from '../helpers/defaultKeyIdExtractor';
+import {CommonStyles} from '../../core/theme/commonStyles';
+
+interface IProps extends FlatListProps<any> {
+  loadState: LoadState;
+  tryAgain?: () => void;
+  error?: string | null;
+}
+
+const FlatListWrapperProps = {
+  keyExtractor: defaultKeyIdExtractor,
+  ListEmptyComponent: (
+    <EmptyView
+      title={localization.empty.noData}
+      description={localization.empty.checkThisPageLater}
+    />
+  ),
+  onEndReachedThreshold: 1,
+  ItemSeparatorComponent: Separator,
+};
+
+export function FlatListWrapper({
+  loadState,
+  tryAgain,
+  error,
+  ...props
+}: IProps) {
+  const ListEmptyComponent = useMemo(() => {
+    if (loadState == LoadState.error) {
+      return (
+        <TryAgain
+          onPress={tryAgain}
+          errorText={error || localization.errors.listErrorTitle}
+        />
+      );
+    } else {
+      return props.ListEmptyComponent;
+    }
+  }, [loadState, props.ListEmptyComponent, error, tryAgain]);
+
+  const refreshing = useMemo(() => {
+    return loadState == LoadState.pullToRefresh;
+  }, [loadState]);
+
+  if (loadState == LoadState.firstLoad) {
+    return <LoadingComponent />;
+  } else {
+    return (
+      <FlatList
+        contentContainerStyle={CommonStyles.listContentContainer}
+        {...FlatListWrapperProps}
+        {...props}
+        refreshing={refreshing}
+        ListEmptyComponent={ListEmptyComponent}
+      />
+    );
+  }
+}

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

@@ -0,0 +1,17 @@
+import React, {FC, memo} from 'react';
+import {isAndroid, isIos} from '../../core/theme/commonConsts';
+import Icon from 'react-native-vector-icons/MaterialIcons';
+import {SFSymbol} from 'react-native-sfsymbols';
+import {IIconPlatformProps} from '../../../types';
+
+export const IconPlatform: FC<IIconPlatformProps> = memo(
+  ({iosName, androidName, ...props}) => {
+    if (isIos && iosName) {
+      return <SFSymbol {...props} name={iosName} />;
+    } else if (isAndroid && androidName) {
+      return <Icon {...props} name={androidName} />;
+    } else {
+      return null;
+    }
+  },
+);

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

@@ -0,0 +1,108 @@
+import React, {FC, memo, useCallback} from 'react';
+import ImagePicker, {
+  Image as CropperImage,
+  Options,
+} from 'react-native-image-crop-picker';
+import {ImageStyle, ImageURISource, ViewStyle} from 'react-native';
+import {ImageResources} from '../ImageResources.g';
+import {PhotoTakingButton} from './PhotoTakingButton';
+import {localization} from '../localization/localization';
+import {showActionSheet} from '../helpers/dialogsHelpers';
+
+interface IProps {
+  onImagePicked: (image: CropperImage) => void;
+  onRemoveImage: () => void;
+  onPickerError?: (error: Error) => void;
+  image?: ImageURISource | null;
+  icon?: ImageURISource;
+  style?: ViewStyle;
+  iconStyle?: ImageStyle;
+  imageStyle?: ImageStyle;
+  disabled?: boolean;
+}
+
+export const ImageCropPickerButton: FC<IProps> = memo(
+  ({
+    onPickerError,
+    onImagePicked,
+    onRemoveImage,
+    image,
+    icon = ImageResources.camera,
+    style,
+    iconStyle,
+    imageStyle,
+    disabled,
+  }) => {
+    const openGallery = useCallback(() => {
+      ImagePicker.openPicker(pickerOptions)
+        .then(imageResult => {
+          onImagePicked(imageResult);
+        })
+        .catch(error => {
+          onPickerError && onPickerError(error);
+        });
+    }, [onImagePicked, onPickerError]);
+
+    const openCamera = useCallback(() => {
+      ImagePicker.openCamera(pickerOptions)
+        .then(imageResult => {
+          onImagePicked(imageResult);
+        })
+        .catch(error => {
+          onPickerError && onPickerError(error);
+        });
+    }, [onImagePicked, onPickerError]);
+
+    const onPress = useCallback(() => {
+      const options = [
+        localization.common.cancel,
+        localization.common.chooseFromLibrary,
+        localization.common.takePhoto,
+      ];
+
+      if (image != null) {
+        options.push(localization.common.delete);
+      }
+
+      showActionSheet(
+        {
+          title: localization.common.selectPhoto,
+          options: options,
+          cancelButtonIndex: 0,
+          destructiveButtonIndex: 3,
+        },
+        optionIndex => {
+          if (optionIndex == 1) {
+            openGallery();
+          } else if (optionIndex == 2) {
+            openCamera();
+          } else if (optionIndex == 3) {
+            onRemoveImage();
+          }
+        },
+      );
+    }, [openGallery, openCamera, image, onRemoveImage]);
+
+    return (
+      <PhotoTakingButton
+        style={style}
+        iconStyle={iconStyle}
+        imageStyle={imageStyle}
+        onPress={onPress}
+        backgroundImage={image}
+        icon={icon}
+        disabled={disabled}
+      />
+    );
+  },
+);
+
+const pickerOptions: Options = {
+  height: 1000,
+  width: 1000,
+  cropping: true,
+  compressImageQuality: 0.5,
+  multiple: false,
+  mediaType: 'photo',
+  includeBase64: true,
+};

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import {Image, View} from 'react-native';
+import {CommonStyles} from '../../core/theme/commonStyles';
+import {ImageResources} from '../ImageResources.g';
+
+export const LoadingComponent = () => {
+  return (
+    <View style={CommonStyles.flexCenter}>
+      <Image
+        resizeMode='cover'
+        style={{flex: 1}}
+        source={ImageResources.splash}
+      />
+    </View>
+  );
+};

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

@@ -0,0 +1,99 @@
+import React, {FC, Fragment, memo, ReactNode} from 'react';
+import {
+  Image,
+  ImageBackground,
+  ImageStyle,
+  ImageURISource,
+  StyleSheet,
+  TouchableOpacity,
+  ViewStyle,
+} from 'react-native';
+import {ImageResources} from '../ImageResources.g';
+import {Image as CropperImage} from 'react-native-image-crop-picker';
+import {CommonSizes} from '../../core/theme/commonSizes';
+import {Colors, PlatformColorsIOS} from '../../core/theme/colors';
+import {platformMixedColor} from '../helpers/colorHelpers';
+
+interface IProps {
+  onPress?: () => void;
+  icon?: ImageURISource;
+  backgroundImage?: ImageURISource | CropperImage | null;
+  style?: ViewStyle;
+  iconStyle?: ImageStyle;
+  imageStyle?: ImageStyle;
+  disabled?: boolean;
+}
+
+export const PhotoTakingButton: FC<IProps> = memo(
+  ({
+    icon = ImageResources.camera,
+    onPress,
+    backgroundImage,
+    style,
+    iconStyle,
+    imageStyle,
+    disabled,
+  }) => {
+    return (
+      <TouchableOpacity
+        style={[styles.button, style] as ViewStyle}
+        onPress={onPress}
+        disabled={disabled}>
+        <BackgroundComponent image={backgroundImage} style={imageStyle}>
+          <Image style={[styles.icon, iconStyle]} source={icon!} />
+        </BackgroundComponent>
+      </TouchableOpacity>
+    );
+  },
+);
+
+interface IBackgroundComponentProps {
+  image?: ImageURISource | null;
+  style?: ImageStyle;
+  children?: ReactNode;
+}
+
+const BackgroundComponent: FC<IBackgroundComponentProps> = memo(
+  ({image, children, style}) => {
+    if (image != null) {
+      return (
+        <ImageBackground
+          source={image}
+          style={[styles.image, style]}
+          imageStyle={[styles.image, style]}>
+          {children}
+        </ImageBackground>
+      );
+    } else {
+      return <Fragment>{children}</Fragment>;
+    }
+  },
+);
+
+const styles = StyleSheet.create({
+  button: {
+    height: 120,
+    width: 120,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: CommonSizes.borderRadius.small,
+    borderWidth: 1,
+    borderColor: platformMixedColor(PlatformColorsIOS.systemFill, Colors.gray),
+  } as ViewStyle,
+  image: {
+    height: 120,
+    width: 120,
+    resizeMode: 'contain',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: CommonSizes.borderRadius.small,
+    overflow: 'hidden',
+  } as ImageStyle,
+  icon: {
+    width: 32,
+    height: 32,
+    resizeMode: 'contain',
+    tintColor: platformMixedColor(PlatformColorsIOS.label, Colors.black),
+    opacity: 0.8,
+  } as ImageStyle,
+});

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

@@ -0,0 +1,305 @@
+import React, {FC, memo, useMemo} from 'react';
+import {
+  ActivityIndicator,
+  Image,
+  ImageStyle,
+  ImageURISource,
+  Platform,
+  StyleProp,
+  StyleSheet,
+  Text,
+  TextStyle,
+  ViewStyle,
+} from 'react-native';
+import {
+  ButtonType,
+  IIconPlatformProps,
+  TouchablePlatformProps,
+} from '../../../types';
+import {Colors} from '../../core/theme/colors';
+import {CommonSizes} from '../../core/theme/commonSizes';
+import {CommonStyles} from '../../core/theme/commonStyles';
+import {IconPlatform} from './IconPlatform';
+import {TouchablePlatform} from './TouchablePlatform';
+
+interface IProps extends TouchablePlatformProps {
+  label: string;
+  type: ButtonType;
+  rounded?: boolean;
+  icon?: ImageURISource;
+  iconStyle?: StyleProp<ImageStyle>;
+  platformIconProps?: IIconPlatformProps;
+  labelStyle?: TextStyle;
+  isLoading?: boolean;
+}
+
+export const PrimaryButton: FC<IProps> = memo(
+  ({
+    label,
+    icon,
+    iconStyle,
+    type,
+    rounded,
+    labelStyle,
+    style,
+    isLoading,
+    platformIconProps,
+    ...props
+  }) => {
+    const styles = useMemo(() => {
+      return getStyles(type, rounded, props.disabled);
+    }, [type, rounded, props.disabled]);
+
+    const content = useMemo(() => {
+      if (isLoading) {
+        return (
+          <ActivityIndicator
+            animating={true}
+            color={activityIndicatorColor}
+            size={'small'}
+          />
+        );
+      } else {
+        return (
+          <>
+            <ButtonIcon
+              icon={icon}
+              iconStyle={[styles.icon, iconStyle]}
+              platformIconProps={platformIconProps}
+            />
+            <Text style={[styles.label, labelStyle]} numberOfLines={1}>
+              {label}
+            </Text>
+          </>
+        );
+      }
+    }, [
+      icon,
+      iconStyle,
+      isLoading,
+      label,
+      labelStyle,
+      platformIconProps,
+      styles.icon,
+      styles.label,
+    ]);
+
+    return (
+      <TouchablePlatform
+        style={[styles.button, style] as ViewStyle[]}
+        highlightColor={'rgba(0,0,0,0.05)'}
+        {...props}>
+        {content}
+      </TouchablePlatform>
+    );
+  },
+);
+
+const activityIndicatorColor = Colors.gray_disabled;
+
+const ButtonIcon: FC<Pick<IProps, 'icon' | 'iconStyle' | 'platformIconProps'>> =
+  memo(props => {
+    if (props.icon != null) {
+      return <Image source={props.icon} style={props.iconStyle} />;
+    } else if (props.platformIconProps != null) {
+      return <IconPlatform {...props.platformIconProps} />;
+    } else {
+      return null;
+    }
+  });
+
+function getStyles(
+  type: ButtonType,
+  rounded?: boolean,
+  disabled?: boolean | null,
+): IStyles {
+  switch (type) {
+    case ButtonType.solid:
+      return mergeStylesWithDisabled(
+        rounded ? smallSolidStyles : solidStyles,
+        disabled,
+      );
+    case ButtonType.outline:
+      return mergeStylesWithDisabled(
+        rounded ? smallOutlineStyles : outlineStyles,
+        disabled,
+        true,
+      );
+    case ButtonType.outlineNegative:
+      return mergeStylesWithDisabled(
+        rounded ? smallOutlineStyles : outlineNegativeStyles,
+        disabled,
+        true,
+      );
+    case ButtonType.borderless:
+      return borderlessStyles;
+    default:
+      throw new Error('Unknown button type: ' + type);
+  }
+}
+
+function mergeStylesWithDisabled(
+  styles: IStyles,
+  disabled?: boolean | null,
+  outline?: boolean,
+): IStyles {
+  return disabled
+    ? {
+        ...styles,
+        button: {
+          ...styles.button,
+          backgroundColor: Colors.gray_disabled,
+          borderColor: outline ? Colors.teal100 : styles.button.borderColor,
+          elevation: 0,
+        } as ViewStyle,
+        icon: {
+          ...styles.icon,
+          tintColor: Colors.gray,
+        } as ImageStyle,
+        label: {
+          ...styles.label,
+          color: Colors.black,
+        } as TextStyle,
+      }
+    : styles;
+}
+
+interface IStyles {
+  button: ViewStyle;
+  icon: ImageStyle;
+  label: TextStyle;
+}
+
+const commonButtonStyle: ViewStyle = {
+  padding: CommonSizes.spacing.medium,
+  alignItems: 'center',
+  justifyContent: 'center',
+  borderRadius: CommonSizes.borderRadius.extraLargePlus,
+  flexDirection: 'row',
+  backgroundColor: Colors.transparent,
+  width: '100%',
+};
+
+const commonLabelStyle: TextStyle = {
+  ...CommonStyles.h4_bold,
+  color: Colors.white,
+  textAlign: 'center',
+  textAlignVertical: 'center',
+  ...Platform.select({
+    android: {
+      textTransform: 'uppercase',
+    } as TextStyle,
+  }),
+};
+
+const commonIcon: ImageStyle = {
+  width: 22,
+  height: 22,
+  marginHorizontal: CommonSizes.spacing.extraSmall,
+  resizeMode: 'contain',
+  tintColor: Colors.blue100,
+};
+
+const solidStyles = StyleSheet.create({
+  button: {
+    ...commonButtonStyle,
+    backgroundColor: Colors.primary100,
+  } as ViewStyle,
+  label: {
+    ...commonLabelStyle,
+  } as TextStyle,
+  icon: {
+    ...commonIcon,
+    tintColor: Colors.white,
+  },
+});
+
+const outlineStyles = StyleSheet.create({
+  button: {
+    ...commonButtonStyle,
+    borderColor: Colors.primary100,
+    borderWidth: 2,
+  } as ViewStyle,
+  label: {
+    ...commonLabelStyle,
+    color: Colors.primary100,
+  } as TextStyle,
+  icon: {
+    ...commonIcon,
+    tintColor: Colors.blue100,
+  } as ImageStyle,
+});
+
+const outlineNegativeStyles = StyleSheet.create({
+  button: {
+    ...commonButtonStyle,
+    borderColor: Colors.red,
+    borderWidth: 2,
+  } as ViewStyle,
+  label: {
+    ...commonLabelStyle,
+    color: Colors.red,
+  } as TextStyle,
+  icon: {
+    ...commonIcon,
+    tintColor: Colors.red,
+  } as ImageStyle,
+});
+
+const borderlessStyles = StyleSheet.create({
+  button: {
+    ...commonButtonStyle,
+    borderRadius: undefined,
+    width: undefined,
+    padding: undefined,
+  } as ViewStyle,
+  label: {
+    ...commonLabelStyle,
+    color: Colors.primary100,
+    textDecorationLine: 'underline',
+  } as TextStyle,
+  icon: {
+    ...commonIcon,
+    tintColor: Colors.blue100,
+  } as ImageStyle,
+});
+
+const roundedButtonStyle: ViewStyle = {
+  paddingHorizontal: CommonSizes.spacing.medium,
+  paddingVertical: CommonSizes.spacing.extraSmall,
+  alignItems: 'center',
+  justifyContent: 'center',
+  borderRadius: CommonSizes.borderRadius.extraLarge,
+  flexDirection: 'row',
+  backgroundColor: Colors.transparent,
+  width: 175,
+};
+
+const smallSolidStyles = StyleSheet.create({
+  button: {
+    ...roundedButtonStyle,
+    backgroundColor: Colors.primary100,
+  } as ViewStyle,
+  label: {
+    ...CommonStyles.normalText,
+  } as TextStyle,
+  icon: {
+    ...commonIcon,
+  },
+});
+
+const smallOutlineStyles = StyleSheet.create({
+  button: {
+    ...roundedButtonStyle,
+    borderColor: Colors.blue100,
+    borderWidth: 1,
+  } as ViewStyle,
+  label: {
+    ...CommonStyles.normalText,
+    color: Colors.blue100,
+  } as TextStyle,
+  icon: {
+    ...commonIcon,
+    tintColor: Colors.blue100,
+  } as ImageStyle,
+});