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

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

@@ -0,0 +1,37 @@
+import type { HomeData, ProductsData } from "@models/HomeData";
+import type { PayloadAction } from "@reduxjs/toolkit";
+import { createSlice } from "@reduxjs/toolkit";
+
+export interface ProductState {
+  error: Error | null;
+  isLoading: boolean;
+  productDetail: null | ProductsData,
+  productList: Array<HomeData>,
+}
+
+const initialState: ProductState = {
+  error: null,
+  isLoading: false,
+  productDetail: null,
+  productList: [],
+};
+
+const productSlice = createSlice({
+  initialState,
+  name: "auth",
+  reducers: {
+    hasError: (state, action: PayloadAction<Error>) => {
+      state.error = action.payload;
+    },
+    setProductDetail: (state, action: PayloadAction<ProductsData>) => {
+      state.productDetail = action.payload;
+    },
+    setProducts: (state, action: PayloadAction<Array<HomeData>>) => {
+      state.productList = action.payload;
+    },
+  },
+});
+
+export const { hasError, setProductDetail, setProducts } = productSlice.actions;
+
+export default productSlice.reducer;

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

@@ -0,0 +1,55 @@
+/* eslint-disable no-console */
+import { createSlice } from "@reduxjs/toolkit";
+import type { PayloadAction } from "@reduxjs/toolkit";
+import type { UnistylesThemes } from "react-native-unistyles";
+
+export interface LanguageInterface {
+  name: string;
+  sortName: string;
+}
+
+export interface ThemeInterface {
+  myTheme: keyof UnistylesThemes;
+}
+
+export interface SettingsState {
+  defaultLanguage: LanguageInterface;
+  defaultTheme: ThemeInterface;
+  languages: Array<LanguageInterface>;
+}
+
+const supportedLanguages: Array<LanguageInterface> = [
+  { name: "English", sortName: "en" },
+  { name: "Arabic", sortName: "ar" },
+  { name: "French", sortName: "fr" },
+];
+
+const initialState: SettingsState = {
+  defaultLanguage: supportedLanguages[0],
+  defaultTheme: { myTheme: "light" },
+  languages: supportedLanguages,
+};
+
+const settingSlice = createSlice({
+  initialState,
+  name: "settings",
+  reducers: {
+    saveDefaultLanguage: (state, action: PayloadAction<LanguageInterface>) => {
+      const languageExists = state.languages.some(
+        (lang) => lang.sortName === action.payload.sortName,
+      );
+      if (languageExists) {
+        state.defaultLanguage = action.payload;
+      } else {
+        console.error("Language not found in the list.");
+      }
+    },
+    saveDefaultTheme: (state, action: PayloadAction<ThemeInterface>) => {
+      state.defaultTheme = action.payload;
+    },
+  },
+});
+
+export const { saveDefaultLanguage, saveDefaultTheme } = settingSlice.actions;
+
+export default settingSlice.reducer;

package/template/src/redux/store.ts

@@ -0,0 +1,19 @@
+
+import type { Action, ThunkAction} from "@reduxjs/toolkit";
+import { configureStore } from "@reduxjs/toolkit";
+import reducer from "./reducers";
+
+const store = configureStore({
+  middleware: (getDefaultMiddleware) => getDefaultMiddleware({ serializableCheck: false }),
+  reducer,
+});
+export default store;
+
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;
+export type AppThunk<ReturnType = void> = ThunkAction<
+  ReturnType,
+  RootState,
+  unknown,
+  Action<string>
+>;

package/template/src/redux/types.ts

@@ -0,0 +1,6 @@
+
+export default {
+  CLEAR_REDUX_STATE: "CLEAR_REDUX_STATE",
+  IS_FIRST_TIME: "IS_FIRST_TIME",
+  IS_SKIP: "IS_SKIP",
+};

package/template/src/screens/Home/Home.tsx

