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

package/template/src/screens/PostDetails/styles.ts

@@ -0,0 +1,82 @@
+import fontFamily from "@constants/fontFamily";
+import {
+  height,
+  moderateScale,
+  scale,
+  verticalScale,
+  width
+} from "@utils/scaling";
+import { createStyleSheet } from "react-native-unistyles";
+
+const stylesheet = createStyleSheet((theme) => ({
+  btnStyle: {
+    backgroundColor: theme.colors.white,
+    borderRadius: moderateScale(10),
+    height: moderateScale(34),
+    minWidth: moderateScale(96)
+  },
+  btnTextStyle: {
+    color: theme.colors.black,
+    fontFamily: fontFamily.medium,
+    fontSize: scale(14)
+  },
+  commentBtn: {
+    borderRadius: moderateScale(10),
+    height: moderateScale(34),
+    minWidth: moderateScale(96)
+  },
+  containerView: {
+    borderTopLeftRadius: moderateScale(34),
+    borderTopRightRadius: moderateScale(34),
+    marginTop: verticalScale(-26),
+    paddingHorizontal: moderateScale(16)
+  },
+  descTextStyle: {
+    color: theme.colors.opacity50,
+    fontSize: scale(14)
+  },
+  flexView: {
+    alignItems: "center",
+    flex: 0.3,
+    flexDirection: "row"
+  },
+  followUs: {
+    color: theme.colors.white,
+    fontFamily: fontFamily.semiBold,
+    fontSize: scale(18)
+  },
+  headerLine: {
+    alignSelf: "center",
+    borderRadius: moderateScale(12),
+    height: moderateScale(2),
+    marginVertical: verticalScale(14),
+    width: moderateScale(42)
+  },
+
+  headerTextStyle: {
+    fontFamily: fontFamily.semiBold,
+    fontSize: scale(20)
+  },
+  imageStyle: {
+    justifyContent: "space-between",
+    minHeight: height / 2.5,
+    paddingBottom: verticalScale(40),
+    paddingHorizontal: moderateScale(28),
+    width
+  },
+  likeCommentView: {
+    alignItems: "center",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    marginTop: verticalScale(14)
+  },
+  rectangleBox: {
+    backgroundColor: "#B3C680",
+    borderRadius: moderateScale(18),
+    flexDirection: "row",
+    minHeight: moderateScale(85),
+    paddingHorizontal: moderateScale(30),
+    paddingVertical: verticalScale(18)
+  }
+}));
+export default stylesheet;

package/template/src/screens/Signup/Signup.tsx

@@ -0,0 +1,32 @@
+import {WrapperContainer} from '@components/atoms';
+import AuthHeader from '@components/molecules/AuthHeader';
+import React from 'react';
+import {View} from 'react-native';
+import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
+import {useStyles} from 'react-native-unistyles';
+import SignupForm from './components/SignupForm';
+import useSignup from './hooks/useSignup';
+import stylesheet from './styles';
+import {FooterView} from '@components/molecules';
+
+function Signup(): React.JSX.Element {
+  // Signup hidden action and effect implementation from the screen
+  const {onGoBack} = useSignup();
+
+  // Stylesheet declaration
+  const {styles} = useStyles(stylesheet);
+
+  return (
+    <WrapperContainer>
+      <KeyboardAwareScrollView>
+        <View style={styles.container}>
+          <AuthHeader description="WELCOME_PLEASE_ENTER_YOUR_DETAILS" title="CREATE_AN_ACCOUNT" />
+          <SignupForm />
+        </View>
+      </KeyboardAwareScrollView>
+      <FooterView linkPress={onGoBack} linkText="LOGIN" simpleText="ALREADY_HAVE_ACCOUNT" />
+    </WrapperContainer>
+  );
+}
+
+export default Signup;

package/template/src/screens/Signup/components/SignupForm.tsx

