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

package/template/src/components/molecules/HomeListItems.tsx

@@ -0,0 +1,86 @@
+ 
+
+import { TextContainer } from "@components/atoms";
+import RemoteImage from "@components/atoms/RemoteImage";
+import fontFamily from "@constants/fontFamily";
+import type { ProductsData } from "@models/HomeData";
+import type { HomeStackParamList } from "@navigations/MainStack";
+import type { NavigationProp } from "@react-navigation/native";
+import { moderateScale, scale, verticalScale } from "@utils/scaling";
+import React, { memo } from "react";
+import { Pressable, View } from "react-native";
+import { createStyleSheet, useStyles } from "react-native-unistyles";
+
+const stylesheet = createStyleSheet((theme) => ({
+  container: {
+    alignItems: "center",
+    flexDirection: "row",
+    marginHorizontal: moderateScale(16),
+  },
+  flexRow: {
+    alignItems: "center",
+    flexDirection: "row",
+    justifyContent: "space-between",
+  },
+  imageStyle: {
+    borderRadius: moderateScale(10),
+    height: moderateScale(20),
+    marginRight: moderateScale(4),
+    width: moderateScale(20),
+  },
+  profileImage: {
+    backgroundColor: theme.colors.grey,
+    borderRadius: moderateScale(24),
+    height: moderateScale(134),
+    marginRight: moderateScale(16),
+    width: moderateScale(134),
+  },
+  textStyle: {
+    color: theme.colors.opacity50,
+    fontSize: scale(12),
+  },
+}));
+
+interface HomeListItemsProps {
+  item: ProductsData;
+  navigation: NavigationProp<HomeStackParamList>;
+}
+
+const HomeListItems: React.FC<HomeListItemsProps> = memo(({ item, navigation }) => {
+  const { styles } = useStyles(stylesheet);
+  return (
+    <Pressable
+      onPress={() => navigation.navigate("PostDetails", { productId: item.id })}
+      style={styles.container}
+    >
+      <RemoteImage source={{ uri: item.thumbnail }} style={styles.profileImage} />
+
+      <View style={{ flex: 1 }}>
+        <TextContainer isDynamicText style={{ fontSize: scale(12) }} text={item.title} />
+        <TextContainer
+          isDynamicText
+          numberOfLines={2}
+          style={{
+            fontFamily: fontFamily.medium,
+            marginVertical: verticalScale(6),
+          }}
+          text={item.description}
+        />
+        <View style={styles.flexRow}>
+          <View style={{ alignItems: "center", flex: 1, flexDirection: "row" }}>
+            <RemoteImage
+              source={{
+                uri: "https://www.profilebakery.com/wp-content/uploads/2023/03/AI-Profile-Picture.jpg",
+              }}
+              style={styles.imageStyle}
+            />
+            <TextContainer isDynamicText style={styles.textStyle} text="Regulators" />
+          </View>
+          <TextContainer isDynamicText style={styles.textStyle} text="June 14 2023" />
+        </View>
+      </View>
+    </Pressable>
+  );
+});
+
+export default HomeListItems;

package/template/src/components/molecules/Loader.tsx

@@ -0,0 +1,25 @@
+import { WrapperContainer } from "@components/atoms";
+import React from "react";
+import { ActivityIndicator, View } from "react-native";
+import { createStyleSheet, useStyles } from "react-native-unistyles";
+
+const stylesheet = createStyleSheet(() => ({
+  container: {
+    alignItems: "center",
+    flex: 1,
+    justifyContent: "center",
+  },
+}));
+
+const Loader = (): React.JSX.Element => {
+  const { styles } = useStyles(stylesheet);
+  return (
+    <WrapperContainer isSafeAreaView={false}>
+      <View style={styles.container}>
+        <ActivityIndicator size="large" />
+      </View>
+    </WrapperContainer>
+  );
+};
+
+export default React.memo(Loader);

package/template/src/components/molecules/ModalSheet.tsx

