@fadyshawky/react-native-magic 1.0.0

package/template/src/common/helpers/dialogsHelpers.ts

@@ -0,0 +1,66 @@
+import {isAndroid, isIos} from '../../core/theme/commonConsts';
+import {
+  ActionSheetIOS,
+  ActionSheetIOSOptions,
+  Alert,
+  AlertButton,
+  AlertOptions,
+} from 'react-native';
+import {localization} from '../localization/localization';
+
+export function showActionSheet(
+  options: ActionSheetIOSOptions,
+  onOptionSelected: (optionIndex: number) => void,
+) {
+  if (isIos) {
+    ActionSheetIOS.showActionSheetWithOptions(options, onOptionSelected);
+  } else if (isAndroid) {
+    const buttons: AlertButton[] = options.options.map((value, index) => {
+      return {
+        text: value,
+        onPress: () => {
+          onOptionSelected(index);
+        },
+        style: 'default',
+      };
+    });
+
+    Alert.alert(options.title || '', options.message, buttons, {
+      cancelable: true,
+    });
+  }
+}
+
+export function showAlert(
+  title: string,
+  message?: string,
+  buttons?: AlertButton[],
+  options?: AlertOptions,
+) {
+  Alert.alert(title, message, buttons, options || {cancelable: true});
+}
+
+export function showCommonDialog(
+  title: string,
+  message: string,
+  onAcceptPress: () => void,
+) {
+  Alert.alert(
+    title,
+    message,
+    [
+      {
+        text: localization.common.yes,
+        onPress: onAcceptPress,
+        style: 'default',
+      },
+      {
+        text: localization.common.no,
+        style: 'default',
+      },
+    ],
+    {
+      cancelable: true,
+    },
+  );
+}

package/template/src/common/helpers/imageHelpers.ts

@@ -0,0 +1,5 @@
+import {Image as CropperImage} from 'react-native-image-crop-picker';
+
+export function convertCropperImageToBase64(image: CropperImage): string {
+  return `data:${image.mime};base64,${image.data}`;
+}

package/template/src/common/helpers/inAppReviewHelper.ts

@@ -0,0 +1,31 @@
+import InAppReview from 'react-native-in-app-review';
+
+export function showInAppReview(
+  successAction?: () => void,
+  failAction?: (error: Error) => void,
+  onReviewNotAvailable?: () => void,
+) {
+  if (InAppReview.isAvailable()) {
+    InAppReview.RequestInAppReview()
+      .then(hasFlowFinishedSuccessfully => {
+        // for Android:
+        // The flow has finished. The API does not indicate whether the user
+        // reviewed or not, or even whether the review dialog was shown. Thus, no
+        // matter the result, we continue our app flow.
+
+        // for iOS
+        // the flow launched successfully, The API does not indicate whether the user
+        // reviewed or not, or he/she closed flow yet as Android, Thus, no
+        // matter the result, we continue our app flow.
+        if (hasFlowFinishedSuccessfully) {
+          successAction?.();
+        }
+      })
+      .catch(error => {
+        failAction?.(error);
+      });
+  } else {
+    console.error('Review is not available for this device/account');
+    onReviewNotAvailable?.();
+  }
+}

package/template/src/common/helpers/netInfoHelpers.ts

@@ -0,0 +1,42 @@
+import NetInfo, {
+  NetInfoState,
+  NetInfoSubscription,
+} from '@react-native-community/netinfo';
+import {showAlert} from './dialogsHelpers';
+import {Linking} from 'react-native';
+import Config from 'react-native-config';
+import {localization} from '../localization/localization';
+
+let netInfoUnsubscribe: undefined | NetInfoSubscription;
+let hasDialogBeenShown: boolean = false;
+
+function listenerCallback(state: NetInfoState) {
+  if (state.isInternetReachable === false && !hasDialogBeenShown) {
+    hasDialogBeenShown = true;
+    showAlert(
+      localization.errors.mobileDataIsTurnedOff,
+      localization.errors.turnOnMobileData,
+      [
+        {
+          text: localization.common.settings,
+          onPress: Linking.openSettings,
+          style: 'default',
+        },
+        {
+          text: localization.common.ok.toUpperCase(),
+          style: 'default',
+        },
+      ],
+    );
+  }
+}
+
+export function startListeningToNetInfo() {
+  if (netInfoUnsubscribe == null && !Config.IGNORE_NET_INFO) {
+    netInfoUnsubscribe = NetInfo.addEventListener(listenerCallback);
+  }
+}
+
+export function unsubscribeFromNetInfo() {
+  netInfoUnsubscribe && netInfoUnsubscribe();
+}

