theme

package.json

@@ -6,7 +6,7 @@
     "android": "react-native run-android",
     "ios": "react-native run-ios",
     "lint": "eslint .",
-    "start": "react-native start",
+    "start": "host=0.0.0.0 react-native start",
     "test": "jest"
   },
   "dependencies": {

src/components/MyScreenContainer.tsx

@@ -1,10 +1,8 @@
 import {ReactNode} from 'react';
 import {ScrollView, StyleProp, View, ViewStyle} from 'react-native';
-
-import { useSelector } from 'react-redux';
+import {useSelector} from 'react-redux';
 import {RootState} from '@redux/store';
 
-
 interface MyScreenContainerProps {
   children: ReactNode;
   style?: StyleProp<ViewStyle>;

src/configs/appNonSaveVarReducer.ts

@@ -1,8 +1,6 @@
 import {createSlice} from '@reduxjs/toolkit';
 import type {PayloadAction} from '@reduxjs/toolkit';
-
 import {appStatus, non_save_vars} from './appNonSaveVar';
-
 import {ThemeTokensType} from '@configs/colors';
 
 export const appNonSaveVariablesSlice = createSlice({

src/configs/appVarReducer.ts

@@ -1,17 +1,15 @@
 import {createSlice} from '@reduxjs/toolkit';
 import type {PayloadAction} from '@reduxjs/toolkit';
-
 import {
   PREFERENCES_VARS,
   preferences_vars_default,
   RegisterProcess,
-  ThemeMode,
 } from './appVar';
-import {non_save_vars, NON_SAVE_VARS} from './appNonSaveVar';
 import LangFormat from '@lang/default';
 import {lang as defaultLang} from '@lang/en';
-import { UserId } from './types';
-import { MyUserAccount } from '@user/types';
+import {UserId} from './types';
+import {MyUserAccount} from '@user/types';
+import {ThemeMode} from './colors';
 
 export interface appVariablesState {
   preferences: PREFERENCES_VARS;
@@ -39,10 +37,10 @@ export const appVariablesSlice = createSlice({
     setRegisterProcess: (state, action: PayloadAction<RegisterProcess>) => {
       state.preferences.RegisterProcess = action.payload;
     },
-    setCurrentAccount:(state, action: PayloadAction<UserId>) => {
+    setCurrentAccount: (state, action: PayloadAction<UserId>) => {
       state.preferences.selectedAccount = action.payload;
     },
-    setAccount:(state, action: PayloadAction<MyUserAccount>) => {
+    setAccount: (state, action: PayloadAction<MyUserAccount>) => {
       state.preferences.accounts[action.payload.UserId] = action.payload;
     },
   },

src/navigation/navigation.tsx

@@ -117,6 +117,11 @@ function CustomTabBar(props: BottomTabBarProps) {
           margin: 10,
           backgroundColor: currentTheme.backgroundDark300,
           borderRadius: 20,
+          position: 'absolute',
+          zIndex: 100,
+          bottom: 0,
+          borderColor: currentTheme.backgroundDark300,
+          borderWidth: 3,
         }}>
         {state.routes.map((route, index) => {
           const isFocused = state.index === index;

src/navigation/registration/registration.tsx

@@ -220,7 +220,9 @@ function RegistrationPreview({type}: {type: 'login' | 'signup'}) {
 
         <View style={{flexDirection: 'row'}}>
           {type === 'login' ? (
-            <Text>{lang.previewLogin.dontHaveAccount}</Text>
+            <Text color={currentTheme.textLight100}>
+              {lang.previewLogin.dontHaveAccount}
+            </Text>
           ) : (
             <Text color={currentTheme.textLight100}>
               {lang.previewSignup.alreadyHaveAccount}

src/navigation/tabs/main/MapTab.tsx

@@ -1,10 +1,11 @@
-import { MyScreenContainer } from '@components/MyScreenContainer';
-import { Text } from '@gluestack-ui/themed';
+import {MyScreenContainer} from '@components/MyScreenContainer';
+import {Text} from '@gluestack-ui/themed';
 import {
   createNativeStackNavigator,
   NativeStackNavigationProp,
 } from '@react-navigation/native-stack';
 import {RootState} from '@redux/store';
+import {View} from 'react-native';
 import {useSelector} from 'react-redux';
 
 export const MapTabName = 'Map';
@@ -19,7 +20,9 @@ export type MapScreenNavigationProp =
   NativeStackNavigationProp<MapStackNavigatorParamList>;
 
 function MapTab() {
-  const lang = useSelector((state: RootState) => state.appVariables.lang.navigation.home.map);
+  const lang = useSelector(
+    (state: RootState) => state.appVariables.lang.navigation.home.map,
+  );
   const currentTheme = useSelector(
     (state: RootState) => state.nonSaveVariables.theme.colors,
   );
@@ -33,12 +36,7 @@ function MapTab() {
     <MapStack.Navigator initialRouteName="Overview">
       <MapStack.Screen
         name="Overview"
-        options={{
-          title: lang.tabName,
-          headerShown: true,
-          headerShadowVisible: false,
-          headerStyle: headerStyle,
-        }}
+        options={{headerShown: false}}
         component={MapScreen}
       />
     </MapStack.Navigator>

src/navigation/tabs/main/ProfileTab.tsx

@@ -44,7 +44,7 @@ export default function ProfileTab() {
   );
 
   const headerStyle = {
-    backgroundColor: currentTheme.backgroundDark400
+    backgroundColor: currentTheme.backgroundDark400,
   };
 
   return (

src/pages/profile/profile.tsx

@@ -8,7 +8,7 @@ import {MyIcon} from '@components/MyIcon';
 import {useNavigation} from '@react-navigation/native';
 import {ProfileScreenNavigationProp} from '@navigation/tabs/main/ProfileTab';
 import {MyIconInput} from '@components/MyInput';
-import {useEffect, useState} from 'react';
+import {useEffect, useLayoutEffect, useState} from 'react';
 import {RootScreenNavigationProp} from '@navigation/navigation';
 import {useSelector} from 'react-redux';
 import {RootState} from '@redux/store';
@@ -37,7 +37,9 @@ export function ProfileOverview() {
         alignItems: 'center',
         paddingTop: 10,
       }}>
-      <UserAvatar />
+      <View style={{paddingBottom: 10}}>
+        <UserAvatar />
+      </View>
 
       <MyTitle text="Max Mustermann" />
 
@@ -96,68 +98,67 @@ export function ProfileSettings() {
   const rootNavigation = useNavigation<RootScreenNavigationProp>();
 
   return (
-    <ScrollView>
-      <MyScreenContainer
-        style={{
-          paddingTop: 10,
-        }}>
-        <View style={{alignItems: 'center'}}>
-          <UserAvatar />
-        </View>
+    <MyScreenContainer
+      scrollView
+      style={{
+        paddingTop: 10,
+      }}>
+      <View style={{alignItems: 'center'}}>
+        <UserAvatar />
+      </View>
 
-        <SettingsItemContainer title={lang.accountData.title}>
-          <SettingsItem
-            icon="person"
-            title={lang.accountData.accountName}
-            value="max_mustermann"
-          />
+      <SettingsItemContainer title={lang.accountData.title}>
+        <SettingsItem
+          icon="person"
+          title={lang.accountData.accountName}
+          value="max_mustermann"
+        />
 
-          <SettingsItem
-            icon="person"
-            title={lang.accountData.username}
-            value="Max Mustermann"
-            onPress={() => navigation.navigate('UpdateUsername')}
-          />
+        <SettingsItem
+          icon="person"
+          title={lang.accountData.username}
+          value="Max Mustermann"
+          onPress={() => navigation.navigate('UpdateUsername')}
+        />
 
-          <SettingsItem
-            icon="phone-iphone"
-            title={lang.accountData.phoneNumber}
-            value="+49 1510 21334143"
-          />
-        </SettingsItemContainer>
+        <SettingsItem
+          icon="phone-iphone"
+          title={lang.accountData.phoneNumber}
+          value="+49 1510 21334143"
+        />
+      </SettingsItemContainer>
 
-        <SettingsItemContainer title={lang.changePassword.title}>
-          <SettingsItem
-            icon="lock"
-            title={lang.changePassword.password}
-            value={lang.changePassword.tapToChange}
-            onPress={() => navigation.navigate('UpdatePassword')}
-          />
-        </SettingsItemContainer>
+      <SettingsItemContainer title={lang.changePassword.title}>
+        <SettingsItem
+          icon="lock"
+          title={lang.changePassword.password}
+          value={lang.changePassword.tapToChange}
+          onPress={() => navigation.navigate('UpdatePassword')}
+        />
+      </SettingsItemContainer>
 
-        <SettingsItemContainer title={lang.moreInfo.title}>
-          <SettingsItem
-            icon="help"
-            title={lang.moreInfo.help}
-            onPress={() => navigation.navigate('Help')}
-          />
+      <SettingsItemContainer title={lang.moreInfo.title}>
+        <SettingsItem
+          icon="help"
+          title={lang.moreInfo.help}
+          onPress={() => navigation.navigate('Help')}
+        />
 
-          <SettingsItem
-            icon="info"
-            title={lang.moreInfo.about}
-            onPress={() => navigation.navigate('About')}
-          />
+        <SettingsItem
+          icon="info"
+          title={lang.moreInfo.about}
+          onPress={() => navigation.navigate('About')}
+        />
 
-          <SettingsItem
-            icon="logout"
-            title={lang.moreInfo.logout}
-            onPress={() =>
-              rootNavigation.navigate('Registration', {screen: 'LoginPreview'})
-            }
-          />
-        </SettingsItemContainer>
-      </MyScreenContainer>
-    </ScrollView>
+        <SettingsItem
+          icon="logout"
+          title={lang.moreInfo.logout}
+          onPress={() =>
+            rootNavigation.navigate('Registration', {screen: 'LoginPreview'})
+          }
+        />
+      </SettingsItemContainer>
+    </MyScreenContainer>
   );
 }
 
@@ -264,8 +265,10 @@ export function UpdateUsername() {
           setNewUsername(text);
         }}
       />
-      <Text color={currentTheme.textLight100} style={{marginTop: 12}}>{lang.changeUsername.info}</Text>
-      <Text color={currentTheme.textLight100} >{lang.changeUsername.info2}</Text>
+      <Text color={currentTheme.textLight100} style={{marginTop: 12}}>
+        {lang.changeUsername.info}
+      </Text>
+      <Text color={currentTheme.textLight100}>{lang.changeUsername.info2}</Text>
     </MyScreenContainer>
   );
 }
@@ -340,7 +343,9 @@ export function UpdatePassword() {
         />
       </View>
 
-      <Text color={currentTheme.textLight100} style={{marginTop: 12}}>{lang.info}</Text>
+      <Text color={currentTheme.textLight100} style={{marginTop: 12}}>
+        {lang.info}
+      </Text>
       <Text color={currentTheme.textLight100}>{lang.info2}</Text>
     </MyScreenContainer>
   );

src/pages/welcome/signUp/signUp.tsx

@@ -119,7 +119,7 @@ export function SignUpStepVerifyPhoneNumber() {
           description={`${lang.signUpStepVerifyPhoneNumber.description} +49 15** ******43`}
         />
 
-        <KeyboardAvoidingView style={{gap: 12, marginTop: 20}}>
+        <View style={{gap: 12, marginTop: 20}}>
           <ConfirmationCodeInput />
 
           <MyButton
@@ -138,7 +138,7 @@ export function SignUpStepVerifyPhoneNumber() {
               color={currentTheme.textLight400}
             />
           </View>
-        </KeyboardAvoidingView>
+        </View>
       </ContentContainer>
     </MyScreenContainer>
   );
@@ -192,31 +192,30 @@ export function SignUpStepAccountName() {
 
   return (
     <MyScreenContainer
+      scrollView
       style={{
         flexDirection: 'column',
       }}>
-      <ScrollView>
-        <ContentContainer>
-          <Title
-            text={lang.signUpStepAccountName.title}
-            description={lang.signUpStepAccountName.description}
+      <ContentContainer>
+        <Title
+          text={lang.signUpStepAccountName.title}
+          description={lang.signUpStepAccountName.description}
+        />
+
+        <View style={{gap: 12, marginTop: 20}}>
+          <MyIconInput
+            text={lang.signUpStepAccountName.inputAccountName}
+            iconName="person"
           />
 
-          <View style={{gap: 12, marginTop: 20}}>
-            <MyIconInput
-              text={lang.signUpStepAccountName.inputAccountName}
-              iconName="person"
-            />
-
-            <MyButton
-              type="primary"
-              text={lang.signUpStepAccountName.buttonGetStarted}
-              style={{marginBottom: 2}}
-              onPress={() => navigateToHome(navigation)}
-            />
-          </View>
-        </ContentContainer>
-      </ScrollView>
+          <MyButton
+            type="primary"
+            text={lang.signUpStepAccountName.buttonGetStarted}
+            style={{marginBottom: 2}}
+            onPress={() => navigateToHome(navigation)}
+          />
+        </View>
+      </ContentContainer>
     </MyScreenContainer>
   );
 }