@@ -0,0 +1,146 @@
+import {ImageContainer, TextContainer} from '@components/atoms';
+import fontFamily from '@constants/fontFamily';
+import imagePath from '@constants/imagePath';
+import {useDispatch, useSelector} from '@redux/hooks';
+import types from '@redux/types';
+import changeLanguage from '@utils/i18nHelpers';
+import {moderateScale, verticalScale} from '@utils/scaling';
+import changeTheme from '@utils/themeHelpers';
+import type {ReactNode} from 'react';
+import React, { forwardRef, useImperativeHandle, useState} from 'react';
+import type { ModalProps} from 'react-native';
+import {Modal, Pressable, Switch, View} from 'react-native';
+import {createStyleSheet, UnistylesRuntime, useStyles} from 'react-native-unistyles';
+import {storage} from 'src/services/apiService';
+
+const stylesheet = createStyleSheet(theme => ({
+  container: {
+    backgroundColor: theme.colors.background,
+    borderTopLeftRadius: moderateScale(24),
+    borderTopRightRadius: moderateScale(24),
+    elevation: 5,
+    marginTop: 'auto',
+    minHeight: '25%',
+    paddingHorizontal: moderateScale(16),
+    paddingVertical: moderateScale(8),
+    shadowColor: theme.colors.background,
+    shadowOffset: {
+      height: 2,
+      width: 0,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+  },
+  headerView: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  horizontalLine: {
+    alignSelf: 'center',
+    backgroundColor: theme.colors.opacity50,
+    borderRadius: moderateScale(8),
+    height: moderateScale(6),
+    width: moderateScale(80),
+  },
+  logoutText: {
+    color: theme.colors.danger,
+    fontFamily: fontFamily.semiBold,
+  },
+  modalView: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginTop: verticalScale(8),
+  },
+  textStyle: (isSelected: boolean) => ({
+    color: isSelected ? theme.colors.danger : theme.colors.typography,
+    fontFamily: isSelected ? fontFamily.semiBold : fontFamily.regular,
+  }),
+}));
+
+interface ModalSheetProps extends ModalProps {
+  children?: ReactNode;
+}
+
+export interface ModalSheetRef {
+  toggleSheet: () => void;
+}
+
+const ModalSheet = forwardRef<ModalSheetRef, ModalSheetProps>((props, ref) => {
+  const [isVisible, setVisible] = useState(false);
+  const {defaultLanguage, languages} = useSelector(state => state.settings);
+
+  const isDarkMode = UnistylesRuntime.themeName === 'dark';
+  const dispatch = useDispatch();
+  const {styles} = useStyles(stylesheet);
+
+  useImperativeHandle(ref, () => ({
+    toggleSheet: () => {
+      setVisible(!isVisible);
+    },
+  }));
+
+  const onPressLogout = () => {
+    setVisible(!isVisible);
+    setTimeout(() => {
+      // need time to close modal
+      storage.clearAll();
+      dispatch({type: types.CLEAR_REDUX_STATE});
+    }, 800);
+  };
+
+  return (
+    <Modal animationType="slide" transparent visible={isVisible} {...props}>
+      <View style={styles.container}>
+        <View style={styles.headerView}>
+          <View />
+          <View style={styles.horizontalLine} />
+          <Pressable onPress={() => setVisible(!isVisible)}>
+            <ImageContainer source={imagePath.icClose} />
+          </Pressable>
+        </View>
+        <>
+          <View style={styles.modalView}>
+            <View>
+              <TextContainer
+                style={{
+                  fontFamily: fontFamily.semiBold,
+                }}
+                text="CHANGE_LANGUAGE"
+              />
+              {languages.map(val => (
+                <Pressable
+                  key={String(val.sortName)}
+                  onPress={() => changeLanguage(val)}
+                  style={{
+                    marginTop: verticalScale(8),
+                  }}>
+                  <TextContainer
+                    isDynamicText
+                    style={styles.textStyle(defaultLanguage.sortName === val.sortName)}
+                    text={val.name}
+                  />
+                </Pressable>
+              ))}
+            </View>
+            <View>
+              <TextContainer style={{fontFamily: fontFamily.semiBold}} text="CHANGE_THEME" />
+              <Switch
+                onChange={() => changeTheme(isDarkMode ? 'light' : 'dark')}
+                style={{
+                  alignSelf: 'flex-end',
+                  marginVertical: verticalScale(8),
+                }}
+                value={isDarkMode}
+              />
+            </View>
+          </View>
+          <Pressable style={{alignSelf: 'center', marginVertical: verticalScale(16)}}>
+            <TextContainer onPress={onPressLogout} style={styles.logoutText} text="LOGOUT" />
+          </Pressable>
+        </>
+      </View>
+    </Modal>
+  );
+});
+
+export default React.memo(ModalSheet);

package/template/src/components/molecules/RememberMe.tsx

