web backbutton ui fix

src/caj/Navigation.tsx

@@ -9,7 +9,7 @@ import {appVarActions} from '@caj/configs/appVarReducer';
 
 import imgSrc from '@caj/img/maimg.png';
 import {placeholder} from '@caj/lang/default';
-import {getBackgroundColor} from '@caj/configs/colors';
+import {defaultHeaderStyle, themeNB, themeSelector} from '@caj/configs/colors';
 import {saveVarChanges} from '@caj/helper/appData';
 
 import {Box, Input, VStack, Center, Avatar, Text, Button} from 'native-base';
@@ -20,11 +20,14 @@ import {
   LinkingOptions,
   NavigationContainer,
   NavigatorScreenParams,
+  ParamListBase,
   RouteProp,
   useNavigation,
+  useRoute,
 } from '@react-navigation/native';
 import {
   createNativeStackNavigator,
+  NativeStackNavigationOptions,
   NativeStackNavigationProp,
 } from '@react-navigation/native-stack';
 import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
@@ -48,6 +51,8 @@ import {
 } from './components/NotLoggedIn';
 import ChatMainScreen from './components/chat/screen/main';
 import ChatScreenStack from './components/chat/screen/main';
+import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
+import {ThemeMode} from './configs/appVar';
 
 const styles = StyleSheet.create({
   container: {
@@ -70,7 +75,10 @@ export type RootScreenNavigationProp =
 
 export default function Navigation() {
   return (
-    <Stack.Navigator screenOptions={{headerShown: false}}>
+    <Stack.Navigator
+      screenOptions={{
+        headerShown: false,
+      }}>
       <Stack.Screen name="Home" component={HomeStack} />
       <Stack.Screen
         name="Register"
@@ -159,3 +167,29 @@ function HomeStack() {
 }
 
 const Tab = createBottomTabNavigator<HomeStackNavigatorParamList>();
+
+export function WebBackButtonOptions<L extends ParamListBase>(
+  nav: NativeStackNavigationProp<L>,
+  _theme: ThemeMode,
+  place?: 'registration',
+): NativeStackNavigationOptions {
+  if (Platform.OS === 'web') {
+    const theme = themeNB(_theme);
+
+    return {
+      headerLeft: () => (
+        <MaterialIcon
+          style={{marginLeft: 16}}
+          name="arrow-back"
+          onPress={() => {
+            nav.pop();
+          }}
+          size={32}
+          color={defaultHeaderStyle(_theme, place).headerTintColor}
+        />
+      ),
+    };
+  }
+
+  return {};
+}

src/caj/components/NotLoggedIn.tsx

@@ -12,7 +12,7 @@ import {
   userNameOptions,
   XToken,
 } from '@caj/configs/types';
-import {RootScreenNavigationProp} from '@caj/Navigation';
+import {RootScreenNavigationProp, WebBackButtonOptions} from '@caj/Navigation';
 import {RootState, store} from '@caj/redux/store';
 import {useNavigation} from '@react-navigation/native';
 import {
@@ -135,15 +135,20 @@ function RegisterScreen() {
     (state: RootState) => state.appVariables.preferences.theme,
   );
 
+  const navigation = useNavigation<LoginScreenNavigationProp>();
+
   return (
-    <LoginStack.Navigator>
+    <LoginStack.Navigator
+      screenOptions={{
+        ...WebBackButtonOptions(navigation, theme, 'registration'),
+        headerShown: true,
+        ...defaultHeaderStyle(theme, 'registration'),
+      }}>
       <LoginStack.Screen
         name="RegStepOne"
         options={{
           animation: 'slide_from_left',
           title: lang.account.registration.registration,
-          headerShown: true,
-          ...defaultHeaderStyle(theme, 'registration'),
         }}
         component={StepOne}
       />
@@ -152,8 +157,6 @@ function RegisterScreen() {
         options={{
           animation: 'slide_from_right',
           title: lang.account.registration.registration,
-          headerShown: true,
-          ...defaultHeaderStyle(theme, 'registration'),
         }}
         component={StepTwo}
       />
@@ -162,8 +165,6 @@ function RegisterScreen() {
         options={{
           animation: 'slide_from_right',
           title: lang.account.registration.registration,
-          headerShown: true,
-          ...defaultHeaderStyle(theme, 'registration'),
         }}
         component={StepFinal}
       />
@@ -172,8 +173,6 @@ function RegisterScreen() {
         options={{
           animation: 'slide_from_right',
           title: lang.account.login.title,
-          headerShown: true,
-          ...defaultHeaderStyle(theme, 'registration'),
         }}
         component={Login}
       />

src/caj/tabs/main/ChatTab.tsx

@@ -4,9 +4,13 @@ import ChatScreenStack, {
 } from '@caj/components/chat/screen/main';
 import NotLoggedIn from '@caj/components/NotLoggedIn';
 import {defaultHeaderStyle} from '@caj/configs/colors';
-import {RootStackNavigatorParamList} from '@caj/Navigation';
+import {
+  HomeScreenNavigationProp,
+  RootStackNavigatorParamList,
+  WebBackButtonOptions,
+} from '@caj/Navigation';
 import {RootState} from '@caj/redux/store';
-import {NavigatorScreenParams} from '@react-navigation/native';
+import {NavigatorScreenParams, useNavigation} from '@react-navigation/native';
 import {
   createNativeStackNavigator,
   NativeStackNavigationProp,
@@ -32,8 +36,10 @@ function ChatTab() {
     (state: RootState) => state.appVariables.preferences.theme,
   );
 
+  const navigation = useNavigation<ChatScreenNavigationProp>();
+
   return (
-    <ChatStack.Navigator>
+    <ChatStack.Navigator initialRouteName="Overview">
       <ChatStack.Screen
         name="Overview"
         options={{
@@ -46,7 +52,7 @@ function ChatTab() {
       <ChatStack.Screen
         name="Chat"
         component={ChatScreenStack}
-        options={ChatScreenOptions()}
+        options={{...ChatScreenOptions(), ...WebBackButtonOptions(navigation, theme)}}
       />
     </ChatStack.Navigator>
   );