@@ -0,0 +1,65 @@
+import {WrapperContainer} from '@components/atoms';
+import EmptyComp from '@components/molecules/EmptyComp';
+import HomeHeader from '@components/molecules/HomeHeader';
+import HomeListHeader from '@components/molecules/HomeListHeader';
+import HomeListItems from '@components/molecules/HomeListItems';
+import type {ModalSheetRef} from '@components/molecules/ModalSheet';
+import ModalSheet from '@components/molecules/ModalSheet';
+import constants from '@constants/index';
+import type {HomeStackParamList} from '@navigations/MainStack';
+import type {NavigationProp} from '@react-navigation/native';
+import { useNavigation} from '@react-navigation/native';
+import {useDispatch, useSelector} from '@redux/hooks';
+import {moderateScale} from '@utils/scaling';
+import React, {useCallback, useEffect, useRef} from 'react';
+import {FlatList, View} from 'react-native';
+import {getProduct} from 'src/services/productService';
+
+const ItemSeparatorComponent = (): React.JSX.Element => (
+  <View style={{height: moderateScale(20)}} />
+);
+
+const Home = (): React.JSX.Element => {
+  // Navigation state variables
+  const navigation = useNavigation<NavigationProp<HomeStackParamList>>();
+  const modalSheetRef = useRef<ModalSheetRef>(null);
+
+  // Redux global variables
+  const dispatch = useDispatch();
+  const isLoading = useSelector(state => state.common.isLoading);
+  const productList = useSelector(state => state.product.productList);
+
+  // Callbacks
+  const handleToggleSheet = useCallback(() => {
+    if (modalSheetRef.current) {
+      modalSheetRef.current.toggleSheet();
+    }
+  }, []);
+
+  // Effects
+  useEffect(() => {
+    dispatch(getProduct(constants.DATA_LIMIT));
+  }, [dispatch]);
+
+  // Renders
+  return (
+    <WrapperContainer>
+      <View style={{marginHorizontal: moderateScale(20)}}>
+        <HomeHeader onPress={handleToggleSheet} title="BLOGS_POT" />
+      </View>
+      <FlatList
+        data={productList}
+        ItemSeparatorComponent={ItemSeparatorComponent}
+        keyExtractor={(item, index) => String(item?.id || index)}
+        ListEmptyComponent={<EmptyComp isError={true} isLoading={isLoading} />}
+        ListHeaderComponent={<HomeListHeader />}
+        renderItem={props => <HomeListItems {...props} navigation={navigation} />}
+      />
+
+      {/* Bottom Modal Sheet */}
+      <ModalSheet ref={modalSheetRef} />
+    </WrapperContainer>
+  );
+};
+
+export default Home;

package/template/src/screens/Login/Login.tsx

@@ -0,0 +1,35 @@
+import {WrapperContainer} from '@components/atoms';
+import {AuthHeader, FooterView} from '@components/molecules';
+import React from 'react';
+import {Keyboard, TouchableWithoutFeedback, View} from 'react-native';
+import {useStyles} from 'react-native-unistyles';
+import LoginForm from './components/LoginForm';
+import useLogin from './hooks/useLogin';
+import stylesheet from './styles';
+
+const Login = (): React.JSX.Element => {
+  // Login hidden action and effect implementation from the screen
+  const {onSignupPress} = useLogin();
+
+  // Stylesheet declaration
+  const {styles} = useStyles(stylesheet);
+
+  return (
+    <WrapperContainer>
+      <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
+        <View style={styles.container}>
+          <View>
+            <AuthHeader
+              description="WELCOME_BACK_PLEASE_ENTER_YOUR_DETAILS"
+              title="LOG_IN_TO_YOUR_ACCOUNT"
+            />
+            <LoginForm />
+          </View>
+          <FooterView linkPress={onSignupPress} linkText="SIGNUP" simpleText="DONT_HAVE_ACCOUNT" />
+        </View>
+      </TouchableWithoutFeedback>
+    </WrapperContainer>
+  );
+};
+
+export default Login;

package/template/src/screens/Login/components/LoginForm.tsx

