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 {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 {ThemeMode} from './colors';
 
 export interface appVariablesState {
   preferences: PREFERENCES_VARS;

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

@@ -5,6 +5,7 @@ import {
   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={{
+        options={{headerShown: false}}
-          title: lang.tabName,
-          headerShown: true,
-          headerShadowVisible: false,
-          headerStyle: headerStyle,
-        }}
         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,
       }}>
+      <View style={{paddingBottom: 10}}>
         <UserAvatar />
+      </View>
 
       <MyTitle text="Max Mustermann" />
 
@@ -96,8 +98,8 @@ export function ProfileSettings() {
   const rootNavigation = useNavigation<RootScreenNavigationProp>();
 
   return (
-    <ScrollView>
     <MyScreenContainer
+      scrollView
       style={{
         paddingTop: 10,
       }}>
@@ -157,7 +159,6 @@ export function ProfileSettings() {
         />
       </SettingsItemContainer>
     </MyScreenContainer>
-    </ScrollView>
   );
 }
 
@@ -264,7 +265,9 @@ export function UpdateUsername() {
           setNewUsername(text);
         }}
       />
-      <Text color={currentTheme.textLight100} style={{marginTop: 12}}>{lang.changeUsername.info}</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,10 +192,10 @@ export function SignUpStepAccountName() {
 
   return (
     <MyScreenContainer
+      scrollView
       style={{
         flexDirection: 'column',
       }}>
-      <ScrollView>
       <ContentContainer>
         <Title
           text={lang.signUpStepAccountName.title}
@@ -216,7 +216,6 @@ export function SignUpStepAccountName() {
           />
         </View>
       </ContentContainer>
-      </ScrollView>
     </MyScreenContainer>
   );
 }