From 8031b5bfd7b6a376a474961eee3b0810aa5a5981 Mon Sep 17 00:00:00 2001 From: Girish Parate Date: Thu, 30 Mar 2023 19:58:18 +0530 Subject: [PATCH 1/8] material-u --- android/build.gradle | 4 +- ios/Podfile.lock | 12 ++- ios/Starter.xcodeproj/project.pbxproj | 6 ++ package.json | 9 +- src/components/appAppBar/AppAppBar.tsx | 16 +++ src/navigation/mainNavigation.tsx | 128 +++++++++++++++++------- src/screens/UsersScreen/UsersScreen.tsx | 4 +- src/screens/welcome/WelcomeScreen.tsx | 43 +------- yarn.lock | 83 +++++---------- 9 files changed, 161 insertions(+), 144 deletions(-) create mode 100644 src/components/appAppBar/AppAppBar.tsx diff --git a/android/build.gradle b/android/build.gradle index c24af62..760eca3 100644 --- a/android/build.gradle +++ b/android/build.gradle @@ -6,8 +6,8 @@ buildscript { ndkVersion = "21.4.7075529" buildToolsVersion = "28.0.3" minSdkVersion = 23 - compileSdkVersion = 28 - targetSdkVersion = 28 + compileSdkVersion = 30 + targetSdkVersion = 30 } repositories { google() diff --git a/ios/Podfile.lock b/ios/Podfile.lock index 3b120e2..a7decc6 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -230,8 +230,12 @@ PODS: - React - react-native-restart (0.0.24): - React-Core - - react-native-safe-area-context (0.6.4): + - react-native-safe-area-context (4.1.2): + - RCT-Folly + - RCTRequired + - RCTTypeSafety - React + - ReactCommon/turbomodule/core - React-perflogger (0.68.5) - React-RCTActionSheet (0.68.5): - React-Core/RCTActionSheetHeaders (= 0.68.5) @@ -336,7 +340,7 @@ PODS: - React-Core - RNSVG (11.0.1): - React - - RNVectorIcons (8.1.0): + - RNVectorIcons (9.2.0): - React-Core - SSZipArchive (2.2.3) - Yoga (1.14.0) @@ -508,7 +512,7 @@ SPEC CHECKSUMS: React-logger: 98f663b292a60967ebbc6d803ae96c1381183b6d react-native-encrypted-storage: aea5735891f45f04e0e222099090cece3de825ea react-native-restart: 45c8dca02491980f2958595333cbccd6877cb57e - react-native-safe-area-context: 52342d2d80ea8faadd0ffa76d83b6051f20c5329 + react-native-safe-area-context: 114e9a74df2643012b9d6cc1460b94f3b6a90780 React-perflogger: 0458a87ea9a7342079e7a31b0d32b3734fb8415f React-RCTActionSheet: 22538001ea2926dea001111dd2846c13a0730bc9 React-RCTAnimation: 732ce66878d4aa151d56a0d142b1105aa12fd313 @@ -528,7 +532,7 @@ SPEC CHECKSUMS: RNReanimated: b21b362b4b8ca921932e8b1718e88cf3a36f157e RNScreens: f7ad633b2e0190b77b6a7aab7f914fad6f198d8d RNSVG: 67f1f12dae2cef6ed59a42cae74a6b8f5a9e7b46 - RNVectorIcons: 31cebfcf94e8cf8686eb5303ae0357da64d7a5a4 + RNVectorIcons: fcc2f6cb32f5735b586e66d14103a74ce6ad61f8 SSZipArchive: 62d4947b08730e4cda640473b0066d209ff033c9 Yoga: c4d61225a466f250c35c1ee78d2d0b3d41fe661c diff --git a/ios/Starter.xcodeproj/project.pbxproj b/ios/Starter.xcodeproj/project.pbxproj index c88ed65..2fd8f46 100644 --- a/ios/Starter.xcodeproj/project.pbxproj +++ b/ios/Starter.xcodeproj/project.pbxproj @@ -778,6 +778,7 @@ buildSettings = { ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; ASSETCATALOG_COMPILER_INCLUDE_ALL_APPICON_ASSETS = NO; + BASE_URL = "https://reqres.in/api/"; CLANG_ENABLE_MODULES = YES; CODEPUSH_KEY = ""; CURRENT_PROJECT_VERSION = 1; @@ -895,6 +896,7 @@ buildSettings = { ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; ASSETCATALOG_COMPILER_INCLUDE_ALL_APPICON_ASSETS = NO; + BASE_URL = "https://reqres.in/api/"; CLANG_ENABLE_MODULES = YES; CODEPUSH_KEY = ""; CURRENT_PROJECT_VERSION = 1; @@ -1254,6 +1256,7 @@ buildSettings = { ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon.Staging; ASSETCATALOG_COMPILER_INCLUDE_ALL_APPICON_ASSETS = NO; + BASE_URL = "https://reqres.in/api/"; CLANG_ENABLE_MODULES = YES; CODEPUSH_KEY = fELQLBRhTSrcptH8iYyZnjgbfoAjpv_YAG5kS; CURRENT_PROJECT_VERSION = 1; @@ -1502,6 +1505,7 @@ buildSettings = { ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon.Staging; ASSETCATALOG_COMPILER_INCLUDE_ALL_APPICON_ASSETS = NO; + BASE_URL = "https://reqres.in/api/"; CLANG_ENABLE_MODULES = YES; CODEPUSH_KEY = fELQLBRhTSrcptH8iYyZnjgbfoAjpv_YAG5kS; CURRENT_PROJECT_VERSION = 1; @@ -1720,6 +1724,7 @@ buildSettings = { ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon.Prod; ASSETCATALOG_COMPILER_INCLUDE_ALL_APPICON_ASSETS = NO; + BASE_URL = "https://reqres.in/api/"; CLANG_ENABLE_MODULES = YES; CODEPUSH_KEY = ""; CURRENT_PROJECT_VERSION = 1; @@ -1968,6 +1973,7 @@ buildSettings = { ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon.Prod; ASSETCATALOG_COMPILER_INCLUDE_ALL_APPICON_ASSETS = NO; + BASE_URL = "https://reqres.in/api/"; CLANG_ENABLE_MODULES = YES; CODEPUSH_KEY = "Rbbh4A-EomDicKm042eGpNQ33eMoDBffLJ7to"; CURRENT_PROJECT_VERSION = 1; diff --git a/package.json b/package.json index 1710c5d..b400344 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,7 @@ "@react-native-community/async-storage": "^1.11.0", "@react-native-community/masked-view": "^0.1.6", "@react-navigation/bottom-tabs": "^5.x", + "@react-navigation/elements": "^1.3.17", "@react-navigation/material-top-tabs": "^5.x", "@react-navigation/native": "^5.0.0", "@react-navigation/stack": "^5.0.0", @@ -51,14 +52,14 @@ "react-native-encrypted-storage": "^2.1.0", "react-native-gesture-handler": "^1.5.3", "react-native-localize": "^1.4.0", - "react-native-paper": "^4.8.1", + "react-native-paper": "^5.5.2", "react-native-reanimated": "^2.13.0", "react-native-restart": "^0.0.24", - "react-native-safe-area-context": "^0.6.2", + "react-native-safe-area-context": "4.1.2", "react-native-screens": "^2.0.0-alpha.29", "react-native-svg": "^11.0.1", "react-native-tab-view": "^2.x", - "react-native-vector-icons": "^8.1.0", + "react-native-vector-icons": "^9.2.0", "react-redux": "^7.2.4", "redux": "^4.1.0", "redux-persist": "^6.0.0", @@ -77,4 +78,4 @@ "react-native-svg-transformer": "^1.0.0", "react-test-renderer": "16.11.0" } -} \ No newline at end of file +} diff --git a/src/components/appAppBar/AppAppBar.tsx b/src/components/appAppBar/AppAppBar.tsx new file mode 100644 index 0000000..7ceff66 --- /dev/null +++ b/src/components/appAppBar/AppAppBar.tsx @@ -0,0 +1,16 @@ +import React from 'react' +import { Appbar } from 'react-native-paper'; +export declare type AppAppBarType = { + navigation: any, + back?: any, + title: any +}; + +export const CustomNavigationBar: React.FC = ({ navigation, back, title }) => { + return ( + + {back ? : null} + + + ); +} \ No newline at end of file diff --git a/src/navigation/mainNavigation.tsx b/src/navigation/mainNavigation.tsx index a1e393a..743018f 100644 --- a/src/navigation/mainNavigation.tsx +++ b/src/navigation/mainNavigation.tsx @@ -6,17 +6,19 @@ import React, { FC, useEffect, } from 'react'; import { HOME_STACK_OPTIONS, USERLIST_STACK_OPTIONS, } from './NavigationTypings'; import Ionicons from 'react-native-vector-icons/Ionicons'; import SettingsScreen from '@screens/SettingsScreen/SettingsScreen'; -import { darkThemeType } from 'redux/themeStore/reducers'; +import { DARK_THEME_TYPE } from 'redux/themeStore/reducers'; import { useDispatch, useSelector } from 'react-redux'; import { NavigationContainer, DefaultTheme as NavigationDefaultTheme, - DarkTheme as NavigationDarkTheme + DarkTheme as NavigationDarkTheme, + CommonActions } from '@react-navigation/native' import { Provider as PaperProvider, - DefaultTheme as PaperDefaultTheme, - DarkTheme as PaperDarkTheme + MD3LightTheme as PaperDefaultTheme, + MD3DarkTheme as PaperDarkTheme, + BottomNavigation } from 'react-native-paper' import { checkTheme } from '../redux/themeStore/action'; import { Colors } from '../Config/Colors' @@ -25,19 +27,19 @@ import { Route } from 'constants/Route'; import AppStatusBar from '@components/appStatusBar/appStatusBar'; import AuthStackScreens from './authStack/AuthStackScreens'; import LoadingView from '@components/loadingView'; -import { authType } from 'redux/authStore/authReducers'; +import { AUTH_TYPE } from 'redux/authStore/authReducers'; import AsyncStorage from '@react-native-community/async-storage'; import { checkUserLogin } from 'redux/authStore/action'; import { setTopLevelNavigator } from './NavigationService'; -import { HomeTabs, TabViewApp } from '@screens/tabScreen/HomeTabs'; +import { CustomNavigationBar } from '@components/appAppBar/AppAppBar'; const Stack = createStackNavigator(); const SettingStack = createStackNavigator(); const UserStack = createStackNavigator(); const Tab = createBottomTabNavigator(); export const Navigation: FC = () => { - const data: darkThemeType = useSelector((state: any) => state.themeReducer); - const authState: authType = useSelector((state: any) => state.authReducer); + const data: DARK_THEME_TYPE = useSelector((state: any) => state.themeReducer); + const authState: AUTH_TYPE = useSelector((state: any) => state.authReducer); const appDispatch = useDispatch(); const authDispatch = useDispatch(); const { t, i18n } = useTranslation(); @@ -92,22 +94,32 @@ export const Navigation: FC = () => { const HomeStack = () => { return ( - + , + }} + // screenOptions={{ ...HOME_STACK_OPTIONS, title: t('starterApp') }} + > {/* //* react-native-reanimated Example in HomeScreen */} - {/* */} + {/* //* react-native-reanimated with in scrollable header */} - + {/* */} ) } const UsersListStack = () => { return ( - + , + }} + > ) @@ -115,7 +127,12 @@ export const Navigation: FC = () => { const SettingScreenStack = () => { return ( - + , + }} + > ) @@ -135,29 +152,70 @@ export const Navigation: FC = () => { theme={data.isDarkTheme ? CustomDarkTheme : CustomDefaultTheme}> {authState.userLoggedIn ? ( ({ - tabBarIcon: ({ focused, color, size }) => { - let iconName; - if (route.name === Route.APPSTACK) { - iconName = focused - ? 'home' - : 'home-outline'; - } else if (route.name === Route.USERSCREEN) { - iconName = focused ? 'person' : 'person-outline'; - } else if (route.name === Route.SETTINGS) { - iconName = focused ? 'ios-settings' : 'settings-outline'; - } - return ; - }, - })} - tabBarOptions={{ - activeTintColor: Colors.primary, - inactiveTintColor: 'gray', - }} + tabBar={({ navigation, state, descriptors, insets }) => ( + { + const event = navigation.emit({ + type: 'tabPress', + target: route.key, + canPreventDefault: true, + }); + if (event.defaultPrevented) { + preventDefault(); + } else { + navigation.dispatch({ + ...CommonActions.navigate(route.name, route.params), + target: state.key, + }); + } + }} + renderIcon={({ route, focused, color }) => { + const { options } = descriptors[route.key]; + if (options.tabBarIcon) { + return options.tabBarIcon({ focused, color, size: 24 }); + } + return null; + }} + getLabelText={({ route }) => { + const { options } = descriptors[route.key]; + const label = + options.tabBarLabel !== undefined + ? options.tabBarLabel + : options.title !== undefined + ? options.title + : route.title; + + return label; + }} + /> + )} > - - - + { + return ; + }, + }} + /> + { + return ; + }, + }} + /> + { + return ; + }, + }} + /> ) : ( diff --git a/src/screens/UsersScreen/UsersScreen.tsx b/src/screens/UsersScreen/UsersScreen.tsx index e328476..288a3ed 100644 --- a/src/screens/UsersScreen/UsersScreen.tsx +++ b/src/screens/UsersScreen/UsersScreen.tsx @@ -3,7 +3,7 @@ import { StyleSheet, } from "react-native"; import { NavigationScreen } from "../../navigation/NavigationTypings"; import { ScrollView } from "react-native-gesture-handler"; import { useDispatch, useSelector } from "react-redux"; -import { getServiceResponse, setUserData } from "../../redux/UserListStore/action"; +import { getServiceResponse } from "../../redux/UserListStore/action"; import { UserList } from "../../models/responseType/UserListResponse"; import { ListItem } from "@components/ListItem/ListItem"; import { AppView, } from "@components/Flex/Flex"; @@ -16,7 +16,7 @@ export const UsersScreen: NavigationScreen = (props: any) => { const data: USER_LIST_STATE_TYPE = useSelector((state: any) => state.userListReducer); useEffect(() => { - appDispatch(getServiceResponse({})) + appDispatch(getServiceResponse({ per_page: 20 })) }, []) return ( diff --git a/src/screens/welcome/WelcomeScreen.tsx b/src/screens/welcome/WelcomeScreen.tsx index 9a98483..fdf7424 100644 --- a/src/screens/welcome/WelcomeScreen.tsx +++ b/src/screens/welcome/WelcomeScreen.tsx @@ -1,36 +1,15 @@ -import React, { useState, useEffect } from "react"; +import React, { useEffect } from "react"; import { StyleSheet, Text } from "react-native"; import { AppView, Column } from "../../components/Flex/Flex"; import { AppButton } from "@components/Button/Button"; import '../../localization'; import { useTranslation } from 'react-i18next'; -import Animated, { useSharedValue, useAnimatedStyle, interpolate, withTiming, withSpring, withDelay, withRepeat, withSequence, useAnimatedGestureHandler, useAnimatedScrollHandler } from "react-native-reanimated"; -import { PanGestureHandler } from "react-native-gesture-handler"; +import Animated, { useSharedValue, useAnimatedStyle, interpolate, withTiming } from "react-native-reanimated"; -export const WelcomeScreen = (props: any) => { +export const WelcomeScreen = () => { const { t } = useTranslation(); const opacity = useSharedValue(.5) - const touchx = useSharedValue(0) - const touchY = useSharedValue(0) - - const gestureHandler = useAnimatedGestureHandler({ - onActive: (event) => { - touchx.value = event.translationX; - touchY.value = event.translationY; - }, - onEnd: () => { - touchx.value = withSpring(0); - touchY.value = withSpring(0); - } - }) - - const scrollY = useSharedValue(0); - - - const scrollHandler = useAnimatedScrollHandler((event) => { - scrollY.value = event.contentOffset.y; - }) const animatedStyle = useAnimatedStyle(() => { return { @@ -43,8 +22,6 @@ export const WelcomeScreen = (props: any) => { [0.5, 1.2] ) } - // { translateX: touchx.value }, - // { translateY: touchY.value } ] } }) @@ -80,18 +57,6 @@ export const WelcomeScreen = (props: any) => { return ( - {/* - */} homePage NS: {t('homePage:welcome')} @@ -104,8 +69,6 @@ export const WelcomeScreen = (props: any) => { - {/* - */} ); } diff --git a/yarn.lock b/yarn.lock index d6160a5..212f077 100644 --- a/yarn.lock +++ b/yarn.lock @@ -765,7 +765,7 @@ resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39" integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw== -"@callstack/react-theme-provider@^3.0.7": +"@callstack/react-theme-provider@^3.0.8": version "3.0.8" resolved "https://registry.yarnpkg.com/@callstack/react-theme-provider/-/react-theme-provider-3.0.8.tgz#d0d7ac71e422133c5f7b78f4c4aa1bc57f156f50" integrity sha512-5U231sYY2sqQOaELX0WBCn+iluV8bFaXIS7em03k4W5Xz0AhGvKlnpLIhDGFP8im/SvNW7/2XoR0BsClhn9t6Q== @@ -1343,6 +1343,11 @@ query-string "^6.13.6" react-is "^16.13.0" +"@react-navigation/elements@^1.3.17": + version "1.3.17" + resolved "https://registry.yarnpkg.com/@react-navigation/elements/-/elements-1.3.17.tgz#9cb95765940f2841916fc71686598c22a3e4067e" + integrity sha512-sui8AzHm6TxeEvWT/NEXlz3egYvCUog4tlXA4Xlb2Vxvy3purVXDq/XsM56lJl344U5Aj/jDzkVanOTMWyk4UA== + "@react-navigation/material-top-tabs@^5.x": version "5.3.19" resolved "https://registry.yarnpkg.com/@react-navigation/material-top-tabs/-/material-top-tabs-5.3.19.tgz#64f3a933f5d7e86e99f3d57d9f0c1e833ffa7e4f" @@ -6115,21 +6120,11 @@ locate-path@^5.0.0: dependencies: p-locate "^4.1.0" -lodash._reinterpolate@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d" - integrity sha512-xYHt68QRoYGjeeM/XOE1uJtvXQAgvszfBhjV4yvsQH0u2i9I6cI6c6/eG4Hh3UAOVn0y/xAXwmTzEay49Q//HA== - lodash.debounce@^4.0.8: version "4.0.8" resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af" integrity sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow== -lodash.frompairs@^4.0.1: - version "4.0.1" - resolved "https://registry.yarnpkg.com/lodash.frompairs/-/lodash.frompairs-4.0.1.tgz#bc4e5207fa2757c136e573614e9664506b2b1bd2" - integrity sha512-dvqe2I+cO5MzXCMhUnfYFa9MD+/760yx2aTAN1lqEcEkf896TxgrX373igVdqSJj6tQd0jnSLE1UMuKufqqxFw== - lodash.includes@^4.3.0: version "4.3.0" resolved "https://registry.yarnpkg.com/lodash.includes/-/lodash.includes-4.3.0.tgz#60bb98a87cb923c68ca1e51325483314849f553f" @@ -6170,36 +6165,11 @@ lodash.merge@^4.6.2: resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a" integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ== -lodash.omit@^4.5.0: - version "4.5.0" - resolved "https://registry.yarnpkg.com/lodash.omit/-/lodash.omit-4.5.0.tgz#6eb19ae5a1ee1dd9df0b969e66ce0b7fa30b5e60" - integrity sha512-XeqSp49hNGmlkj2EJlfrQFIzQ6lXdNro9sddtQzcJY8QaoC2GO0DT7xaIokHeyM+mIT0mPMlPvkYzg2xCuHdZg== - lodash.once@^4.0.0: version "4.1.1" resolved "https://registry.yarnpkg.com/lodash.once/-/lodash.once-4.1.1.tgz#0dd3971213c7c56df880977d504c88fb471a97ac" integrity sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg== -lodash.pick@^4.4.0: - version "4.4.0" - resolved "https://registry.yarnpkg.com/lodash.pick/-/lodash.pick-4.4.0.tgz#52f05610fff9ded422611441ed1fc123a03001b3" - integrity sha512-hXt6Ul/5yWjfklSGvLQl8vM//l3FtyHZeuelpzK6mm99pNvN9yTDruNZPEJZD1oWrqo+izBmB7oUfWgcCX7s4Q== - -lodash.template@^4.5.0: - version "4.5.0" - resolved "https://registry.yarnpkg.com/lodash.template/-/lodash.template-4.5.0.tgz#f976195cf3f347d0d5f52483569fe8031ccce8ab" - integrity sha512-84vYFxIkmidUiFxidA/KjjH9pAycqW+h980j7Fuz5qxRtO9pgB7MDFTdys1N7A5mcucRiDyEq4fusljItR1T/A== - dependencies: - lodash._reinterpolate "^3.0.0" - lodash.templatesettings "^4.0.0" - -lodash.templatesettings@^4.0.0: - version "4.2.0" - resolved "https://registry.yarnpkg.com/lodash.templatesettings/-/lodash.templatesettings-4.2.0.tgz#e481310f049d3cf6d47e912ad09313b154f0fb33" - integrity sha512-stgLz+i3Aa9mZgnjr/O+v9ruKZsPsndy7qPZOchbqk2cnTU1ZaldKK+v7m54WoKIyxiuMZTKT2H81F8BeAc3ZQ== - dependencies: - lodash._reinterpolate "^3.0.0" - lodash.throttle@^4.1.1: version "4.1.1" resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4" @@ -7640,7 +7610,7 @@ react-native-gradle-plugin@^0.0.6: resolved "https://registry.yarnpkg.com/react-native-gradle-plugin/-/react-native-gradle-plugin-0.0.6.tgz#b61a9234ad2f61430937911003cddd7e15c72b45" integrity sha512-eIlgtsmDp1jLC24dRn43hB3kEcZVqx6DUQbR0N1ABXGnMEafm9I3V3dUUeD1vh+Dy5WqijSoEwLNUPLgu5zDMg== -react-native-iphone-x-helper@^1.3.0, react-native-iphone-x-helper@^1.3.1: +react-native-iphone-x-helper@^1.3.0: version "1.3.1" resolved "https://registry.yarnpkg.com/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.3.1.tgz#20c603e9a0e765fd6f97396638bdeb0e5a60b010" integrity sha512-HOf0jzRnq2/aFUcdCJ9w9JGzN3gdEg0zFE4FyYlp4jtidqU03D5X7ZegGKfT1EWteR0gPBGp9ye5T5FvSWi9Yg== @@ -7650,14 +7620,14 @@ react-native-localize@^1.4.0: resolved "https://registry.yarnpkg.com/react-native-localize/-/react-native-localize-1.4.3.tgz#6fde2fb1e73a7205910419a680cb4734187d556f" integrity sha512-n3pi89LBeSzB825CBagyaYRtBS93LdvNz3sI386iXwLSg1ONjEGR1Ez36JBuxZalZgORjrKzV2Pun6MO7iwD6w== -react-native-paper@^4.8.1: - version "4.12.5" - resolved "https://registry.yarnpkg.com/react-native-paper/-/react-native-paper-4.12.5.tgz#5ea4bbe02d416d17802a199de748700358c11d3a" - integrity sha512-gdUtJJf0bw/0xoCE1jR6qCQiQCQZ9ivZh0lbPghFFaGxX88WtTQpusnGON8WhLPeH5odEQ4dTBu99lnIQvSFow== +react-native-paper@^5.5.2: + version "5.5.2" + resolved "https://registry.yarnpkg.com/react-native-paper/-/react-native-paper-5.5.2.tgz#c28058ad0e4252b3b6061b9ddc39ed11543706d5" + integrity sha512-cgkx67++r1oDoZRhzTohb0//qkD1Z20C/OcLfrE0HzyAkG+bYm0fA6gWqvHpdC7icQmuDS8iOOLu2288IYWiOA== dependencies: - "@callstack/react-theme-provider" "^3.0.7" + "@callstack/react-theme-provider" "^3.0.8" color "^3.1.2" - react-native-iphone-x-helper "^1.3.1" + use-latest-callback "^0.1.5" react-native-reanimated@^2.13.0: version "2.13.0" @@ -7677,10 +7647,10 @@ react-native-restart@^0.0.24: resolved "https://registry.yarnpkg.com/react-native-restart/-/react-native-restart-0.0.24.tgz#c7036f25d900d9221b84d3e5129b02d4289d4e94" integrity sha512-pvJNU3NwQk6bCG2gOWcQpZ4IxhtELB0K9gzmtixfsaTFbW1UXXHkJNjk1kHazcbH5hrD7QbUkR63fsAVh8X4VQ== -react-native-safe-area-context@^0.6.2: - version "0.6.4" - resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-0.6.4.tgz#624bd50cebc9f47853f179373501511931d2a0c3" - integrity sha512-xj8Mv8ZHfc8RquBgVYt+4+nOJaexTblLsQJpyx4Dh4qFUG+3QtbNlfOF7/ITj/qY5LNdlfafKoDsVgFz0WIU1w== +react-native-safe-area-context@4.1.2: + version "4.1.2" + resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-4.1.2.tgz#2433715c568550f29ae768f8ca7b561f99b5230c" + integrity sha512-35hLhtJRCZW0L2zTz0Wz3d0Oh6uYUiRWa/HvoITq7IvD8GkjjM97MKHSfVhC4N9ZNMzqXDuVfYBpHHisc9Z8+Q== react-native-screens@^2.0.0-alpha.29: version "2.18.1" @@ -7709,17 +7679,11 @@ react-native-tab-view@^2.x: resolved "https://registry.yarnpkg.com/react-native-tab-view/-/react-native-tab-view-2.16.0.tgz#cae72c7084394bd328fac5fefb86cd966df37a86" integrity sha512-ac2DmT7+l13wzIFqtbfXn4wwfgtPoKzWjjZyrK1t+T8sdemuUvD4zIt+UImg03fu3s3VD8Wh/fBrIdcqQyZJWg== -react-native-vector-icons@^8.1.0: - version "8.1.0" - resolved "https://registry.yarnpkg.com/react-native-vector-icons/-/react-native-vector-icons-8.1.0.tgz#e8ee2b17bc4d9f636da1c6f67feee8e2a850c3d8" - integrity sha512-sHIdBB6Y0dHaot2fMXgy5J/hhCn5YuyN7SKDNFgPzL8KA1oF2/v7mgYMavnK7LIIs2dJoGnDANKf61dsU+TZlg== +react-native-vector-icons@^9.2.0: + version "9.2.0" + resolved "https://registry.yarnpkg.com/react-native-vector-icons/-/react-native-vector-icons-9.2.0.tgz#3c0c82e95defd274d56363cbe8fead8d53167ebd" + integrity sha512-wKYLaFuQST/chH3AJRjmOLoLy3JEs1JR6zMNgTaemFpNoXs0ztRnTxcxFD9xhX7cJe1/zoN5BpQYe7kL0m5yyA== dependencies: - lodash.frompairs "^4.0.1" - lodash.isequal "^4.5.0" - lodash.isstring "^4.0.1" - lodash.omit "^4.5.0" - lodash.pick "^4.4.0" - lodash.template "^4.5.0" prop-types "^15.7.2" yargs "^16.1.1" @@ -9360,6 +9324,11 @@ url-parse@^1.4.7, url-parse@^1.5.3: querystringify "^2.1.1" requires-port "^1.0.0" +use-latest-callback@^0.1.5: + version "0.1.5" + resolved "https://registry.yarnpkg.com/use-latest-callback/-/use-latest-callback-0.1.5.tgz#a4a836c08fa72f6608730b5b8f4bbd9c57c04f51" + integrity sha512-HtHatS2U4/h32NlkhupDsPlrbiD27gSH5swBdtXbCAlc6pfOFzaj0FehW/FO12rx8j2Vy4/lJScCiJyM01E+bQ== + "use-subscription@>=1.0.0 <1.6.0": version "1.5.1" resolved "https://registry.yarnpkg.com/use-subscription/-/use-subscription-1.5.1.tgz#73501107f02fad84c6dd57965beb0b75c68c42d1" From e70c72765a64baf300cf1295d1bade4a2bad3daf Mon Sep 17 00:00:00 2001 From: Girish Parate Date: Thu, 30 Mar 2023 22:06:47 +0530 Subject: [PATCH 2/8] update code --- src/navigation/HomeStack/HomeStack.tsx | 30 ++++ .../SettingScreenStack/SettingScreenStack.tsx | 20 +++ .../UsersListStack/UsersListStack.tsx | 21 +++ .../appNavigation/AppNavigation.tsx | 85 +++++++++++ src/navigation/mainNavigation.tsx | 137 +----------------- 5 files changed, 161 insertions(+), 132 deletions(-) create mode 100644 src/navigation/HomeStack/HomeStack.tsx create mode 100644 src/navigation/SettingScreenStack/SettingScreenStack.tsx create mode 100644 src/navigation/UsersListStack/UsersListStack.tsx create mode 100644 src/navigation/appNavigation/AppNavigation.tsx diff --git a/src/navigation/HomeStack/HomeStack.tsx b/src/navigation/HomeStack/HomeStack.tsx new file mode 100644 index 0000000..2cb8dda --- /dev/null +++ b/src/navigation/HomeStack/HomeStack.tsx @@ -0,0 +1,30 @@ +import { CustomNavigationBar } from "@components/appAppBar/AppAppBar"; +import { createStackNavigator } from "@react-navigation/stack"; +import { WelcomeScreen } from "@screens/welcome/WelcomeScreen"; +import { Route } from "constants/Route"; +import React from "react" +import { useTranslation } from "react-i18next"; + +const HomeStack = createStackNavigator(); + +export const HomeScreenStack = () => { + const { t } = useTranslation(); + + return ( + , + }} + // screenOptions={{ ...HOME_STACK_OPTIONS, title: t('starterApp') }} + > + {/* + //* react-native-reanimated Example in HomeScreen + */} + + {/* + //* react-native-reanimated with in scrollable header + */} + {/* */} + + ) +} diff --git a/src/navigation/SettingScreenStack/SettingScreenStack.tsx b/src/navigation/SettingScreenStack/SettingScreenStack.tsx new file mode 100644 index 0000000..e893a12 --- /dev/null +++ b/src/navigation/SettingScreenStack/SettingScreenStack.tsx @@ -0,0 +1,20 @@ +import { CustomNavigationBar } from "@components/appAppBar/AppAppBar"; +import { createStackNavigator } from "@react-navigation/stack"; +import SettingsScreen from "@screens/SettingsScreen/SettingsScreen"; +import { Route } from "constants/Route"; +import React from "react" +import { useTranslation } from "react-i18next"; + +const SettingStack = createStackNavigator(); +export const SettingScreenStack = () => { + const { t } = useTranslation(); + return ( + , + }} + > + + + ) +} \ No newline at end of file diff --git a/src/navigation/UsersListStack/UsersListStack.tsx b/src/navigation/UsersListStack/UsersListStack.tsx new file mode 100644 index 0000000..2e25dcb --- /dev/null +++ b/src/navigation/UsersListStack/UsersListStack.tsx @@ -0,0 +1,21 @@ +import { CustomNavigationBar } from "@components/appAppBar/AppAppBar"; +import { createStackNavigator } from "@react-navigation/stack"; +import { UsersScreen } from "@screens/UsersScreen/UsersScreen"; +import { Route } from "constants/Route"; +import React from "react" +import { useTranslation } from "react-i18next"; + +const UserStack = createStackNavigator(); + +export const UsersListStack = () => { + const { t } = useTranslation(); + return ( + , + }} + > + + + ) +} diff --git a/src/navigation/appNavigation/AppNavigation.tsx b/src/navigation/appNavigation/AppNavigation.tsx new file mode 100644 index 0000000..9b06372 --- /dev/null +++ b/src/navigation/appNavigation/AppNavigation.tsx @@ -0,0 +1,85 @@ +import React from 'react'; +import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; +import { BottomNavigation } from 'react-native-paper'; +import { CommonActions } from '@react-navigation/native'; +import { Route } from 'constants/Route'; +import Ionicons from 'react-native-vector-icons/Ionicons'; +import { HomeScreenStack } from '@navigation/HomeStack/HomeStack'; +import { UsersListStack } from '@navigation/UsersListStack/UsersListStack'; +import { SettingScreenStack } from '@navigation/SettingScreenStack/SettingScreenStack'; +import { useTranslation } from 'react-i18next'; + +const Tab = createBottomTabNavigator(); + +export const AppBottomTab = () => { + const { t } = useTranslation(); + + return ( + ( + { + const event = navigation.emit({ + type: 'tabPress', + target: route.key, + canPreventDefault: true, + }); + if (event.defaultPrevented) { + preventDefault(); + } else { + navigation.dispatch({ + ...CommonActions.navigate(route.name, route.params), + target: state.key, + }); + } + }} + renderIcon={({ route, focused, color }) => { + const { options } = descriptors[route.key]; + if (options.tabBarIcon) { + return options.tabBarIcon({ focused, color, size: 24 }); + } + return null; + }} + getLabelText={({ route }) => { + const { options } = descriptors[route.key]; + const label = + options.tabBarLabel !== undefined + ? options.tabBarLabel + : options.title !== undefined + ? options.title + : route?.title; + + return label; + }} + /> + )} + > + { + return ; + }, + }} + /> + { + return ; + }, + }} + /> + { + return ; + }, + }} + /> + + ) +} \ No newline at end of file diff --git a/src/navigation/mainNavigation.tsx b/src/navigation/mainNavigation.tsx index 743018f..79f5ed3 100644 --- a/src/navigation/mainNavigation.tsx +++ b/src/navigation/mainNavigation.tsx @@ -1,48 +1,32 @@ -import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; -import { createStackNavigator } from '@react-navigation/stack'; -import { UsersScreen } from '@screens/UsersScreen/UsersScreen'; -import { WelcomeScreen } from '@screens/welcome/WelcomeScreen'; import React, { FC, useEffect, } from 'react'; -import { HOME_STACK_OPTIONS, USERLIST_STACK_OPTIONS, } from './NavigationTypings'; -import Ionicons from 'react-native-vector-icons/Ionicons'; -import SettingsScreen from '@screens/SettingsScreen/SettingsScreen'; import { DARK_THEME_TYPE } from 'redux/themeStore/reducers'; import { useDispatch, useSelector } from 'react-redux'; import { NavigationContainer, DefaultTheme as NavigationDefaultTheme, - DarkTheme as NavigationDarkTheme, - CommonActions + DarkTheme as NavigationDarkTheme } from '@react-navigation/native' import { Provider as PaperProvider, MD3LightTheme as PaperDefaultTheme, - MD3DarkTheme as PaperDarkTheme, - BottomNavigation + MD3DarkTheme as PaperDarkTheme } from 'react-native-paper' import { checkTheme } from '../redux/themeStore/action'; import { Colors } from '../Config/Colors' -import { useTranslation } from 'react-i18next'; -import { Route } from 'constants/Route'; import AppStatusBar from '@components/appStatusBar/appStatusBar'; -import AuthStackScreens from './authStack/AuthStackScreens'; import LoadingView from '@components/loadingView'; import { AUTH_TYPE } from 'redux/authStore/authReducers'; import AsyncStorage from '@react-native-community/async-storage'; import { checkUserLogin } from 'redux/authStore/action'; import { setTopLevelNavigator } from './NavigationService'; -import { CustomNavigationBar } from '@components/appAppBar/AppAppBar'; +import { AppBottomTab } from './appNavigation/AppNavigation'; +import AuthStackScreens from './authStack/AuthStackScreens'; -const Stack = createStackNavigator(); -const SettingStack = createStackNavigator(); -const UserStack = createStackNavigator(); -const Tab = createBottomTabNavigator(); export const Navigation: FC = () => { const data: DARK_THEME_TYPE = useSelector((state: any) => state.themeReducer); const authState: AUTH_TYPE = useSelector((state: any) => state.authReducer); const appDispatch = useDispatch(); const authDispatch = useDispatch(); - const { t, i18n } = useTranslation(); useEffect(() => { appDispatch(checkTheme()); @@ -92,52 +76,6 @@ export const Navigation: FC = () => { } } - const HomeStack = () => { - return ( - , - }} - // screenOptions={{ ...HOME_STACK_OPTIONS, title: t('starterApp') }} - > - {/* - //* react-native-reanimated Example in HomeScreen - */} - - {/* - //* react-native-reanimated with in scrollable header - */} - {/* */} - - ) - } - - const UsersListStack = () => { - return ( - , - }} - > - - - ) - } - - const SettingScreenStack = () => { - return ( - , - }} - > - - - ) - } - if (authState.isLoading) { return ; } @@ -151,72 +89,7 @@ export const Navigation: FC = () => { }} theme={data.isDarkTheme ? CustomDarkTheme : CustomDefaultTheme}> {authState.userLoggedIn ? ( - ( - { - const event = navigation.emit({ - type: 'tabPress', - target: route.key, - canPreventDefault: true, - }); - if (event.defaultPrevented) { - preventDefault(); - } else { - navigation.dispatch({ - ...CommonActions.navigate(route.name, route.params), - target: state.key, - }); - } - }} - renderIcon={({ route, focused, color }) => { - const { options } = descriptors[route.key]; - if (options.tabBarIcon) { - return options.tabBarIcon({ focused, color, size: 24 }); - } - return null; - }} - getLabelText={({ route }) => { - const { options } = descriptors[route.key]; - const label = - options.tabBarLabel !== undefined - ? options.tabBarLabel - : options.title !== undefined - ? options.title - : route.title; - - return label; - }} - /> - )} - > - { - return ; - }, - }} - /> - { - return ; - }, - }} - /> - { - return ; - }, - }} - /> - + ) : ( )} From d6348eba7601fed209fa7b72571568faf358d4f6 Mon Sep 17 00:00:00 2001 From: Girish Parate Date: Sat, 1 Apr 2023 18:50:19 +0530 Subject: [PATCH 3/8] Code clean up --- index.js | 2 +- src/Config/ErrorHandleUtils.ts | 3 - src/Config/ScalingUtils.ts | 12 ++++ src/components/AppText/AppText.tsx | 57 +++++++++++++++++++ src/components/Flex/Flex.tsx | 8 ++- src/components/Flex/FlexProps.ts | 1 + src/components/ListItem/ListItem.tsx | 7 ++- src/constants/Route.ts | 3 +- .../UsersListStack/UsersListStack.tsx | 2 + src/navigation/mainNavigation.tsx | 2 +- src/screens/UsersScreen/SelectedUser.tsx | 35 ++++++++++++ src/screens/UsersScreen/UsersScreen.tsx | 34 +++++------ 12 files changed, 137 insertions(+), 29 deletions(-) create mode 100644 src/Config/ScalingUtils.ts create mode 100644 src/components/AppText/AppText.tsx create mode 100644 src/screens/UsersScreen/SelectedUser.tsx diff --git a/index.js b/index.js index 6d7cd4f..dac796e 100644 --- a/index.js +++ b/index.js @@ -4,5 +4,5 @@ import { App } from './src/App'; import codePush from "react-native-code-push"; -let codePushOptions = { checkFrequency: codePush.CheckFrequency.ON_APP_RESUME }; +let codePushOptions = { checkFrequency: codePush.CheckFrequency.ON_APP_START }; AppRegistry.registerComponent(appName, () => codePush(codePushOptions)(App)); diff --git a/src/Config/ErrorHandleUtils.ts b/src/Config/ErrorHandleUtils.ts index 864e748..2736ea6 100644 --- a/src/Config/ErrorHandleUtils.ts +++ b/src/Config/ErrorHandleUtils.ts @@ -1,10 +1,7 @@ import { Alert } from "react-native"; import RNRestart from 'react-native-restart'; -// import { hideLoader, showAlert } from "../../action/AppActions"; export function handleApiError(error: any, appDispatch: any) { - // appDispatch(hideLoader()); - // isDisplayError(error.message) && appDispatch(showAlert(error.message)); } function isDisplayError(message: string) { diff --git a/src/Config/ScalingUtils.ts b/src/Config/ScalingUtils.ts new file mode 100644 index 0000000..4b5c16d --- /dev/null +++ b/src/Config/ScalingUtils.ts @@ -0,0 +1,12 @@ +import { Dimensions } from 'react-native'; +const { width, height } = Dimensions.get('window'); + +//Guideline sizes are based on standard ~5" screen mobile device +const guidelineBaseWidth = 350; +const guidelineBaseHeight = 680; + +const scale = (size: number) => width / guidelineBaseWidth * size; +const verticalScale = (size: number) => height / guidelineBaseHeight * size; +const moderateScale = (size: number, factor = 0.5) => size + (scale(size) - size) * factor; + +export { scale, verticalScale, moderateScale }; \ No newline at end of file diff --git a/src/components/AppText/AppText.tsx b/src/components/AppText/AppText.tsx new file mode 100644 index 0000000..c9eb993 --- /dev/null +++ b/src/components/AppText/AppText.tsx @@ -0,0 +1,57 @@ +import * as React from 'react'; +import { Text } from 'react-native-paper'; + +const MyComponent = () => ( + <> + Title Large + Title Medium + Title Small + + Body Large + Body Medium + Body Small + + Label Large + Label Medium + Label Small + +); + +export default MyComponent; + + +export const Headline3 = () => { + return ( + Headline Small + ) +} + +export const Headline2 = () => { + return ( + Headline Medium + ) +} + +export const Headline1 = () => { + return ( + Headline Large + ) +} + +export const H1Text = () => { + return ( + Display Large + ) +} + +export const H2Text = () => { + return ( + Display Medium + ) +} + +export const H3Text = () => { + return ( + Display small + ) +} \ No newline at end of file diff --git a/src/components/Flex/Flex.tsx b/src/components/Flex/Flex.tsx index b728217..379ccbb 100644 --- a/src/components/Flex/Flex.tsx +++ b/src/components/Flex/Flex.tsx @@ -1,6 +1,7 @@ import React, { FC } from "react"; import { View } from "react-native"; import { FlexProps } from "./FlexProps"; +import { scale } from "Config/ScalingUtils"; export const Row: FC = props => { const { reverse, alignItems, justifyContent, style, children, ...rest } = props; @@ -25,11 +26,14 @@ export const Column: FC = props => { } export const AppView: FC = props => { - const { reverse, alignItems, justifyContent, style, children, ...rest } = props; + const { reverse, alignItems, justifyContent, style, children, paddingRequired, ...rest } = props; const direction = reverse ? 'column-reverse' : 'column'; return ( - + {children} ); diff --git a/src/components/Flex/FlexProps.ts b/src/components/Flex/FlexProps.ts index 1c23fb6..f2d05b5 100644 --- a/src/components/Flex/FlexProps.ts +++ b/src/components/Flex/FlexProps.ts @@ -5,4 +5,5 @@ export interface FlexProps extends ViewProps { reverse? : boolean; alignItems? : FlexAlignType; justifyContent? : 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly'; + paddingRequired?: boolean } \ No newline at end of file diff --git a/src/components/ListItem/ListItem.tsx b/src/components/ListItem/ListItem.tsx index bdd2185..c018a28 100644 --- a/src/components/ListItem/ListItem.tsx +++ b/src/components/ListItem/ListItem.tsx @@ -1,4 +1,5 @@ import React from "react"; +import { GestureResponderEvent } from "react-native"; import * as Animatable from 'react-native-animatable'; import { List, Avatar, Divider } from 'react-native-paper'; @@ -7,13 +8,15 @@ interface listItemProps { email: string style?: any, image: string + onPress: (e: GestureResponderEvent) => void; } export const ListItem = (props: listItemProps) => { - const { style, name, email, image } = props; + const { style, name, email, image, onPress } = props; return ( - + } diff --git a/src/constants/Route.ts b/src/constants/Route.ts index 1840adf..d3d41a5 100644 --- a/src/constants/Route.ts +++ b/src/constants/Route.ts @@ -4,5 +4,6 @@ export enum Route { MODAL = "MODAL", USERSCREEN = "USERSCREEN", APPSTACK = "APPSTACK", - SETTINGS = "SETTINGS" + SETTINGS = "SETTINGS", + SELECTEDUSERSCREEN = "SELECTEDUSERSCREEN" } \ No newline at end of file diff --git a/src/navigation/UsersListStack/UsersListStack.tsx b/src/navigation/UsersListStack/UsersListStack.tsx index 2e25dcb..57eecf3 100644 --- a/src/navigation/UsersListStack/UsersListStack.tsx +++ b/src/navigation/UsersListStack/UsersListStack.tsx @@ -1,5 +1,6 @@ import { CustomNavigationBar } from "@components/appAppBar/AppAppBar"; import { createStackNavigator } from "@react-navigation/stack"; +import { SelectedUserScreen } from "@screens/UsersScreen/SelectedUser"; import { UsersScreen } from "@screens/UsersScreen/UsersScreen"; import { Route } from "constants/Route"; import React from "react" @@ -16,6 +17,7 @@ export const UsersListStack = () => { }} > + ) } diff --git a/src/navigation/mainNavigation.tsx b/src/navigation/mainNavigation.tsx index 79f5ed3..cdd1142 100644 --- a/src/navigation/mainNavigation.tsx +++ b/src/navigation/mainNavigation.tsx @@ -71,7 +71,7 @@ export const Navigation: FC = () => { accent: Colors.primary, primary: Colors.primary, card: 'rgb(18, 18, 18)', - background: '#333333', + background: '#000000', text: '#ffffff' } } diff --git a/src/screens/UsersScreen/SelectedUser.tsx b/src/screens/UsersScreen/SelectedUser.tsx new file mode 100644 index 0000000..6b1d4fb --- /dev/null +++ b/src/screens/UsersScreen/SelectedUser.tsx @@ -0,0 +1,35 @@ +import React, { useEffect } from "react"; +import { StyleSheet, View, } from "react-native"; +import { ScrollView } from "react-native-gesture-handler"; +import { AppView } from "@components/Flex/Flex"; +import { Avatar, Text } from "react-native-paper"; +import { scale } from "Config/ScalingUtils"; +import { UserList } from "models/responseType/UserListResponse"; + +export const SelectedUserScreen = (props: any) => { + const data: UserList = props?.route?.params?.data + + useEffect(() => { + }, []) + + return ( + + + + + {data.first_name} {data.last_name} + {data.email} + + + + ); +} + +const style = StyleSheet.create({ + scrollView: { + flex: 1, + } +}); \ No newline at end of file diff --git a/src/screens/UsersScreen/UsersScreen.tsx b/src/screens/UsersScreen/UsersScreen.tsx index 288a3ed..fdb2417 100644 --- a/src/screens/UsersScreen/UsersScreen.tsx +++ b/src/screens/UsersScreen/UsersScreen.tsx @@ -1,17 +1,15 @@ import React, { useEffect } from "react"; -import { StyleSheet, } from "react-native"; +import { FlatList, GestureResponderEvent, StyleSheet, } from "react-native"; import { NavigationScreen } from "../../navigation/NavigationTypings"; -import { ScrollView } from "react-native-gesture-handler"; import { useDispatch, useSelector } from "react-redux"; import { getServiceResponse } from "../../redux/UserListStore/action"; -import { UserList } from "../../models/responseType/UserListResponse"; import { ListItem } from "@components/ListItem/ListItem"; import { AppView, } from "@components/Flex/Flex"; import { Route } from "constants/Route"; import { USER_LIST_STATE_TYPE } from "redux/UserListStore/userListReducer"; +import { navigate } from "@navigation/NavigationService"; - -export const UsersScreen: NavigationScreen = (props: any) => { +export const UsersScreen: NavigationScreen = (_props: any) => { const appDispatch = useDispatch(); const data: USER_LIST_STATE_TYPE = useSelector((state: any) => state.userListReducer); @@ -21,22 +19,20 @@ export const UsersScreen: NavigationScreen = (props: any) => { return ( - - {data.users.map((value: UserList, index: number) => { + item.id.toString()} + renderItem={({ item }) => { return ( - + ) - })} - + }} + /> ); } - -const style = StyleSheet.create({ - scrollView: { - flex: 1, - } -}); \ No newline at end of file From 959dde94dff4d0d05d35e930a5348f38f8a1184c Mon Sep 17 00:00:00 2001 From: Girish Parate Date: Sat, 1 Apr 2023 20:04:11 +0530 Subject: [PATCH 4/8] navigation updated --- android/app/build.gradle | 2 +- ios/Podfile.lock | 4 +- package.json | 18 +-- src/components/appAppBar/AppAppBar.tsx | 8 +- src/navigation/HomeStack/HomeStack.tsx | 4 +- .../SettingScreenStack/SettingScreenStack.tsx | 3 +- .../UsersListStack/UsersListStack.tsx | 3 +- .../appNavigation/AppNavigation.tsx | 3 + src/screens/UsersScreen/SelectedUser.tsx | 1 + src/screens/UsersScreen/UsersScreen.tsx | 5 +- yarn.lock | 135 ++++++++++-------- 11 files changed, 105 insertions(+), 81 deletions(-) diff --git a/android/app/build.gradle b/android/app/build.gradle index 14fda9d..61dc537 100644 --- a/android/app/build.gradle +++ b/android/app/build.gradle @@ -136,7 +136,7 @@ android { minSdkVersion rootProject.ext.minSdkVersion targetSdkVersion rootProject.ext.targetSdkVersion versionCode 1 - versionName "1.0" + versionName "1.0.1" } splits { abi { diff --git a/ios/Podfile.lock b/ios/Podfile.lock index a7decc6..d304f5d 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -336,7 +336,7 @@ PODS: - React-RCTText - ReactCommon/turbomodule/core - Yoga - - RNScreens (2.18.1): + - RNScreens (2.15.2): - React-Core - RNSVG (11.0.1): - React @@ -530,7 +530,7 @@ SPEC CHECKSUMS: RNGestureHandler: a479ebd5ed4221a810967000735517df0d2db211 RNLocalize: 7c7aeda16c01db7a0918981c14875c0a53be9b79 RNReanimated: b21b362b4b8ca921932e8b1718e88cf3a36f157e - RNScreens: f7ad633b2e0190b77b6a7aab7f914fad6f198d8d + RNScreens: 3d682bcaba69a4f8e55543d90818704f34338db1 RNSVG: 67f1f12dae2cef6ed59a42cae74a6b8f5a9e7b46 RNVectorIcons: fcc2f6cb32f5735b586e66d14103a74ce6ad61f8 SSZipArchive: 62d4947b08730e4cda640473b0066d209ff033c9 diff --git a/package.json b/package.json index b400344..bef994f 100644 --- a/package.json +++ b/package.json @@ -20,9 +20,9 @@ "android_dev_debug": "react-native run-android --variant=devDebug --appIdSuffix=dev", "android_staging_debug": "react-native run-android --variant=stagingDebug --appIdSuffix=staging", "android_prod_debug": "react-native run-android --variant=prodDebug --appIdSuffix=prod", - "android_apk_dev": "cd android && ./gradlew assembleDevRelease", - "android_staging_dev": "cd android && ./gradlew assembleStagingRelease", - "android_prod_dev": "cd android && ./gradlew assembleProdRelease", + "android_apk_dev": "cd android && ./gradlew clean && ./gradlew assembleDevRelease", + "android_staging_dev": "cd android && ./gradlew clean && ./gradlew assembleStagingRelease", + "android_prod_dev": "cd android && ./gradlew clean && ./gradlew assembleProdRelease", "deploy_dev": "appcenter codepush release-react -a parategirish50-gmail.com/Starter-App -d Dev", "deply_stageing": "appcenter codepush release-react -a parategirish50-gmail.com/Starter-App -d Staging", "deply_prod": "appcenter codepush release-react -a parategirish50-gmail.com/Starter-App -d Production", @@ -32,11 +32,11 @@ "dependencies": { "@react-native-community/async-storage": "^1.11.0", "@react-native-community/masked-view": "^0.1.6", - "@react-navigation/bottom-tabs": "^5.x", + "@react-navigation/bottom-tabs": "^6.5.7", "@react-navigation/elements": "^1.3.17", - "@react-navigation/material-top-tabs": "^5.x", - "@react-navigation/native": "^5.0.0", - "@react-navigation/stack": "^5.0.0", + "@react-navigation/material-top-tabs": "^6.6.2", + "@react-navigation/native": "^6.1.6", + "@react-navigation/stack": "^6.3.16", "@types/react-native-vector-icons": "^6.4.10", "@types/react-redux": "^7.1.16", "@types/redux-thunk": "^2.1.0", @@ -56,9 +56,9 @@ "react-native-reanimated": "^2.13.0", "react-native-restart": "^0.0.24", "react-native-safe-area-context": "4.1.2", - "react-native-screens": "^2.0.0-alpha.29", + "react-native-screens": "2.15.2", "react-native-svg": "^11.0.1", - "react-native-tab-view": "^2.x", + "react-native-tab-view": "^3.5.1", "react-native-vector-icons": "^9.2.0", "react-redux": "^7.2.4", "redux": "^4.1.0", diff --git a/src/components/appAppBar/AppAppBar.tsx b/src/components/appAppBar/AppAppBar.tsx index 7ceff66..48876ee 100644 --- a/src/components/appAppBar/AppAppBar.tsx +++ b/src/components/appAppBar/AppAppBar.tsx @@ -1,12 +1,16 @@ import React from 'react' import { Appbar } from 'react-native-paper'; +import { getHeaderTitle } from '@react-navigation/elements'; + export declare type AppAppBarType = { navigation: any, back?: any, - title: any + options?: any, + route?: any, }; -export const CustomNavigationBar: React.FC = ({ navigation, back, title }) => { +export const CustomNavigationBar: React.FC = ({ navigation, route, options, back }) => { + const title = getHeaderTitle(options, route.name); return ( {back ? : null} diff --git a/src/navigation/HomeStack/HomeStack.tsx b/src/navigation/HomeStack/HomeStack.tsx index 2cb8dda..bc8ac39 100644 --- a/src/navigation/HomeStack/HomeStack.tsx +++ b/src/navigation/HomeStack/HomeStack.tsx @@ -13,9 +13,9 @@ export const HomeScreenStack = () => { return ( , + title: t('starterApp'), + header: (props) => , }} - // screenOptions={{ ...HOME_STACK_OPTIONS, title: t('starterApp') }} > {/* //* react-native-reanimated Example in HomeScreen diff --git a/src/navigation/SettingScreenStack/SettingScreenStack.tsx b/src/navigation/SettingScreenStack/SettingScreenStack.tsx index e893a12..188dda9 100644 --- a/src/navigation/SettingScreenStack/SettingScreenStack.tsx +++ b/src/navigation/SettingScreenStack/SettingScreenStack.tsx @@ -11,7 +11,8 @@ export const SettingScreenStack = () => { return ( , + title: t('settings'), + header: (props) => , }} > diff --git a/src/navigation/UsersListStack/UsersListStack.tsx b/src/navigation/UsersListStack/UsersListStack.tsx index 57eecf3..e203865 100644 --- a/src/navigation/UsersListStack/UsersListStack.tsx +++ b/src/navigation/UsersListStack/UsersListStack.tsx @@ -13,7 +13,8 @@ export const UsersListStack = () => { return ( , + title: t('users'), + header: (props) => , }} > diff --git a/src/navigation/appNavigation/AppNavigation.tsx b/src/navigation/appNavigation/AppNavigation.tsx index 9b06372..946478f 100644 --- a/src/navigation/appNavigation/AppNavigation.tsx +++ b/src/navigation/appNavigation/AppNavigation.tsx @@ -16,6 +16,9 @@ export const AppBottomTab = () => { return ( ( { const data: UserList = props?.route?.params?.data useEffect(() => { + props.navigation.setOptions({ title: `${data.first_name} ${data.last_name}` }) }, []) return ( diff --git a/src/screens/UsersScreen/UsersScreen.tsx b/src/screens/UsersScreen/UsersScreen.tsx index fdb2417..91ee066 100644 --- a/src/screens/UsersScreen/UsersScreen.tsx +++ b/src/screens/UsersScreen/UsersScreen.tsx @@ -1,6 +1,5 @@ import React, { useEffect } from "react"; -import { FlatList, GestureResponderEvent, StyleSheet, } from "react-native"; -import { NavigationScreen } from "../../navigation/NavigationTypings"; +import { FlatList, GestureResponderEvent, } from "react-native"; import { useDispatch, useSelector } from "react-redux"; import { getServiceResponse } from "../../redux/UserListStore/action"; import { ListItem } from "@components/ListItem/ListItem"; @@ -9,7 +8,7 @@ import { Route } from "constants/Route"; import { USER_LIST_STATE_TYPE } from "redux/UserListStore/userListReducer"; import { navigate } from "@navigation/NavigationService"; -export const UsersScreen: NavigationScreen = (_props: any) => { +export const UsersScreen = (_props: any) => { const appDispatch = useDispatch(); const data: USER_LIST_STATE_TYPE = useSelector((state: any) => state.userListReducer); diff --git a/yarn.lock b/yarn.lock index 212f077..fb2987e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1324,60 +1324,65 @@ resolved "https://registry.yarnpkg.com/@react-native/polyfills/-/polyfills-2.0.0.tgz#4c40b74655c83982c8cf47530ee7dc13d957b6aa" integrity sha512-K0aGNn1TjalKj+65D7ycc1//H9roAQ51GJVk5ZJQFb2teECGmzd86bYDC0aYdbRf7gtovescq4Zt6FR0tgXiHQ== -"@react-navigation/bottom-tabs@^5.x": - version "5.11.15" - resolved "https://registry.yarnpkg.com/@react-navigation/bottom-tabs/-/bottom-tabs-5.11.15.tgz#f973625cc32d9c5a4067851f084cb11ccd68fe79" - integrity sha512-TBY419W6aN/HZg98xbVp5Bx1HEF5sXuHR5f55W6KMI4k2AvxlwelKD1wbfvEcX2iuQT0YUiiXsACRFUSECYhkw== +"@react-navigation/bottom-tabs@^6.5.7": + version "6.5.7" + resolved "https://registry.yarnpkg.com/@react-navigation/bottom-tabs/-/bottom-tabs-6.5.7.tgz#08470c96e0d11481422214bb98f0ff034038856c" + integrity sha512-9oZYyRu2z7+1pr2dX5V54rHFPmlj4ztwQxFe85zwpnGcPtGIsXj7VCIdlHnjRHJBBFCszvJGQpYY6/G2+DfD+A== dependencies: - color "^3.1.3" - react-native-iphone-x-helper "^1.3.0" + "@react-navigation/elements" "^1.3.17" + color "^4.2.3" + warn-once "^0.1.0" -"@react-navigation/core@^5.16.1": - version "5.16.1" - resolved "https://registry.yarnpkg.com/@react-navigation/core/-/core-5.16.1.tgz#e0d308bd9bbd930114ce55c4151806b6d7907f69" - integrity sha512-3AToC7vPNeSNcHFLd1h71L6u34hfXoRAS1CxF9Fc4uC8uOrVqcNvphpeFbE0O9Bw6Zpl0BnMFl7E5gaL3KGzNA== +"@react-navigation/core@^6.4.8": + version "6.4.8" + resolved "https://registry.yarnpkg.com/@react-navigation/core/-/core-6.4.8.tgz#a18e106d3c59cdcfc4ce53f7344e219ed35c88ed" + integrity sha512-klZ9Mcf/P2j+5cHMoGyIeurEzyBM2Uq9+NoSFrF6sdV5iCWHLFhrCXuhbBiQ5wVLCKf4lavlkd/DDs47PXs9RQ== dependencies: - "@react-navigation/routers" "^5.7.4" + "@react-navigation/routers" "^6.1.8" escape-string-regexp "^4.0.0" - nanoid "^3.1.15" - query-string "^6.13.6" + nanoid "^3.1.23" + query-string "^7.1.3" react-is "^16.13.0" + use-latest-callback "^0.1.5" "@react-navigation/elements@^1.3.17": version "1.3.17" resolved "https://registry.yarnpkg.com/@react-navigation/elements/-/elements-1.3.17.tgz#9cb95765940f2841916fc71686598c22a3e4067e" integrity sha512-sui8AzHm6TxeEvWT/NEXlz3egYvCUog4tlXA4Xlb2Vxvy3purVXDq/XsM56lJl344U5Aj/jDzkVanOTMWyk4UA== -"@react-navigation/material-top-tabs@^5.x": - version "5.3.19" - resolved "https://registry.yarnpkg.com/@react-navigation/material-top-tabs/-/material-top-tabs-5.3.19.tgz#64f3a933f5d7e86e99f3d57d9f0c1e833ffa7e4f" - integrity sha512-I7bEF99THxxcY7kCUZ5pPmwXr6kgo6L2sg3P1YJo+CcBWSGvGiHyNbZXNs15HuKRuFvEuueChNV9n8QuKBWbDA== +"@react-navigation/material-top-tabs@^6.6.2": + version "6.6.2" + resolved "https://registry.yarnpkg.com/@react-navigation/material-top-tabs/-/material-top-tabs-6.6.2.tgz#ff68e597451a86d26421d5f516a1aa7e1fb30048" + integrity sha512-qq0iyMzWApeSvhxovurhk5hluAH2VYbSObTZIKt4KbVXZ0KP8ir1tRQ+IAwkMea+hCnd26glpXRVQI+YqXH0Gw== dependencies: - color "^3.1.3" + color "^4.2.3" + warn-once "^0.1.0" -"@react-navigation/native@^5.0.0": - version "5.9.8" - resolved "https://registry.yarnpkg.com/@react-navigation/native/-/native-5.9.8.tgz#ac76ee6390ea7ce807486ca5c38d903e23433a97" - integrity sha512-DNbcDHXQPSFDLn51kkVVJjT3V7jJy2GztNYZe/2bEg29mi5QEcHHcpifjMCtyFKntAOWzKlG88UicIQ17UEghg== +"@react-navigation/native@^6.1.6": + version "6.1.6" + resolved "https://registry.yarnpkg.com/@react-navigation/native/-/native-6.1.6.tgz#84ff5cf85b91f660470fa9407c06c8ee393d5792" + integrity sha512-14PmSy4JR8HHEk04QkxQ0ZLuqtiQfb4BV9kkMXD2/jI4TZ+yc43OnO6fQ2o9wm+Bq8pY3DxyerC2AjNUz+oH7Q== dependencies: - "@react-navigation/core" "^5.16.1" + "@react-navigation/core" "^6.4.8" escape-string-regexp "^4.0.0" - nanoid "^3.1.15" + fast-deep-equal "^3.1.3" + nanoid "^3.1.23" -"@react-navigation/routers@^5.7.4": - version "5.7.4" - resolved "https://registry.yarnpkg.com/@react-navigation/routers/-/routers-5.7.4.tgz#8b5460e841a0c64f6c9a5fbc2a1eb832432d4fb0" - integrity sha512-0N202XAqsU/FlE53Nmh6GHyMtGm7g6TeC93mrFAFJOqGRKznT0/ail+cYlU6tNcPA9AHzZu1Modw1eoDINSliQ== +"@react-navigation/routers@^6.1.8": + version "6.1.8" + resolved "https://registry.yarnpkg.com/@react-navigation/routers/-/routers-6.1.8.tgz#ae56b2678dbb5abca5bd7c95d6a8d1abc767cba2" + integrity sha512-CEge+ZLhb1HBrSvv4RwOol7EKLW1QoqVIQlE9TN5MpxS/+VoQvP+cLbuz0Op53/iJfYhtXRFd1ZAd3RTRqto9w== dependencies: - nanoid "^3.1.15" + nanoid "^3.1.23" -"@react-navigation/stack@^5.0.0": - version "5.14.9" - resolved "https://registry.yarnpkg.com/@react-navigation/stack/-/stack-5.14.9.tgz#49c7b9316e6fb456e9766c901e0d607862f0ea7d" - integrity sha512-DuvrT9P+Tz8ezZLQYxORZqOGqO+vEufaxlW1hSLw1knLD4jNxkz8TJDXtfKwaz//9gb43UhTNccNM02vm7iPqQ== +"@react-navigation/stack@^6.3.16": + version "6.3.16" + resolved "https://registry.yarnpkg.com/@react-navigation/stack/-/stack-6.3.16.tgz#cf94e3c8c1587455515743e91d328beef722e0ab" + integrity sha512-KTOn9cNuZ6p154Htbl2DiR95Wl+c7niLPRiGs7gjOkyVDGiaGQF9ODNQTYBDE1OxZGHe/EyYc6T2CbmiItLWDg== dependencies: - color "^3.1.3" - react-native-iphone-x-helper "^1.3.0" + "@react-navigation/elements" "^1.3.17" + color "^4.2.3" + warn-once "^0.1.0" "@sideway/address@^4.1.3": version "4.1.4" @@ -2868,7 +2873,7 @@ color-name@^1.0.0, color-name@~1.1.4: resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2" integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA== -color-string@^1.6.0: +color-string@^1.6.0, color-string@^1.9.0: version "1.9.1" resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.9.1.tgz#4467f9146f036f855b764dfb5bf8582bf342c7a4" integrity sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg== @@ -2876,7 +2881,7 @@ color-string@^1.6.0: color-name "^1.0.0" simple-swizzle "^0.2.2" -color@^3.1.2, color@^3.1.3: +color@^3.1.2: version "3.2.1" resolved "https://registry.yarnpkg.com/color/-/color-3.2.1.tgz#3544dc198caf4490c3ecc9a790b54fe9ff45e164" integrity sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA== @@ -2884,6 +2889,14 @@ color@^3.1.2, color@^3.1.3: color-convert "^1.9.3" color-string "^1.6.0" +color@^4.2.3: + version "4.2.3" + resolved "https://registry.yarnpkg.com/color/-/color-4.2.3.tgz#d781ecb5e57224ee43ea9627560107c0e0c6463a" + integrity sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A== + dependencies: + color-convert "^2.0.1" + color-string "^1.9.0" + colorette@^1.0.7: version "1.4.0" resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.4.0.tgz#5190fbb87276259a86ad700bff2c6d6faa3fca40" @@ -3203,7 +3216,7 @@ decimal.js@^10.2.1: resolved "https://registry.yarnpkg.com/decimal.js/-/decimal.js-10.4.3.tgz#1044092884d245d1b7f65725fa4ad4c6f781cc23" integrity sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA== -decode-uri-component@^0.2.0: +decode-uri-component@^0.2.0, decode-uri-component@^0.2.2: version "0.2.2" resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.2.tgz#e69dbe25d37941171dd540e024c444cd5188e1e9" integrity sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ== @@ -6735,10 +6748,10 @@ mute-stream@0.0.8: resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.8.tgz#1630c42b2251ff81e2a283de96a5497ea92e5e0d" integrity sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA== -nanoid@^3.1.15: - version "3.3.4" - resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab" - integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw== +nanoid@^3.1.23: + version "3.3.6" + resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.6.tgz#443380c856d6e9f9824267d960b4236ad583ea4c" + integrity sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA== nanomatch@^1.2.9: version "1.2.13" @@ -7483,12 +7496,12 @@ qs@~6.5.2: resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.3.tgz#3aeeffc91967ef6e35c0e488ef46fb296ab76aad" integrity sha512-qxXIEh4pCGfHICj1mAJQ2/2XVZkjCDTcEgfoSQxc/fYivUZxTkk7L3bDBJSoNrEzXI17oUO5Dp07ktqE5KzczA== -query-string@^6.13.6: - version "6.14.1" - resolved "https://registry.yarnpkg.com/query-string/-/query-string-6.14.1.tgz#7ac2dca46da7f309449ba0f86b1fd28255b0c86a" - integrity sha512-XDxAeVmpfu1/6IjyT/gXHOl+S0vQ9owggJ30hhWKdHAsNPOcasn5o9BW0eejZqL2e4vMjhAxoW3jVHcD6mbcYw== +query-string@^7.1.3: + version "7.1.3" + resolved "https://registry.yarnpkg.com/query-string/-/query-string-7.1.3.tgz#a1cf90e994abb113a325804a972d98276fe02328" + integrity sha512-hh2WYhq4fi8+b+/2Kg9CEge4fDPvHS534aOOvOZeQ3+Vf2mCFsaFBYj0i+iXcAq6I9Vzp5fjMFBlONvayDC1qg== dependencies: - decode-uri-component "^0.2.0" + decode-uri-component "^0.2.2" filter-obj "^1.1.0" split-on-first "^1.0.0" strict-uri-encode "^2.0.0" @@ -7610,11 +7623,6 @@ react-native-gradle-plugin@^0.0.6: resolved "https://registry.yarnpkg.com/react-native-gradle-plugin/-/react-native-gradle-plugin-0.0.6.tgz#b61a9234ad2f61430937911003cddd7e15c72b45" integrity sha512-eIlgtsmDp1jLC24dRn43hB3kEcZVqx6DUQbR0N1ABXGnMEafm9I3V3dUUeD1vh+Dy5WqijSoEwLNUPLgu5zDMg== -react-native-iphone-x-helper@^1.3.0: - version "1.3.1" - resolved "https://registry.yarnpkg.com/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.3.1.tgz#20c603e9a0e765fd6f97396638bdeb0e5a60b010" - integrity sha512-HOf0jzRnq2/aFUcdCJ9w9JGzN3gdEg0zFE4FyYlp4jtidqU03D5X7ZegGKfT1EWteR0gPBGp9ye5T5FvSWi9Yg== - react-native-localize@^1.4.0: version "1.4.3" resolved "https://registry.yarnpkg.com/react-native-localize/-/react-native-localize-1.4.3.tgz#6fde2fb1e73a7205910419a680cb4734187d556f" @@ -7652,10 +7660,10 @@ react-native-safe-area-context@4.1.2: resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-4.1.2.tgz#2433715c568550f29ae768f8ca7b561f99b5230c" integrity sha512-35hLhtJRCZW0L2zTz0Wz3d0Oh6uYUiRWa/HvoITq7IvD8GkjjM97MKHSfVhC4N9ZNMzqXDuVfYBpHHisc9Z8+Q== -react-native-screens@^2.0.0-alpha.29: - version "2.18.1" - resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-2.18.1.tgz#47b9991c6f762d00d0ed3233e5283d523e859885" - integrity sha512-r5WZLpmx2hHjC1RgMdPq5YpSU9tEhBpUaZ5M1SUtNIONyiLqQVxabhRCINdebIk4depJiIl7yw2Q85zJyeX6fw== +react-native-screens@2.15.2: + version "2.15.2" + resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-2.15.2.tgz#a449700e895b462937211ec72ed6f09652758f06" + integrity sha512-CagNf2APXkVoRlF3Mugr264FbKbrBg9eXUkqhIPVeZB8EsdS8XPrnt99yj/pzmT+yJMBY0dGrjXT8+68WYh6YQ== react-native-svg-transformer@^1.0.0: version "1.0.0" @@ -7674,10 +7682,12 @@ react-native-svg@^11.0.1: css-select "^2.1.0" css-tree "^1.0.0-alpha.39" -react-native-tab-view@^2.x: - version "2.16.0" - resolved "https://registry.yarnpkg.com/react-native-tab-view/-/react-native-tab-view-2.16.0.tgz#cae72c7084394bd328fac5fefb86cd966df37a86" - integrity sha512-ac2DmT7+l13wzIFqtbfXn4wwfgtPoKzWjjZyrK1t+T8sdemuUvD4zIt+UImg03fu3s3VD8Wh/fBrIdcqQyZJWg== +react-native-tab-view@^3.5.1: + version "3.5.1" + resolved "https://registry.yarnpkg.com/react-native-tab-view/-/react-native-tab-view-3.5.1.tgz#2ad454afc0e186b43ea8b89053f39180d480d48b" + integrity sha512-qdrS5t+AEhfuKQyuCXkwHu4IVppkuTvzWWlkSZKrPaSkjjIa32xrsGxt1UW9YDdro2w4AMw5hKn1hFmg/5mvzA== + dependencies: + use-latest-callback "^0.1.5" react-native-vector-icons@^9.2.0: version "9.2.0" @@ -9446,6 +9456,11 @@ walker@^1.0.7, walker@~1.0.5: dependencies: makeerror "1.0.12" +warn-once@^0.1.0: + version "0.1.1" + resolved "https://registry.yarnpkg.com/warn-once/-/warn-once-0.1.1.tgz#952088f4fb56896e73fd4e6a3767272a3fccce43" + integrity sha512-VkQZJbO8zVImzYFteBXvBOZEl1qL175WH8VmZcxF2fZAoudNhNDvHi+doCaAEdU2l2vtcIwa2zn0QK5+I1HQ3Q== + wcwidth@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/wcwidth/-/wcwidth-1.0.1.tgz#f0b0dcf915bc5ff1528afadb2c0e17b532da2fe8" From fe9caedb9bdc14bce19418e2aa0f5133d1b5dc5c Mon Sep 17 00:00:00 2001 From: Girish Parate Date: Sun, 2 Apr 2023 20:48:30 +0530 Subject: [PATCH 5/8] Remove Papaer --- ios/Podfile.lock | 16 +++ ios/Starter.xcodeproj/project.pbxproj | 8 ++ ios/Starter/Info.plist | 6 + package.json | 2 +- src/components/AppText/AppText.tsx | 114 +++++++++--------- src/components/Button/Button.tsx | 11 +- src/components/LanguageSelector.tsx | 7 +- src/components/ListItem/ListItem.tsx | 49 ++++++-- src/components/appAppBar/AppAppBar.tsx | 36 +++--- src/navigation/HomeStack/HomeStack.tsx | 4 +- .../SettingScreenStack/SettingScreenStack.tsx | 4 +- .../UsersListStack/UsersListStack.tsx | 2 - .../appNavigation/AppNavigation.tsx | 41 ------- src/navigation/mainNavigation.tsx | 35 ++---- src/screens/SettingsScreen/SettingsScreen.tsx | 45 ++++++- src/screens/UsersScreen/SelectedUser.tsx | 33 +++-- src/screens/loginScreen/loginScreen.tsx | 30 +---- src/screens/tabScreen/HomeTabs.tsx | 13 +- yarn.lock | 34 ++---- 19 files changed, 253 insertions(+), 237 deletions(-) diff --git a/ios/Podfile.lock b/ios/Podfile.lock index d304f5d..51355eb 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -307,6 +307,15 @@ PODS: - React - RNGestureHandler (1.10.3): - React-Core + - RNImageCropPicker (0.39.0): + - React-Core + - React-RCTImage + - RNImageCropPicker/QBImagePickerController (= 0.39.0) + - TOCropViewController + - RNImageCropPicker/QBImagePickerController (0.39.0): + - React-Core + - React-RCTImage + - TOCropViewController - RNLocalize (1.4.3): - React-Core - RNReanimated (2.13.0): @@ -343,6 +352,7 @@ PODS: - RNVectorIcons (9.2.0): - React-Core - SSZipArchive (2.2.3) + - TOCropViewController (2.6.1) - Yoga (1.14.0) DEPENDENCIES: @@ -385,6 +395,7 @@ DEPENDENCIES: - "RNCAsyncStorage (from `../node_modules/@react-native-community/async-storage`)" - "RNCMaskedView (from `../node_modules/@react-native-community/masked-view`)" - RNGestureHandler (from `../node_modules/react-native-gesture-handler`) + - RNImageCropPicker (from `../node_modules/react-native-image-crop-picker`) - RNLocalize (from `../node_modules/react-native-localize`) - RNReanimated (from `../node_modules/react-native-reanimated`) - RNScreens (from `../node_modules/react-native-screens`) @@ -398,6 +409,7 @@ SPEC REPOS: - fmt - JWT - SSZipArchive + - TOCropViewController EXTERNAL SOURCES: boost: @@ -474,6 +486,8 @@ EXTERNAL SOURCES: :path: "../node_modules/@react-native-community/masked-view" RNGestureHandler: :path: "../node_modules/react-native-gesture-handler" + RNImageCropPicker: + :path: "../node_modules/react-native-image-crop-picker" RNLocalize: :path: "../node_modules/react-native-localize" RNReanimated: @@ -528,12 +542,14 @@ SPEC CHECKSUMS: RNCAsyncStorage: b03032fdbdb725bea0bd9e5ec5a7272865ae7398 RNCMaskedView: 0e1bc4bfa8365eba5fbbb71e07fbdc0555249489 RNGestureHandler: a479ebd5ed4221a810967000735517df0d2db211 + RNImageCropPicker: 14fe1c29298fb4018f3186f455c475ab107da332 RNLocalize: 7c7aeda16c01db7a0918981c14875c0a53be9b79 RNReanimated: b21b362b4b8ca921932e8b1718e88cf3a36f157e RNScreens: 3d682bcaba69a4f8e55543d90818704f34338db1 RNSVG: 67f1f12dae2cef6ed59a42cae74a6b8f5a9e7b46 RNVectorIcons: fcc2f6cb32f5735b586e66d14103a74ce6ad61f8 SSZipArchive: 62d4947b08730e4cda640473b0066d209ff033c9 + TOCropViewController: edfd4f25713d56905ad1e0b9f5be3fbe0f59c863 Yoga: c4d61225a466f250c35c1ee78d2d0b3d41fe661c PODFILE CHECKSUM: 7a42b3d1c717dfdfca479dcc387351a58b6f8340 diff --git a/ios/Starter.xcodeproj/project.pbxproj b/ios/Starter.xcodeproj/project.pbxproj index 2fd8f46..45d8ce3 100644 --- a/ios/Starter.xcodeproj/project.pbxproj +++ b/ios/Starter.xcodeproj/project.pbxproj @@ -427,6 +427,7 @@ ); inputPaths = ( "${PODS_ROOT}/Target Support Files/Pods-Starter-StarterTests/Pods-Starter-StarterTests-resources.sh", + "${PODS_CONFIGURATION_BUILD_DIR}/RNImageCropPicker/QBImagePicker.bundle", "${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/AntDesign.ttf", "${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/Entypo.ttf", "${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/EvilIcons.ttf", @@ -444,9 +445,11 @@ "${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/SimpleLineIcons.ttf", "${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/Zocial.ttf", "${PODS_CONFIGURATION_BUILD_DIR}/React-Core/AccessibilityResources.bundle", + "${PODS_CONFIGURATION_BUILD_DIR}/TOCropViewController/TOCropViewControllerBundle.bundle", ); name = "[CP] Copy Pods Resources"; outputPaths = ( + "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/QBImagePicker.bundle", "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/AntDesign.ttf", "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Entypo.ttf", "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/EvilIcons.ttf", @@ -464,6 +467,7 @@ "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/SimpleLineIcons.ttf", "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Zocial.ttf", "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/AccessibilityResources.bundle", + "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/TOCropViewControllerBundle.bundle", ); runOnlyForDeploymentPostprocessing = 0; shellPath = /bin/sh; @@ -557,6 +561,7 @@ ); inputPaths = ( "${PODS_ROOT}/Target Support Files/Pods-Starter/Pods-Starter-resources.sh", + "${PODS_CONFIGURATION_BUILD_DIR}/RNImageCropPicker/QBImagePicker.bundle", "${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/AntDesign.ttf", "${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/Entypo.ttf", "${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/EvilIcons.ttf", @@ -574,9 +579,11 @@ "${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/SimpleLineIcons.ttf", "${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/Zocial.ttf", "${PODS_CONFIGURATION_BUILD_DIR}/React-Core/AccessibilityResources.bundle", + "${PODS_CONFIGURATION_BUILD_DIR}/TOCropViewController/TOCropViewControllerBundle.bundle", ); name = "[CP] Copy Pods Resources"; outputPaths = ( + "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/QBImagePicker.bundle", "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/AntDesign.ttf", "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Entypo.ttf", "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/EvilIcons.ttf", @@ -594,6 +601,7 @@ "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/SimpleLineIcons.ttf", "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Zocial.ttf", "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/AccessibilityResources.bundle", + "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/TOCropViewControllerBundle.bundle", ); runOnlyForDeploymentPostprocessing = 0; shellPath = /bin/sh; diff --git a/ios/Starter/Info.plist b/ios/Starter/Info.plist index e3bcdb2..0f15d50 100644 --- a/ios/Starter/Info.plist +++ b/ios/Starter/Info.plist @@ -30,6 +30,12 @@ $(CODEPUSH_KEY) LSRequiresIPhoneOS + NSCameraUsageDescription + Testing purposes + NSPhotoLibraryUsageDescription + Testing purposes + NSMicrophoneUsageDescription + Testing purposes NSAppTransportSecurity NSExceptionDomains diff --git a/package.json b/package.json index bef994f..9692e7a 100644 --- a/package.json +++ b/package.json @@ -51,8 +51,8 @@ "react-native-code-push": "^7.0.4", "react-native-encrypted-storage": "^2.1.0", "react-native-gesture-handler": "^1.5.3", + "react-native-image-crop-picker": "^0.39.0", "react-native-localize": "^1.4.0", - "react-native-paper": "^5.5.2", "react-native-reanimated": "^2.13.0", "react-native-restart": "^0.0.24", "react-native-safe-area-context": "4.1.2", diff --git a/src/components/AppText/AppText.tsx b/src/components/AppText/AppText.tsx index c9eb993..326731d 100644 --- a/src/components/AppText/AppText.tsx +++ b/src/components/AppText/AppText.tsx @@ -1,57 +1,57 @@ -import * as React from 'react'; -import { Text } from 'react-native-paper'; - -const MyComponent = () => ( - <> - Title Large - Title Medium - Title Small - - Body Large - Body Medium - Body Small - - Label Large - Label Medium - Label Small - -); - -export default MyComponent; - - -export const Headline3 = () => { - return ( - Headline Small - ) -} - -export const Headline2 = () => { - return ( - Headline Medium - ) -} - -export const Headline1 = () => { - return ( - Headline Large - ) -} - -export const H1Text = () => { - return ( - Display Large - ) -} - -export const H2Text = () => { - return ( - Display Medium - ) -} - -export const H3Text = () => { - return ( - Display small - ) -} \ No newline at end of file +// import * as React from 'react'; +// import { Text } from 'react-native-paper'; + +// const MyComponent = () => ( +// <> +// Title Large +// Title Medium +// Title Small + +// Body Large +// Body Medium +// Body Small + +// Label Large +// Label Medium +// Label Small +// +// ); + +// export default MyComponent; + + +// export const Headline3 = () => { +// return ( +// Headline Small +// ) +// } + +// export const Headline2 = () => { +// return ( +// Headline Medium +// ) +// } + +// export const Headline1 = () => { +// return ( +// Headline Large +// ) +// } + +// export const H1Text = () => { +// return ( +// Display Large +// ) +// } + +// export const H2Text = () => { +// return ( +// Display Medium +// ) +// } + +// export const H3Text = () => { +// return ( +// Display small +// ) +// } \ No newline at end of file diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index fc5b863..504e1da 100644 --- a/src/components/Button/Button.tsx +++ b/src/components/Button/Button.tsx @@ -1,13 +1,18 @@ import React, { FC } from "react"; import { ButtonProps } from "./ButtonProps"; -import { Button } from "react-native-paper"; +import { TouchableOpacity } from "react-native"; +// import { Button } from "react-native-paper"; export const AppButton: FC = props => { const { mode, children, style, onPress, uppercase } = props; return ( - + {children} - + ); } \ No newline at end of file diff --git a/src/components/LanguageSelector.tsx b/src/components/LanguageSelector.tsx index 3230bcc..af3c0a6 100644 --- a/src/components/LanguageSelector.tsx +++ b/src/components/LanguageSelector.tsx @@ -3,9 +3,9 @@ import { StyleSheet, View, Dimensions, + Text, } from 'react-native'; import { useTranslation } from 'react-i18next'; -import { List } from 'react-native-paper'; import { Colors } from 'Config/Colors'; const { width } = Dimensions.get('window'); const LANGS = [ @@ -22,7 +22,7 @@ const LanguageSelector = () => { return ( - { /> ); })} - + */} + Lag ); }; diff --git a/src/components/ListItem/ListItem.tsx b/src/components/ListItem/ListItem.tsx index c018a28..b4f7139 100644 --- a/src/components/ListItem/ListItem.tsx +++ b/src/components/ListItem/ListItem.tsx @@ -1,8 +1,6 @@ import React from "react"; -import { GestureResponderEvent } from "react-native"; +import { GestureResponderEvent, Image, StyleSheet, Text, TouchableOpacity, View } from "react-native"; import * as Animatable from 'react-native-animatable'; -import { List, Avatar, Divider } from 'react-native-paper'; - interface listItemProps { name: string, email: string @@ -15,13 +13,42 @@ export const ListItem = (props: listItemProps) => { const { style, name, email, image, onPress } = props; return ( - } - /> - + + + + {name} + {email} + + ); -} \ No newline at end of file +} + + +const styles = StyleSheet.create({ + item: { + flexDirection: 'row', + padding: 16, + alignItems: 'center', + borderBottomWidth: 1, + borderBottomColor: '#ccc', + }, + image: { + width: 64, + height: 64, + borderRadius: 32, + marginRight: 16, + }, + textContainer: { + flex: 1, + }, + name: { + fontSize: 18, + fontWeight: 'bold', + }, + email: { + fontSize: 16, + color: '#666', + }, +}); diff --git a/src/components/appAppBar/AppAppBar.tsx b/src/components/appAppBar/AppAppBar.tsx index 48876ee..4911a48 100644 --- a/src/components/appAppBar/AppAppBar.tsx +++ b/src/components/appAppBar/AppAppBar.tsx @@ -1,20 +1,20 @@ -import React from 'react' -import { Appbar } from 'react-native-paper'; -import { getHeaderTitle } from '@react-navigation/elements'; +// import React from 'react' +// import { Appbar } from 'react-native-paper'; +// import { getHeaderTitle } from '@react-navigation/elements'; -export declare type AppAppBarType = { - navigation: any, - back?: any, - options?: any, - route?: any, -}; +// export declare type AppAppBarType = { +// navigation: any, +// back?: any, +// options?: any, +// route?: any, +// }; -export const CustomNavigationBar: React.FC = ({ navigation, route, options, back }) => { - const title = getHeaderTitle(options, route.name); - return ( - - {back ? : null} - - - ); -} \ No newline at end of file +// export const CustomNavigationBar: React.FC = ({ navigation, route, options, back }) => { +// const title = getHeaderTitle(options, route.name); +// return ( +// +// {back ? : null} +// +// +// ); +// } \ No newline at end of file diff --git a/src/navigation/HomeStack/HomeStack.tsx b/src/navigation/HomeStack/HomeStack.tsx index bc8ac39..216c7dc 100644 --- a/src/navigation/HomeStack/HomeStack.tsx +++ b/src/navigation/HomeStack/HomeStack.tsx @@ -1,4 +1,4 @@ -import { CustomNavigationBar } from "@components/appAppBar/AppAppBar"; +// import { CustomNavigationBar } from "@components/appAppBar/AppAppBar"; import { createStackNavigator } from "@react-navigation/stack"; import { WelcomeScreen } from "@screens/welcome/WelcomeScreen"; import { Route } from "constants/Route"; @@ -14,7 +14,7 @@ export const HomeScreenStack = () => { , + // header: (props) => , }} > {/* diff --git a/src/navigation/SettingScreenStack/SettingScreenStack.tsx b/src/navigation/SettingScreenStack/SettingScreenStack.tsx index 188dda9..de147e5 100644 --- a/src/navigation/SettingScreenStack/SettingScreenStack.tsx +++ b/src/navigation/SettingScreenStack/SettingScreenStack.tsx @@ -1,4 +1,4 @@ -import { CustomNavigationBar } from "@components/appAppBar/AppAppBar"; +// import { CustomNavigationBar } from "@components/appAppBar/AppAppBar"; import { createStackNavigator } from "@react-navigation/stack"; import SettingsScreen from "@screens/SettingsScreen/SettingsScreen"; import { Route } from "constants/Route"; @@ -12,7 +12,7 @@ export const SettingScreenStack = () => { , + // header: (props) => , }} > diff --git a/src/navigation/UsersListStack/UsersListStack.tsx b/src/navigation/UsersListStack/UsersListStack.tsx index e203865..844405c 100644 --- a/src/navigation/UsersListStack/UsersListStack.tsx +++ b/src/navigation/UsersListStack/UsersListStack.tsx @@ -1,4 +1,3 @@ -import { CustomNavigationBar } from "@components/appAppBar/AppAppBar"; import { createStackNavigator } from "@react-navigation/stack"; import { SelectedUserScreen } from "@screens/UsersScreen/SelectedUser"; import { UsersScreen } from "@screens/UsersScreen/UsersScreen"; @@ -14,7 +13,6 @@ export const UsersListStack = () => { , }} > diff --git a/src/navigation/appNavigation/AppNavigation.tsx b/src/navigation/appNavigation/AppNavigation.tsx index 946478f..86b1c52 100644 --- a/src/navigation/appNavigation/AppNavigation.tsx +++ b/src/navigation/appNavigation/AppNavigation.tsx @@ -1,7 +1,5 @@ import React from 'react'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; -import { BottomNavigation } from 'react-native-paper'; -import { CommonActions } from '@react-navigation/native'; import { Route } from 'constants/Route'; import Ionicons from 'react-native-vector-icons/Ionicons'; import { HomeScreenStack } from '@navigation/HomeStack/HomeStack'; @@ -19,45 +17,6 @@ export const AppBottomTab = () => { screenOptions={{ headerShown: false, }} - tabBar={({ navigation, state, descriptors, insets }) => ( - { - const event = navigation.emit({ - type: 'tabPress', - target: route.key, - canPreventDefault: true, - }); - if (event.defaultPrevented) { - preventDefault(); - } else { - navigation.dispatch({ - ...CommonActions.navigate(route.name, route.params), - target: state.key, - }); - } - }} - renderIcon={({ route, focused, color }) => { - const { options } = descriptors[route.key]; - if (options.tabBarIcon) { - return options.tabBarIcon({ focused, color, size: 24 }); - } - return null; - }} - getLabelText={({ route }) => { - const { options } = descriptors[route.key]; - const label = - options.tabBarLabel !== undefined - ? options.tabBarLabel - : options.title !== undefined - ? options.title - : route?.title; - - return label; - }} - /> - )} > { }; let CustomDefaultTheme = { - ...PaperDefaultTheme, ...NavigationDefaultTheme, colors: { - ...PaperDefaultTheme.colors, ...NavigationDefaultTheme.colors, accent: Colors.primary, primary: Colors.primary, @@ -63,10 +56,9 @@ export const Navigation: FC = () => { } let CustomDarkTheme = { - ...PaperDarkTheme, ...NavigationDarkTheme, + dark: true, colors: { - ...PaperDarkTheme.colors, ...NavigationDarkTheme.colors, accent: Colors.primary, primary: Colors.primary, @@ -81,19 +73,16 @@ export const Navigation: FC = () => { } return ( - - - { - setTopLevelNavigator(navigatorRef); - }} - theme={data.isDarkTheme ? CustomDarkTheme : CustomDefaultTheme}> - {authState.userLoggedIn ? ( - - ) : ( - - )} - - + { + setTopLevelNavigator(navigatorRef); + }} + theme={data.isDarkTheme ? CustomDarkTheme : CustomDefaultTheme}> + {authState.userLoggedIn ? ( + + ) : ( + + )} + ); } \ No newline at end of file diff --git a/src/screens/SettingsScreen/SettingsScreen.tsx b/src/screens/SettingsScreen/SettingsScreen.tsx index acde731..5de6d6e 100644 --- a/src/screens/SettingsScreen/SettingsScreen.tsx +++ b/src/screens/SettingsScreen/SettingsScreen.tsx @@ -2,13 +2,13 @@ import { AppView } from '@components/Flex/Flex' import LanguageSelector from '@components/LanguageSelector' import React from 'react' import { useTranslation } from 'react-i18next' -import { Alert, View } from 'react-native' -import { List, Switch } from 'react-native-paper' +import { Alert, StyleSheet, Text, TouchableOpacity, View } from 'react-native' import { useSelector, useDispatch } from 'react-redux' import { logOutUser } from 'redux/authStore/action' import { changeTheme } from '../../redux/themeStore/action' import { DARK_THEME_TYPE } from '../../redux/themeStore/reducers' - +import ImagePicker from 'react-native-image-crop-picker'; +import { useTheme } from '@react-navigation/native' const SettingsScreen = () => { const appDispatch = useDispatch(); @@ -18,7 +18,7 @@ const SettingsScreen = () => { const toggleSwitch = (value: boolean) => { appDispatch(changeTheme(value)); } - + const colors = useTheme().colors; const removeUser = () => { Alert.alert( 'Sing Out?', @@ -45,7 +45,13 @@ const SettingsScreen = () => { flex: 1 }}> - { + toggleSwitch(!data.isDarkTheme) + }}> + + + {data.isDarkTheme ? 'ON' : 'OFF'} + {/* { appDispatch(changeTheme(!data.isDarkTheme)) }} @@ -61,10 +67,37 @@ const SettingsScreen = () => { title={t('logOut')} description={t('singOut')} left={(props) => } - /> + /> */} ) } +const styles = StyleSheet.create({ + container: { + flexDirection: 'row', + alignItems: 'center', + }, + button: { + borderWidth: 1, + borderRadius: 12, + borderColor: '#ccc', + paddingVertical: 4, + paddingHorizontal: 8, + marginRight: 8, + }, + switch: { + width: 20, + height: 20, + borderRadius: 10, + }, + switchOn: { + backgroundColor: '#0080ff', + }, + label: { + fontSize: 18, + fontWeight: 'bold', + }, +}); + export default SettingsScreen diff --git a/src/screens/UsersScreen/SelectedUser.tsx b/src/screens/UsersScreen/SelectedUser.tsx index 8e87648..70515b0 100644 --- a/src/screens/UsersScreen/SelectedUser.tsx +++ b/src/screens/UsersScreen/SelectedUser.tsx @@ -1,8 +1,7 @@ import React, { useEffect } from "react"; -import { StyleSheet, View, } from "react-native"; +import { Image, StyleSheet, Text, View, } from "react-native"; import { ScrollView } from "react-native-gesture-handler"; import { AppView } from "@components/Flex/Flex"; -import { Avatar, Text } from "react-native-paper"; import { scale } from "Config/ScalingUtils"; import { UserList } from "models/responseType/UserListResponse"; @@ -18,11 +17,13 @@ export const SelectedUserScreen = (props: any) => { - - {data.first_name} {data.last_name} - {data.email} + + + {data.first_name} + {data.email} + @@ -32,5 +33,23 @@ export const SelectedUserScreen = (props: any) => { const style = StyleSheet.create({ scrollView: { flex: 1, - } + }, + image: { + width: 128, + height: 128, + borderRadius: 64, + marginBottom: 16, + }, + textContainer: { + alignItems: 'center', + }, + name: { + fontSize: 24, + fontWeight: 'bold', + marginBottom: 8, + }, + email: { + fontSize: 20, + color: '#666', + }, }); \ No newline at end of file diff --git a/src/screens/loginScreen/loginScreen.tsx b/src/screens/loginScreen/loginScreen.tsx index cb18703..fca2864 100644 --- a/src/screens/loginScreen/loginScreen.tsx +++ b/src/screens/loginScreen/loginScreen.tsx @@ -5,15 +5,14 @@ import { NativeModules, View, Text, - TouchableOpacity + TouchableOpacity, + TextInput } from 'react-native'; import { useDispatch } from 'react-redux'; -import { TextInput, Button, useTheme, } from 'react-native-paper'; import { userLoginAction } from '../../redux/authStore/action'; import { Colors } from 'Config/Colors'; import SizedBox from '@components/SizedBox'; const LoginScreen = () => { - const paperTheme = useTheme(); const [userData, setuserData] = useState({ email: '', password: '', @@ -85,41 +84,22 @@ const LoginScreen = () => { Your Base URL is {data.BASE_URL} - } /> - } /> - - + Login + diff --git a/src/screens/tabScreen/HomeTabs.tsx b/src/screens/tabScreen/HomeTabs.tsx index 2f4331c..211efdd 100644 --- a/src/screens/tabScreen/HomeTabs.tsx +++ b/src/screens/tabScreen/HomeTabs.tsx @@ -1,10 +1,9 @@ import * as React from 'react'; -import { FlatList, View } from 'react-native'; +import { Text, View } from 'react-native'; import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs'; import { ListItem } from '@components/ListItem/ListItem'; import Animated, { useSharedValue, useAnimatedStyle, interpolate, useAnimatedScrollHandler, Extrapolate } from "react-native-reanimated"; import '../../localization'; -import { Card, Title, Paragraph } from 'react-native-paper'; import { useTranslation } from 'react-i18next'; import { AppView } from '@components/Flex/Flex'; import useFetch from '../../Network/useFetch'; @@ -63,11 +62,7 @@ export const HomeTabs = () => { onScroll={scrollHandler} scrollEventThrottle={18} renderItem={(item: any, index: number) => { - return + return Hey }} /> ); @@ -78,13 +73,13 @@ export const HomeTabs = () => { - + {/* {t('homePage:welcome')} Card content - + */} diff --git a/yarn.lock b/yarn.lock index fb2987e..6c1894a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -765,14 +765,6 @@ resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39" integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw== -"@callstack/react-theme-provider@^3.0.8": - version "3.0.8" - resolved "https://registry.yarnpkg.com/@callstack/react-theme-provider/-/react-theme-provider-3.0.8.tgz#d0d7ac71e422133c5f7b78f4c4aa1bc57f156f50" - integrity sha512-5U231sYY2sqQOaELX0WBCn+iluV8bFaXIS7em03k4W5Xz0AhGvKlnpLIhDGFP8im/SvNW7/2XoR0BsClhn9t6Q== - dependencies: - deepmerge "^3.2.0" - hoist-non-react-statics "^3.3.0" - "@cnakazawa/watch@^1.0.3": version "1.0.4" resolved "https://registry.yarnpkg.com/@cnakazawa/watch/-/watch-1.0.4.tgz#f864ae85004d0fcab6f50be9141c4da368d1656a" @@ -2849,7 +2841,7 @@ collection-visit@^1.0.0: map-visit "^1.0.0" object-visit "^1.0.0" -color-convert@^1.9.0, color-convert@^1.9.3: +color-convert@^1.9.0: version "1.9.3" resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8" integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg== @@ -2873,7 +2865,7 @@ color-name@^1.0.0, color-name@~1.1.4: resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2" integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA== -color-string@^1.6.0, color-string@^1.9.0: +color-string@^1.9.0: version "1.9.1" resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.9.1.tgz#4467f9146f036f855b764dfb5bf8582bf342c7a4" integrity sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg== @@ -2881,14 +2873,6 @@ color-string@^1.6.0, color-string@^1.9.0: color-name "^1.0.0" simple-swizzle "^0.2.2" -color@^3.1.2: - version "3.2.1" - resolved "https://registry.yarnpkg.com/color/-/color-3.2.1.tgz#3544dc198caf4490c3ecc9a790b54fe9ff45e164" - integrity sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA== - dependencies: - color-convert "^1.9.3" - color-string "^1.6.0" - color@^4.2.3: version "4.2.3" resolved "https://registry.yarnpkg.com/color/-/color-4.2.3.tgz#d781ecb5e57224ee43ea9627560107c0e0c6463a" @@ -7623,20 +7607,16 @@ react-native-gradle-plugin@^0.0.6: resolved "https://registry.yarnpkg.com/react-native-gradle-plugin/-/react-native-gradle-plugin-0.0.6.tgz#b61a9234ad2f61430937911003cddd7e15c72b45" integrity sha512-eIlgtsmDp1jLC24dRn43hB3kEcZVqx6DUQbR0N1ABXGnMEafm9I3V3dUUeD1vh+Dy5WqijSoEwLNUPLgu5zDMg== +react-native-image-crop-picker@^0.39.0: + version "0.39.0" + resolved "https://registry.yarnpkg.com/react-native-image-crop-picker/-/react-native-image-crop-picker-0.39.0.tgz#9cb8e8ffb0e8ab06f7b3227cadf077169e225eba" + integrity sha512-4aANbQMrmU6zN/4b0rVBA7SbaZ3aa5JESm3Xk751sINybZMt1yz/9h95LkO7U0pbslHDo3ofXjG75PmQRP6a/w== + react-native-localize@^1.4.0: version "1.4.3" resolved "https://registry.yarnpkg.com/react-native-localize/-/react-native-localize-1.4.3.tgz#6fde2fb1e73a7205910419a680cb4734187d556f" integrity sha512-n3pi89LBeSzB825CBagyaYRtBS93LdvNz3sI386iXwLSg1ONjEGR1Ez36JBuxZalZgORjrKzV2Pun6MO7iwD6w== -react-native-paper@^5.5.2: - version "5.5.2" - resolved "https://registry.yarnpkg.com/react-native-paper/-/react-native-paper-5.5.2.tgz#c28058ad0e4252b3b6061b9ddc39ed11543706d5" - integrity sha512-cgkx67++r1oDoZRhzTohb0//qkD1Z20C/OcLfrE0HzyAkG+bYm0fA6gWqvHpdC7icQmuDS8iOOLu2288IYWiOA== - dependencies: - "@callstack/react-theme-provider" "^3.0.8" - color "^3.1.2" - use-latest-callback "^0.1.5" - react-native-reanimated@^2.13.0: version "2.13.0" resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-2.13.0.tgz#d64c1386626822d4dc22094b4efe028ff2c49cc9" From 870101f69bc1aaf750db4ddd9684ad53dd53cb10 Mon Sep 17 00:00:00 2001 From: Girish Parate Date: Sat, 8 Apr 2023 16:15:12 +0530 Subject: [PATCH 6/8] fix setting scree --- package.json | 1 - src/components/LanguageSelector.tsx | 48 ++++++------ src/screens/SettingsScreen/SettingsScreen.tsx | 74 ++++++++----------- yarn.lock | 5 -- 4 files changed, 53 insertions(+), 75 deletions(-) diff --git a/package.json b/package.json index 9692e7a..9d6c10d 100644 --- a/package.json +++ b/package.json @@ -51,7 +51,6 @@ "react-native-code-push": "^7.0.4", "react-native-encrypted-storage": "^2.1.0", "react-native-gesture-handler": "^1.5.3", - "react-native-image-crop-picker": "^0.39.0", "react-native-localize": "^1.4.0", "react-native-reanimated": "^2.13.0", "react-native-restart": "^0.0.24", diff --git a/src/components/LanguageSelector.tsx b/src/components/LanguageSelector.tsx index af3c0a6..ed16b32 100644 --- a/src/components/LanguageSelector.tsx +++ b/src/components/LanguageSelector.tsx @@ -2,45 +2,33 @@ import React from 'react'; import { StyleSheet, View, - Dimensions, Text, + TouchableOpacity, } from 'react-native'; import { useTranslation } from 'react-i18next'; import { Colors } from 'Config/Colors'; -const { width } = Dimensions.get('window'); const LANGS = [ { lngCode: 'en', label: 'English' }, { lngCode: 'hi', label: 'हिन्दी' }, ]; const LanguageSelector = () => { - const { t, i18n } = useTranslation(); - const [expanded, setExpanded] = React.useState(true); - const handlePress = () => setExpanded(!expanded); + const { i18n } = useTranslation(); const selectedLngCode = i18n.language; const setLng = (lngCode: string) => i18n.changeLanguage(lngCode); return ( - {/* }> - {LANGS.map((l) => { - const selected = l.lngCode === selectedLngCode; - return ( - setLng(l.lngCode)} - title={l.label} - right={props => selected ? : null} - /> - ); - })} - */} - Lag + {LANGS.map((l) => { + const selected = l.lngCode === selectedLngCode; + return ( + setLng(l.lngCode)}> + + Change language ({l.label}) + + + ); + })} ); }; @@ -49,7 +37,6 @@ export default LanguageSelector; const styles = StyleSheet.create({ container: { - width: width }, titleContainer: { alignItems: 'center', @@ -67,6 +54,17 @@ const styles = StyleSheet.create({ selectedRow: { backgroundColor: 'gray', }, + button: { + backgroundColor: Colors.primary, + borderRadius: 10, + padding: 10, + marginBottom: 20, + }, + buttonText: { + fontSize: 18, + color: '#fff', + textAlign: 'center', + }, selectedText: { // color: 'rgb(231, 232, 235)', }, diff --git a/src/screens/SettingsScreen/SettingsScreen.tsx b/src/screens/SettingsScreen/SettingsScreen.tsx index 5de6d6e..8da34c7 100644 --- a/src/screens/SettingsScreen/SettingsScreen.tsx +++ b/src/screens/SettingsScreen/SettingsScreen.tsx @@ -7,8 +7,8 @@ import { useSelector, useDispatch } from 'react-redux' import { logOutUser } from 'redux/authStore/action' import { changeTheme } from '../../redux/themeStore/action' import { DARK_THEME_TYPE } from '../../redux/themeStore/reducers' -import ImagePicker from 'react-native-image-crop-picker'; import { useTheme } from '@react-navigation/native' +import { Colors } from 'Config/Colors' const SettingsScreen = () => { const appDispatch = useDispatch(); @@ -37,37 +37,17 @@ const SettingsScreen = () => { { cancelable: false }, ); }; - return ( - - - { - toggleSwitch(!data.isDarkTheme) - }}> - + + Settings + + toggleSwitch(!data.isDarkTheme)}>Dark mode + + + Sign out - {data.isDarkTheme ? 'ON' : 'OFF'} - {/* { - appDispatch(changeTheme(!data.isDarkTheme)) - }} - title={t('darkLightMode')} - description={t('changeAppTheme')} - left={props => } - right={() => ( - - )} - /> - } - /> */} + ) @@ -75,28 +55,34 @@ const SettingsScreen = () => { const styles = StyleSheet.create({ container: { + flex: 1, + alignItems: 'center', + justifyContent: 'center', + }, + title: { + fontSize: 24, + fontWeight: 'bold', + marginBottom: 20, + }, + row: { flexDirection: 'row', alignItems: 'center', + marginBottom: 20, }, - button: { - borderWidth: 1, - borderRadius: 12, - borderColor: '#ccc', - paddingVertical: 4, - paddingHorizontal: 8, - marginRight: 8, + label: { + fontSize: 18, + marginRight: 10, }, - switch: { - width: 20, - height: 20, + button: { + backgroundColor: Colors.primary, borderRadius: 10, + padding: 10, + marginBottom: 20, }, - switchOn: { - backgroundColor: '#0080ff', - }, - label: { + buttonText: { fontSize: 18, - fontWeight: 'bold', + color: '#fff', + textAlign: 'center', }, }); diff --git a/yarn.lock b/yarn.lock index 6c1894a..9a5f330 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7607,11 +7607,6 @@ react-native-gradle-plugin@^0.0.6: resolved "https://registry.yarnpkg.com/react-native-gradle-plugin/-/react-native-gradle-plugin-0.0.6.tgz#b61a9234ad2f61430937911003cddd7e15c72b45" integrity sha512-eIlgtsmDp1jLC24dRn43hB3kEcZVqx6DUQbR0N1ABXGnMEafm9I3V3dUUeD1vh+Dy5WqijSoEwLNUPLgu5zDMg== -react-native-image-crop-picker@^0.39.0: - version "0.39.0" - resolved "https://registry.yarnpkg.com/react-native-image-crop-picker/-/react-native-image-crop-picker-0.39.0.tgz#9cb8e8ffb0e8ab06f7b3227cadf077169e225eba" - integrity sha512-4aANbQMrmU6zN/4b0rVBA7SbaZ3aa5JESm3Xk751sINybZMt1yz/9h95LkO7U0pbslHDo3ofXjG75PmQRP6a/w== - react-native-localize@^1.4.0: version "1.4.3" resolved "https://registry.yarnpkg.com/react-native-localize/-/react-native-localize-1.4.3.tgz#6fde2fb1e73a7205910419a680cb4734187d556f" From 6fef8492fe7cdb0bb428f43ab1329de1baa3b4f3 Mon Sep 17 00:00:00 2001 From: Girish Parate Date: Sun, 9 Apr 2023 20:29:44 +0530 Subject: [PATCH 7/8] remove AppStatusBar --- src/navigation/mainNavigation.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/navigation/mainNavigation.tsx b/src/navigation/mainNavigation.tsx index d7be54c..890b4e5 100644 --- a/src/navigation/mainNavigation.tsx +++ b/src/navigation/mainNavigation.tsx @@ -8,7 +8,6 @@ import { } from '@react-navigation/native' import { checkTheme } from '../redux/themeStore/action'; import { Colors } from '../Config/Colors' -import AppStatusBar from '@components/appStatusBar/appStatusBar'; import LoadingView from '@components/loadingView'; import { AUTH_TYPE } from 'redux/authStore/authReducers'; import AsyncStorage from '@react-native-community/async-storage'; From 1250ff00e16a76c9af97923d675c2b555baf7e7f Mon Sep 17 00:00:00 2001 From: Girish Parate Date: Sat, 22 Apr 2023 20:17:30 +0530 Subject: [PATCH 8/8] button style added --- src/Config/ErrorHandleUtils.ts | 3 ++- src/components/Button/Button.tsx | 30 +++++++++++++++-------- src/components/Button/ButtonProps.ts | 5 ++-- src/screens/loginScreen/loginScreen.tsx | 32 ++++++++++++++++++------- 4 files changed, 49 insertions(+), 21 deletions(-) diff --git a/src/Config/ErrorHandleUtils.ts b/src/Config/ErrorHandleUtils.ts index 2736ea6..df58944 100644 --- a/src/Config/ErrorHandleUtils.ts +++ b/src/Config/ErrorHandleUtils.ts @@ -1,7 +1,8 @@ import { Alert } from "react-native"; import RNRestart from 'react-native-restart'; -export function handleApiError(error: any, appDispatch: any) { +export function handleApiError(error?: any, appDispatch?: any) { + Alert.alert("Error",error?.error || error) } function isDisplayError(message: string) { diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index 504e1da..2095933 100644 --- a/src/components/Button/Button.tsx +++ b/src/components/Button/Button.tsx @@ -1,18 +1,28 @@ import React, { FC } from "react"; import { ButtonProps } from "./ButtonProps"; -import { TouchableOpacity } from "react-native"; -// import { Button } from "react-native-paper"; +import { StyleSheet, Text, TouchableOpacity } from "react-native"; +import { Colors } from "Config/Colors"; export const AppButton: FC = props => { const { mode, children, style, onPress, uppercase } = props; return ( - // - - {children} + + {children} ); -} \ No newline at end of file +} + + +const styles = StyleSheet.create({ + button: { + backgroundColor: Colors.primary, + borderRadius: 10, + padding: 10, + marginBottom: 20, + }, + buttonText: { + fontSize: 18, + color: '#fff', + textAlign: 'center', + }, +}); \ No newline at end of file diff --git a/src/components/Button/ButtonProps.ts b/src/components/Button/ButtonProps.ts index bef2c00..765eb8e 100644 --- a/src/components/Button/ButtonProps.ts +++ b/src/components/Button/ButtonProps.ts @@ -1,8 +1,9 @@ +import { StyleProp, ViewStyle } from "react-native"; + export interface ButtonProps { mode?: 'text' | 'outlined' | 'contained'; - style?: any, + style?: StyleProp | undefined, children: any, onPress: any, uppercase?: boolean, - } \ No newline at end of file diff --git a/src/screens/loginScreen/loginScreen.tsx b/src/screens/loginScreen/loginScreen.tsx index fca2864..c477d16 100644 --- a/src/screens/loginScreen/loginScreen.tsx +++ b/src/screens/loginScreen/loginScreen.tsx @@ -6,12 +6,13 @@ import { View, Text, TouchableOpacity, - TextInput + TextInput, + StyleSheet } from 'react-native'; import { useDispatch } from 'react-redux'; import { userLoginAction } from '../../redux/authStore/action'; -import { Colors } from 'Config/Colors'; import SizedBox from '@components/SizedBox'; +import { AppButton } from '@components/Button/Button'; const LoginScreen = () => { const [userData, setuserData] = useState({ email: '', @@ -22,8 +23,6 @@ const LoginScreen = () => { }); const data = NativeModules.RNConfigModule; - console.log("data", data); //* Get Data form Native Code - const authDispatch = useDispatch(); const saveUserLogin = () => { if (userData.isValidEmail && userData.isValidPassword) { @@ -84,22 +83,23 @@ const LoginScreen = () => { Your Base URL is {data.BASE_URL} + - saveUserLogin()}> - Login - + + saveUserLogin()} /> @@ -107,3 +107,19 @@ const LoginScreen = () => { }; export default LoginScreen; + +const styles = StyleSheet.create({ + container: { + backgroundColor: '#F3F3F3', + borderRadius: 8, + paddingHorizontal: 16, + paddingVertical: 12, + }, + input: { + height: 48, + borderWidth: 1, + borderRadius: 10, + fontSize: 16, + padding: 8 + }, +}); \ No newline at end of file