package/template/src/common/helpers/orientationHelpers.ts

@@ -0,0 +1,25 @@
+import Orientation, {OrientationType} from 'react-native-orientation-locker';
+import {isTablet} from '../../core/theme/commonConsts';
+
+export function getCurrentOrientation(forceOnPhone?: boolean): OrientationType {
+  if (isTablet || forceOnPhone) {
+    let result = Orientation.getInitialOrientation();
+    Orientation.getOrientation(orientation => {
+      if (orientation != null) {
+        result = orientation;
+      }
+    });
+
+    return result;
+  } else {
+    return 'PORTRAIT' as OrientationType;
+  }
+}
+
+export function setDefaultOrientation(): void {
+  if (isTablet) {
+    Orientation.unlockAllOrientations();
+  } else {
+    Orientation.lockToPortrait();
+  }
+}

package/template/src/common/helpers/regexHelpers.ts

@@ -0,0 +1,7 @@
+export function isEmail(email: string): boolean {
+  const emailRegex =
+    // eslint-disable-next-line max-len
+    /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+
+  return emailRegex.test(email);
+}

package/template/src/common/helpers/shareHelpers.ts

@@ -0,0 +1,47 @@
+import {Linking} from 'react-native';
+import Share, {ShareOptions} from 'react-native-share';
+import {isAndroid, isIos} from '../../core/theme/commonConsts';
+import {
+  ShareOpenResult,
+  ShareSingleOptions,
+  ShareSingleResult,
+} from 'react-native-share/lib/typescript/src/types';
+
+export async function showShareDialog(
+  options: ShareOptions,
+  completedCallback?: (result: ShareOpenResult) => void,
+  errorCallback?: (error: Error | unknown) => void,
+) {
+  try {
+    const result = await Share.open(options);
+    completedCallback?.(result);
+  } catch (error: Error | unknown) {
+    errorCallback?.(error);
+  }
+}
+
+export async function showShareSocialDialog(
+  options: ShareSingleOptions,
+  completedCallback?: (result: ShareSingleResult) => void,
+  errorCallback?: (error: Error | unknown) => void,
+) {
+  try {
+    const result = await Share.shareSingle(options);
+    completedCallback?.(result);
+  } catch (error: Error | unknown) {
+    errorCallback?.(error);
+  }
+}
+
+export async function isPackageInstalled(
+  androidPackageName?: string,
+  iosUrl?: string,
+): Promise<boolean> {
+  if (isAndroid && androidPackageName) {
+    return (await Share.isPackageInstalled(androidPackageName)).isInstalled;
+  } else if (isIos && iosUrl) {
+    return Linking.canOpenURL(iosUrl);
+  } else {
+    throw new Error('No arguments were given or the platform is not supported');
+  }
+}

package/template/src/common/helpers/stringsHelpers.ts

@@ -0,0 +1,15 @@
+export function capitalizeFirstLetter(word: string): string {
+  return word.charAt(0).toUpperCase() + word.slice(1);
+}
+
+export function removeHtmlTags(text: string): string {
+  return text.replace(/<br>/g, '\n').replace(/<\/?[^>]+(>|$)/g, '');
+}
+
+export function removeEmojis(text: string): string {
+  return text.replace(
+    // eslint-disable-next-line max-len
+    /(?:[\u2700-\u27bf]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff]|[\u0023-\u0039]\ufe0f?\u20e3|\u3299|\u3297|\u303d|\u3030|\u24c2|\ud83c[\udd70-\udd71]|\ud83c[\udd7e-\udd7f]|\ud83c\udd8e|\ud83c[\udd91-\udd9a]|\ud83c[\udde6-\uddff]|[\ud83c\ude01-\ude02]|\ud83c\ude1a|\ud83c\ude2f|[\ud83c\ude32-\ude3a]|[\ud83c\ude50-\ude51]|\u203c|\u2049|[\u25aa-\u25ab]|\u25b6|\u25c0|[\u25fb-\u25fe]|\u00a9|\u00ae|\u2122|\u2139|\ud83c\udc04|[\u2600-\u26FF]|\u2b05|\u2b06|\u2b07|\u2b1b|\u2b1c|\u2b50|\u2b55|\u231a|\u231b|\u2328|\u23cf|[\u23e9-\u23f3]|[\u23f8-\u23fa]|\ud83c\udccf|\u2934|\u2935|[\u2190-\u21ff])/g,
+    '',
+  );
+}

package/template/src/common/hooks/useBackHandler.ts

