new-react-native-boilerplate 0.0.0-stage → 1.0.1

package/template/src/translations/ar.json

@@ -0,0 +1,47 @@
+{
+  "LOG_IN_TO_YOUR_ACCOUNT": "تسجيل الدخول إلى حسابك",
+  "WELCOME_BACK_PLEASE_ENTER_YOUR_DETAILS": "مرحبًا بعودتك! ",
+  "EMAIL": "بريد إلكتروني",
+  "ENTER_YOUR_EMAIL": "أدخل بريدك الإلكتروني",
+  "PASSWORD": "كلمة المرور",
+  "ENTER_YOUR_PASSWORD": "ادخل رقمك السري",
+  "REMEBER_ME": "تذكرنى",
+  "FORGOT_PASSWORD": "هل نسيت كلمة السر؟",
+  "LOG_IN": "تسجيل الدخول",
+  "CREATE_AN_ACCOUNT": "إنشاء حساب",
+  "WELCOME_PLEASE_ENTER_YOUR_DETAILS": "مرحباً ! ",
+  "NAME": "اسم",
+  "ENTER_YOUR_NAME": "أدخل أسمك",
+  "DONT_HAVE_ACCOUNT": "ليس لديك حساب؟",
+  "ALREADY_HAVE_ACCOUNT": "هل لديك حساب بالفعل؟",
+  "LOGIN": "تسجيل الدخول",
+  "SIGNUP": "اشتراك",
+  "ALREADY_HAVE_AN_ACCOUNT": "هل لديك حساب؟",
+  "CHECK_YOUR_EMAIL": "تحقق من بريدك الالكتروني",
+  "WE_CAN_A_VERIFICATION_LIKE_TO": "يمكننا التحقق مثل ذلك",
+  "VERIFY_EMAIL": "التحقق من البريد الإلكتروني",
+  "DIDNT_RECEIVE_EMAIL": "لم تتلق البريد الإلكتروني؟",
+  "RESEND_NOW": "إعادة إرسال الآن",
+  "CHANGE_THEME": "غير الخلفية",
+  "CHANGE_LANGUAGE": "تغيير اللغة",
+  "LOGOUT": "تسجيل خروج",
+  "SKIP": "يتخطى",
+  "SOMETHING_WENT_WRONG": "أُووبس...!!! ",
+  "NAME_EMPTY": "لا يمكن أن يكون الاسم فارغًا",
+  "EMAIL_EMPTY": "لا يمكن أن يكون البريد الإلكتروني فارغاً",
+  "VALID_EMAIL": "أدخل بريدًا إلكترونيًا صالحًا",
+  "PASSWORD_EMPTY": "لا يمكن أن تكون كلمة المرور فارغة",
+  "SEE_MORE": "شاهد المزيد",
+  "RECOMMEND": "يوصي",
+  "BLOGS_POT": "مدونة",
+  "FIND_INTERESTING_BLOG": "ابحث عن مدونة مثيرة للاهتمام",
+  "FOLLOW_US": "تابعنا",
+  "FOLLOW": "يتبع",
+  "ADD_COMMENTS": "أضف تعليقات",
+  "COMMENTS": "تعليقات",
+  "USERNAME": "اسم المستخدم",
+  "USERNAME_EMPTY": "لا يمكن أن يكون اسم المستخدم فارغًا",
+  "ENTER_YOUR_USERNAME":"أدخل اسم المستخدم الخاص بك",
+  "INVALID_USERNAME": "اسم المستخدم غير صالح",
+  "INVALID_PASSWORD": "يجب أن تحتوي كلمة المرور على رقم واحد على الأقل، وحرف واحد على الأقل، و6 أحرف على الأقل"
+}

package/template/src/translations/en.json

