Updated project version and added toolkit

.gitignore

@@ -34,6 +34,7 @@ local.properties
 .cxx/
 *.keystore
 !debug.keystore
+.kotlin/
 
 # node.js
 #

.prettierrc.js

@@ -1,7 +1,5 @@
 module.exports = {
   arrowParens: 'avoid',
-  bracketSameLine: true,
-  bracketSpacing: true,
   singleQuote: true,
   trailingComma: 'all',
 };

App/AppContext/index.tsx

@@ -2,6 +2,7 @@
 import React, {
   Context,
   createContext,
+  JSX,
   useContext,
   useEffect,
   useMemo,

App/Hooks/Navigation.ts

@@ -0,0 +1,10 @@
+import { RouteProp, useNavigation, useRoute } from '@react-navigation/native';
+import { RouteType, StackNavigation } from '@Routes/AppRoutes';
+
+export const useAppNavigation = () => {
+  return useNavigation<StackNavigation>();
+};
+
+export const useAppRoute = <T extends keyof RouteType>() => {
+  return useRoute<RouteProp<RouteType, T>>();
+};

App/Hooks/index.ts

@@ -0,0 +1 @@
+export * from './Navigation';

App/Routes/AppRoutes.tsx

@@ -1,11 +1,22 @@
 import Login from '@Components/Login/Login';
-import { AppTab } from '@Routes/AppTab';
+import { StackNavigationProp } from '@react-navigation/stack';
+import { AppTab, tabs } from '@Routes/AppTab';
 
 enum Route {
   LoginScreen = 'Login',
   HomeScreen = 'Home',
 }
 
+export type RouteType = {
+  [Route.LoginScreen]: undefined;
+  [Route.HomeScreen]: {
+    screen: tabs;
+    params?: any;
+  };
+};
+
+export type StackNavigation = StackNavigationProp<RouteType>;
+
 const Routes = [
   {
     name: Route.LoginScreen,

App/Routes/AppTab.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { Image } from 'react-native';
 import {
   BottomTabNavigationOptions,
+  BottomTabNavigationProp,
   createBottomTabNavigator,
 } from '@react-navigation/bottom-tabs';
 import Home from '@Components/Home/Home';
@@ -12,7 +13,7 @@ import SettingsStack from '@Routes/SettingsStack';
 import { AppImages } from '@Theme';
 import { useAppContext } from '@AppContext';
 
-const Tab = createBottomTabNavigator();
+const Tab = createBottomTabNavigator<TabRouteType>();
 
 enum tabs {
   HomeTab = 'Home',
@@ -26,28 +27,37 @@ const TABS = [
     title: tabs.HomeTab,
     icon: AppImages.home,
     screen: Home,
-    name: 'home',
+    name: tabs.HomeTab,
   },
   {
     title: tabs.SearchTab,
     icon: AppImages.search,
     screen: Search,
-    name: 'search',
+    name: tabs.SearchTab,
   },
   {
     title: tabs.UsersTab,
     icon: AppImages.user,
     screen: Users,
-    name: 'user',
+    name: tabs.UsersTab,
   },
   {
     title: tabs.SettingsTab,
     icon: AppImages.settings,
     screen: SettingsStack,
-    name: 'setting',
+    name: tabs.SettingsTab,
   },
 ];
 
+type TabRouteType = {
+  [tabs.HomeTab]: undefined;
+  [tabs.SearchTab]: undefined;
+  [tabs.UsersTab]: undefined;
+  [tabs.SettingsTab]: undefined;
+};
+
+export type BottomTabNavigation = BottomTabNavigationProp<TabRouteType>;
+
 const AppTab = () => {
   const { appTheme } = useAppContext();
   return (
@@ -60,9 +70,7 @@ const AppTab = () => {
           backgroundColor: appTheme.tab,
         },
       }}
-      sceneContainerStyle={{
-        backgroundColor: appTheme.background,
-      }}>
+    >
       {TABS.map(tab => {
         return (
           <Tab.Screen

App/Routes/RootStack.tsx

@@ -1,16 +1,16 @@
 import React, { useEffect } from 'react';
 import { DeviceEventEmitter, EmitterSubscription } from 'react-native';
-import { useNavigation } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
-import { Route, Routes } from '@Routes/AppRoutes';
+import { Route, Routes, RouteType } from '@Routes/AppRoutes';
 import { isLoggedIn } from '@Services';
 import { Authentication, onLogout } from '@Utils';
+import { useAppNavigation } from '@Hooks';
 
-const Stack = createStackNavigator();
+const Stack = createStackNavigator<RouteType>();
 
 const RootStack = () => {
   let isLogout: EmitterSubscription | null = null;
-  const navigation = useNavigation();
+  const navigation = useAppNavigation();
 
   const isUserLogin = () => {
     const isUserLoggedIn = isLoggedIn();
@@ -39,7 +39,8 @@ const RootStack = () => {
         cardOverlayEnabled: true,
         headerBackTitleVisible: false,
         presentation: 'card',
-      })}>
+      })}
+    >
       {Routes.map(route => {
         return (
           <Stack.Screen

App/Routes/SettingsStack.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { createStackNavigator } from '@react-navigation/stack';
 import Settings from '@Components/Settings/Settings';
 import { useAppContext } from '@AppContext';
-import { I18n } from '@Localization';
 
 const Stack = createStackNavigator();
 
@@ -22,14 +21,12 @@ const SettingsStack = () => {
           backgroundColor: appTheme.tab,
         },
         presentation: 'card',
-      })}>
+      })}
+    >
       <Stack.Screen
         name="Settings"
         component={Settings}
-        options={{
-          title: I18n.t('SETTINGS'),
-          headerShown: true,
-        }}
+        options={{ headerShown: true }}
       />
     </Stack.Navigator>
   );