@@ -0,0 +1,113 @@
+import CustomButton from '@components/atoms/ButtonContainer';
+import {CustomTextInput} from '@components/molecules';
+import RememberMe from '@components/molecules/RememberMe';
+import imagePath from '@constants/imagePath';
+import {useDispatch, useSelector} from '@redux/hooks';
+import {alertFunction} from '@utils/index';
+import {verticalScale} from '@utils/scaling';
+import validationForm from '@utils/validationForm';
+import {Formik} from 'formik';
+import React, {createRef, Fragment, useCallback, useRef, useState} from 'react';
+import type {TextInputInstance} from 'react-native';
+import {Keyboard} from 'react-native';
+import {signup} from 'src/services/authService';
+
+// Form field reference declaration
+const inputRef = {
+  email: createRef<TextInputInstance>(),
+  password: createRef<TextInputInstance>(),
+};
+
+const SignupForm = (): React.JSX.Element => {
+  // Redux variables
+  const dispatch = useDispatch();
+  const isLoading = useSelector(state => state.common.isLoading);
+
+  // Reference Variableș
+  const signupFormRef = useRef(null);
+
+  // Local state declaration
+  const [secureTextEntry, setSecureTextEntry] = useState(true);
+
+  // Signup button callback
+  const onSignup = useCallback(
+    async ({email, name, password}: {email: string; name: string; password: string}) => {
+      dispatch(signup({email, name, password}));
+    },
+    [dispatch],
+  );
+
+  return (
+    <Formik
+      initialValues={{
+        email: '',
+        name: '',
+        password: '',
+      }}
+      innerRef={signupFormRef}
+      onSubmit={onSignup}
+      validationSchema={validationForm.signup}>
+      {({...params}) => {
+        return (
+          <Fragment>
+            <CustomTextInput
+              error={params.touched.name ? params.errors.name : null}
+              id="name"
+              label="NAME"
+              leftImage={imagePath.icUser}
+              onBlur={params.handleBlur('name')}
+              onChangeText={params.handleChange('name')}
+              onSubmitEditing={() => inputRef.email.current?.focus()}
+              placeholder="ENTER_YOUR_NAME"
+              returnKeyType="next"
+              style={{marginBottom: verticalScale(24)}}
+              value={params.values.name}
+            />
+            <CustomTextInput
+              autoCapitalize="none"
+              autoCorrect={false}
+              error={params.touched.email ? params.errors.email : null}
+              id="email"
+              keyboardType="email-address"
+              label="EMAIL"
+              leftImage={imagePath.icEmail}
+              onBlur={params.handleBlur('email')}
+              onChangeText={params.handleChange('email')}
+              onSubmitEditing={() => inputRef.password.current?.focus()}
+              placeholder="ENTER_YOUR_EMAIL"
+              ref={inputRef.email}
+              returnKeyType="next"
+              style={{marginBottom: verticalScale(24)}}
+              value={params.values.email}
+            />
+            <CustomTextInput
+              error={params.touched.password ? params.errors.password : null}
+              id="password"
+              label="PASSWORD"
+              leftImage={imagePath.icLock}
+              onBlur={params.handleBlur('password')}
+              onChangeText={params.handleChange('password')}
+              onPressRight={() => setSecureTextEntry(!secureTextEntry)}
+              onSubmitEditing={() => Keyboard.dismiss()}
+              placeholder="ENTER_YOUR_PASSWORD"
+              ref={inputRef.password}
+              returnKeyType="done"
+              rightImage={secureTextEntry ? imagePath.icPassword : imagePath.icPasswordShow}
+              secureTextEntry={secureTextEntry}
+              style={{marginBottom: verticalScale(24)}}
+              value={params.values.password}
+            />
+            <RememberMe onPressForgot={() => alertFunction('Password', 'Forgot Password')} />
+            <CustomButton
+              isLoading={isLoading}
+              label="SIGNUP"
+              onPress={() => params.handleSubmit()}
+            />
+          </Fragment>
+        );
+      }}
+    </Formik>
+  );
+};
+
+export default SignupForm;

package/template/src/screens/Signup/hooks/useSignup.ts

@@ -0,0 +1,38 @@
+import type { AuthStackParamList } from '@navigations/AuthStack';
+import type { NavigationProp} from '@react-navigation/native';
+import { useNavigation } from '@react-navigation/native';
+import { useDispatch, useSelector } from '@redux/hooks';
+import { hasError } from '@redux/reducers/auth';
+import { alertFunction } from '@utils/index';
+import { useCallback, useEffect } from 'react';
+import { Platform, ToastAndroid } from 'react-native';
+
+// Custom Signup hook
+const useSignup = () => {
+    // Navigation variable declaration
+    const navigation = useNavigation<NavigationProp<AuthStackParamList>>();
+    
+    // Redux variables
+    const dispatch = useDispatch();
+    const error = useSelector(state => state.auth.error);
+
+    const onGoBack = useCallback(() => {
+        navigation.goBack();
+    }, [navigation]);
+  
+    // Effects
+    useEffect(() => {
+      if (error?.message) {
+        if (Platform.OS === 'android') {
+          ToastAndroid.show(error.message, ToastAndroid.SHORT);
+        } else {
+          alertFunction(error.message, '', false, onGoBack);
+        }
+        dispatch(hasError(new Error('')));
+      }
+    }, [dispatch, error, onGoBack]);
+  
+    return {onGoBack};
+};
+
+export default useSignup;