@@ -0,0 +1,88 @@
+import {ButtonContainer} from '@components/atoms';
+import {CustomTextInput, RememberMe} from '@components/molecules';
+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, {Fragment, useCallback, useRef, useState} from 'react';
+import type {TextInputInstance} from 'react-native';
+import {Keyboard} from 'react-native';
+import {login} from 'src/services/authService';
+
+const LoginForm = (): React.JSX.Element => {
+  // Reference variables
+  const loginFormRef = useRef(null);
+  const passwordInputRef = useRef<null | TextInputInstance>(null);
+
+  // Redux variables
+  const dispatch = useDispatch();
+  const isLoading = useSelector(state => state.common.isLoading);
+
+  // Local state declaration
+  const [secureTextEntry, setSecureTextEntry] = useState(true);
+
+  // Login button callback
+  const onLogin = useCallback(({password, username}: {password: string; username: string;}) => {
+    dispatch(login({password, username}));
+  }, [dispatch]);
+
+  return (
+    <Formik
+      initialValues={{
+        password: 'emilyspass',
+        username: 'emilys',
+      }}
+      innerRef={loginFormRef}
+      onSubmit={onLogin}
+      validationSchema={validationForm.login}>
+      {({...params}) => {
+        return (
+          <Fragment>
+            <CustomTextInput
+              autoCapitalize="none"
+              autoCorrect={false}
+              error={params.touched.username ? params.errors.username : null}
+              id="username"
+              label="USERNAME"
+              leftImage={imagePath.icUser}
+              onBlur={params.handleBlur('username')}
+              onChangeText={params.handleChange('username')}
+              onSubmitEditing={() => passwordInputRef.current?.focus()}
+              placeholder="ENTER_YOUR_USERNAME"
+              returnKeyType="next"
+              style={{marginBottom: verticalScale(16)}}
+              value={params.values.username}
+            />
+            <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={passwordInputRef}
+              returnKeyType="done"
+              rightImage={secureTextEntry ? imagePath.icPassword : imagePath.icPasswordShow}
+              secureTextEntry={secureTextEntry}
+              style={{marginBottom: verticalScale(30)}}
+              value={params.values.password}
+            />
+            <RememberMe onPressForgot={() => alertFunction('Password', 'Forgot Password')} />
+            <ButtonContainer
+              isLoading={isLoading}
+              label="LOG_IN"
+              onPress={() => params.handleSubmit()}
+            />
+          </Fragment>
+        );
+      }}
+    </Formik>
+  );
+};
+
+export default LoginForm;

package/template/src/screens/Login/hooks/useLogin.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 Login hook
+const useLogin = () => {
+//Navigation variable declaration
+const navigation = useNavigation<NavigationProp<AuthStackParamList>>();
+
+// Redux variables
+const dispatch = useDispatch();
+const error = useSelector(state => state.auth.error);
+
+const onSignupPress = useCallback(() => {
+    navigation.navigate('Signup');
+}, [navigation]);
+
+// Effects
+    useEffect(() => {
+    if (error?.message) {
+        if (Platform.OS === 'android') {
+        ToastAndroid.show(error.message, ToastAndroid.SHORT);
+        } else {
+        alertFunction(error.message, '');
+        }
+        dispatch(hasError(new Error('')));
+    }
+    }, [dispatch, error]);
+
+    return {onSignupPress};
+};
+
+export default useLogin;

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

@@ -0,0 +1,17 @@
+import { moderateScale } from "@utils/scaling";
+import { createStyleSheet } from "react-native-unistyles";
+
+const stylesheet = createStyleSheet(() => ({
+  bottomView: {
+    alignItems: 'center',
+    alignSelf: 'center',
+    flexDirection: 'row',
+  },
+  container: {
+    flex: 1,
+    justifyContent: 'space-between',
+    marginHorizontal: moderateScale(16),
+  },
+}));
+
+export default stylesheet;

package/template/src/screens/Login/types.ts

@@ -0,0 +1,10 @@
+import type { User } from "@models/User";
+
+export interface LoginRequestData {
+  password: string;
+  username: string;
+}
+
+export default interface LoginResponse {
+  data: User;
+}

package/template/src/screens/Onboarding/Onboarding.tsx