@@ -0,0 +1,47 @@
+{
+  "LOG_IN_TO_YOUR_ACCOUNT":"Log in to your account",
+  "WELCOME_BACK_PLEASE_ENTER_YOUR_DETAILS":"Welcome back! Please enter your details",
+  "EMAIL":"Email",
+  "ENTER_YOUR_EMAIL":"Enter your email",
+  "PASSWORD":"Password",
+  "ENTER_YOUR_PASSWORD":"Enter your password",
+  "REMEBER_ME":"Remember me",
+  "FORGOT_PASSWORD":"Forgot password?",
+  "LOG_IN":"Log In",
+  "CREATE_AN_ACCOUNT":"Create an account",
+  "WELCOME_PLEASE_ENTER_YOUR_DETAILS":"Welcome ! Please enter your details",
+  "NAME":"Name",
+  "ENTER_YOUR_NAME":"Enter your name",
+  "DONT_HAVE_ACCOUNT":"Don't have an account?",
+  "ALREADY_HAVE_ACCOUNT": "Already have an account?",
+  "LOGIN": "Login",
+  "SIGNUP":"Sign up",
+  "ALREADY_HAVE_AN_ACCOUNT":"Already have an account?",
+  "CHECK_YOUR_EMAIL":"Check your email",
+  "WE_CAN_A_VERIFICATION_LIKE_TO":"We can a verification like to",
+  "VERIFY_EMAIL":"Verify email",
+  "DIDNT_RECEIVE_EMAIL":"Didn't receive email?",
+  "RESEND_NOW":"Resend now",
+  "CHANGE_THEME":"Change Theme",
+  "CHANGE_LANGUAGE":"Change Language",
+  "LOGOUT": "Logout",
+  "SKIP":"Skip",
+  "SOMETHING_WENT_WRONG":"Oops...!!! Something Wen't Wrong",
+  "NAME_EMPTY": "Name can not be empty",
+  "EMAIL_EMPTY": "Email can not be empty",
+  "VALID_EMAIL": "Enter valid email",
+  "PASSWORD_EMPTY": "Password can not be empty",
+  "SEE_MORE": "See more",
+  "RECOMMEND": "Recommend",
+  "BLOGS_POT": "Blogs pot",
+  "FIND_INTERESTING_BLOG": "Find an interesting blog",
+  "FOLLOW_US": "Follow us",
+  "FOLLOW": "Follow",
+  "ADD_COMMENTS": "Add comments",
+  "COMMENTS": "Comments",
+  "USERNAME": "Username",
+  "USERNAME_EMPTY": "Username can not be empty",
+  "ENTER_YOUR_USERNAME":"Enter your username",
+  "INVALID_USERNAME":"Invalid username",
+  "INVALID_PASSWORD":"Password must contain at least one number, at least one letter, minimum 6 character"
+}

package/template/src/translations/fr.json

@@ -0,0 +1,47 @@
+{
+  "LOG_IN_TO_YOUR_ACCOUNT": "Connectez-vous à votre compte",
+  "WELCOME_BACK_PLEASE_ENTER_YOUR_DETAILS": "Content de te revoir! ",
+  "EMAIL": "E-mail",
+  "ENTER_YOUR_EMAIL": "Entrer votre Email",
+  "PASSWORD": "Mot de passe",
+  "ENTER_YOUR_PASSWORD": "Tapez votre mot de passe",
+  "REMEBER_ME": "Souviens-toi de moi",
+  "FORGOT_PASSWORD": "Mot de passe oublié?",
+  "LOG_IN": "Se connecter",
+  "CREATE_AN_ACCOUNT": "Créer un compte",
+  "WELCOME_PLEASE_ENTER_YOUR_DETAILS": "Accueillir ! ",
+  "NAME": "Nom",
+  "ENTER_YOUR_NAME": "Entrez votre nom",
+  "DONT_HAVE_ACCOUNT": "Vous n'avez pas de compte ?",
+  "ALREADY_HAVE_ACCOUNT": "Vous avez déjà un compte ?",
+  "LOGIN": "Se connecter",
+  "SIGNUP": "S'inscrire",
+  "ALREADY_HAVE_AN_ACCOUNT": "Vous avez déjà un compte?",
+  "CHECK_YOUR_EMAIL": "Vérifiez votre courrier électronique",
+  "WE_CAN_A_VERIFICATION_LIKE_TO": "Nous pouvons effectuer une vérification comme",
+  "VERIFY_EMAIL": "Vérifier les courriels",
+  "DIDNT_RECEIVE_EMAIL": "Vous n'avez pas reçu d'e-mail ?",
+  "RESEND_NOW": "Renvoyer maintenant",
+  "CHANGE_THEME": "Change le thème",
+  "CHANGE_LANGUAGE": "Changer de langue",
+  "LOGOUT": "Se déconnecter",
+  "SKIP": "Sauter",
+  "SOMETHING_WENT_WRONG":"Oops...!!! Quelque chose n'allait pas mal",
+  "NAME_EMPTY": "Le nom ne peut pas être vide",
+  "EMAIL_EMPTY": "L'e-mail ne peut pas être vide",
+  "VALID_EMAIL": "Entrez une adresse e-mail valide",
+  "PASSWORD_EMPTY": "Le mot de passe ne peut pas être vide",
+  "SEE_MORE": "Voir plus",
+  "RECOMMEND": "Recommander",
+  "BLOGS_POT": "Blog",
+  "FIND_INTERESTING_BLOG": "Trouver un blog intéressant",
+  "FOLLOW_US": "Suivez-nous",
+  "FOLLOW": "Suivre",
+  "ADD_COMMENTS": "Ajouter des commentaires",
+  "COMMENTS": "Commentaires",
+  "USERNAME": "nom d'utilisateur",
+  "USERNAME_EMPTY": "Le nom d'utilisateur ne peut pas être vide",
+  "ENTER_YOUR_USERNAME":"Entrez votre nom d'utilisateur",
+  "INVALID_USERNAME":"Nom d'utilisateur invalide",
+  "INVALID_PASSWORD":"Le mot de passe doit contenir au moins un chiffre, au moins une lettre, minimum 6 caractères"
+}