@@ -0,0 +1,58 @@
+import { ImageContainer, TextContainer } from "@components/atoms";
+import fontFamily from "@constants/fontFamily";
+import imagePath from "@constants/imagePath";
+import { moderateScale, scale, verticalScale } from "@utils/scaling";
+import React, { useState } from "react";
+import type { PropsWithChildren } from "react";
+import { Pressable, View } from "react-native";
+import { createStyleSheet, useStyles } from "react-native-unistyles";
+
+const stylesheet = createStyleSheet(() => ({
+  flexRow: {
+    alignItems: "center",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    marginBottom: verticalScale(24),
+  },
+
+  headerStyle: {
+    alignItems: "center",
+    flexDirection: "row",
+    marginBottom: verticalScale(32),
+  },
+  textStyle: {
+    fontFamily: fontFamily.medium,
+    fontSize: scale(12),
+    opacity: 0.6,
+  },
+}));
+
+type SectionProps = PropsWithChildren<{
+  onPressForgot: () => void;
+}>;
+
+const RememberMe = ({ onPressForgot }: SectionProps): React.JSX.Element => {
+  const [rememberMe, setRememberMe] = useState<boolean>(false);
+  const { styles } = useStyles(stylesheet);
+  return (
+    <View style={styles.flexRow}>
+      <Pressable
+        onPress={() => setRememberMe(!rememberMe)}
+        style={{ alignItems: "center", flexDirection: "row" }}
+      >
+        <ImageContainer
+          resizeMode="contain"
+          source={rememberMe ? imagePath.icCheck : imagePath.icUnchek}
+          style={{
+            height: moderateScale(14),
+            marginRight: moderateScale(12),
+            width: moderateScale(14),
+          }}
+        />
+        <TextContainer style={styles.textStyle} text="REMEBER_ME" />
+      </Pressable>
+      <TextContainer onPress={onPressForgot} style={styles.textStyle} text="FORGOT_PASSWORD" />
+    </View>
+  );
+};
+export default React.memo(RememberMe);

package/template/src/components/molecules/SearchBar.tsx

@@ -0,0 +1,46 @@
+import { ImageContainer, TextContainer } from "@components/atoms";
+import fontFamily from "@constants/fontFamily";
+import imagePath from "@constants/imagePath";
+import { moderateScale, scale } from "@utils/scaling";
+import type { PropsWithChildren } from "react";
+import React from "react";
+import type { TextStyle, ViewStyle } from "react-native";
+import { View } from "react-native";
+import { createStyleSheet, useStyles } from "react-native-unistyles";
+
+const stylesheet = createStyleSheet((theme) => ({
+  container: {
+    alignItems: "center",
+    borderColor: theme.colors.opacity50,
+    borderRadius: moderateScale(36),
+    borderWidth: moderateScale(1.2),
+    flexDirection: "row",
+    height: moderateScale(56),
+    paddingHorizontal: moderateScale(12),
+  },
+  titleStyle: {
+    color: theme.colors.opacity50,
+    fontFamily: fontFamily.regular,
+    fontSize: scale(14),
+    marginLeft: moderateScale(16),
+  },
+}));
+
+type SectionProps = PropsWithChildren<{
+  style?: ViewStyle;
+  textStyle?: TextStyle;
+  title: string;
+}>;
+
+const SearchBar = ({ style, textStyle, title }: SectionProps): React.JSX.Element => {
+  const { styles } = useStyles(stylesheet);
+
+  return (
+    <View style={[styles.container, style]}>
+      <ImageContainer source={imagePath.icSearch} />
+      <TextContainer style={[styles.titleStyle, textStyle]} text={title} />
+    </View>
+  );
+};
+
+export default React.memo(SearchBar);

package/template/src/components/molecules/index.ts

@@ -0,0 +1,12 @@
+export { default as AuthHeader } from "./AuthHeader";
+export { default as CustomTextInput } from "./CustomTextInput";
+export { default as EmptyComp } from "./EmptyComp";
+export { default as ErrorComp } from "./ErrorComp";
+export { default as FooterView } from "./FooterView";
+export { default as HeaderComp } from "./HeaderComp";
+export { default as HomeHeader } from "./HomeHeader";
+export { default as HomeListItems } from "./HomeListItems";
+export { default as Loader } from "./Loader";
+export { default as ModalSheet } from "./ModalSheet";
+export { default as RememberMe } from "./RememberMe";
+export { default as SearchBar } from "./SearchBar";

package/template/src/constants/apiConstant.ts

@@ -0,0 +1,12 @@
+import {BASE_API_URL} from "@env";
+
+export const BASE_URL = BASE_API_URL;
+
+const API_CONSTANT = {
+  login: "auth/login",
+  product: "/products",
+  refreshToken: "auth/refreshToken",
+  register: "users/add",
+};
+
+export default API_CONSTANT;

package/template/src/constants/fontFamily.ts