@@ -0,0 +1,87 @@
+import {TextContainer, WrapperContainer} from '@components/atoms';
+import fontFamily from '@constants/fontFamily';
+import type {AuthStackParamList} from '@navigations/AuthStack';
+import type {NavigationProp} from '@react-navigation/native';
+import {useNavigation} from '@react-navigation/native';
+import {height, moderateScale, scale, verticalScale, width} from '@utils/scaling';
+import React, {useRef, useState} from 'react';
+import type {NativeScrollEvent, NativeSyntheticEvent, ScrollViewInstance} from 'react-native';
+import {Image, ScrollView, View} from 'react-native';
+import {useStyles} from 'react-native-unistyles';
+import stylesheet from './styles';
+
+const onBoardData = [{id: 1}, {id: 2}, {id: 3}];
+
+const Onboarding = (): React.JSX.Element => {
+  const navigation = useNavigation<NavigationProp<AuthStackParamList>>();
+  const [index, setIndex] = useState<number>(0);
+  const {styles} = useStyles(stylesheet);
+  const scrollRef = useRef<null | ScrollViewInstance>(null);
+
+  const handleScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+    const newIndex = Number((event.nativeEvent.contentOffset.x / (width - 20)).toFixed(0));
+    setIndex(newIndex);
+  };
+
+  return (
+    <WrapperContainer>
+      <View style={styles.container}>
+        <ScrollView
+          horizontal
+          onMomentumScrollEnd={handleScroll}
+          pagingEnabled
+          ref={scrollRef}
+          showsHorizontalScrollIndicator={false}>
+          {onBoardData.map(val => (
+            <View
+              key={String(val.id)}
+              style={{
+                paddingHorizontal: moderateScale(16),
+                width,
+              }}>
+              <Image
+                resizeMode="contain"
+                source={{
+                  uri: 'https://img.freepik.com/free-vector/onboarding-concept-illustration_114360-1085.jpg',
+                }}
+                style={{
+                  height: height / 2.1,
+                  width: '100%',
+                }}
+              />
+              <TextContainer
+                isDynamicText
+                style={{
+                  fontSize: scale(32),
+                  lineHeight: scale(42),
+                  marginVertical: verticalScale(16),
+                }}
+                text="Connect people around the world"
+              />
+              <TextContainer
+                isDynamicText
+                style={{
+                  fontFamily: fontFamily.regular,
+                  fontSize: scale(14),
+                }}
+                text="Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content."
+              />
+            </View>
+          ))}
+        </ScrollView>
+        <View style={styles.flexView}>
+          <View style={{alignItems: 'center', flexDirection: 'row'}}>
+            {onBoardData.map((val, i) => (
+              <View key={String(val.id)} style={styles.dotStyle(i === index)} />
+            ))}
+          </View>
+          <View>
+            <TextContainer onPress={() => navigation.navigate('Login')} text="SKIP" />
+          </View>
+        </View>
+      </View>
+    </WrapperContainer>
+  );
+};
+
+export default Onboarding;

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

@@ -0,0 +1,25 @@
+import { moderateScale, verticalScale } from "@utils/scaling";
+import { createStyleSheet } from "react-native-unistyles";
+
+const stylesheet = createStyleSheet((theme) => ({
+  container: {
+    flex: 1,
+    justifyContent: "space-between",
+    marginVertical: verticalScale(16),
+  },
+  dotStyle: (isSelected: boolean) => ({
+    backgroundColor: isSelected ? theme.colors.darkwhite : theme.colors.grey,
+    borderRadius: moderateScale(4),
+    height: moderateScale(6),
+    marginRight: moderateScale(8),
+    width: moderateScale(6),
+  }),
+  flexView: {
+    alignItems: "center",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    marginHorizontal: moderateScale(16),
+  },
+}));
+
+export default stylesheet;

package/template/src/screens/PostDetails/PostDetails.tsx