package/template/src/translations/index.ts

@@ -0,0 +1,32 @@
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+import RNLanguageDetector from "@os-team/i18next-react-native-language-detector";
+
+import enTranslation from "./en.json";
+import arTranslation from "./ar.json";
+import frTranslation from "./fr.json";
+import { I18nManager } from "react-native";
+
+i18n
+  .use(RNLanguageDetector)
+  .use(initReactI18next)
+  .init({
+    debug: true,
+    fallbackLng: "en",
+    interpolation: {
+      escapeValue: false, // react already safes from xss
+    },
+    lng: I18nManager.isRTL ? 'ar' : 'en', // Set language based on RTL
+    resources: {
+      ar: {
+        translation: arTranslation,
+      },
+      en: {
+        translation: enTranslation,
+      },
+      fr: {
+        translation: frTranslation,
+      },
+    },
+    supportedLngs: ["en", "fr", "ar"],
+  });

package/template/src/typings/env.d.ts

@@ -0,0 +1,5 @@
+declare module '@env' {
+  export const ENV: string;
+  export const BASE_API_URL: string;
+  export const IMAGE_URL: string;
+}

package/template/src/typings/global.d.ts

@@ -0,0 +1,3 @@
+export type ThemeMode = string;
+export type Language = string;
+export type LocalStorage = string;

package/template/src/utils/handleLocalStorage.ts

@@ -0,0 +1,31 @@
+import storageKeys from "@constants/storageKeys";
+import { saveUserData } from "@redux/reducers/auth";
+import { saveDefaultLanguage, saveDefaultTheme } from "@redux/reducers/settings";
+import type { LanguageInterface, ThemeInterface } from "@redux/reducers/settings";
+import store from "@redux/store";
+import i18n from "i18next";
+import { UnistylesRuntime } from "react-native-unistyles";
+import { getItem } from "src/services/apiService";
+
+const { dispatch } = store;
+const checkLocalStorage = () => {
+  // get user Data
+  const userData = getItem(storageKeys.USER_DATA);
+  if (userData) {
+    dispatch(saveUserData(userData));
+  }
+  // get default theme
+  const defaultTheme = getItem<ThemeInterface>(storageKeys.DEFAULT_THEME);
+  if (defaultTheme) {
+    UnistylesRuntime.setTheme(defaultTheme.myTheme);
+    dispatch(saveDefaultTheme(defaultTheme));
+  }
+  // get default language
+  const defaultLanguage = getItem<LanguageInterface>(storageKeys.DEFAULT_LANGUAGE);
+  if (defaultLanguage) {
+    i18n.changeLanguage(defaultLanguage.sortName);
+    dispatch(saveDefaultLanguage(defaultLanguage));
+  }
+};
+
+export default checkLocalStorage;