@@ -0,0 +1,8 @@
+export default {
+  bold: "Poppins-Bold",
+  futuraBook: "Futura-Book",
+  futuraRegular: "Futura",
+  medium: "Poppins-Medium",
+  regular: "Poppins-Regular",
+  semiBold: "Poppins-SemiBold",
+};

package/template/src/constants/imagePath.ts

@@ -0,0 +1,25 @@
+/* eslint-disable @typescript-eslint/no-require-imports -- require() is the idiomatic way to load static image assets in React Native */
+export default {
+  icBack: require("@assets/images/icBack.png"),
+  icCheck: require("@assets/images/check.png"),
+  icClose: require("@assets/images/icClose.png"),
+  icComment: require("@assets/images/icComment.png"),
+  icDarkOct: require("@assets/images/oct_dark.png"),
+  icEmail: require("@assets/images/email.png"),
+  icLightOct: require("@assets/images/oct_light.png"),
+  icLike: require("@assets/images/icLike.png"),
+  icLine: require("@assets/images/line.png"),
+  icLock: require("@assets/images/lock.png"),
+  icNotification: require("@assets/images/notification.png"),
+  icOnboard: require("@assets/images/onboard.png"),
+  icPassword: require("@assets/images/password_hide.png"),
+
+  icPasswordShow: require("@assets/images/password_show.png"),
+  icRightArrow: require("@assets/images/right_arrow.png"),
+  icSearch: require("@assets/images/icSearch.png"),
+  icSetting: require("@assets/images/icSetting.png"),
+  icShare: require("@assets/images/icShare.png"),
+  icStar: require("@assets/images/star.png"),
+  icUnchek: require("@assets/images/uncheck.png"),
+  icUser: require("@assets/images/user.png"),
+};

package/template/src/constants/index.ts

@@ -0,0 +1,3 @@
+export default {
+    DATA_LIMIT: 150
+};

package/template/src/constants/storageKeys.ts

@@ -0,0 +1,5 @@
+export default {
+    DEFAULT_LANGUAGE: "@defaultLanguage",
+    DEFAULT_THEME: "@defaultTheme",
+    USER_DATA: '@userInfo'
+};

package/template/src/models/ApiErrorResponse.ts

@@ -0,0 +1,19 @@
+import type { AxiosError } from "axios";
+
+type ResponseStatus = {
+  data: {
+    error: string;
+    status: boolean;
+  };
+};
+
+export interface ApiErrorResponse {
+  error?: Error;
+  message?: string;
+  response?: ResponseStatus;
+  status?: boolean;
+}
+
+export interface ExtendedApiErrorResponse extends ApiErrorResponse {
+  axiosError?: AxiosError;
+}

package/template/src/models/HomeData.ts

@@ -0,0 +1,17 @@
+export interface ProductsData {
+  brand: string;
+  category: string;
+  description: string;
+  discountPercentage: number;
+  id: number;
+  images: [];
+  price: number;
+  rating: number;
+  stock: number;
+  thumbnail: string | undefined;
+  title: string;
+}
+
+export interface HomeData extends ProductsData {
+  products: Array<HomeData>;
+}

package/template/src/models/User.ts

@@ -0,0 +1,11 @@
+export type User = {
+  accessToken: string;
+  email: string;
+  firstName: string;
+  gender: string;
+  id: number;
+  image: string;
+  lastName: string;
+  refreshToken: string;
+  username: string;
+};

package/template/src/navigations/AuthStack.tsx

@@ -0,0 +1,20 @@
+import {createNativeStackNavigator} from '@react-navigation/native-stack';
+import React from 'react';
+import * as Screens from '../screens';
+
+export type AuthStackParamList = {
+  Login: undefined;
+  Onboarding: undefined;
+  Signup: undefined;
+};
+
+export const Stack = createNativeStackNavigator<AuthStackParamList>();
+const AuthStack = () => (
+  <>
+    <Stack.Screen component={Screens.Onboarding} name="Onboarding" />
+    <Stack.Screen component={Screens.Login} name="Login" />
+    <Stack.Screen component={Screens.Signup} name="Signup" />
+  </>
+);
+
+export default AuthStack;

package/template/src/navigations/MainStack.tsx

@@ -0,0 +1,19 @@
+import { createNativeStackNavigator } from "@react-navigation/native-stack";
+import React from "react";
+import * as Screens from "../screens";
+
+export type HomeStackParamList = {
+  Home: undefined;
+  PostDetails: { productId: number };
+  Settings: undefined;
+};
+const Stack = createNativeStackNavigator<HomeStackParamList>();
+
+const MainStack = () => (
+  <>
+    <Stack.Screen component={Screens.Home} name="Home" />
+    <Stack.Screen component={Screens.PostDetails} name="PostDetails" />
+  </>
+);
+
+export default MainStack;