@@ -0,0 +1,10 @@
+import {DependencyList, useEffect} from 'react';
+import {BackHandler} from 'react-native';
+
+export function useBackHandler(handler: () => boolean, deps?: DependencyList) {
+  useEffect(() => {
+    BackHandler.addEventListener('hardwareBackPress', handler);
+
+    return () => BackHandler.removeEventListener('hardwareBackPress', handler);
+  }, [deps, handler]);
+}

package/template/src/common/hooks/useDebounce.ts

@@ -0,0 +1,17 @@
+import {useEffect, useState} from 'react';
+
+export function useDebounce<T>(value: T, delay: number): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}

package/template/src/common/hooks/useEventRegister.ts

@@ -0,0 +1,50 @@
+import {useEffect} from 'react';
+
+interface IListenerHandler {
+  callback: (data: any) => void;
+  id: string;
+}
+
+const listeners = new Map<string, IListenerHandler[]>();
+const listenersToEvent = new Map<string, string>();
+
+export function useEventRegister(
+  eventName: string,
+  callback: (data: any) => void,
+) {
+  useEffect(() => {
+    const callbacks = getOrCreateListeners(eventName);
+    const id = eventName + callbacks.length;
+
+    callbacks.push({id, callback});
+    listenersToEvent.set(id, eventName);
+
+    return () => {
+      listeners.set(
+        eventName,
+        callbacks.filter(i => i.id != id),
+      );
+    };
+  }, [eventName, callback]);
+}
+
+export function removeAllListeners(eventName: string): void {
+  listeners.delete(eventName);
+}
+
+export function emitEvent(eventName: string, data?: any): void {
+  const listenersList = listeners.get(eventName);
+  if (listenersList != null) {
+    listenersList.forEach((i: IListenerHandler) => i.callback(data));
+  }
+}
+
+function getOrCreateListeners(eventName: string): IListenerHandler[] {
+  let listenersList = listeners.get(eventName);
+  if (listenersList == null) {
+    listenersList = [];
+    listeners.set(eventName, listenersList);
+  }
+
+  return listenersList;
+}

package/template/src/common/hooks/useFlatListActions.ts

@@ -0,0 +1,31 @@
+import {useCallback} from 'react';
+import {LoadState} from '../../types';
+import {AsyncThunk} from '@reduxjs/toolkit';
+import {useAppDispatch} from '../../core/store/reduxHelpers';
+
+interface IResultActions {
+  loadMore: () => void;
+  tryAgain: () => void;
+  pullToRefresh: () => void;
+}
+
+export function useFlatListActions(
+  request: AsyncThunk<any, any, any>,
+  loadState: LoadState,
+): IResultActions {
+  const dispatch = useAppDispatch();
+
+  const loadMore = useCallback(() => {
+    loadState == LoadState.idle && dispatch(request(LoadState.loadingMore));
+  }, [dispatch, request, loadState]);
+
+  const tryAgain = useCallback(() => {
+    dispatch(request(LoadState.firstLoad));
+  }, [dispatch, request]);
+
+  const pullToRefresh = useCallback(() => {
+    dispatch(request(LoadState.pullToRefresh));
+  }, [dispatch, request]);
+
+  return {loadMore, tryAgain, pullToRefresh};
+}

package/template/src/common/hooks/usePrevious.ts

@@ -0,0 +1,11 @@
+import {useEffect, useRef} from 'react';
+
+export function usePrevious<T>(value: T): T | undefined {
+  const ref = useRef<T>();
+
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+
+  return ref.current;
+}

package/template/src/common/hooks/useWhyDidYouUpdate.ts

@@ -0,0 +1,27 @@
+import {useEffect, useRef} from 'react';
+
+export function useWhyDidYouUpdate<T>(name: string, props: T): void {
+  const previousProps = useRef<T>();
+
+  useEffect(() => {
+    if (previousProps.current) {
+      const allKeys = Object.keys({...previousProps.current, ...props});
+      const changesObj: Partial<T> = {};
+
+      allKeys.forEach(key => {
+        if ((previousProps.current as any)[key] !== (props as any)[key]) {
+          (changesObj as any)[key] = {
+            from: (previousProps.current as any)[key],
+            to: (props as any)[key],
+          };
+        }
+      });
+
+      if (Object.keys(changesObj).length) {
+        console.warn('[why-did-you-update]', name, changesObj);
+      }
+    }
+
+    previousProps.current = props;
+  });
+}

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