package/template/src/screens/Signup/styles.ts

@@ -0,0 +1,18 @@
+import { moderateScale } from "@utils/scaling";
+import { createStyleSheet } from "react-native-unistyles";
+
+// no user before defined
+const stylesheet = createStyleSheet(() => ({
+  container: {
+    flex: 1,
+    marginHorizontal: moderateScale(16),
+  },
+  flexRow: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginBottom: moderateScale(24),
+  },
+}));
+
+export default stylesheet;

package/template/src/screens/Signup/type.ts

@@ -0,0 +1,12 @@
+import type { User } from "@models/User";
+
+export interface SignupRequestData {
+  email: string,
+  name: string;
+  password: string;
+  username: string
+}
+
+export default interface SignupResponse {
+  data: User;
+}

package/template/src/screens/index.ts

@@ -0,0 +1,5 @@
+export { default as Home } from './Home/Home';
+export { default as Login } from './Login/Login';
+export { default as Onboarding } from './Onboarding/Onboarding';
+export { default as PostDetails } from './PostDetails/PostDetails';
+export { default as Signup } from './Signup/Signup';

package/template/src/services/apiService.ts

@@ -0,0 +1,144 @@
+/* eslint-disable @typescript-eslint/no-explicit-any, no-console */
+import API_CONSTANT, { BASE_URL } from "@constants/apiConstant";
+import storageKeys from "@constants/storageKeys";
+import type { ExtendedApiErrorResponse } from "@models/ApiErrorResponse";
+import type { User } from "@models/User";
+import type { LocalStorage } from "@typings/global";
+import axios from "axios";
+import { MMKV } from "react-native-mmkv";
+import { refreshToken } from "./authService";
+import { isTokenExpired } from "@utils/index";
+
+export const storage = new MMKV();
+
+interface PostOptions {
+  cancelToken?: any; // Adjust the type as per your requirements
+}
+
+const api = axios.create({
+  baseURL: BASE_URL, // Replace with your API base URL,
+  headers: {
+    Accept: 'Application/json',
+    'Content-Type': 'application/json',
+  },
+  timeout: 10_000 // Set a timeout for requests (in milliseconds)
+});
+
+const handleApiError = (error: ExtendedApiErrorResponse) => {
+  console.log("here error", error);
+  if (error.response) {
+    switch (error.axiosError?.status) {
+      case 401: {
+        // handle your unauthorized error here
+        return { ...error.response, error: error.message };
+      }
+      default: {
+        if (!error) {
+            return { error: "Unknown error" };
+        }
+    
+        if (error.response && error.response.data.error && !error.message) {
+            return {
+                ...error.response,
+                error: error.response.data.error || "Network Error"
+            };
+        }
+    
+        if (error.response && error.response.data) {
+            return error.response.data;
+        }
+    
+        return { error: `${error.message}` };
+    }
+    }
+  }
+  return { error: error.message }
+}
+
+// Axios interceptor to add Authorization header before each request
+api.interceptors.request.use(async config => {
+  // Add the Authorization header if a token is present
+  const userData = getItem(storageKeys.USER_DATA);
+  let token = userData?.accessToken;
+  if (userData) {
+      const isExpired = isTokenExpired(token || null);
+      console.log("isExpired.....", isExpired);
+      if (
+        isExpired &&
+        !config.url?.includes(API_CONSTANT.refreshToken)
+      ) {
+        await refreshToken();
+        token = getItem(storageKeys.USER_DATA)?.accessToken || '';
+      }
+      if(token){
+        config.headers.Authorization = `Bearer ${token}`;
+      }else{
+        throw new Error("Authorization failed");
+      }
+  }
+  return config;
+}, (error) => {
+  return Promise.reject(error);
+});
+
+export const get = async (endpoint: string, params = {}) => {
+  try {
+    const response = await api.get(endpoint, { params });
+    return response.data;
+  } catch (error: any) {
+    throw handleApiError(error);
+  }
+};
+
+export const post = async (
+  endpoint: string,
+  data = {},
+  options?: PostOptions
+) => {
+  try {
+    const response = await api.post(endpoint, data, options);
+    return response.data;
+  } catch (error: any) {
+    throw handleApiError(error);
+  }
+};
+
+export const put = async (endpoint: string, data = {}, options?: PostOptions) => {
+  try {
+    const response = await api.put(endpoint, data, options);
+    return response.data;
+  } catch (error: any) {
+    throw handleApiError(error);
+  }
+};
+
+export const remove = async (endpoint: string) => {
+  try {
+    const response = await api.delete(endpoint);
+    return response.data;
+  } catch (error: any) {
+    throw handleApiError(error);
+  }
+};
+
+export const setItem = (key: LocalStorage, value: any) => {
+  storage.set(key, JSON.stringify(value));
+};
+
+export const getItem = <T = User>(key: LocalStorage): null | T  => {
+  const jsonUser = storage.getString(key);
+  if (jsonUser) {
+    try {
+      const userObject = JSON.parse(jsonUser) as T;
+      return userObject;
+    } catch (error) {
+      console.log("Error parsing user data:", error);
+      return null;
+    }
+  } else {
+    console.log("No data found for the key:", key);
+    return null;
+  }
+};
+
+export const clearAllItem = () => storage.clearAll();