package/template/src/navigations/Routes.tsx

@@ -0,0 +1,22 @@
+import type {RootState} from '@redux/store';
+import {NavigationContainer} from '@react-navigation/native';
+import {createNativeStackNavigator} from '@react-navigation/native-stack';
+import {useSelector} from '@redux/hooks';
+import React from 'react';
+import AuthStack from './AuthStack';
+import MainStack from './MainStack';
+
+const Stack = createNativeStackNavigator();
+
+const Routes = () => {
+  const {userData} = useSelector((state: RootState) => state.auth);
+  return (
+    <NavigationContainer>
+      <Stack.Navigator screenOptions={{headerShown: false}}>
+        {userData?.accessToken ? MainStack() : AuthStack()}
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+};
+
+export default Routes;

package/template/src/navigations/navigationProps.ts

@@ -0,0 +1,8 @@
+import type { NativeStackScreenProps } from "@react-navigation/native-stack";
+
+export type ApplicationStackParamList = {
+  Example: undefined;
+  Startup: undefined;
+};
+
+export type ApplicationScreenProps = NativeStackScreenProps<ApplicationStackParamList>;

package/template/src/redux/hooks.ts

@@ -0,0 +1,10 @@
+
+import type { AppDispatch, RootState } from "./store";
+
+import type { TypedUseSelectorHook } from "react-redux";
+import { useDispatch as useReduxDispatch, useSelector as useReduxSelector } from "react-redux";
+
+// Type safe hooks
+export const useSelector: TypedUseSelectorHook<RootState> = useReduxSelector;
+
+export const useDispatch: () => AppDispatch = useReduxDispatch;

package/template/src/redux/reducers/auth.ts

@@ -0,0 +1,43 @@
+
+import type { User } from "@models/User";
+import type { PayloadAction } from "@reduxjs/toolkit";
+import { createSlice } from "@reduxjs/toolkit";
+
+export interface AuthState {
+  error: Error | null;
+  isLoading: boolean;
+  userData: User;
+}
+
+const initialState: AuthState = {
+  error: null,
+  isLoading: false,
+  userData: {
+    accessToken: "",
+    email: "",
+    firstName: "",
+    gender: "",
+    id: 0,
+    image: "",
+    lastName: "",
+    refreshToken: "",
+    username: ""
+  },
+};
+
+const authSlice = createSlice({
+  initialState,
+  name: "auth",
+  reducers: {
+    hasError: (state, action: PayloadAction<Error>) => {
+      state.error = action.payload;
+    },
+    saveUserData: (state, action: PayloadAction<User>) => {
+      state.userData = action.payload;
+    },
+  },
+});
+
+export const { hasError, saveUserData } = authSlice.actions;
+
+export default authSlice.reducer;

package/template/src/redux/reducers/common.ts

@@ -0,0 +1,24 @@
+import type { PayloadAction } from "@reduxjs/toolkit";
+import { createSlice } from "@reduxjs/toolkit";
+
+export interface CommonState {
+  isLoading: boolean;
+}
+
+const initialState: CommonState = {
+  isLoading: false,
+};
+
+const commonSlice = createSlice({
+  initialState,
+  name: "common",
+  reducers: {
+    setLoading: (state, action: PayloadAction<boolean>) => {
+      state.isLoading = action.payload;
+    },
+  },
+});
+
+export const { setLoading } = commonSlice.actions;
+
+export default commonSlice.reducer;

package/template/src/redux/reducers/index.ts

@@ -0,0 +1,31 @@
+import type { UnknownAction } from "@reduxjs/toolkit";
+import { combineReducers } from "@reduxjs/toolkit";
+import types from "../types";
+import type { AuthState } from "./auth";
+import auth from "./auth";
+import type { CommonState } from "./common";
+import common from "./common";
+import type { ProductState } from "./product";
+import product from "./product";
+import type { SettingsState } from "./settings";
+import settings from "./settings";
+
+export interface RootState {
+  auth: AuthState;
+  common: CommonState;
+  product: ProductState;
+  settings: SettingsState; // Update with the type of settings state
+}
+const appReducer = combineReducers({
+  auth,
+  common,
+  product,
+  settings
+});
+const rootReducer = (state: RootState | undefined, action: UnknownAction) => {
+  if (action.type === types.CLEAR_REDUX_STATE) {
+    state = undefined;
+  }
+  return appReducer(state, action);
+};
+export default rootReducer;