@@ -0,0 +1,108 @@
+import dayjs from 'dayjs';
+// eslint-disable-next-line import/no-unassigned-import
+import 'dayjs/locale/en';
+import calendar from 'dayjs/plugin/calendar';
+import {ICalendarSpec} from '../../../types';
+
+dayjs.extend(calendar);
+
+export enum DateFormat {
+  dayMonthShortYear = 'DD.MM.YYYY',
+  dayShortMonthYear = 'DD MMM YYYY',
+  dayMonthWeekdayShort = 'DD MMMM, dd',
+  dayMonthWeekdayFull = 'DD MMMM, dddd',
+  monthFullAndDay = 'MMMM, DD',
+  dayAndMonth = 'DD MMMM',
+  dateAndTime = 'DD.MM HH:mm',
+  dayAndMonthShort = 'DD.MM',
+  time = 'HH:mm',
+  year = 'YYYY',
+  shortMonth = 'MMM',
+  dayNumber = 'DD',
+  shortMonthYear = 'MMM YYYY',
+  dayMonthYear = 'DD MMMM YYYY',
+  full = 'YYYY-MM-DD HH:mm:ss',
+  yearDateTime = 'YYYY.MM.DD HH:mm',
+  yearMonthDay = 'YYYY.MM.DD',
+}
+
+const calendarFormat: ICalendarSpec = {
+  sameDay: '[Today]',
+  nextDay: '[Tomorrow]',
+  lastDay: '[Yesterday]',
+  nextWeek: 'dddd',
+  lastWeek: '[Last] dddd',
+  sameElse: DateFormat.dayMonthShortYear,
+};
+
+export function dateFromString(obj: string | Date): Date {
+  if (obj instanceof Date) {
+    return obj;
+  }
+
+  return new Date(obj);
+}
+
+export function dateFromUnknown(
+  obj: string | Date | null | number | undefined,
+): Date | null {
+  if (obj == null) {
+    return null;
+  }
+  if (obj instanceof Date) {
+    return obj;
+  }
+
+  return new Date(obj);
+}
+
+export function dateFromFormat(
+  date: Date | number | null | undefined | string,
+  format: DateFormat,
+): string {
+  let result = '';
+
+  const formattedDate: Date | null = dateFromUnknown(date);
+  if (formattedDate) {
+    result = dayjs(formattedDate).format(format);
+  }
+
+  return result;
+}
+
+export function calendarDate(
+  date: Date | null | number | undefined | string,
+  withFormat?: boolean,
+): string {
+  let result = '';
+
+  const formattedDate: Date | null = dateFromUnknown(date);
+  if (formattedDate) {
+    result = withFormat
+      ? dayjs(formattedDate).calendar(null, calendarFormat)
+      : dayjs(formattedDate).calendar();
+  }
+
+  return result;
+}
+
+export function setDateLocale(locale?: string): void {
+  dayjs.locale(locale);
+}
+
+export function getUnixDate(
+  date: Date | null | number | undefined | string,
+): number {
+  return dayjs(date).unix() * 1000;
+}
+
+export function getInitialDate(
+  date: Date | null | number | undefined | string,
+  defaultDate?: Date,
+): Date {
+  if (date != null) {
+    return dayjs(date).toDate();
+  } else {
+    return defaultDate || new Date();
+  }
+}

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

@@ -0,0 +1,37 @@
+import Intl from 'intl';
+import {getLanguage} from './localization';
+// eslint-disable-next-line import/no-unassigned-import
+import 'intl/locale-data/jsonp/en';
+
+export function formatPercent(percent: number | string): string {
+  const formatter = new Intl.NumberFormat(getLanguage(), {
+    style: 'percent',
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 2,
+  });
+
+  return formatter.format(Number(percent) / 100);
+}
+
+export function formatCurrency(
+  price: number | string,
+  currency?: string,
+): string {
+  const formatter = new Intl.NumberFormat(getLanguage(), {
+    style: 'currency',
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 2,
+    currency: currency || 'USD',
+  });
+
+  return formatter.format(Number(price));
+}
+
+export function formatDecimal(value: number | string): string {
+  const formatter = new Intl.NumberFormat(getLanguage(), {
+    style: 'decimal',
+    minimumFractionDigits: 0,
+  });
+
+  return formatter.format(Number(value));
+}

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