package/template/src/utils/i18nHelpers.ts

@@ -0,0 +1,20 @@
+import storageKeys from "@constants/storageKeys";
+import type { LanguageInterface } from "@redux/reducers/settings";
+import i18n from "i18next";
+import { I18nManager } from "react-native";
+import RNRestart from "react-native-restart";
+import { setItem } from "src/services/apiService";
+
+const changeLanguage = (lng: LanguageInterface) => {
+  if (i18n.language === lng.sortName) {
+    return;
+  }
+  setItem(storageKeys.DEFAULT_LANGUAGE, lng);
+  i18n.changeLanguage(lng.sortName);
+  const isArabic = lng.sortName === "ar";
+  I18nManager.allowRTL(isArabic);
+  I18nManager.forceRTL(isArabic);
+  RNRestart.restart();
+};
+
+export default changeLanguage;

package/template/src/utils/index.ts

@@ -0,0 +1,66 @@
+import { Alert } from "react-native";
+
+export const alertFunction = (title: string, message: string, showCancel: boolean = false, onOkPress: () => void = () => {}, onCancelPress: () => void = () => {}) => {
+const alertOptions: { onPress: () => void; style?: 'cancel' | 'default' | 'destructive'; text: string; }[] = [{onPress: onOkPress, text: 'OK'}];
+if(showCancel){
+    alertOptions.unshift({
+        onPress: onCancelPress,
+        style: 'cancel',
+        text: 'Cancel',
+      });
+    }
+  Alert.alert(
+    title,
+    message,
+    alertOptions,
+    {cancelable: !showCancel},
+  );
+};
+
+
+const customAtob = (base64: string) => {
+  const base64Chars =
+    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
+  let result = "";
+  let bits = 0,
+    buffer = 0,
+    pad = 0;
+
+  for (let i = 0; i < base64.length; i++) {
+    const char = base64[i];
+
+    if (char === "=") {
+      pad++;
+      continue;
+    }
+
+    const index = base64Chars.indexOf(char);
+
+    if (index === -1) {
+      throw new Error("Invalid base64 character");
+    }
+
+    buffer = (buffer << 6) | index;
+    bits += 6;
+
+    if (bits >= 8) {
+      bits -= 8;
+      const byte = (buffer >> bits) & 0xff;
+      result += String.fromCharCode(byte);
+    }
+  }
+
+  if (pad > 2) {
+    throw new Error("Invalid padding in base64 string");
+  }
+
+  return result;
+}
+
+export const isTokenExpired = (token: null | string) => {
+  if (!token) {
+    throw new Error("Token is null or undefined");
+  }
+  const expiry = JSON.parse(customAtob(token.split(".")[1])).exp;
+  return Math.floor(new Date().getTime() / 1000) >= expiry;
+};

package/template/src/utils/scaling.ts

@@ -0,0 +1,13 @@
+import { UnistylesRuntime } from "react-native-unistyles";
+
+export const { height, width } = UnistylesRuntime.screen;
+
+// Guideline sizes are based on standard ~5" screen mobile device
+const guidelineBaseWidth = 350;
+const guidelineBaseHeight = 680;
+
+const scale = (size: number) => (width / guidelineBaseWidth) * size;
+const verticalScale = (size: number) => (height / guidelineBaseHeight) * size;
+const moderateScale = (size: number, factor = 0.5) => size + (scale(size) - size) * factor;
+
+export { moderateScale, scale, verticalScale };

package/template/src/utils/themeHelpers.ts

@@ -0,0 +1,10 @@
+import storageKeys from "@constants/storageKeys";
+import type { UnistylesThemes } from "react-native-unistyles";
+import { UnistylesRuntime } from "react-native-unistyles";
+import { setItem } from "src/services/apiService";
+
+const changeTheme = (mode: keyof UnistylesThemes) => {
+  setItem(storageKeys.DEFAULT_THEME, { myTheme: mode });
+  UnistylesRuntime.setTheme(mode);
+};
+export default changeTheme;