package/template/src/services/authService.ts

@@ -0,0 +1,79 @@
+/* eslint-disable no-console */
+import API_CONSTANT from "@constants/apiConstant";
+import storageKeys from "@constants/storageKeys";
+import { hasError, saveUserData } from "@redux/reducers/auth";
+import { setLoading } from "@redux/reducers/common";
+import type { AppDispatch } from "@redux/store";
+import store from "@redux/store";
+import { getItem, post, setItem } from "./apiService";
+
+// Login authentication API
+const login = (authCred: {password: string; username: string,}) => async (dispatch: AppDispatch) => {
+  try {
+    dispatch(setLoading(true));
+    const response = await post(API_CONSTANT.login, authCred);
+    if (response) {
+        dispatch(saveUserData(response));
+        setItem(storageKeys.USER_DATA, response);
+    } else {
+      console.info(response.data.message);
+      dispatch(hasError(new Error(response.data.message)));
+    }
+  } catch (error) {
+    console.error(error);
+    dispatch(hasError(error as Error));
+  } finally {
+    dispatch(setLoading(false));
+  }
+};
+
+
+// Signup authentication API
+const signup = (details: {email: string, name: string, password: string}) => async (dispatch: AppDispatch) => {
+  try {
+    dispatch(setLoading(true));
+    const response = await post(API_CONSTANT.register, details);
+    if (response.status == 200) {
+      if (response.success) {
+        dispatch(saveUserData(response));
+      } else {
+        console.info(response.message);
+        dispatch(hasError(new Error(response?.message)));
+      }
+    } else {
+      console.info(response?.message);
+      dispatch(hasError(new Error(response?.message)));
+    }
+  } catch (error) {
+    console.error(error);
+    dispatch(hasError(error as Error));
+  } finally {
+    dispatch(setLoading(false));
+  }
+};
+
+
+// Refresh Token API
+const refreshToken = async () => {
+  const dispatch = store.dispatch;
+  try {
+    const userData = getItem(storageKeys.USER_DATA);
+    const currentRefreshToken = userData?.refreshToken;
+    dispatch(setLoading(true));
+    const response = await post(API_CONSTANT.refreshToken, {
+      refreshToken: currentRefreshToken,
+    });
+      if (response.success) {
+        setItem(storageKeys.USER_DATA, response);
+        dispatch(saveUserData(response));
+    } else {
+      dispatch(hasError(response.message));
+    }
+  } catch (error) {
+    dispatch(hasError(error as Error));
+  } finally {
+    dispatch(setLoading(false));
+  }
+};
+
+export { login, refreshToken, signup };

package/template/src/services/productService.ts

