docs: README update

Author: WrathChaos

README.md

@@ -1,16 +1,16 @@
-<img alt="React Native Typescript Boilerplate" src="assets/logo.png" width="1050"/>
+<img alt="React Native Typescript Redux Boilerplate" src="assets/logo.png" width="1050"/>
 
-[![A lot of fundamental features with Typescript support React Native Boilerplate](https://img.shields.io/badge/-A%20lot%20of%20fundamental%20features%20with%20Typescript%20support%20React%20Native%20Boilerplate-orange?style=for-the-badge)](https://github.com/WrathChaos/react-native-typescript-boilerplate)
+[![A lot of fundamental features with Typescript support React Native Boilerplate](https://img.shields.io/badge/-A%20lot%20of%20fundamental%20features%20with%20Typescript%20support%20React%20Native%20Boilerplate-orange?style=for-the-badge)](https://github.com/WrathChaos/react-native-typescript-redux-boilerplate)
 
-[![npm version](https://img.shields.io/npm/v/react-native-typescript-boilerplate.svg?style=for-the-badge)](https://www.npmjs.com/package/@freakycoder/react-native-typescript-boilerplate)
-[![npm](https://img.shields.io/npm/dt/react-native-typescript-boilerplate.svg?style=for-the-badge)](https://www.npmjs.com/package/@freakycoder/react-native-typescript-boilerplate)
+[![npm version](https://img.shields.io/npm/v/react-native-typescript-redux-boilerplate.svg?style=for-the-badge)](https://www.npmjs.com/package/@freakycoder/react-native-typescript-redux-boilerplate)
+[![npm](https://img.shields.io/npm/dt/react-native-typescript-redux-boilerplate.svg?style=for-the-badge)](https://www.npmjs.com/package/@freakycoder/react-native-typescript-redux-boilerplate)
 ![Platform - Android and iOS](https://img.shields.io/badge/platform-Android%20%7C%20iOS-blue.svg?style=for-the-badge)
 [![License: MIT](https://img.shields.io/badge/License-MIT-green.svg?style=for-the-badge)](https://opensource.org/licenses/MIT)
 [![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier)
 
 <p align="center">
-  <img alt="React Native Typescript Boilerplate"
-        src="assets/react-native-typescript-boilerplate.gif" height="650" />
+  <img alt="React Native Typescript Redux Boilerplate"
+        src="assets/react-native-typescript-redux-boilerplate.gif" height="650" />
 </p>
 
 # 🥳 Version 3.3+
@@ -80,7 +80,7 @@ We're proudly announce that `Version 3` is here!
 To create a new project using the barebone boilerplate:
 
 ```sh
-git clone https://github.com/WrathChaos/react-native-typescript-boilerplate.git my-app-name
+git clone https://github.com/WrathChaos/react-native-typescript-redux-boilerplate.git my-app-name
 ```
 
 # 🎯 Step By Step Guide
@@ -165,9 +165,14 @@ sdk.dir=/Users/username/Library/Android/sdk
 
 - [Components](./docs/components.md)
 - [Axios Hooks](./docs/axios-hooks.md)
+- [Custom Redux](./docs/redux.md)
 - [Event Emitter Usage](./docs/event-emitter.md)
 - [Project Structure](./docs/project-structure.md)
 
+## Are you looking for Non-Redux Version? 
+
+### [React Native Typescript Boilerplate](https://github.com/WrathChaos/react-native-typescript-boilerplate)
+
 # 🔮 Roadmap
 
 - [x] ~~LICENSE~~
@@ -177,7 +182,8 @@ sdk.dir=/Users/username/Library/Android/sdk
 - [x] ~~Implement the native splash screen with [react-native-splash-screen](https://github.com/crazycodeboy/react-native-splash-screen)~~
 - [x] ~~Better and separated documentation~~
 - [x] ~~Axios Hooks~~
-- [ ] React Native New Architecture
+- [x] ~~React Native New Architecture~~
+- [x] ~~`Redux` Fork Version~~
 - [ ] `Babel Plugin Module Resolver` Documentation with Example
 - [ ] `Navigation Service` Documentation with Example
 - [ ] `Localization` Documentation with Example
@@ -186,7 +192,6 @@ sdk.dir=/Users/username/Library/Android/sdk
 - [ ] `Website` for the boilerplate
 - [ ] Splash Screen Documentation
 - [ ] `Detox E2E` Integration Fork Version
-- [ ] `Redux` Fork Version
 - [ ] `MobX State Tree` Fork Version
 - [ ] Write an article about the lib on `Medium`
 - [ ] Write an article about the lib on `DevTo`
@@ -203,4 +208,4 @@ FreakyCoder, kurayogun@gmail.com
 
 ## License
 
-React Native Typescript Boilerplate is available under the MIT license. See the LICENSE file for more info.
+React Native Typescript Redux Boilerplate is available under the MIT license. See the LICENSE file for more info.

assets/redux.png

@@ -0,0 +1,34 @@
+<img alt="React Native Typescript Boilerplate" src="../assets/logo.png" width="1050"/>
+<img alt="React Native Typescript Boilerplate" src="../assets/redux.png" />
+
+# 🍾 [Redux](https://redux.js.org/) Custom Service Usage
+
+## Features
+
+- Everything already setup for redux usage
+- Zero configuration, but configurable if needed
+- If you want to change / learn something about the redux configuration please check the [Redux Service](../src/services/redux)
+- There is a basic example which is `User`
+
+
+## Basic Example
+
+- Create your own redux reducer for each of them: [UserReducers](./src/services/redux/user/UserReducers.ts)
+- Write your own redux usage service: [UserService](./src/screens/home/services/userService.ts)
+- Set a data to redux via User Service: [User Redux Set Example](./src/screens/home/HomeScreen.tsx)
+```jsx
+UserService.setUserData(mockUserData); 
+```
+
+- Fetch a data with `react-redux`'s `useSelector` hook [User Redux Fetch Data](./src/screens/profile/ProfileScreen.tsx)
+
+```jsx
+const userData = useSelector(
+  (state: MainState) => state.user.userData as IUser,
+);
+```
+
+
+## Side Note
+
+Of course, you can change the whole Redux usage structure. This one is just an example 👊

docs/redux.md

@@ -1,5 +1,5 @@
 {
-  "name": "react-native-typescript-boilerplate",
+  "name": "react-native-typescript-redux-boilerplate",
   "version": "3.3.0",
   "description": "React Native Template/Boilerplate for awesome applications, using Typescript with a lot of built-in ready features.",
   "dependencies": {

package.json

@@ -1,9 +1,6 @@
-import { IUser } from "@services/models/index";
+import { IUser } from "@services/models";
 import { ReduxServices } from "@services/redux/ReduxService";
-import {
-  setUserData,
-  resetUserData,
-} from "../../../services/redux/user/UserReducers";
+import { setUserData, resetUserData } from "@services/redux/user/UserReducers";
 
 class UserServiceState {
   setUserData = (userData: IUser) => {

src/screens/home/services/userService.ts

@@ -1,8 +1,13 @@
 import { ExtendedTheme } from "@react-navigation/native";
-import { ViewStyle, StyleSheet } from "react-native";
+import { ViewStyle, StyleSheet, TextStyle } from "react-native";
+import { ScreenWidth } from "@freakycoder/react-native-helpers";
 
 interface Style {
   container: ViewStyle;
+  profileContainer: ViewStyle;
+  profileDetailContainer: ViewStyle;
+  cardStyle: ViewStyle;
+  valueTextStyle: TextStyle;
 }
 
 export default (theme: ExtendedTheme) => {
@@ -14,5 +19,34 @@ export default (theme: ExtendedTheme) => {
       alignItems: "center",
       justifyContent: "center",
     },
+    profileContainer: {
+      marginTop: 32,
+      alignItems: "center",
+      justifyContent: "center",
+    },
+    profileDetailContainer: {
+      marginTop: 16,
+      width: ScreenWidth * 0.9,
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-around",
+    },
+    cardStyle: {
+      minWidth: ScreenWidth * 0.4,
+      height: 75,
+      alignItems: "center",
+      justifyContent: "center",
+      backgroundColor: colors.background,
+      shadowRadius: 8,
+      shadowOpacity: 0.3,
+      shadowColor: "#757575",
+      shadowOffset: {
+        width: 0,
+        height: 3,
+      },
+    },
+    valueTextStyle: {
+      marginTop: 8,
+    },
   });
 };

src/screens/profile/ProfileScreen.style.ts

@@ -1,14 +1,15 @@
 import React, { useMemo } from "react";
 import { View } from "react-native";
 import { useTheme } from "@react-navigation/native";
+import { useSelector } from "react-redux";
 /**
  * ? Local Imports
  */
 import createStyles from "./ProfileScreen.style";
 import Text from "@shared-components/text-wrapper/TextWrapper";
-import { useSelector } from "react-redux";
 import { MainState } from "@services/redux/RootReducer";
 import { IUser } from "@services/models";
+import { capitalizeFirstLetter } from "@utils";
 
 interface ProfileScreenProps {}
 
@@ -25,8 +26,37 @@ const ProfileScreen: React.FC<ProfileScreenProps> = () => {
       <Text h1 color={colors.text}>
         Profile
       </Text>
-      <Text>{userData.username}</Text>
-      <Text>{userData.email}</Text>
+      <Text h6>Data is coming from redux itself</Text>
+      <View style={styles.profileContainer}>
+        <View style={styles.profileDetailContainer}>
+          <View style={styles.cardStyle}>
+            <Text h5>User name</Text>
+            <Text h3 bold style={styles.valueTextStyle}>
+              {userData.username}
+            </Text>
+          </View>
+          <View style={styles.cardStyle}>
+            <Text h5>Email</Text>
+            <Text h6 bold style={styles.valueTextStyle}>
+              {userData.email}
+            </Text>
+          </View>
+        </View>
+        <View style={styles.profileDetailContainer}>
+          <View style={styles.cardStyle}>
+            <Text h5>Full name</Text>
+            <Text h3 bold style={styles.valueTextStyle}>
+              {userData.fullname}
+            </Text>
+          </View>
+          <View style={styles.cardStyle}>
+            <Text h5>Social Type</Text>
+            <Text h3 bold style={styles.valueTextStyle}>
+              {capitalizeFirstLetter(userData.socialType)}
+            </Text>
+          </View>
+        </View>
+      </View>
     </View>
   );
 };

src/screens/profile/ProfileScreen.tsx

@@ -2,7 +2,7 @@ import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 /**
  * ? Local Imports
  */
-import { IUser } from "@services/models/index";
+import { IUser } from "@services/models";
 
 export interface InitialState {
   userData: IUser | null;