@@ -0,0 +1,51 @@
+import LocalizedStrings from 'react-native-localization';
+import {commonLocalization} from './translations/commonLocalization';
+import {errorsLocalization} from './translations/errorsLocalization';
+import {emptyLocalization} from './translations/emptyLocalization';
+import {pagesLocalization} from './translations/pagesLocalization';
+import {onboardingLocalization} from './translations/onboardingLocalization';
+import {setDateLocale} from './dateFormatter';
+import {loginLocalization} from './translations/loginLocalization';
+import {homeLocalization} from './translations/homeLocalization';
+import {profileLocalization} from './translations/profileLocalization';
+
+export enum Languages {
+  en = 'en',
+}
+
+export const localization = {
+  common: new LocalizedStrings(commonLocalization),
+  errors: new LocalizedStrings(errorsLocalization),
+  empty: new LocalizedStrings(emptyLocalization),
+  pages: new LocalizedStrings(pagesLocalization),
+  onboarding: new LocalizedStrings(onboardingLocalization),
+  login: new LocalizedStrings(loginLocalization),
+  home: new LocalizedStrings(homeLocalization),
+  profile: new LocalizedStrings(profileLocalization),
+};
+
+export function getLanguage(): string {
+  return localization.common.getLanguage();
+}
+
+export function getInterfaceLanguage(): string {
+  return localization.common.getInterfaceLanguage();
+}
+
+export function setLanguage(language?: Languages): void {
+  let localizationLanguage: Languages | string | undefined = language;
+
+  if (localizationLanguage == null) {
+    localizationLanguage = getLanguage();
+  }
+
+  const strings: any = Object.keys(localization);
+
+  for (const key of strings) {
+    if ((localization as any)[key].setLanguage) {
+      (localization as any)[key].setLanguage(localizationLanguage);
+    }
+  }
+
+  setDateLocale(localizationLanguage);
+}

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

@@ -0,0 +1,29 @@
+export const commonLocalization = {
+  en: {
+    search: 'Search',
+    selectPhoto: 'Select a photo',
+    takePhoto: 'Take a photo',
+    chooseFromLibrary: 'Choose from library',
+    cancel: 'Cancel',
+    reject: 'Reject',
+    delete: 'Delete',
+    back: 'Back',
+    next: 'Next',
+    done: 'Done',
+    ok: 'Ok',
+    continue: 'Continue',
+    save: 'Save',
+    loading: 'Loading',
+    photo: 'Photo',
+    yes: 'Yes',
+    no: 'No',
+    areYouSure: 'Are you sure?',
+    warning: 'Warning',
+    success: 'Success',
+    select: 'Select',
+    dataSuccessfullyUpdated: 'Data has been successfully updated',
+    settings: 'Settings',
+    required: ' (required)',
+    optional: ' (optional)',
+  },
+};

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

@@ -0,0 +1,6 @@
+export const emptyLocalization = {
+  en: {
+    noData: 'No data',
+    checkThisPageLater: 'Check this page later',
+  },
+};

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

@@ -0,0 +1,22 @@
+export const errorsLocalization = {
+  en: {
+    listErrorTitle: 'Failed to load data.',
+    tryAgain: 'Try again.',
+    thisFieldIsRequired: 'This field is required.',
+    unknownErrorHasOccurred: 'An unknown error has occurred.',
+    failedToOpenUrl: 'Failed to open URL. Check that the app is installed.',
+    pleaseCheckYourInternetConnection: 'Please check your Internet connection.',
+    invalidEmail: 'Invalid Email',
+    invalidPhoneNumber: 'Invalid phone number',
+    invalidFullName: 'Invalid full name',
+    invalidFromDate: (fromField: string, toField: string) =>
+      `${fromField} can't be later than ${toField.toLowerCase()}`,
+    invalidToDate: (fromField: string, toField: string) =>
+      `${toField} can't be earlier than ${fromField.toLowerCase()}`,
+    datesCantBeEqual: (fromField: string, toField: string) =>
+      `${fromField} and ${toField.toLowerCase()} can't be equal`,
+    mobileDataIsTurnedOff: 'Mobile Data is Turned Off',
+    turnOnMobileData: 'Turn on mobile data or use Wi-Fi to access data.',
+    error: 'Error',
+  },
+};

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

@@ -0,0 +1,5 @@
+export const homeLocalization = {
+  en: {
+    welcome: 'Hi ',
+  },
+};

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

@@ -0,0 +1,14 @@
+export const loginLocalization = {
+  en: {
+    Login: 'Login',
+    welcome: 'Welcome',
+    Email: 'Email',
+    EnterEmail: 'Enter email',
+    Password: 'Password',
+    EnterPassword: 'Enter password',
+    forgetPassword: 'Forget Password',
+    continue: 'continue',
+    notMember: 'not a member yet?',
+    findNursery: 'Find nursery',
+  },
+};