@@ -0,0 +1,45 @@
+/* eslint-disable no-console */
+import API_CONSTANT from "@constants/apiConstant";
+import { hasError } from "@redux/reducers/auth";
+import { setLoading } from "@redux/reducers/common";
+import { setProductDetail, setProducts } from "@redux/reducers/product";
+import type { AppDispatch } from "@redux/store";
+import { get } from "./apiService";
+
+// Products get API
+const getProduct = (limit: number) => async (dispatch: AppDispatch) => {
+    try {
+      dispatch(setLoading(true));
+      const response = await get(`${API_CONSTANT.product}?limit=${limit}`);
+      if (response.products) {
+          dispatch(setProducts(response.products));
+      } else {
+        console.info(response?.message);
+      }
+    } catch (error) {
+      console.error(error);
+      dispatch(hasError(error as Error));
+    } finally {
+      dispatch(setLoading(false));
+    }
+  };
+
+  // Products details get API
+const getProductDetails = (productId: number) => async (dispatch: AppDispatch) => {
+  try {
+    dispatch(setLoading(true));
+    const response = await get(`${API_CONSTANT.product}/${productId}`);
+    if (response) {
+        dispatch(setProductDetail(response));
+    } else {
+      console.info(response?.message);
+    }
+  } catch (error) {
+    console.error(error);
+    dispatch(hasError(error as Error));
+  } finally {
+    dispatch(setLoading(false));
+  }
+};
+
+export { getProduct, getProductDetails };

package/template/src/services/statusHandler.ts

@@ -0,0 +1,17 @@
+
+import type { AxiosError } from "axios";
+
+const statusHandler = (err: AxiosError) => {
+  if (err.response) {
+    switch (err.response.status) {
+      case 401: {
+        // handle your unauthorized error here
+        break;
+      }
+      default: {
+      }
+    }
+  }
+};
+
+export default statusHandler;

package/template/src/styles/breakpoints.ts

@@ -0,0 +1,11 @@
+const breakpoints = {
+  lg: 992,
+  md: 768,
+  sm: 576,
+  superLarge: 2000,
+  tvLike: 4000,
+  xl: 1200,
+  xs: 0,
+} as const;
+
+export default breakpoints;

package/template/src/styles/themes.ts

@@ -0,0 +1,45 @@
+const constantsColors = {
+  black: "#000000",
+  blue: "#001EB9",
+  danger: "#dc3545",
+  grey: "#B0B0B0",
+  light: "#f8f9fa",
+  white: "#ffffff",
+};
+export const lightTheme = {
+  colors: {
+    ...constantsColors,
+    background: "#ffffff",
+    barStyle: "dark-content",
+    darkwhite: "#000000",
+    opacity50: "rgba(1,1,1,0.5)",
+    placeholder: "rgba(1,1,1,0.52)",
+    textInputColor: "rgba(217, 217, 217,0.2)",
+    typography: "#000000",
+  },
+  margins: {
+    lg: 8,
+    md: 4,
+    sm: 2,
+    xl: 12,
+  },
+} as const;
+
+export const darkTheme = {
+  colors: {
+    ...constantsColors,
+    background: "#000000",
+    barStyle: "light-content",
+    darkwhite: "#ffffff",
+    opacity50: "rgba(201, 201, 201,0.5)",
+    placeholder: "#f8f9fa",
+    textInputColor: "#000000",
+    typography: "#ffffff",
+  },
+  margins: {
+    lg: 8,
+    md: 4,
+    sm: 2,
+    xl: 12,
+  },
+} as const;

package/template/src/styles/unistyles.ts

@@ -0,0 +1,25 @@
+import { UnistylesRegistry } from "react-native-unistyles";
+import breakpoints from "./breakpoints";
+import { darkTheme, lightTheme } from "./themes";
+
+type AppBreakpoints = typeof breakpoints;
+type AppThemes = {
+  dark: typeof darkTheme;
+  light: typeof lightTheme;
+};
+
+declare module "react-native-unistyles" {
+  /* eslint-disable @typescript-eslint/no-empty-object-type -- official unistyles v2 module augmentation pattern */
+  export interface UnistylesBreakpoints extends AppBreakpoints {}
+  export interface UnistylesThemes extends AppThemes {}
+  /* eslint-enable @typescript-eslint/no-empty-object-type */
+}
+
+UnistylesRegistry.addBreakpoints(breakpoints)
+  .addThemes({
+    dark: darkTheme,
+    light: lightTheme,
+  })
+  .addConfig({
+    adaptiveThemes: true,
+  });