package/template/src/utils/validationForm.ts

@@ -0,0 +1,23 @@
+import * as Yup from 'yup';
+
+const usernameRegEx : RegExp = /^[\dA-Za-z]{6,16}$/
+const passwordRegEx : RegExp = /^(?=.*?\d)(?=.*?[A-Za-z]).{6,32}$/
+
+const validationForm = {
+login: Yup.object({
+  password: Yup.string().required('PASSWORD_EMPTY').trim(),
+    username: Yup.string()
+    .required('USERNAME_EMPTY').matches(usernameRegEx, 'INVALID_USERNAME')
+    .trim(),
+  }),
+  signup: Yup.object({
+    email: Yup.string()
+    .required('EMAIL_EMPTY')
+    .email('VALID_EMAIL')
+    .trim(),
+    name: Yup.string().required('NAME_EMPTY'),
+    password: Yup.string().required('PASSWORD_EMPTY').matches(passwordRegEx, 'INVALID_PASSWORD').trim(),
+  }),
+};
+
+export default validationForm;

package/template/src/utils/validations.ts

@@ -0,0 +1,69 @@
+
+
+const emptyRegex: RegExp = /^$/;
+const emailRegex: RegExp = /^[\w%+.-]+@[\d.A-Za-z-]+\.[A-Za-z]{2,}$/;
+
+const validator = {
+    email: (val: string): boolean => {
+        return emailRegex.test(val.trim());
+    },
+    empty: (val: string): boolean => {
+        return emptyRegex.test(val.trim());
+    }
+};
+
+const checkEmpty = (val: string, key: string): string => {
+    if (validator.empty(val)) {
+        return `Please enter ${key}`;
+    }
+    return '';
+};
+
+const checkMinLength = (val: string, minLength: number, key: string): string => {
+    if (val.trim().length < minLength) {
+        return `Please enter valid ${key}`;
+    }
+    return '';
+};
+
+export default function validate(data: { [key: string]: string }): boolean | string {
+    const { 
+        email,
+        name, 
+        otp,
+        password
+    } = data;
+
+    if (name !== undefined) {
+        const emptyValidationText = checkEmpty(name, "User name");
+        if (emptyValidationText) { return emptyValidationText };
+
+        const minLengthValidation = checkMinLength(name, 3, "User name");
+        if (minLengthValidation) { return minLengthValidation };
+    }
+
+    if (email !== undefined) {
+        const emptyValidationText = checkEmpty(email, "email");
+        if (emptyValidationText) { return emptyValidationText };
+
+        if (!validator.email(email)) { return "Please enter valid email" };
+    }
+
+    if (password !== undefined) {
+        const emptyValidationText = checkEmpty(password, "password");
+        if (emptyValidationText) { return emptyValidationText };
+
+        const minLengthValidation = checkMinLength(password, 6, "password");
+        if (minLengthValidation) { return minLengthValidation };
+    }
+
+    if (otp !== undefined) {
+        const emptyValidationText = checkEmpty(otp, "Otp");
+        if (emptyValidationText) { return emptyValidationText };
+
+        const minLengthValidation = checkMinLength(otp, 4, "Otp");
+        if (minLengthValidation) { return minLengthValidation }
+    }
+
+    return true;
+}

package/template/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "extends": "@react-native/typescript-config",
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["**/node_modules", "**/Pods"],
+  "compilerOptions": {
+    "jsx": "react",
+    "paths": {
+      "@api/*": ["./src/api/*"],
+      "@assets/*": ["./src/assets/*"],
+      "@components/*": ["./src/components/*"],
+      "@screens/*": ["./src/screens/*"],
+      "@utils/*": ["./src/utils/*"],
+      "@constants/*": ["./src/constants/*"],
+      "@typings/*": ["./src/typings/*"],
+      "@redux/*": ["./src/redux/*"],
+      "@navigations/*": ["./src/navigations/*"],
+      "@hooks/*": ["./src/hooks/*"],
+      "@models/*": ["./src/models/*"],
+      "src/*": ["./src/*"]
+    }
+  }
+}