@@ -0,0 +1,168 @@
+import {ButtonContainer, ImageContainer, TextContainer, WrapperContainer} from '@components/atoms';
+import ErrorComp from '@components/molecules/ErrorComp';
+import HeaderComp from '@components/molecules/HeaderComp';
+import Loader from '@components/molecules/Loader';
+import fontFamily from '@constants/fontFamily';
+import imagePath from '@constants/imagePath';
+import {ProductsData} from '@models/HomeData';
+import type {HomeStackParamList} from '@navigations/MainStack';
+import type {RouteProp} from '@react-navigation/native';
+import {moderateScale, scale, width} from '@utils/scaling';
+import React, {useEffect} from 'react';
+import {ImageBackground, SafeAreaView, ScrollView, View} from 'react-native';
+import {UnistylesRuntime, useStyles} from 'react-native-unistyles';
+import stylesheet from './styles';
+import {useDispatch, useSelector} from '@redux/hooks';
+import {getProductDetails} from 'src/services/productService';
+
+type PostDetailsRouteProp = RouteProp<HomeStackParamList, 'PostDetails'>;
+
+type Props = {
+  route: PostDetailsRouteProp;
+};
+
+const PostDetails: React.FC<Props> = ({route}): React.JSX.Element => {
+  // Redux global variables
+  const dispatch = useDispatch();
+  const isLoading = useSelector(state => state.common.isLoading);
+  const {error, productDetail} = useSelector(state => state.product);
+
+  // Styles variables
+  const {styles} = useStyles(stylesheet);
+  const {theme} = useStyles();
+  const isDarkMode = UnistylesRuntime.themeName === 'dark';
+
+  // Effects
+  useEffect(() => {
+    dispatch(getProductDetails(route.params?.productId));
+  }, [dispatch, route.params?.productId]);
+
+  // Rendering handled
+  if (isLoading) {
+    return <Loader />;
+  }
+  if (error) {
+    return <ErrorComp />;
+  }
+
+  return (
+    <WrapperContainer isSafeAreaView={false}>
+      <ScrollView
+        style={{
+          backgroundColor: theme.colors.background,
+          overflow: 'visible',
+        }}>
+        <ImageBackground
+          resizeMode="stretch"
+          source={{uri: productDetail?.thumbnail}}
+          style={styles.imageStyle}>
+          <SafeAreaView>
+            <HeaderComp />
+          </SafeAreaView>
+
+          <View>
+            <TextContainer
+              isDynamicText
+              style={{
+                color: theme.colors.white,
+                fontFamily: fontFamily.semiBold,
+                fontSize: scale(24),
+              }}
+              text={productDetail?.description || ''}
+            />
+            <TextContainer
+              isDynamicText
+              style={{
+                color: theme.colors.white,
+                fontSize: scale(14),
+              }}
+              text={productDetail?.description || ''}
+            />
+          </View>
+        </ImageBackground>
+
+        <View style={[styles.containerView, {backgroundColor: theme.colors.background}]}>
+          <View
+            style={{
+              ...styles.headerLine,
+              backgroundColor: theme.colors.opacity50,
+            }}
+          />
+
+          <View style={styles.rectangleBox}>
+            <View style={{width: width / 2}}>
+              <TextContainer style={styles.followUs} text="FOLLOW_US" />
+              <TextContainer
+                isDynamicText
+                style={{color: theme.colors.white}}
+                text="Over 35k Happy Customers"
+              />
+            </View>
+            <ButtonContainer
+              label="FOLLOW"
+              style={styles.btnStyle}
+              textStyle={styles.btnTextStyle}
+            />
+          </View>
+
+          <View style={styles.likeCommentView}>
+            <View style={styles.flexView}>
+              <ImageContainer
+                source={imagePath.icLike}
+                style={{marginRight: moderateScale(8), resizeMode: 'contain'}}
+              />
+              <TextContainer isDynamicText style={{fontSize: scale(12)}} text="25.3k LIKES" />
+            </View>
+            <View style={{...styles.flexView, flex: 0.4}}>
+              <ImageContainer
+                source={imagePath.icComment}
+                style={{marginRight: moderateScale(8), resizeMode: 'contain'}}
+              />
+              <TextContainer isDynamicText style={{fontSize: scale(12)}} text="2.1k COMMENTS" />
+            </View>
+
+            <ButtonContainer
+              label="ADD_COMMENTS"
+              style={{
+                ...styles.btnStyle,
+                backgroundColor: isDarkMode ? theme.colors.white : theme.colors.black,
+                paddingHorizontal: moderateScale(10),
+              }}
+              textStyle={{
+                ...styles.btnTextStyle,
+                color: isDarkMode ? theme.colors.black : theme.colors.white,
+                fontSize: scale(10),
+              }}
+            />
+          </View>
+
+          <View
+            style={{
+              ...styles.headerLine,
+              backgroundColor: theme.colors.grey,
+              height: moderateScale(1),
+              width: '100%',
+            }}
+          />
+
+          <TextContainer
+            isDynamicText
+            style={{color: theme.colors.blue}}
+            text={productDetail?.brand || ''}
+          />
+          <TextContainer
+            isDynamicText
+            style={styles.headerTextStyle}
+            text={productDetail?.title || ''}
+          />
+          <TextContainer
+            isDynamicText
+            style={styles.descTextStyle}
+            text={productDetail?.description || ''}
+          />
+        </View>
+      </ScrollView>
+    </WrapperContainer>
+  );
+};
+export default PostDetails;