fitst commit

.gitignore

@@ -1,43 +1,54 @@
-# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+# Node modules
+/node_modules/
 
-# dependencies
+# Expo / React Native build caches
-node_modules/
-
-# Expo
 .expo/
-dist/
+.expo-shared/
-web-build/
+*.expo
-expo-env.d.ts
 
-# Native
+# macOS files
-.kotlin/
-*.orig.*
-*.jks
-*.p8
-*.p12
-*.key
-*.mobileprovision
-
-# Metro
-.metro-health-check*
-
-# debug
-npm-debug.*
-yarn-debug.*
-yarn-error.*
-
-# macOS
 .DS_Store
+
+# Logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# OS files
+Thumbs.db
+desktop.ini
+
+# Expo builds
+/dist/
+/web-build/
+/android/app/build/
+/ios/build/
+/ios/Pods/
+ios/Podfile.lock
+
+# Expo credentials and secrets
+*.p12
+*.jks
+*.keystore
+*.mobileprovision
+*.cer
 *.pem
+*.p8
 
-# local env files
+# Misc
-.env*.local
+*.swp
+*.swo
+*.env
+.env.local
+.env.*.local
 
-# typescript
+# VSCode
-*.tsbuildinfo
+.vscode/
 
-app-example
+# JetBrains
+.idea/
 
-# generated native folders
+# Temporary files
-/ios
+tmp/
-/android
+temp/

.npmrc

@@ -0,0 +1 @@
+legacy-peer-deps=true

android/.gitignore

@@ -0,0 +1,16 @@
+# OSX
+#
+.DS_Store
+
+# Android/IntelliJ
+#
+build/
+.idea
+.gradle
+local.properties
+*.iml
+*.hprof
+.cxx/
+
+# Bundle artifacts
+*.jsbundle

android/app/build.gradle

@@ -0,0 +1,182 @@
+apply plugin: "com.android.application"
+apply plugin: "org.jetbrains.kotlin.android"
+apply plugin: "com.facebook.react"
+
+def projectRoot = rootDir.getAbsoluteFile().getParentFile().getAbsolutePath()
+
+/**
+ * This is the configuration block to customize your React Native Android app.
+ * By default you don't need to apply any configuration, just uncomment the lines you need.
+ */
+react {
+    entryFile = file(["node", "-e", "require('expo/scripts/resolveAppEntry')", projectRoot, "android", "absolute"].execute(null, rootDir).text.trim())
+    reactNativeDir = new File(["node", "--print", "require.resolve('react-native/package.json')"].execute(null, rootDir).text.trim()).getParentFile().getAbsoluteFile()
+    hermesCommand = new File(["node", "--print", "require.resolve('react-native/package.json')"].execute(null, rootDir).text.trim()).getParentFile().getAbsolutePath() + "/sdks/hermesc/%OS-BIN%/hermesc"
+    codegenDir = new File(["node", "--print", "require.resolve('@react-native/codegen/package.json', { paths: [require.resolve('react-native/package.json')] })"].execute(null, rootDir).text.trim()).getParentFile().getAbsoluteFile()
+
+    enableBundleCompression = (findProperty('android.enableBundleCompression') ?: false).toBoolean()
+    // Use Expo CLI to bundle the app, this ensures the Metro config
+    // works correctly with Expo projects.
+    cliFile = new File(["node", "--print", "require.resolve('@expo/cli', { paths: [require.resolve('expo/package.json')] })"].execute(null, rootDir).text.trim())
+    bundleCommand = "export:embed"
+
+    /* Folders */
+     //   The root of your project, i.e. where "package.json" lives. Default is '../..'
+    // root = file("../../")
+    //   The folder where the react-native NPM package is. Default is ../../node_modules/react-native
+    // reactNativeDir = file("../../node_modules/react-native")
+    //   The folder where the react-native Codegen package is. Default is ../../node_modules/@react-native/codegen
+    // codegenDir = file("../../node_modules/@react-native/codegen")
+
+    /* Variants */
+    //   The list of variants to that are debuggable. For those we're going to
+    //   skip the bundling of the JS bundle and the assets. By default is just 'debug'.
+    //   If you add flavors like lite, prod, etc. you'll have to list your debuggableVariants.
+    // debuggableVariants = ["liteDebug", "prodDebug"]
+
+    /* Bundling */
+    //   A list containing the node command and its flags. Default is just 'node'.
+    // nodeExecutableAndArgs = ["node"]
+
+    //
+    //   The path to the CLI configuration file. Default is empty.
+    // bundleConfig = file(../rn-cli.config.js)
+    //
+    //   The name of the generated asset file containing your JS bundle
+    // bundleAssetName = "MyApplication.android.bundle"
+    //
+    //   The entry file for bundle generation. Default is 'index.android.js' or 'index.js'
+    // entryFile = file("../js/MyApplication.android.js")
+    //
+    //   A list of extra flags to pass to the 'bundle' commands.
+    //   See https://github.com/react-native-community/cli/blob/main/docs/commands.md#bundle
+    // extraPackagerArgs = []
+
+    /* Hermes Commands */
+    //   The hermes compiler command to run. By default it is 'hermesc'
+    // hermesCommand = "$rootDir/my-custom-hermesc/bin/hermesc"
+    //
+    //   The list of flags to pass to the Hermes compiler. By default is "-O", "-output-source-map"
+    // hermesFlags = ["-O", "-output-source-map"]
+
+    /* Autolinking */
+    autolinkLibrariesWithApp()
+}
+
+/**
+ * Set this to true in release builds to optimize the app using [R8](https://developer.android.com/topic/performance/app-optimization/enable-app-optimization).
+ */
+def enableMinifyInReleaseBuilds = (findProperty('android.enableMinifyInReleaseBuilds') ?: false).toBoolean()
+
+/**
+ * The preferred build flavor of JavaScriptCore (JSC)
+ *
+ * For example, to use the international variant, you can use:
+ * `def jscFlavor = 'org.webkit:android-jsc-intl:+'`
+ *
+ * The international variant includes ICU i18n library and necessary data
+ * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that
+ * give correct results when using with locales other than en-US. Note that
+ * this variant is about 6MiB larger per architecture than default.
+ */
+def jscFlavor = 'io.github.react-native-community:jsc-android:2026004.+'
+
+android {
+    ndkVersion rootProject.ext.ndkVersion
+
+    buildToolsVersion rootProject.ext.buildToolsVersion
+    compileSdk rootProject.ext.compileSdkVersion
+
+    namespace 'com.felix.infotarget'
+    defaultConfig {
+        applicationId 'com.felix.infotarget'
+        minSdkVersion rootProject.ext.minSdkVersion
+        targetSdkVersion rootProject.ext.targetSdkVersion
+        versionCode 1
+        versionName "1.0.0"
+
+        buildConfigField "String", "REACT_NATIVE_RELEASE_LEVEL", "\"${findProperty('reactNativeReleaseLevel') ?: 'stable'}\""
+    }
+    signingConfigs {
+        debug {
+            storeFile file('debug.keystore')
+            storePassword 'android'
+            keyAlias 'androiddebugkey'
+            keyPassword 'android'
+        }
+    }
+    buildTypes {
+        debug {
+            signingConfig signingConfigs.debug
+        }
+        release {
+            // Caution! In production, you need to generate your own keystore file.
+            // see https://reactnative.dev/docs/signed-apk-android.
+            signingConfig signingConfigs.debug
+            def enableShrinkResources = findProperty('android.enableShrinkResourcesInReleaseBuilds') ?: 'false'
+            shrinkResources enableShrinkResources.toBoolean()
+            minifyEnabled enableMinifyInReleaseBuilds
+            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
+            def enablePngCrunchInRelease = findProperty('android.enablePngCrunchInReleaseBuilds') ?: 'true'
+            crunchPngs enablePngCrunchInRelease.toBoolean()
+        }
+    }
+    packagingOptions {
+        jniLibs {
+            def enableLegacyPackaging = findProperty('expo.useLegacyPackaging') ?: 'false'
+            useLegacyPackaging enableLegacyPackaging.toBoolean()
+        }
+    }
+    androidResources {
+        ignoreAssetsPattern '!.svn:!.git:!.ds_store:!*.scc:!CVS:!thumbs.db:!picasa.ini:!*~'
+    }
+}
+
+// Apply static values from `gradle.properties` to the `android.packagingOptions`
+// Accepts values in comma delimited lists, example:
+// android.packagingOptions.pickFirsts=/LICENSE,**/picasa.ini
+["pickFirsts", "excludes", "merges", "doNotStrip"].each { prop ->
+    // Split option: 'foo,bar' -> ['foo', 'bar']
+    def options = (findProperty("android.packagingOptions.$prop") ?: "").split(",");
+    // Trim all elements in place.
+    for (i in 0..<options.size()) options[i] = options[i].trim();
+    // `[] - ""` is essentially `[""].filter(Boolean)` removing all empty strings.
+    options -= ""
+
+    if (options.length > 0) {
+        println "android.packagingOptions.$prop += $options ($options.length)"
+        // Ex: android.packagingOptions.pickFirsts += '**/SCCS/**'
+        options.each {
+            android.packagingOptions[prop] += it
+        }
+    }
+}
+
+dependencies {
+    // The version of react-native is set by the React Native Gradle Plugin
+    implementation("com.facebook.react:react-android")
+
+    def isGifEnabled = (findProperty('expo.gif.enabled') ?: "") == "true";
+    def isWebpEnabled = (findProperty('expo.webp.enabled') ?: "") == "true";
+    def isWebpAnimatedEnabled = (findProperty('expo.webp.animated') ?: "") == "true";
+
+    if (isGifEnabled) {
+        // For animated gif support
+        implementation("com.facebook.fresco:animated-gif:${expoLibs.versions.fresco.get()}")
+    }
+
+    if (isWebpEnabled) {
+        // For webp support
+        implementation("com.facebook.fresco:webpsupport:${expoLibs.versions.fresco.get()}")
+        if (isWebpAnimatedEnabled) {
+            // Animated webp support
+            implementation("com.facebook.fresco:animated-webp:${expoLibs.versions.fresco.get()}")
+        }
+    }
+
+    if (hermesEnabled.toBoolean()) {
+        implementation("com.facebook.react:hermes-android")
+    } else {
+        implementation jscFlavor
+    }
+}

android/app/proguard-rules.pro

@@ -0,0 +1,14 @@
+# Add project specific ProGuard rules here.
+# By default, the flags in this file are appended to flags specified
+# in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt
+# You can edit the include path and order by changing the proguardFiles
+# directive in build.gradle.
+#
+# For more details, see
+#   http://developer.android.com/guide/developing/tools/proguard.html
+
+# react-native-reanimated
+-keep class com.swmansion.reanimated.** { *; }
+-keep class com.facebook.react.turbomodule.** { *; }
+
+# Add any project specific keep options here:

android/app/src/debug/AndroidManifest.xml

@@ -0,0 +1,7 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools">
+
+    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
+
+    <application android:usesCleartextTraffic="true" tools:targetApi="28" tools:ignore="GoogleAppIndexingWarning" tools:replace="android:usesCleartextTraffic" />
+</manifest>

android/app/src/debugOptimized/AndroidManifest.xml

@@ -0,0 +1,7 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools">
+
+    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
+
+    <application android:usesCleartextTraffic="true" tools:targetApi="28" tools:ignore="GoogleAppIndexingWarning" tools:replace="android:usesCleartextTraffic" />
+</manifest>

android/app/src/main/AndroidManifest.xml

@@ -0,0 +1,34 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+  <uses-permission android:name="android.permission.INTERNET"/>
+  <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS"/>
+  <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
+  <uses-permission android:name="android.permission.RECORD_AUDIO"/>
+  <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
+  <uses-permission android:name="android.permission.VIBRATE"/>
+  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
+  <queries>
+    <intent>
+      <action android:name="android.intent.action.VIEW"/>
+      <category android:name="android.intent.category.BROWSABLE"/>
+      <data android:scheme="https"/>
+    </intent>
+  </queries>
+  <application android:name=".MainApplication" android:label="@string/app_name" android:icon="@mipmap/ic_launcher" android:roundIcon="@mipmap/ic_launcher_round" android:allowBackup="true" android:theme="@style/AppTheme" android:supportsRtl="true" android:enableOnBackInvokedCallback="false">
+    <meta-data android:name="expo.modules.updates.ENABLED" android:value="false"/>
+    <meta-data android:name="expo.modules.updates.EXPO_UPDATES_CHECK_ON_LAUNCH" android:value="ALWAYS"/>
+    <meta-data android:name="expo.modules.updates.EXPO_UPDATES_LAUNCH_WAIT_MS" android:value="0"/>
+    <activity android:name=".MainActivity" android:configChanges="keyboard|keyboardHidden|orientation|screenSize|screenLayout|uiMode" android:launchMode="singleTask" android:windowSoftInputMode="adjustResize" android:theme="@style/Theme.App.SplashScreen" android:exported="true" android:screenOrientation="portrait">
+      <intent-filter>
+        <action android:name="android.intent.action.MAIN"/>
+        <category android:name="android.intent.category.LAUNCHER"/>
+      </intent-filter>
+      <intent-filter>
+        <action android:name="android.intent.action.VIEW"/>
+        <category android:name="android.intent.category.DEFAULT"/>
+        <category android:name="android.intent.category.BROWSABLE"/>
+        <data android:scheme="infotarget"/>
+        <data android:scheme="exp+infotarget"/>
+      </intent-filter>
+    </activity>
+  </application>
+</manifest>

android/app/src/main/java/com/felix/infotarget/MainActivity.kt

@@ -0,0 +1,65 @@
+package com.felix.infotarget
+import expo.modules.splashscreen.SplashScreenManager
+
+import android.os.Build
+import android.os.Bundle
+
+import com.facebook.react.ReactActivity
+import com.facebook.react.ReactActivityDelegate
+import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled
+import com.facebook.react.defaults.DefaultReactActivityDelegate
+
+import expo.modules.ReactActivityDelegateWrapper
+
+class MainActivity : ReactActivity() {
+  override fun onCreate(savedInstanceState: Bundle?) {
+    // Set the theme to AppTheme BEFORE onCreate to support
+    // coloring the background, status bar, and navigation bar.
+    // This is required for expo-splash-screen.
+    // setTheme(R.style.AppTheme);
+    // @generated begin expo-splashscreen - expo prebuild (DO NOT MODIFY) sync-f3ff59a738c56c9a6119210cb55f0b613eb8b6af
+    SplashScreenManager.registerOnActivity(this)
+    // @generated end expo-splashscreen
+    super.onCreate(null)
+  }
+
+  /**
+   * Returns the name of the main component registered from JavaScript. This is used to schedule
+   * rendering of the component.
+   */
+  override fun getMainComponentName(): String = "main"
+
+  /**
+   * Returns the instance of the [ReactActivityDelegate]. We use [DefaultReactActivityDelegate]
+   * which allows you to enable New Architecture with a single boolean flags [fabricEnabled]
+   */
+  override fun createReactActivityDelegate(): ReactActivityDelegate {
+    return ReactActivityDelegateWrapper(
+          this,
+          BuildConfig.IS_NEW_ARCHITECTURE_ENABLED,
+          object : DefaultReactActivityDelegate(
+              this,
+              mainComponentName,
+              fabricEnabled
+          ){})
+  }
+
+  /**
+    * Align the back button behavior with Android S
+    * where moving root activities to background instead of finishing activities.
+    * @see <a href="https://developer.android.com/reference/android/app/Activity#onBackPressed()">onBackPressed</a>
+    */
+  override fun invokeDefaultOnBackPressed() {
+      if (Build.VERSION.SDK_INT <= Build.VERSION_CODES.R) {
+          if (!moveTaskToBack(false)) {
+              // For non-root activities, use the default implementation to finish them.
+              super.invokeDefaultOnBackPressed()
+          }
+          return
+      }
+
+      // Use the default back button implementation on Android S
+      // because it's doing more than [Activity.moveTaskToBack] in fact.
+      super.invokeDefaultOnBackPressed()
+  }
+}

android/app/src/main/java/com/felix/infotarget/MainApplication.kt

@@ -0,0 +1,56 @@
+package com.felix.infotarget
+
+import android.app.Application
+import android.content.res.Configuration
+
+import com.facebook.react.PackageList
+import com.facebook.react.ReactApplication
+import com.facebook.react.ReactNativeApplicationEntryPoint.loadReactNative
+import com.facebook.react.ReactNativeHost
+import com.facebook.react.ReactPackage
+import com.facebook.react.ReactHost
+import com.facebook.react.common.ReleaseLevel
+import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint
+import com.facebook.react.defaults.DefaultReactNativeHost
+
+import expo.modules.ApplicationLifecycleDispatcher
+import expo.modules.ReactNativeHostWrapper
+
+class MainApplication : Application(), ReactApplication {
+
+  override val reactNativeHost: ReactNativeHost = ReactNativeHostWrapper(
+      this,
+      object : DefaultReactNativeHost(this) {
+        override fun getPackages(): List<ReactPackage> =
+            PackageList(this).packages.apply {
+              // Packages that cannot be autolinked yet can be added manually here, for example:
+              // add(MyReactNativePackage())
+            }
+
+          override fun getJSMainModuleName(): String = ".expo/.virtual-metro-entry"
+
+          override fun getUseDeveloperSupport(): Boolean = BuildConfig.DEBUG
+
+          override val isNewArchEnabled: Boolean = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED
+      }
+  )
+
+  override val reactHost: ReactHost
+    get() = ReactNativeHostWrapper.createReactHost(applicationContext, reactNativeHost)
+
+  override fun onCreate() {
+    super.onCreate()
+    DefaultNewArchitectureEntryPoint.releaseLevel = try {
+      ReleaseLevel.valueOf(BuildConfig.REACT_NATIVE_RELEASE_LEVEL.uppercase())
+    } catch (e: IllegalArgumentException) {
+      ReleaseLevel.STABLE
+    }
+    loadReactNative(this)
+    ApplicationLifecycleDispatcher.onApplicationCreate(this)
+  }
+
+  override fun onConfigurationChanged(newConfig: Configuration) {
+    super.onConfigurationChanged(newConfig)
+    ApplicationLifecycleDispatcher.onConfigurationChanged(this, newConfig)
+  }
+}

android/app/src/main/res/drawable/ic_launcher_background.xml

@@ -0,0 +1,6 @@
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+  <item android:drawable="@color/splashscreen_background"/>
+  <item>
+    <bitmap android:gravity="center" android:src="@drawable/splashscreen_logo"/>
+  </item>
+</layer-list>

android/app/src/main/res/drawable/rn_edit_text_material.xml

@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright (C) 2014 The Android Open Source Project
+
+     Licensed under the Apache License, Version 2.0 (the "License");
+     you may not use this file except in compliance with the License.
+     You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+     Unless required by applicable law or agreed to in writing, software
+     distributed under the License is distributed on an "AS IS" BASIS,
+     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     See the License for the specific language governing permissions and
+     limitations under the License.
+-->
+<inset xmlns:android="http://schemas.android.com/apk/res/android"
+       android:insetLeft="@dimen/abc_edit_text_inset_horizontal_material"
+       android:insetRight="@dimen/abc_edit_text_inset_horizontal_material"
+       android:insetTop="@dimen/abc_edit_text_inset_top_material"
+       android:insetBottom="@dimen/abc_edit_text_inset_bottom_material"
+       >
+
+    <selector>
+        <!--
+          This file is a copy of abc_edit_text_material (https://bit.ly/3k8fX7I).
+          The item below with state_pressed="false" and state_focused="false" causes a NullPointerException.
+          NullPointerException:tempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)'
+
+          <item android:state_pressed="false" android:state_focused="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/>
+
+          For more info, see https://bit.ly/3CdLStv (react-native/pull/29452) and https://bit.ly/3nxOMoR.
+        -->
+        <item android:state_enabled="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/>
+        <item android:drawable="@drawable/abc_textfield_activated_mtrl_alpha"/>
+    </selector>
+
+</inset>

android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@mipmap/ic_launcher_background"/>
+    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+    <monochrome android:drawable="@mipmap/ic_launcher_monochrome"/>
+</adaptive-icon>

android/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@mipmap/ic_launcher_background"/>
+    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+    <monochrome android:drawable="@mipmap/ic_launcher_monochrome"/>
+</adaptive-icon>

android/app/src/main/res/values-night/colors.xml

@@ -0,0 +1,3 @@
+<resources>
+  <color name="splashscreen_background">#000000</color>
+</resources>

android/app/src/main/res/values/colors.xml

@@ -0,0 +1,7 @@
+<resources>
+  <color name="splashscreen_background">#ffffff</color>
+  <color name="iconBackground">#E6F4FE</color>
+  <color name="colorPrimary">#023c69</color>
+  <color name="colorPrimaryDark">#ffffff</color>
+  <color name="navigationBarColor">#0f172a</color>
+</resources>

android/app/src/main/res/values/strings.xml

@@ -0,0 +1,10 @@
+<resources>
+  <string name="app_name">info target</string>
+  <string name="expo_system_ui_user_interface_style" translatable="false">automatic</string>
+  <string name="expo_splash_screen_resize_mode" translatable="false">contain</string>
+  <string name="expo_splash_screen_status_bar_translucent" translatable="false">false</string>
+  <string name="expo_navigation_bar_border_color" translatable="false">-14735049</string>
+  <string name="expo_navigation_bar_visibility" translatable="false">visible</string>
+  <string name="expo_navigation_bar_position" translatable="false">relative</string>
+  <string name="expo_navigation_bar_behavior" translatable="false">inset-swipe</string>
+</resources>

android/app/src/main/res/values/styles.xml

@@ -0,0 +1,15 @@
+<resources xmlns:tools="http://schemas.android.com/tools">
+  <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
+    <item name="android:enforceNavigationBarContrast" tools:targetApi="29">true</item>
+    <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
+    <item name="colorPrimary">@color/colorPrimary</item>
+    <item name="android:statusBarColor">#ffffff</item>
+    <item name="android:navigationBarColor">@color/navigationBarColor</item>
+  </style>
+  <style name="Theme.App.SplashScreen" parent="Theme.SplashScreen">
+    <item name="windowSplashScreenBackground">@color/splashscreen_background</item>
+    <item name="windowSplashScreenAnimatedIcon">@drawable/splashscreen_logo</item>
+    <item name="postSplashScreenTheme">@style/AppTheme</item>
+    <item name="android:windowSplashScreenBehavior">icon_preferred</item>
+  </style>
+</resources>

android/build.gradle

@@ -0,0 +1,24 @@
+// Top-level build file where you can add configuration options common to all sub-projects/modules.
+
+buildscript {
+  repositories {
+    google()
+    mavenCentral()
+  }
+  dependencies {
+    classpath('com.android.tools.build:gradle')
+    classpath('com.facebook.react:react-native-gradle-plugin')
+    classpath('org.jetbrains.kotlin:kotlin-gradle-plugin')
+  }
+}
+
+allprojects {
+  repositories {
+    google()
+    mavenCentral()
+    maven { url 'https://www.jitpack.io' }
+  }
+}
+
+apply plugin: "expo-root-project"
+apply plugin: "com.facebook.react.rootproject"

android/gradle.properties

@@ -0,0 +1,65 @@
+# Project-wide Gradle settings.
+
+# IDE (e.g. Android Studio) users:
+# Gradle settings configured through the IDE *will override*
+# any settings specified in this file.
+
+# For more details on how to configure your build environment visit
+# http://www.gradle.org/docs/current/userguide/build_environment.html
+
+# Specifies the JVM arguments used for the daemon process.
+# The setting is particularly useful for tweaking memory settings.
+# Default value: -Xmx512m -XX:MaxMetaspaceSize=256m
+org.gradle.jvmargs=-Xmx2048m -XX:MaxMetaspaceSize=512m
+
+# When configured, Gradle will run in incubating parallel mode.
+# This option should only be used with decoupled projects. More details, visit
+# http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
+org.gradle.parallel=true
+
+# AndroidX package structure to make it clearer which packages are bundled with the
+# Android operating system, and which are packaged with your app's APK
+# https://developer.android.com/topic/libraries/support-library/androidx-rn
+android.useAndroidX=true
+
+# Enable AAPT2 PNG crunching
+android.enablePngCrunchInReleaseBuilds=true
+
+# Use this property to specify which architecture you want to build.
+# You can also override it from the CLI using
+# ./gradlew <task> -PreactNativeArchitectures=x86_64
+reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
+
+# Use this property to enable support to the new architecture.
+# This will allow you to use TurboModules and the Fabric render in
+# your application. You should enable this flag either if you want
+# to write custom TurboModules/Fabric components OR use libraries that
+# are providing them.
+newArchEnabled=true
+
+# Use this property to enable or disable the Hermes JS engine.
+# If set to false, you will be using JSC instead.
+hermesEnabled=true
+
+# Use this property to enable edge-to-edge display support.
+# This allows your app to draw behind system bars for an immersive UI.
+# Note: Only works with ReactActivity and should not be used with custom Activity.
+edgeToEdgeEnabled=true
+
+# Enable GIF support in React Native images (~200 B increase)
+expo.gif.enabled=true
+# Enable webp support in React Native images (~85 KB increase)
+expo.webp.enabled=true
+# Enable animated webp support (~3.4 MB increase)
+# Disabled by default because iOS doesn't support animated webp
+expo.webp.animated=false
+
+# Enable network inspector
+EX_DEV_CLIENT_NETWORK_INSPECTOR=true
+
+# Use legacy packaging to compress native libraries in the resulting APK.
+expo.useLegacyPackaging=false
+
+# Specifies whether the app is configured to use edge-to-edge via the app config or plugin
+# WARNING: This property has been deprecated and will be removed in Expo SDK 55. Use `edgeToEdgeEnabled` or `react.edgeToEdgeEnabled` to determine whether the project is using edge-to-edge.
+expo.edgeToEdgeEnabled=true

android/gradle/wrapper/gradle-wrapper.properties

@@ -0,0 +1,7 @@
+distributionBase=GRADLE_USER_HOME
+distributionPath=wrapper/dists
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.14.3-bin.zip
+networkTimeout=10000
+validateDistributionUrl=true
+zipStoreBase=GRADLE_USER_HOME
+zipStorePath=wrapper/dists

android/gradlew

@@ -0,0 +1,251 @@
+#!/bin/sh
+
+#
+# Copyright © 2015-2021 the original authors.
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#      https://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+#
+# SPDX-License-Identifier: Apache-2.0
+#
+
+##############################################################################
+#
+#   Gradle start up script for POSIX generated by Gradle.
+#
+#   Important for running:
+#
+#   (1) You need a POSIX-compliant shell to run this script. If your /bin/sh is
+#       noncompliant, but you have some other compliant shell such as ksh or
+#       bash, then to run this script, type that shell name before the whole
+#       command line, like:
+#
+#           ksh Gradle
+#
+#       Busybox and similar reduced shells will NOT work, because this script
+#       requires all of these POSIX shell features:
+#         * functions;
+#         * expansions «$var», «${var}», «${var:-default}», «${var+SET}»,
+#           «${var#prefix}», «${var%suffix}», and «$( cmd )»;
+#         * compound commands having a testable exit status, especially «case»;
+#         * various built-in commands including «command», «set», and «ulimit».
+#
+#   Important for patching:
+#
+#   (2) This script targets any POSIX shell, so it avoids extensions provided
+#       by Bash, Ksh, etc; in particular arrays are avoided.
+#
+#       The "traditional" practice of packing multiple parameters into a
+#       space-separated string is a well documented source of bugs and security
+#       problems, so this is (mostly) avoided, by progressively accumulating
+#       options in "$@", and eventually passing that to Java.
+#
+#       Where the inherited environment variables (DEFAULT_JVM_OPTS, JAVA_OPTS,
+#       and GRADLE_OPTS) rely on word-splitting, this is performed explicitly;
+#       see the in-line comments for details.
+#
+#       There are tweaks for specific operating systems such as AIX, CygWin,
+#       Darwin, MinGW, and NonStop.
+#
+#   (3) This script is generated from the Groovy template
+#       https://github.com/gradle/gradle/blob/HEAD/platforms/jvm/plugins-application/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt
+#       within the Gradle project.
+#
+#       You can find Gradle at https://github.com/gradle/gradle/.
+#
+##############################################################################
+
+# Attempt to set APP_HOME
+
+# Resolve links: $0 may be a link
+app_path=$0
+
+# Need this for daisy-chained symlinks.
+while
+    APP_HOME=${app_path%"${app_path##*/}"}  # leaves a trailing /; empty if no leading path
+    [ -h "$app_path" ]
+do
+    ls=$( ls -ld "$app_path" )
+    link=${ls#*' -> '}
+    case $link in             #(
+      /*)   app_path=$link ;; #(
+      *)    app_path=$APP_HOME$link ;;
+    esac
+done
+
+# This is normally unused
+# shellcheck disable=SC2034
+APP_BASE_NAME=${0##*/}
+# Discard cd standard output in case $CDPATH is set (https://github.com/gradle/gradle/issues/25036)
+APP_HOME=$( cd -P "${APP_HOME:-./}" > /dev/null && printf '%s\n' "$PWD" ) || exit
+
+# Use the maximum available, or set MAX_FD != -1 to use that value.
+MAX_FD=maximum
+
+warn () {
+    echo "$*"
+} >&2
+
+die () {
+    echo
+    echo "$*"
+    echo
+    exit 1
+} >&2
+
+# OS specific support (must be 'true' or 'false').
+cygwin=false
+msys=false
+darwin=false
+nonstop=false
+case "$( uname )" in                #(
+  CYGWIN* )         cygwin=true  ;; #(
+  Darwin* )         darwin=true  ;; #(
+  MSYS* | MINGW* )  msys=true    ;; #(
+  NONSTOP* )        nonstop=true ;;
+esac
+
+CLASSPATH="\\\"\\\""
+
+
+# Determine the Java command to use to start the JVM.
+if [ -n "$JAVA_HOME" ] ; then
+    if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
+        # IBM's JDK on AIX uses strange locations for the executables
+        JAVACMD=$JAVA_HOME/jre/sh/java
+    else
+        JAVACMD=$JAVA_HOME/bin/java
+    fi
+    if [ ! -x "$JAVACMD" ] ; then
+        die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+    fi
+else
+    JAVACMD=java
+    if ! command -v java >/dev/null 2>&1
+    then
+        die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+    fi
+fi
+
+# Increase the maximum file descriptors if we can.
+if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then
+    case $MAX_FD in #(
+      max*)
+        # In POSIX sh, ulimit -H is undefined. That's why the result is checked to see if it worked.
+        # shellcheck disable=SC2039,SC3045
+        MAX_FD=$( ulimit -H -n ) ||
+            warn "Could not query maximum file descriptor limit"
+    esac
+    case $MAX_FD in  #(
+      '' | soft) :;; #(
+      *)
+        # In POSIX sh, ulimit -n is undefined. That's why the result is checked to see if it worked.
+        # shellcheck disable=SC2039,SC3045
+        ulimit -n "$MAX_FD" ||
+            warn "Could not set maximum file descriptor limit to $MAX_FD"
+    esac
+fi
+
+# Collect all arguments for the java command, stacking in reverse order:
+#   * args from the command line
+#   * the main class name
+#   * -classpath
+#   * -D...appname settings
+#   * --module-path (only if needed)
+#   * DEFAULT_JVM_OPTS, JAVA_OPTS, and GRADLE_OPTS environment variables.
+
+# For Cygwin or MSYS, switch paths to Windows format before running java
+if "$cygwin" || "$msys" ; then
+    APP_HOME=$( cygpath --path --mixed "$APP_HOME" )
+    CLASSPATH=$( cygpath --path --mixed "$CLASSPATH" )
+
+    JAVACMD=$( cygpath --unix "$JAVACMD" )
+
+    # Now convert the arguments - kludge to limit ourselves to /bin/sh
+    for arg do
+        if
+            case $arg in                                #(
+              -*)   false ;;                            # don't mess with options #(
+              /?*)  t=${arg#/} t=/${t%%/*}              # looks like a POSIX filepath
+                    [ -e "$t" ] ;;                      #(
+              *)    false ;;
+            esac
+        then
+            arg=$( cygpath --path --ignore --mixed "$arg" )
+        fi
+        # Roll the args list around exactly as many times as the number of
+        # args, so each arg winds up back in the position where it started, but
+        # possibly modified.
+        #
+        # NB: a `for` loop captures its iteration list before it begins, so
+        # changing the positional parameters here affects neither the number of
+        # iterations, nor the values presented in `arg`.
+        shift                   # remove old arg
+        set -- "$@" "$arg"      # push replacement arg
+    done
+fi
+
+
+# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
+
+# Collect all arguments for the java command:
+#   * DEFAULT_JVM_OPTS, JAVA_OPTS, JAVA_OPTS, and optsEnvironmentVar are not allowed to contain shell fragments,
+#     and any embedded shellness will be escaped.
+#   * For example: A user cannot expect ${Hostname} to be expanded, as it is an environment variable and will be
+#     treated as '${Hostname}' itself on the command line.
+
+set -- \
+        "-Dorg.gradle.appname=$APP_BASE_NAME" \
+        -classpath "$CLASSPATH" \
+        -jar "$APP_HOME/gradle/wrapper/gradle-wrapper.jar" \
+        "$@"
+
+# Stop when "xargs" is not available.
+if ! command -v xargs >/dev/null 2>&1
+then
+    die "xargs is not available"
+fi
+
+# Use "xargs" to parse quoted args.
+#
+# With -n1 it outputs one arg per line, with the quotes and backslashes removed.
+#
+# In Bash we could simply go:
+#
+#   readarray ARGS < <( xargs -n1 <<<"$var" ) &&
+#   set -- "${ARGS[@]}" "$@"
+#
+# but POSIX shell has neither arrays nor command substitution, so instead we
+# post-process each arg (as a line of input to sed) to backslash-escape any
+# character that might be a shell metacharacter, then use eval to reverse
+# that process (while maintaining the separation between arguments), and wrap
+# the whole thing up as a single "set" statement.
+#
+# This will of course break if any of these variables contains a newline or
+# an unmatched quote.
+#
+
+eval "set -- $(
+        printf '%s\n' "$DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS" |
+        xargs -n1 |
+        sed ' s~[^-[:alnum:]+,./:=@_]~\\&~g; ' |
+        tr '\n' ' '
+    )" '"$@"'
+
+exec "$JAVACMD" "$@"

android/gradlew.bat

@@ -0,0 +1,94 @@
+@rem
+@rem Copyright 2015 the original author or authors.
+@rem
+@rem Licensed under the Apache License, Version 2.0 (the "License");
+@rem you may not use this file except in compliance with the License.
+@rem You may obtain a copy of the License at
+@rem
+@rem      https://www.apache.org/licenses/LICENSE-2.0
+@rem
+@rem Unless required by applicable law or agreed to in writing, software
+@rem distributed under the License is distributed on an "AS IS" BASIS,
+@rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+@rem See the License for the specific language governing permissions and
+@rem limitations under the License.
+@rem
+@rem SPDX-License-Identifier: Apache-2.0
+@rem
+
+@if "%DEBUG%"=="" @echo off
+@rem ##########################################################################
+@rem
+@rem  Gradle startup script for Windows
+@rem
+@rem ##########################################################################
+
+@rem Set local scope for the variables with windows NT shell
+if "%OS%"=="Windows_NT" setlocal
+
+set DIRNAME=%~dp0
+if "%DIRNAME%"=="" set DIRNAME=.
+@rem This is normally unused
+set APP_BASE_NAME=%~n0
+set APP_HOME=%DIRNAME%
+
+@rem Resolve any "." and ".." in APP_HOME to make it shorter.
+for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
+
+@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
+
+@rem Find java.exe
+if defined JAVA_HOME goto findJavaFromJavaHome
+
+set JAVA_EXE=java.exe
+%JAVA_EXE% -version >NUL 2>&1
+if %ERRORLEVEL% equ 0 goto execute
+
+echo. 1>&2
+echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 1>&2
+echo. 1>&2
+echo Please set the JAVA_HOME variable in your environment to match the 1>&2
+echo location of your Java installation. 1>&2
+
+goto fail
+
+:findJavaFromJavaHome
+set JAVA_HOME=%JAVA_HOME:"=%
+set JAVA_EXE=%JAVA_HOME%/bin/java.exe
+
+if exist "%JAVA_EXE%" goto execute
+
+echo. 1>&2
+echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 1>&2
+echo. 1>&2
+echo Please set the JAVA_HOME variable in your environment to match the 1>&2
+echo location of your Java installation. 1>&2
+
+goto fail
+
+:execute
+@rem Setup the command line
+
+set CLASSPATH=
+
+
+@rem Execute Gradle
+"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" -jar "%APP_HOME%\gradle\wrapper\gradle-wrapper.jar" %*
+
+:end
+@rem End local scope for the variables with windows NT shell
+if %ERRORLEVEL% equ 0 goto mainEnd
+
+:fail
+rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
+rem the _cmd.exe /c_ return code!
+set EXIT_CODE=%ERRORLEVEL%
+if %EXIT_CODE% equ 0 set EXIT_CODE=1
+if not ""=="%GRADLE_EXIT_CONSOLE%" exit %EXIT_CODE%
+exit /b %EXIT_CODE%
+
+:mainEnd
+if "%OS%"=="Windows_NT" endlocal
+
+:omega

android/settings.gradle

@@ -0,0 +1,39 @@
+pluginManagement {
+  def reactNativeGradlePlugin = new File(
+    providers.exec {
+      workingDir(rootDir)
+      commandLine("node", "--print", "require.resolve('@react-native/gradle-plugin/package.json', { paths: [require.resolve('react-native/package.json')] })")
+    }.standardOutput.asText.get().trim()
+  ).getParentFile().absolutePath
+  includeBuild(reactNativeGradlePlugin)
+  
+  def expoPluginsPath = new File(
+    providers.exec {
+      workingDir(rootDir)
+      commandLine("node", "--print", "require.resolve('expo-modules-autolinking/package.json', { paths: [require.resolve('expo/package.json')] })")
+    }.standardOutput.asText.get().trim(),
+    "../android/expo-gradle-plugin"
+  ).absolutePath
+  includeBuild(expoPluginsPath)
+}
+
+plugins {
+  id("com.facebook.react.settings")
+  id("expo-autolinking-settings")
+}
+
+extensions.configure(com.facebook.react.ReactSettingsExtension) { ex ->
+  if (System.getenv('EXPO_USE_COMMUNITY_AUTOLINKING') == '1') {
+    ex.autolinkLibrariesFromCommand()
+  } else {
+    ex.autolinkLibrariesFromCommand(expoAutolinking.rnConfigCommand)
+  }
+}
+expoAutolinking.useExpoModules()
+
+rootProject.name = 'info target'
+
+expoAutolinking.useExpoVersionCatalog()
+
+include ':app'
+includeBuild(expoAutolinking.reactNativeGradlePlugin)

api/URLs.ts

@@ -0,0 +1,33 @@
+export const BASE_URL = 'https://api.infotarget.uz/';
+
+export const API_URLS = {
+  LOGIN: 'login/send_code/',
+  LoginConfirm: 'login/confirm/',
+  REFRESH: 'auth/token/refresh/',
+  DASHBOARD_ADS: '/api/dashboard-ads/',
+  DASHBOARD_ADS_DETAIL: (id: number) => `/api/dashboard-ads/${id}`,
+  ResendOTP: 'login/resend/',
+  Register: 'auth/register/',
+  Register_Confirm: 'auth/confirm/',
+  Register_Resend: 'auth/resend/',
+  Get_Products: 'api/product-service/',
+  Detail_Products: (id: number) => `api/product-service/${id}/`,
+  Delete_Products: (id: number) => `api/product-service/${id}/`,
+  Get_Company: 'api/product-service/product-service-legal-entity/',
+  Get_Countries: 'api/product-service/product-service-country/',
+  Get_States: 'api/countries/',
+  Get_Categories: 'api/category/',
+  Get_Categories_Child: (id: number) => `api/category/${id}/`,
+  Business_About: 'api/business-about/',
+  Business_About_Detail: (id: number) => `api/business-about/${id}/`,
+  Price_Calculation: `api/price-calculation/`,
+  Add_Ads: 'api/ad/',
+  Payment_Ads: (paymentType: 'payme' | 'referral', adId: number) =>
+    `api/payments/${paymentType}/${adId}/`,
+  Get_Me: 'auth/me/',
+  User_Update: 'auth/user-update/',
+  Employee_List: 'api/employee/',
+  My_Ads: 'api/my-ads/',
+  My_Ads_Detail: (id: number) => `api/my-ads/${id}`,
+  My_Bonuses: 'api/cashback/',
+};

api/httpClient.ts

@@ -0,0 +1,106 @@
+import axios from 'axios';
+import { API_URLS, BASE_URL } from './URLs';
+
+import { getToken } from '@/hooks/storage.native';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { router } from 'expo-router';
+
+const httpClient = axios.create({
+  baseURL: BASE_URL,
+  timeout: 60000,
+});
+
+httpClient.interceptors.request.use(async (config) => {
+  const token = await getToken();
+  const lang = await AsyncStorage.getItem('lang');
+
+  config.headers['Accept-Language'] = lang;
+
+  if (token) {
+    config.headers.Authorization = `Bearer ${token}`;
+  }
+
+  return config;
+});
+
+let isRefreshing = false;
+let failedQueue: Array<{ resolve: (value: any) => void; reject: (reason?: any) => void }> = [];
+
+const processQueue = (error: any = null) => {
+  failedQueue.forEach((prom) => {
+    if (error) {
+      prom.reject(error);
+    } else {
+      prom.resolve(null);
+    }
+  });
+  failedQueue = [];
+};
+
+httpClient.interceptors.response.use(
+  (response) => response,
+
+  async (error) => {
+    const originalRequest = error.config;
+
+    // Agar 401 bo'lsa va bu refresh so'rovi bo'lmasa
+    if (error.response?.status === 401 && !originalRequest._retry) {
+      if (isRefreshing) {
+        // Agar allaqachon refresh ketayotgan bo'lsa → kutamiz
+        return new Promise((resolve, reject) => {
+          failedQueue.push({ resolve, reject });
+        })
+          .then(() => httpClient(originalRequest))
+          .catch((err) => Promise.reject(err));
+      }
+
+      originalRequest._retry = true;
+      isRefreshing = true;
+
+      try {
+        const refresh = await AsyncStorage.getItem('refresh_token');
+
+        if (!refresh) {
+          throw new Error('Refresh token mavjud emas');
+        }
+
+        // Refresh token so'rovi
+        const { data } = await axios.post(`${BASE_URL}${API_URLS.REFRESH}`, {
+          refresh, // backend odatda { refresh } body kutadi
+        });
+
+        // Yangi tokenlarni saqlaymiz
+        await AsyncStorage.setItem('access_token', data.access);
+        await AsyncStorage.setItem('refresh_token', data.refresh || refresh); // agar yangi refresh kelmasa, eskisini saqlab qolamiz
+
+        // Headerni yangilaymiz
+        originalRequest.headers.Authorization = `Bearer ${data.access}`;
+
+        // Kutgan so'rovlarni qayta yuboramiz
+        processQueue();
+
+        // Original so'rovni qayta yuboramiz
+        return httpClient(originalRequest);
+      } catch (refreshError) {
+        console.error('Refresh token xatosi:', refreshError);
+
+        // Refresh muvaffaqiyatsiz bo'lsa
+        processQueue(refreshError);
+
+        // Tokenlarni o'chirib, logout qilamiz
+        await AsyncStorage.removeItem('access_token');
+        await AsyncStorage.removeItem('refresh_token');
+
+        // Foydalanuvchini login sahifasiga yo'naltiramiz
+        router.replace('/');
+      } finally {
+        isRefreshing = false;
+      }
+    }
+
+    // Boshqa xatolar uchun oddiy reject
+    return Promise.reject(error);
+  }
+);
+
+export default httpClient;

app.json

@@ -1,10 +1,10 @@
 {
   "expo": {
-    "name": "info_target",
+    "name": "Info target",
-    "slug": "info_target",
+    "slug": "info-target",
     "version": "1.0.0",
     "orientation": "portrait",
-    "icon": "./assets/images/icon.png",
+    "icon": "./assets/images/logo.png",
     "scheme": "infotarget",
     "userInterfaceStyle": "automatic",
     "newArchEnabled": true,
@@ -14,23 +14,36 @@
     "android": {
       "adaptiveIcon": {
         "backgroundColor": "#E6F4FE",
-        "foregroundImage": "./assets/images/android-icon-foreground.png",
+        "foregroundImage": "./assets/images/logo.png",
-        "backgroundImage": "./assets/images/android-icon-background.png",
+        "backgroundImage": "./assets/images/logo.png",
-        "monochromeImage": "./assets/images/android-icon-monochrome.png"
+        "monochromeImage": "./assets/images/logo.png"
       },
       "edgeToEdgeEnabled": true,
-      "predictiveBackGestureEnabled": false
+      "predictiveBackGestureEnabled": false,
+      "package": "com.felix.infotarget",
+      "versionCode": 1
     },
     "web": {
       "output": "static",
-      "favicon": "./assets/images/favicon.png"
+      "favicon": "./assets/images/logo.png"
     },
     "plugins": [
       "expo-router",
+      [
+        "expo-navigation-bar",
+        {
+          "backgroundColor": "#0f172a",
+          "barStyle": "light",
+          "borderColor": "#1f2937",
+          "visibility": "visible",
+          "behavior": "inset-swipe",
+          "position": "relative"
+        }
+      ],
       [
         "expo-splash-screen",
         {
-          "image": "./assets/images/splash-icon.png",
+          "image": "./assets/images/logo.png",
           "imageWidth": 200,
           "resizeMode": "contain",
           "backgroundColor": "#ffffff",
@@ -43,6 +56,20 @@
     "experiments": {
       "typedRoutes": true,
       "reactCompiler": true
+    },
+    "extra": {
+      "router": {},
+      "expo-navigation-bar": {
+        "backgroundColor": "#0f172a",
+        "barStyle": "light",
+        "borderColor": "#1f2937",
+        "visibility": "visible",
+        "behavior": "inset-swipe",
+        "position": "relative"
+      },
+      "eas": {
+        "projectId": "9a281404-9d04-4493-b630-66c35af03ace"
+      }
     }
   }
 }

app/(auth)/_layout.tsx

@@ -0,0 +1,6 @@
+// app/(auth)/_layout.tsx
+import { Slot } from 'expo-router';
+
+export default function AuthLayout() {
+  return <Slot />;
+}

app/(auth)/confirm.tsx

@@ -0,0 +1,18 @@
+import ConfirmScreen from '@/screens/auth/confirm/ConfirmScreen';
+import { ScrollView } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+export default function Confirm() {
+  return (
+    <SafeAreaView
+      style={{
+        flex: 1,
+        backgroundColor: '#0f172a',
+      }}
+    >
+      <ScrollView contentContainerStyle={{ flexGrow: 1 }} keyboardShouldPersistTaps="handled">
+        <ConfirmScreen />
+      </ScrollView>
+    </SafeAreaView>
+  );
+}

app/(auth)/index.tsx

@@ -0,0 +1,39 @@
+import { useAuth } from '@/components/AuthProvider';
+import LoginScreen from '@/screens/auth/login/ui/LoginScreens';
+import { router } from 'expo-router';
+import { useEffect } from 'react';
+import { ActivityIndicator, ScrollView, View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+export default function Index() {
+  const { isAuthenticated, isLoading } = useAuth();
+
+  // Loading spinner
+  if (isLoading) {
+    return (
+      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+        <ActivityIndicator size="large" color="#3b82f6" />
+      </View>
+    );
+  }
+
+  // Token bo‘lsa dashboard-ga yo‘naltir
+  useEffect(() => {
+    if (isAuthenticated) {
+      router.replace('/(dashboard)');
+    }
+  }, [isAuthenticated]);
+
+  // Token yo‘q → login screen
+  if (!isAuthenticated) {
+    return (
+      <SafeAreaView style={{ flex: 1, backgroundColor: '#0f172a' }}>
+        <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
+          <LoginScreen />
+        </ScrollView>
+      </SafeAreaView>
+    );
+  }
+
+  return null;
+}

app/(auth)/register-confirm.tsx

@@ -0,0 +1,18 @@
+import RegisterConfirmScreen from '@/screens/auth/register-confirm/ConfirmScreen';
+import { ScrollView } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+export default function RegisterConfirm() {
+  return (
+    <SafeAreaView
+      style={{
+        flex: 1,
+        backgroundColor: '#0f172a',
+      }}
+    >
+      <ScrollView contentContainerStyle={{ flexGrow: 1 }} keyboardShouldPersistTaps="handled">
+        <RegisterConfirmScreen />
+      </ScrollView>
+    </SafeAreaView>
+  );
+}

app/(auth)/register.tsx

@@ -0,0 +1,22 @@
+import RegisterScreen from '@/screens/auth/register/RegisterScreen';
+import React from 'react';
+import { ScrollView, StyleSheet } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+export default function Index() {
+  return (
+    <SafeAreaView style={styles.safeArea}>
+      <ScrollView
+        contentContainerStyle={{ flexGrow: 1 }}
+        keyboardShouldPersistTaps="handled"
+        showsVerticalScrollIndicator={false}
+      >
+        <RegisterScreen />
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  safeArea: { flex: 1, backgroundColor: '#0f172a' },
+});

app/(auth)/select-category.tsx

@@ -0,0 +1,263 @@
+import AuthHeader from '@/components/ui/AuthHeader';
+import { auth_api } from '@/screens/auth/login/lib/api';
+import { products_api } from '@/screens/home/lib/api';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { useMutation, useQuery } from '@tanstack/react-query';
+import { AxiosError } from 'axios';
+import { LinearGradient } from 'expo-linear-gradient';
+import { Stack, useLocalSearchParams, useRouter } from 'expo-router';
+import { ChevronLeft } from 'lucide-react-native';
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  ActivityIndicator,
+  Alert,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+} from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+interface Category {
+  id: number;
+  name: string;
+  is_leaf: boolean;
+}
+
+export default function CategorySelectScreen() {
+  const router = useRouter();
+  const { t } = useTranslation();
+  const { phone, stir, person_type } = useLocalSearchParams<{
+    phone: string;
+    stir: string;
+    person_type: 'band' | 'ytt';
+  }>();
+
+  const [selected, setSelected] = useState<number | null>(null);
+  const [categories, setCategories] = useState<Category[]>([]);
+  const [history, setHistory] = useState<Category[][]>([]);
+
+  /** ROOT categories */
+  const { isLoading } = useQuery({
+    queryKey: ['categories-root'],
+    queryFn: () => products_api.getCategorys(),
+    select: (res) => {
+      setCategories(res.data.data);
+    },
+  });
+
+  /** CHILD categories */
+  const childMutation = useMutation({
+    mutationFn: (id: number) => products_api.getCategorys({ parent: id }),
+    onSuccess: (res) => {
+      setHistory((prev) => [...prev, categories]);
+      setCategories(res.data.data);
+    },
+  });
+
+  /** REGISTER */
+  const registerMutation = useMutation({
+    mutationFn: (body: {
+      phone: string;
+      stir: string;
+      person_type: string;
+      activate_types: number[];
+    }) => auth_api.register(body),
+    onSuccess: async () => {
+      router.replace('/(auth)/register-confirm');
+      await AsyncStorage.setItem('phone', phone);
+    },
+    onError: (err: AxiosError) => {
+      const errMessage = (err.response?.data as { data: { stir: string[] } }).data.stir[0];
+      const errMessageDetail = (err.response?.data as { data: { detail: string } }).data.detail;
+
+      const errrAlert = errMessage ? errMessage : errMessageDetail;
+
+      Alert.alert(t('Xatolik yuz berdi'), errMessage || errrAlert || t('erroXatolik yuz berdi'));
+    },
+  });
+
+  const onCategoryPress = (cat: Category) => {
+    if (cat.is_leaf) {
+      setSelected(cat.id);
+    } else {
+      childMutation.mutate(cat.id);
+    }
+  };
+
+  const goBack = () => {
+    if (history.length === 0) return;
+    const prev = history[history.length - 1];
+    setCategories(prev);
+    setHistory((h) => h.slice(0, -1));
+    setSelected(null);
+  };
+
+  return (
+    <SafeAreaView style={styles.safeArea}>
+      <AuthHeader />
+      <Stack.Screen options={{ title: t('Yo‘nalishni tanlang') }} />
+
+      <LinearGradient colors={['#0f172a', '#1e293b']} style={StyleSheet.absoluteFill} />
+
+      <ScrollView contentContainerStyle={styles.container}>
+        {history.length > 0 && (
+          <TouchableOpacity onPress={goBack} style={styles.backBtn}>
+            <ChevronLeft size={20} color="#3b82f6" />
+            <Text style={styles.backText}>{t('Orqaga')}</Text>
+          </TouchableOpacity>
+        )}
+        <Text style={styles.title}>{t("Yo'nalishni tanlang")}</Text>
+
+        {isLoading || childMutation.isPending ? (
+          <ActivityIndicator color="#3b82f6" />
+        ) : (
+          categories.map((c) => {
+            const active = selected === c.id;
+            return (
+              <TouchableOpacity
+                key={c.id}
+                style={[styles.item, active && styles.itemActive]}
+                onPress={() => onCategoryPress(c)}
+              >
+                <Text style={[styles.text, active && styles.textActive]}>{c.name}</Text>
+              </TouchableOpacity>
+            );
+          })
+        )}
+      </ScrollView>
+
+      <TouchableOpacity
+        disabled={!selected || registerMutation.isPending}
+        style={[styles.bottom, (!selected || registerMutation.isPending) && styles.bottomDisabled]}
+        onPress={() => {
+          if (!selected) return;
+          registerMutation.mutate({
+            activate_types: [selected],
+            person_type,
+            phone: `998${phone}`,
+            stir,
+          });
+        }}
+      >
+        <Text style={styles.bottomText} disabled={registerMutation.isPending}>
+          {t('Tadiqlash')}
+        </Text>
+      </TouchableOpacity>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  title: {
+    fontSize: 18,
+    fontWeight: '700',
+    color: '#ffffff',
+    marginBottom: 12,
+  },
+  safeArea: {
+    flex: 1,
+    backgroundColor: '#0f172a',
+  },
+
+  container: {
+    paddingHorizontal: 20,
+    paddingTop: 16,
+    paddingBottom: 70,
+    gap: 12,
+  },
+
+  backBtn: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+    marginBottom: 12,
+  },
+
+  backText: {
+    fontSize: 14,
+    color: '#3b82f6',
+    fontWeight: '600',
+  },
+
+  item: {
+    paddingVertical: 18,
+    paddingHorizontal: 18,
+    borderRadius: 16,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    backgroundColor: 'rgba(255,255,255,0.06)',
+    borderWidth: 1,
+    borderColor: 'rgba(255,255,255,0.12)',
+  },
+
+  itemActive: {
+    backgroundColor: 'rgba(59,130,246,0.15)',
+    borderColor: 'rgba(59,130,246,0.6)',
+  },
+
+  text: {
+    fontSize: 15,
+    fontWeight: '600',
+    color: '#cbd5f5',
+  },
+
+  textActive: {
+    color: '#ffffff',
+    fontWeight: '800',
+  },
+
+  arrow: {
+    fontSize: 18,
+    color: '#94a3b8',
+  },
+
+  bottom: {
+    position: 'absolute',
+    bottom: 20,
+    left: 16,
+    right: 16,
+    height: 54,
+    borderRadius: 16,
+    backgroundColor: '#3b82f6',
+    alignItems: 'center',
+    justifyContent: 'center',
+    shadowColor: '#3b82f6',
+    shadowOffset: { width: 0, height: 8 },
+    shadowOpacity: 0.35,
+    shadowRadius: 12,
+    elevation: 10,
+  },
+
+  bottomDisabled: {
+    backgroundColor: '#64748b',
+  },
+
+  bottomText: {
+    color: '#ffffff',
+    fontWeight: '800',
+    fontSize: 16,
+  },
+
+  decorCircle1: {
+    position: 'absolute',
+    top: -120,
+    right: -80,
+    width: 300,
+    height: 300,
+    borderRadius: 150,
+    backgroundColor: 'rgba(59,130,246,0.12)',
+  },
+
+  decorCircle2: {
+    position: 'absolute',
+    bottom: -120,
+    left: -100,
+    width: 280,
+    height: 280,
+    borderRadius: 140,
+    backgroundColor: 'rgba(16,185,129,0.1)',
+  },
+});

app/(dashboard)/_layout.tsx

@@ -0,0 +1,143 @@
+import { useTheme } from '@/components/ThemeContext';
+import { RefreshProvider } from '@/components/ui/RefreshContext';
+import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
+import { Tabs } from 'expo-router';
+import { Home, Megaphone, PlusCircle, User } from 'lucide-react-native';
+import { useTranslation } from 'react-i18next';
+import { Text } from 'react-native';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+
+export default function TabsLayout() {
+  const { isDark } = useTheme();
+  const { t } = useTranslation();
+
+  return (
+    <GestureHandlerRootView style={{ flex: 1 }}>
+      <RefreshProvider>
+        <BottomSheetModalProvider>
+          <Tabs
+            screenOptions={{
+              headerShown: false,
+              tabBarStyle: {
+                position: 'absolute',
+                left: 16,
+                right: 16,
+                bottom: 0,
+                height: 70,
+                borderTopLeftRadius: 16,
+                borderTopRightRadius: 16,
+                backgroundColor: isDark ? '#0f172a' : '#fff',
+                borderWidth: 1,
+                borderColor: isDark ? '#334155' : '#e2e8f0',
+                shadowColor: '#000',
+                shadowOpacity: isDark ? 0.5 : 0.1,
+                shadowOffset: { width: 0, height: -3 },
+                shadowRadius: isDark ? 12 : 10,
+                elevation: 8,
+                overflow: 'hidden',
+              },
+              tabBarActiveTintColor: '#3b82f6',
+              tabBarInactiveTintColor: isDark ? '#64748b' : '#94a3b8',
+              tabBarLabelStyle: { fontSize: 12, fontWeight: '600' },
+              tabBarItemStyle: {
+                flexDirection: 'row',
+                justifyContent: 'center',
+                alignItems: 'flex-start',
+                alignContent: 'center',
+              },
+              tabBarLabelPosition: 'below-icon',
+            }}
+          >
+            <Tabs.Screen
+              name="index"
+              options={{
+                tabBarLabel: ({ color }) => (
+                  <Text
+                    style={{
+                      color: color,
+                      fontSize: 12,
+                      fontWeight: '600',
+                      textAlign: 'center',
+                      flexWrap: 'wrap',
+                      width: 80, // yetarli joy berish
+                    }}
+                    numberOfLines={2} // 2 qatorga sig‘adi
+                  >
+                    {t('Bosh sahifa')}
+                  </Text>
+                ),
+                tabBarIcon: ({ color, size }) => <Home color={color} size={size} />,
+              }}
+            />
+
+            <Tabs.Screen
+              name="create-announcements"
+              options={{
+                tabBarLabel: ({ focused, color }) => (
+                  <Text
+                    style={{
+                      color: color,
+                      fontSize: 12,
+                      fontWeight: '600',
+                      textAlign: 'center',
+                      flexWrap: 'wrap',
+                      width: 80, // yetarli joy berish
+                    }}
+                    numberOfLines={2} // 2 qatorga sig‘adi
+                  >
+                    {t("E'lon joylashtirish")}
+                  </Text>
+                ),
+                tabBarIcon: ({ color, size }) => <PlusCircle color={color} size={size} />,
+              }}
+            />
+
+            <Tabs.Screen
+              name="announcements"
+              options={{
+                tabBarLabel: ({ focused, color }) => (
+                  <Text
+                    style={{
+                      color: color,
+                      fontSize: 12,
+                      fontWeight: '600',
+                      textAlign: 'center',
+                      flexWrap: 'wrap',
+                      width: 80, // yetarli joy berish
+                    }}
+                    numberOfLines={2} // 2 qatorga sig‘adi
+                  >
+                    {t("E'lonlar")}
+                  </Text>
+                ),
+                tabBarIcon: ({ color, size }) => <Megaphone color={color} size={size} />,
+              }}
+            />
+
+            <Tabs.Screen
+              name="profile"
+              options={{
+                tabBarLabel: ({ focused, color }) => (
+                  <Text
+                    style={{
+                      color: color,
+                      fontSize: 12,
+                      fontWeight: '600',
+                      textAlign: 'center',
+                      flexWrap: 'wrap',
+                      width: 80, // yetarli joy berish
+                    }}
+                    numberOfLines={2} // 2 qatorga sig‘adi
+                  >
+                    {t('Profil')}
+                  </Text>
+                ),
+                tabBarIcon: ({ color, size }) => <User color={color} size={size} />,
+              }}
+            />
+          </Tabs>
+        </BottomSheetModalProvider>
+      </RefreshProvider>
+    </GestureHandlerRootView>
+  );
+}

app/(dashboard)/announcements.tsx

@@ -0,0 +1,21 @@
+import { useTheme } from '@/components/ThemeContext';
+import { FilterProvider } from '@/components/ui/FilterContext';
+import { CustomHeader } from '@/components/ui/Header';
+import DashboardScreen from '@/screens/announcements/ui/AnnouncementsList';
+import { Stack } from 'expo-router';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+export default function Announcements() {
+  const { isDark } = useTheme();
+  return (
+    <FilterProvider>
+      <SafeAreaView
+        style={{ flex: 1, backgroundColor: isDark ? '#0f172a' : '#ffffff', paddingBottom: 50 }}
+      >
+        <CustomHeader />
+        <Stack.Screen options={{ title: "E'lonlar" }} />
+        <DashboardScreen />
+      </SafeAreaView>
+    </FilterProvider>
+  );
+}

app/(dashboard)/create-announcements.tsx

@@ -0,0 +1,17 @@
+import { useTheme } from '@/components/ThemeContext';
+import { FilterProvider } from '@/components/ui/FilterContext';
+import { CustomHeader } from '@/components/ui/Header';
+import CreateAdsScreens from '@/screens/create-ads/ui/CreateAdsScreens';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+export default function CreateAnnouncements() {
+  const { isDark } = useTheme();
+  return (
+    <FilterProvider>
+      <SafeAreaView style={{ flex: 1, backgroundColor: isDark ? '#0f172a' : '#ffffff' }}>
+        <CustomHeader />
+        <CreateAdsScreens />
+      </SafeAreaView>
+    </FilterProvider>
+  );
+}

app/(dashboard)/index.tsx

@@ -0,0 +1,33 @@
+// pages/home/index.tsx
+import { useAuth } from '@/components/AuthProvider';
+import { useTheme } from '@/components/ThemeContext';
+import { FilterProvider } from '@/components/ui/FilterContext';
+import { CustomHeader } from '@/components/ui/Header';
+import HomeScreen from '@/screens/home/ui/HomeScreen';
+import { router } from 'expo-router';
+import { useEffect } from 'react';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+export default function Index() {
+  const { isDark } = useTheme();
+  const { isAuthenticated, isLoading } = useAuth();
+
+  useEffect(() => {
+    if (!isLoading && !isAuthenticated) {
+      router.replace('/(auth)');
+    }
+  }, [isAuthenticated, isLoading]);
+
+  if (isLoading || !isAuthenticated) {
+    return null; // Loading vaqtida yoki auth yo‘q bo‘lsa hech narsa ko‘rmasin
+  }
+
+  return (
+    <FilterProvider>
+      <SafeAreaView style={{ flex: 1, backgroundColor: isDark ? '#0f172a' : '#ffffff' }}>
+        <CustomHeader />
+        <HomeScreen />
+      </SafeAreaView>
+    </FilterProvider>
+  );
+}

app/(dashboard)/profile.tsx

@@ -0,0 +1,17 @@
+import { useTheme } from '@/components/ThemeContext';
+import { CustomHeader } from '@/components/ui/Header';
+import Profile from '@/screens/profile/ui/ProfileScreen';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+export default function ProfileScreen() {
+  const { isDark } = useTheme();
+  return (
+    <SafeAreaView
+      style={{ flex: 1, backgroundColor: isDark ? '#0f172a' : '#ffffff', paddingBottom: 30 }}
+      edges={['top']}
+    >
+      <CustomHeader logoutbtn={true} />
+      <Profile />
+    </SafeAreaView>
+  );
+}

app/(tabs)/_layout.tsx

@@ -1,35 +0,0 @@
-import { Tabs } from 'expo-router';
-import React from 'react';
-
-import { HapticTab } from '@/components/haptic-tab';
-import { IconSymbol } from '@/components/ui/icon-symbol';
-import { Colors } from '@/constants/theme';
-import { useColorScheme } from '@/hooks/use-color-scheme';
-
-export default function TabLayout() {
-  const colorScheme = useColorScheme();
-
-  return (
-    <Tabs
-      screenOptions={{
-        tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
-        headerShown: false,
-        tabBarButton: HapticTab,
-      }}>
-      <Tabs.Screen
-        name="index"
-        options={{
-          title: 'Home',
-          tabBarIcon: ({ color }) => <IconSymbol size={28} name="house.fill" color={color} />,
-        }}
-      />
-      <Tabs.Screen
-        name="explore"
-        options={{
-          title: 'Explore',
-          tabBarIcon: ({ color }) => <IconSymbol size={28} name="paperplane.fill" color={color} />,
-        }}
-      />
-    </Tabs>
-  );
-}

app/(tabs)/explore.tsx

@@ -1,112 +0,0 @@
-import { Image } from 'expo-image';
-import { Platform, StyleSheet } from 'react-native';
-
-import { Collapsible } from '@/components/ui/collapsible';
-import { ExternalLink } from '@/components/external-link';
-import ParallaxScrollView from '@/components/parallax-scroll-view';
-import { ThemedText } from '@/components/themed-text';
-import { ThemedView } from '@/components/themed-view';
-import { IconSymbol } from '@/components/ui/icon-symbol';
-import { Fonts } from '@/constants/theme';
-
-export default function TabTwoScreen() {
-  return (
-    <ParallaxScrollView
-      headerBackgroundColor={{ light: '#D0D0D0', dark: '#353636' }}
-      headerImage={
-        <IconSymbol
-          size={310}
-          color="#808080"
-          name="chevron.left.forwardslash.chevron.right"
-          style={styles.headerImage}
-        />
-      }>
-      <ThemedView style={styles.titleContainer}>
-        <ThemedText
-          type="title"
-          style={{
-            fontFamily: Fonts.rounded,
-          }}>
-          Explore
-        </ThemedText>
-      </ThemedView>
-      <ThemedText>This app includes example code to help you get started.</ThemedText>
-      <Collapsible title="File-based routing">
-        <ThemedText>
-          This app has two screens:{' '}
-          <ThemedText type="defaultSemiBold">app/(tabs)/index.tsx</ThemedText> and{' '}
-          <ThemedText type="defaultSemiBold">app/(tabs)/explore.tsx</ThemedText>
-        </ThemedText>
-        <ThemedText>
-          The layout file in <ThemedText type="defaultSemiBold">app/(tabs)/_layout.tsx</ThemedText>{' '}
-          sets up the tab navigator.
-        </ThemedText>
-        <ExternalLink href="https://docs.expo.dev/router/introduction">
-          <ThemedText type="link">Learn more</ThemedText>
-        </ExternalLink>
-      </Collapsible>
-      <Collapsible title="Android, iOS, and web support">
-        <ThemedText>
-          You can open this project on Android, iOS, and the web. To open the web version, press{' '}
-          <ThemedText type="defaultSemiBold">w</ThemedText> in the terminal running this project.
-        </ThemedText>
-      </Collapsible>
-      <Collapsible title="Images">
-        <ThemedText>
-          For static images, you can use the <ThemedText type="defaultSemiBold">@2x</ThemedText> and{' '}
-          <ThemedText type="defaultSemiBold">@3x</ThemedText> suffixes to provide files for
-          different screen densities
-        </ThemedText>
-        <Image
-          source={require('@/assets/images/react-logo.png')}
-          style={{ width: 100, height: 100, alignSelf: 'center' }}
-        />
-        <ExternalLink href="https://reactnative.dev/docs/images">
-          <ThemedText type="link">Learn more</ThemedText>
-        </ExternalLink>
-      </Collapsible>
-      <Collapsible title="Light and dark mode components">
-        <ThemedText>
-          This template has light and dark mode support. The{' '}
-          <ThemedText type="defaultSemiBold">useColorScheme()</ThemedText> hook lets you inspect
-          what the user&apos;s current color scheme is, and so you can adjust UI colors accordingly.
-        </ThemedText>
-        <ExternalLink href="https://docs.expo.dev/develop/user-interface/color-themes/">
-          <ThemedText type="link">Learn more</ThemedText>
-        </ExternalLink>
-      </Collapsible>
-      <Collapsible title="Animations">
-        <ThemedText>
-          This template includes an example of an animated component. The{' '}
-          <ThemedText type="defaultSemiBold">components/HelloWave.tsx</ThemedText> component uses
-          the powerful{' '}
-          <ThemedText type="defaultSemiBold" style={{ fontFamily: Fonts.mono }}>
-            react-native-reanimated
-          </ThemedText>{' '}
-          library to create a waving hand animation.
-        </ThemedText>
-        {Platform.select({
-          ios: (
-            <ThemedText>
-              The <ThemedText type="defaultSemiBold">components/ParallaxScrollView.tsx</ThemedText>{' '}
-              component provides a parallax effect for the header image.
-            </ThemedText>
-          ),
-        })}
-      </Collapsible>
-    </ParallaxScrollView>
-  );
-}
-
-const styles = StyleSheet.create({
-  headerImage: {
-    color: '#808080',
-    bottom: -90,
-    left: -35,
-    position: 'absolute',
-  },
-  titleContainer: {
-    flexDirection: 'row',
-    gap: 8,
-  },
-});

app/(tabs)/index.tsx

@@ -1,98 +0,0 @@
-import { Image } from 'expo-image';
-import { Platform, StyleSheet } from 'react-native';
-
-import { HelloWave } from '@/components/hello-wave';
-import ParallaxScrollView from '@/components/parallax-scroll-view';
-import { ThemedText } from '@/components/themed-text';
-import { ThemedView } from '@/components/themed-view';
-import { Link } from 'expo-router';
-
-export default function HomeScreen() {
-  return (
-    <ParallaxScrollView
-      headerBackgroundColor={{ light: '#A1CEDC', dark: '#1D3D47' }}
-      headerImage={
-        <Image
-          source={require('@/assets/images/partial-react-logo.png')}
-          style={styles.reactLogo}
-        />
-      }>
-      <ThemedView style={styles.titleContainer}>
-        <ThemedText type="title">Welcome!</ThemedText>
-        <HelloWave />
-      </ThemedView>
-      <ThemedView style={styles.stepContainer}>
-        <ThemedText type="subtitle">Step 1: Try it</ThemedText>
-        <ThemedText>
-          Edit <ThemedText type="defaultSemiBold">app/(tabs)/index.tsx</ThemedText> to see changes.
-          Press{' '}
-          <ThemedText type="defaultSemiBold">
-            {Platform.select({
-              ios: 'cmd + d',
-              android: 'cmd + m',
-              web: 'F12',
-            })}
-          </ThemedText>{' '}
-          to open developer tools.
-        </ThemedText>
-      </ThemedView>
-      <ThemedView style={styles.stepContainer}>
-        <Link href="/modal">
-          <Link.Trigger>
-            <ThemedText type="subtitle">Step 2: Explore</ThemedText>
-          </Link.Trigger>
-          <Link.Preview />
-          <Link.Menu>
-            <Link.MenuAction title="Action" icon="cube" onPress={() => alert('Action pressed')} />
-            <Link.MenuAction
-              title="Share"
-              icon="square.and.arrow.up"
-              onPress={() => alert('Share pressed')}
-            />
-            <Link.Menu title="More" icon="ellipsis">
-              <Link.MenuAction
-                title="Delete"
-                icon="trash"
-                destructive
-                onPress={() => alert('Delete pressed')}
-              />
-            </Link.Menu>
-          </Link.Menu>
-        </Link>
-
-        <ThemedText>
-          {`Tap the Explore tab to learn more about what's included in this starter app.`}
-        </ThemedText>
-      </ThemedView>
-      <ThemedView style={styles.stepContainer}>
-        <ThemedText type="subtitle">Step 3: Get a fresh start</ThemedText>
-        <ThemedText>
-          {`When you're ready, run `}
-          <ThemedText type="defaultSemiBold">npm run reset-project</ThemedText> to get a fresh{' '}
-          <ThemedText type="defaultSemiBold">app</ThemedText> directory. This will move the current{' '}
-          <ThemedText type="defaultSemiBold">app</ThemedText> to{' '}
-          <ThemedText type="defaultSemiBold">app-example</ThemedText>.
-        </ThemedText>
-      </ThemedView>
-    </ParallaxScrollView>
-  );
-}
-
-const styles = StyleSheet.create({
-  titleContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 8,
-  },
-  stepContainer: {
-    gap: 8,
-    marginBottom: 8,
-  },
-  reactLogo: {
-    height: 178,
-    width: 290,
-    bottom: 0,
-    left: 0,
-    position: 'absolute',
-  },
-});

app/_layout.tsx

@@ -1,24 +1,34 @@
-import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';
+import { AuthProvider } from '@/components/AuthProvider';
+import QueryProvider from '@/components/QueryProvider';
+import { ThemeProvider } from '@/components/ThemeContext';
+import i18n from '@/i18n/i18n';
+import { ProfileDataProvider } from '@/screens/profile/lib/ProfileDataContext';
 import { Stack } from 'expo-router';
 import { StatusBar } from 'expo-status-bar';
+import { I18nextProvider } from 'react-i18next';
 import 'react-native-reanimated';
 
-import { useColorScheme } from '@/hooks/use-color-scheme';
+function AppContent() {
-
-export const unstable_settings = {
-  anchor: '(tabs)',
-};
-
-export default function RootLayout() {
-  const colorScheme = useColorScheme();
-
   return (
-    <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
+    <>
-      <Stack>
+      <Stack screenOptions={{ headerShown: false }} />
-        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+      <StatusBar style={'light'} />
-        <Stack.Screen name="modal" options={{ presentation: 'modal', title: 'Modal' }} />
+    </>
-      </Stack>
+  );
-      <StatusBar style="auto" />
+}
-    </ThemeProvider>
+
+export default function RootLayout() {
+  return (
+    <I18nextProvider i18n={i18n}>
+      <QueryProvider>
+        <ThemeProvider>
+          <ProfileDataProvider>
+            <AuthProvider>
+              <AppContent />
+            </AuthProvider>
+          </ProfileDataProvider>
+        </ThemeProvider>
+      </QueryProvider>
+    </I18nextProvider>
   );
 }

app/index.tsx

@@ -0,0 +1,21 @@
+import { useAuth } from '@/components/AuthProvider';
+import { Redirect } from 'expo-router';
+import { ActivityIndicator, View } from 'react-native';
+
+export default function Index() {
+  const { isAuthenticated, isLoading } = useAuth();
+
+  if (isLoading) {
+    return (
+      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+        <ActivityIndicator size="large" />
+      </View>
+    );
+  }
+
+  if (isAuthenticated) {
+    return <Redirect href="/(dashboard)" />;
+  }
+
+  return <Redirect href="/(auth)" />;
+}

app/modal.tsx

@@ -1,29 +0,0 @@
-import { Link } from 'expo-router';
-import { StyleSheet } from 'react-native';
-
-import { ThemedText } from '@/components/themed-text';
-import { ThemedView } from '@/components/themed-view';
-
-export default function ModalScreen() {
-  return (
-    <ThemedView style={styles.container}>
-      <ThemedText type="title">This is a modal</ThemedText>
-      <Link href="/" dismissTo style={styles.link}>
-        <ThemedText type="link">Go to home screen</ThemedText>
-      </Link>
-    </ThemedView>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: 20,
-  },
-  link: {
-    marginTop: 15,
-    paddingVertical: 15,
-  },
-});

app/profile/_layout.tsx

@@ -0,0 +1,16 @@
+import { RefreshProvider } from '@/components/ui/RefreshContext';
+import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
+import { Stack } from 'expo-router';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+
+export default function TabsLayout() {
+  return (
+    <GestureHandlerRootView style={{ flex: 1 }}>
+      <RefreshProvider>
+        <BottomSheetModalProvider>
+          <Stack screenOptions={{ headerShown: false }} />
+        </BottomSheetModalProvider>
+      </RefreshProvider>
+    </GestureHandlerRootView>
+  );
+}

app/profile/bonuses.tsx

@@ -0,0 +1,5 @@
+import BonusesScreen from '@/screens/profile/ui/BonusesScreen';
+
+export default function Bonuses() {
+  return <BonusesScreen />;
+}

app/profile/categories.tsx

@@ -0,0 +1,227 @@
+import { useTheme } from '@/components/ThemeContext';
+import CategorySelection from '@/components/ui/IndustrySelection';
+import { user_api } from '@/screens/profile/lib/api';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useRouter } from 'expo-router';
+import { ArrowLeft, XIcon } from 'lucide-react-native';
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  ActivityIndicator,
+  Alert,
+  FlatList,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  ToastAndroid,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+export default function PersonalInfoScreen() {
+  const router = useRouter();
+  const queryClient = useQueryClient();
+  const { isDark } = useTheme();
+  const { t } = useTranslation();
+
+  const theme = {
+    background: isDark ? '#0f172a' : '#f8fafc',
+    text: isDark ? '#ffffff' : '#0f172a',
+    textSecondary: isDark ? '#64748b' : '#94a3b8',
+    primary: '#3b82f6',
+    tabBg: isDark ? '#1e293b' : '#e0e7ff',
+    tabText: isDark ? '#ffffff' : '#4338ca',
+    deleteBg: isDark ? '#394e73' : '#cbd5e1',
+    deleteIcon: isDark ? '#f8fafc' : '#475569',
+    shadow: isDark ? '#000' : '#64748b',
+  };
+
+  const [selectedCategories, setSelectedCategories] = useState<any[]>([]);
+
+  const { data: me, isLoading } = useQuery({
+    queryKey: ['get_me'],
+    queryFn: () => user_api.getMe(),
+  });
+
+  useEffect(() => {
+    if (me?.data.data?.activate_types) {
+      setSelectedCategories(me.data.data.activate_types.map((a: any) => a));
+    }
+  }, [me]);
+
+  const updateMutation = useMutation({
+    mutationFn: (body: {
+      first_name: string;
+      industries: {
+        id: number;
+        name: string;
+        code: string;
+        external_id: null | number;
+        level: number;
+        is_leaf: boolean;
+        icon_name: null | string;
+        parent: {
+          id: number;
+          name: string;
+          code: string;
+        };
+      }[];
+      phone: string;
+      person_type: 'employee' | 'legal_entity' | 'ytt' | 'band';
+      activate_types: number[];
+    }) => user_api.updateMe(body),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['get_me'] });
+      router.push('/profile/personal-info');
+      ToastAndroid.show(t("Ma'lumotlar yangilandi"), ToastAndroid.TOP);
+    },
+    onError: () => {
+      Alert.alert(t('Xatolik yzu berdi'), t("Ma'lumotlarni yangilashda xatolik yuz berdi"));
+    },
+  });
+
+  const removeCategory = (id: string | number) => {
+    setSelectedCategories((prev) => prev.filter((c) => c.id !== id));
+  };
+
+  const renderTab = ({ item }: { item: any }) => (
+    <View style={[styles.tabWrapper, { backgroundColor: theme.tabBg, shadowColor: theme.shadow }]}>
+      <Text
+        style={[styles.tabText, { color: theme.tabText }]}
+        numberOfLines={1}
+        ellipsizeMode="tail"
+      >
+        {item.name}
+      </Text>
+      <TouchableOpacity
+        onPress={() => removeCategory(item.id)}
+        style={[styles.deleteTab, { backgroundColor: theme.deleteBg }]}
+      >
+        <XIcon size={15} color={theme.deleteIcon} />
+      </TouchableOpacity>
+    </View>
+  );
+
+  if (isLoading) {
+    return (
+      <SafeAreaView style={[styles.container, { backgroundColor: theme.background }]}>
+        <View style={styles.topHeader}>
+          <Pressable onPress={() => router.push('/profile/personal-info')}>
+            <ArrowLeft color={theme.text} />
+          </Pressable>
+          <Text style={[styles.headerTitle, { color: theme.text }]}>{t('Faoliyat sohalari')}</Text>
+          <Pressable>
+            <Text style={{ color: theme.primary, fontSize: 16 }}>{t('Tayyor')}</Text>
+          </Pressable>
+        </View>
+        <ActivityIndicator size={'large'} />
+      </SafeAreaView>
+    );
+  }
+
+  return (
+    <SafeAreaView style={[styles.container, { backgroundColor: theme.background }]}>
+      <View style={styles.topHeader}>
+        <Pressable onPress={() => router.push('/profile/personal-info')}>
+          <ArrowLeft color={theme.text} />
+        </Pressable>
+        <Text style={[styles.headerTitle, { color: theme.text }]}>{t('Faoliyat sohalari')}</Text>
+        <Pressable
+          onPress={() => {
+            if (me) {
+              const activate_types = selectedCategories.map((e) => e.id) ?? [];
+              updateMutation.mutate({
+                person_type: me?.data.data.person_type,
+                first_name: me?.data.data.first_name,
+                phone: me.data.data.phone,
+                industries: selectedCategories,
+                activate_types,
+              });
+            }
+          }}
+        >
+          {updateMutation.isPending ? (
+            <ActivityIndicator size={'small'} />
+          ) : (
+            <Text style={{ color: theme.primary, fontSize: 16 }}>{t('Tayyor')}</Text>
+          )}
+        </Pressable>
+      </View>
+
+      <ScrollView
+        style={{
+          padding: 16,
+        }}
+      >
+        {selectedCategories.length > 0 && (
+          <FlatList
+            data={selectedCategories}
+            keyExtractor={(item) => String(item.id)}
+            renderItem={renderTab}
+            horizontal
+            showsHorizontalScrollIndicator={false}
+            keyboardShouldPersistTaps="handled"
+            contentContainerStyle={styles.tabsContainer}
+            style={styles.tabsList}
+            ItemSeparatorComponent={() => <View style={{ width: 8 }} />}
+          />
+        )}
+        <CategorySelection
+          selectedCategories={selectedCategories}
+          setSelectedCategories={setSelectedCategories}
+        />
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  tabsList: {
+    maxHeight: 56,
+  },
+  tabsContainer: {
+    alignItems: 'center',
+    marginBottom: 20,
+  },
+  tabWrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+    borderRadius: 20,
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.2,
+    shadowRadius: 3,
+    elevation: 3,
+  },
+  tabText: {
+    fontSize: 14,
+    fontWeight: '600',
+    marginRight: 6,
+    maxWidth: 200,
+    flexShrink: 1,
+  },
+  deleteTab: {
+    padding: 4,
+    borderRadius: 12,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  loadingText: {
+    fontSize: 16,
+    textAlign: 'center',
+    marginTop: 40,
+  },
+  topHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    padding: 16,
+    alignItems: 'center',
+  },
+  headerTitle: { fontSize: 18, fontWeight: '700' },
+});

app/profile/employees.tsx

@@ -0,0 +1,5 @@
+import { EmployeesTab } from '@/screens/profile/ui/EmployeesTab';
+
+export default function EmployeesScreen() {
+  return <EmployeesTab />;
+}

app/profile/employees/[id].tsx

@@ -0,0 +1,5 @@
+import { EmployeesTab } from '@/screens/profile/ui/EmployeesTab';
+
+export default function EmployeeDetailScreen() {
+  return <EmployeesTab />;
+}

app/profile/employees/add.tsx

@@ -0,0 +1,9 @@
+import AddEmployee from '@/screens/profile/ui/AddEmployee';
+
+export default function AddEmployeeScreen() {
+  return (
+    <>
+      <AddEmployee />
+    </>
+  );
+}

app/profile/my-ads.tsx

@@ -0,0 +1,12 @@
+import { useTheme } from '@/components/ThemeContext';
+import { AnnouncementsTab } from '@/screens/profile/ui/AnnouncementsTab';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+export default function MyAds() {
+  const { isDark } = useTheme();
+  return (
+    <SafeAreaView style={{ flex: 1, backgroundColor: isDark ? '#0f172a' : '#f8fafc' }}>
+      <AnnouncementsTab />
+    </SafeAreaView>
+  );
+}

app/profile/personal-info.tsx

@@ -0,0 +1,346 @@
+import { useTheme } from '@/components/ThemeContext';
+import { formatNumber, formatPhone, normalizeDigits } from '@/constants/formatPhone';
+import { user_api } from '@/screens/profile/lib/api';
+import { UserInfoResponseData } from '@/screens/profile/lib/type';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useRouter } from 'expo-router';
+import { ArrowLeft, Edit2, Plus } from 'lucide-react-native';
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  ActivityIndicator,
+  Alert,
+  Image,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TextInput,
+  ToastAndroid,
+  View,
+} from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+export default function PersonalInfoScreen() {
+  const router = useRouter();
+  const queryClient = useQueryClient();
+  const { isDark } = useTheme();
+  const { t } = useTranslation();
+
+  const theme = {
+    background: isDark ? '#0f172a' : '#f8fafc',
+    cardBg: isDark ? '#1e293b' : '#ffffff',
+    text: isDark ? '#f8fafc' : '#0f172a',
+    textSecondary: isDark ? '#94a3b8' : '#64748b',
+    textTertiary: isDark ? '#64748b' : '#94a3b8',
+    inputBg: isDark ? '#1e293b' : '#f1f5f9',
+    inputBorder: isDark ? '#334155' : '#e2e8f0',
+    primary: '#3b82f6',
+    chipBg: isDark ? '#1e293b' : '#e0e7ff',
+    chipText: isDark ? '#f8fafc' : '#4338ca',
+    divider: isDark ? '#334155' : '#cbd5e1',
+    placeholder: isDark ? '#64748b' : '#94a3b8',
+  };
+
+  const [isEditing, setIsEditing] = useState(false);
+  const [editData, setEditData] = useState<UserInfoResponseData | null>(null);
+  const [phone, setPhone] = useState('');
+  const [focused, setFocused] = useState(false);
+  const [showCategories, setShowCategories] = useState(false);
+  const [selectedCategories, setSelectedCategories] = useState<any[]>([]);
+
+  const { data: me, isLoading } = useQuery({
+    queryKey: ['get_me'],
+    queryFn: () => user_api.getMe(),
+  });
+
+  useEffect(() => {
+    if (me?.data.data) {
+      setEditData(me.data);
+
+      const rawPhone = normalizeDigits(me.data.data.phone || '');
+      setPhone(rawPhone.startsWith('998') ? rawPhone.slice(3) : rawPhone);
+
+      setSelectedCategories(me.data.data.activate_types ?? []);
+    }
+  }, [me]);
+
+  const updateMutation = useMutation({
+    mutationFn: (body: any) => user_api.updateMe(body),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['get_me'] });
+      setIsEditing(false);
+      setShowCategories(false);
+      ToastAndroid.show(t("Ma'lumotlar yangilandi"), ToastAndroid.TOP);
+    },
+    onError: () => {
+      Alert.alert(t('Xatolik yuz berdi'), t('Yangilashda xatolik yuz berdi'));
+    },
+  });
+
+  const handleSave = () => {
+    if (!editData) return;
+
+    updateMutation.mutate({
+      first_name: editData.data.first_name,
+      phone: normalizeDigits(phone),
+      person_type: editData.data.person_type,
+      industries: editData.data.activate_types,
+      activate_types: editData.data.activate_types.map((e) => e.id),
+
+      company_name: editData.data.company_name,
+      stir: editData.data.stir,
+      director_full_name: editData.data.director_full_name,
+      address: editData.data.address,
+    });
+  };
+
+  const removeCategory = (id: number) => {
+    setSelectedCategories((prev) => prev.filter((c) => c.id !== id));
+  };
+
+  if (isLoading) {
+    return (
+      <SafeAreaView style={[styles.container, { backgroundColor: theme.background }]}>
+        <View style={styles.topHeader}>
+          <Pressable onPress={() => setIsEditing(false)}>
+            <ArrowLeft color={theme.text} />
+          </Pressable>
+          <Text style={[styles.headerTitle, { color: theme.text }]}>{t('Tahrirlash')}</Text>
+          <Pressable onPress={handleSave}>
+            <Text style={[styles.saveButton, { color: theme.primary }]}>{t('Saqlash')}</Text>
+          </Pressable>
+        </View>
+        <ActivityIndicator size={'large'} />
+      </SafeAreaView>
+    );
+  }
+
+  /* ===================== EDIT MODE ===================== */
+  if (isEditing && editData) {
+    return (
+      <SafeAreaView style={[styles.container, { backgroundColor: theme.background }]}>
+        <View style={styles.topHeader}>
+          <Pressable onPress={() => setIsEditing(false)}>
+            <ArrowLeft color={theme.text} />
+          </Pressable>
+          <Text style={[styles.headerTitle, { color: theme.text }]}>{t('Tahrirlash')}</Text>
+          <Pressable onPress={handleSave}>
+            {updateMutation.isPending ? (
+              <ActivityIndicator size={'small'} />
+            ) : (
+              <Text style={[styles.saveButton, { color: theme.primary }]}>{t('Saqlash')}</Text>
+            )}
+          </Pressable>
+        </View>
+
+        <ScrollView style={styles.content}>
+          <View style={styles.editSection}>
+            <Text style={[styles.label, { color: theme.textSecondary }]}>{t('Ism')}</Text>
+            <TextInput
+              style={[styles.input, { backgroundColor: theme.inputBg, color: theme.text }]}
+              value={editData?.data.first_name}
+              onChangeText={(text) => setEditData((prev) => prev && { ...prev, first_name: text })}
+              placeholderTextColor={theme.placeholder}
+            />
+            <Text style={[styles.label, { color: theme.textSecondary }]}>
+              {t('Telefon raqami')}
+            </Text>
+            <View style={[styles.phoneInputContainer, { backgroundColor: theme.inputBg }]}>
+              <View style={styles.prefixContainer}>
+                <Text
+                  style={[styles.prefix, { color: theme.text }, focused && styles.prefixFocused]}
+                >
+                  +998
+                </Text>
+                <View style={[styles.divider, { backgroundColor: theme.divider }]} />
+              </View>
+              <TextInput
+                style={[styles.phoneInput, { color: theme.text }]}
+                value={formatPhone(phone)}
+                onChangeText={(text) => setPhone(normalizeDigits(text))}
+                onFocus={() => setFocused(true)}
+                onBlur={() => setFocused(false)}
+                keyboardType="phone-pad"
+                placeholder="90 123 45 67"
+                maxLength={12}
+                placeholderTextColor={theme.placeholder}
+              />
+            </View>
+          </View>
+        </ScrollView>
+      </SafeAreaView>
+    );
+  }
+
+  /* ===================== VIEW MODE ===================== */
+  return (
+    <SafeAreaView style={[styles.container, { backgroundColor: theme.background }]}>
+      <View style={styles.topHeader}>
+        <Pressable onPress={() => router.push('/profile')}>
+          <ArrowLeft color={theme.text} />
+        </Pressable>
+        <Text style={[styles.headerTitle, { color: theme.text }]}>{t("Shaxsiy ma'lumotlar")}</Text>
+        <Pressable onPress={() => setIsEditing(true)}>
+          <Edit2 color={theme.primary} />
+        </Pressable>
+      </View>
+
+      <ScrollView style={styles.content}>
+        <View style={[styles.infoCard, { backgroundColor: theme.cardBg }]}>
+          <Text style={[styles.infoLabel, { color: theme.textSecondary }]}>{t('Ism')}</Text>
+          <Text style={[styles.infoValue, { color: theme.text }]}>{me?.data.data.first_name}</Text>
+
+          <Text style={[styles.infoLabel, { color: theme.textSecondary }]}>
+            {t('Telefon raqami')}
+          </Text>
+          <Text style={[styles.infoValue, { color: theme.text }]}>
+            {me && formatNumber(me?.data.data.phone)}
+          </Text>
+        </View>
+
+        {me?.data.data.person_type !== 'employee' && (
+          <View style={[styles.infoCard, { backgroundColor: theme.cardBg }]}>
+            <Text style={[styles.sectionTitle, { color: theme.textTertiary }]}>
+              {t('Kompaniya')}
+            </Text>
+
+            {me?.data.data.company_image && (
+              <Image source={{ uri: me.data.data.company_image }} style={styles.companyImage} />
+            )}
+
+            <Text style={[styles.infoLabel, { color: theme.textSecondary }]}>{t('Nomi')}</Text>
+            <Text style={[styles.infoValue, { color: theme.text }]}>
+              {me?.data.data.company_name}
+            </Text>
+
+            <Text style={[styles.infoLabel, { color: theme.textSecondary }]}>{t('STIR')}</Text>
+            <Text style={[styles.infoValue, { color: theme.text }]}>{me?.data.data.stir}</Text>
+
+            <Text style={[styles.infoLabel, { color: theme.textSecondary }]}>{t('Direktor')}</Text>
+            <Text style={[styles.infoValue, { color: theme.text }]}>
+              {me?.data.data.director_full_name}
+            </Text>
+            {me?.data.data.address && (
+              <>
+                <Text style={[styles.infoLabel, { color: theme.textSecondary }]}>
+                  {t('Manzil')}
+                </Text>
+                <Text style={[styles.infoValue, { color: theme.text }]}>
+                  {me?.data.data.address}
+                </Text>
+              </>
+            )}
+          </View>
+        )}
+        <View style={styles.section}>
+          <View
+            style={{
+              flexDirection: 'row',
+              alignItems: 'flex-start',
+              justifyContent: 'space-between',
+            }}
+          >
+            <Text style={[styles.sectionTitle, { color: theme.textTertiary }]}>
+              {t('Faoliyat sohalari')}
+            </Text>
+            <Plus
+              color={theme.primary}
+              size={24}
+              onPress={() => router.push('/profile/categories')}
+            />
+          </View>
+          <View style={styles.fieldsContainer}>
+            {me?.data.data.activate_types.map((field: any) => (
+              <View key={field.id} style={[styles.fieldChip, { backgroundColor: theme.chipBg }]}>
+                <Text style={[styles.fieldText, { color: theme.chipText }]}>{field.name}</Text>
+              </View>
+            ))}
+          </View>
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  fieldsContainer: { flexDirection: 'row', flexWrap: 'wrap', gap: 8 },
+  fieldChip: {
+    paddingHorizontal: 16,
+    paddingVertical: 10,
+    borderRadius: 16,
+  },
+  fieldText: { fontSize: 14, fontWeight: '600' },
+  section: {
+    padding: 10,
+    marginTop: 0,
+  },
+  content: {
+    padding: 16,
+  },
+  loadingText: {
+    textAlign: 'center',
+    marginTop: 40,
+  },
+  infoCard: {
+    borderRadius: 20,
+    padding: 16,
+    marginBottom: 16,
+  },
+  infoLabel: {
+    fontSize: 13,
+    marginTop: 8,
+  },
+  infoValue: {
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  sectionTitle: {
+    fontWeight: '700',
+    fontSize: 16,
+    marginBottom: 12,
+  },
+  editSection: {
+    gap: 12,
+  },
+  label: {
+    fontSize: 13,
+  },
+  input: {
+    borderRadius: 14,
+    padding: 14,
+  },
+  phoneInputContainer: {
+    flexDirection: 'row',
+    borderRadius: 14,
+    padding: 14,
+  },
+  phoneInput: {
+    flex: 1,
+  },
+  saveButton: {
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  companyImage: {
+    width: 90,
+    height: 90,
+    borderRadius: 45,
+    alignSelf: 'center',
+    marginBottom: 12,
+  },
+  topHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    padding: 16,
+    alignItems: 'center',
+  },
+  headerTitle: { fontSize: 18, fontWeight: '700' },
+  prefixContainer: { flexDirection: 'row', alignItems: 'center', marginRight: 12 },
+  prefix: { fontSize: 17, fontWeight: '600' },
+  prefixFocused: {},
+  divider: { width: 1, height: 24, marginLeft: 12 },
+});

app/profile/products.tsx

@@ -0,0 +1,5 @@
+import MyServicesScreen from '@/screens/profile/ui/MyServices';
+
+export default function ProductsScreen() {
+  return <MyServicesScreen />;
+}

app/profile/products/add.tsx

@@ -0,0 +1,5 @@
+import AddService from '@/screens/profile/ui/AddService';
+
+export default function AddProductScreen() {
+  return <AddService />;
+}

app/profile/products/edit/[id].tsx

@@ -0,0 +1,5 @@
+import EditServices from '@/screens/profile/ui/EditServices';
+
+export default function EditProductScreen() {
+  return <EditServices />;
+}

app/profile/settings.tsx

@@ -0,0 +1,166 @@
+import GB from '@/assets/images/GB.png';
+import RU from '@/assets/images/RU.png';
+import UZ from '@/assets/images/UZ.png';
+import { useTheme } from '@/components/ThemeContext';
+import { saveLang } from '@/hooks/storage.native';
+import { useLanguage } from '@/i18n/useLanguage';
+import { useQueryClient } from '@tanstack/react-query';
+import { Image } from 'expo-image';
+import { useRouter } from 'expo-router';
+import { ChevronLeft, Moon, Sun } from 'lucide-react-native';
+import { useTranslation } from 'react-i18next';
+import { Pressable, ScrollView, StyleSheet, Switch, Text, View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+export default function SettingsScreen() {
+  const router = useRouter();
+  const { language, changeLanguage } = useLanguage();
+  const { t, i18n } = useTranslation();
+  const queryClient = useQueryClient();
+
+  const selectLanguage = async (lang: string) => {
+    changeLanguage(lang as 'uz' | 'ru' | 'en');
+    await i18n.changeLanguage(lang);
+    queryClient.invalidateQueries();
+    await saveLang(lang);
+  };
+  const { isDark, toggleTheme } = useTheme();
+
+  const languages = [
+    { code: 'uz', label: "O'zbek", icon: UZ },
+    { code: 'ru', label: 'Русский', icon: RU },
+    { code: 'en', label: 'English', icon: GB },
+  ];
+
+  return (
+    <SafeAreaView style={[styles.container, isDark ? styles.darkBg : styles.lightBg]}>
+      <ScrollView contentContainerStyle={{ paddingBottom: 32 }}>
+        {/* Header */}
+        <View style={styles.header}>
+          <Pressable onPress={() => router.back()}>
+            <ChevronLeft size={26} color={isDark ? '#f8fafc' : '#0f172a'} />
+          </Pressable>
+
+          <Text style={[styles.headerTitle, isDark ? styles.darkText : styles.lightText]}>
+            {t('Sozlamalar')}
+          </Text>
+
+          <View style={{ width: 26 }} />
+        </View>
+
+        {/* Language Cards */}
+        <Text style={[styles.sectionTitle, isDark ? styles.darkText : styles.lightText]}>
+          {t('Tilni tanlang')}
+        </Text>
+        {languages.map((lang) => {
+          const active = language === lang.code;
+          return (
+            <Pressable
+              key={lang.code}
+              onPress={() => selectLanguage(lang.code)}
+              style={[
+                styles.langCard,
+                isDark ? styles.darkCard : styles.lightCard,
+                active && styles.langActiveCard,
+              ]}
+            >
+              <View style={styles.row}>
+                <Image source={lang.icon} style={{ width: 32, height: 24 }} />
+                <Text
+                  style={[
+                    styles.label,
+                    isDark ? styles.darkText : styles.lightText,
+                    active && { color: '#fff' },
+                  ]}
+                >
+                  {lang.label}
+                </Text>
+              </View>
+            </Pressable>
+          );
+        })}
+
+        {/* Theme */}
+        <View style={{ marginTop: 10 }}>
+          <Text style={[styles.sectionTitle, isDark ? styles.darkText : styles.lightText]}>
+            {t('Rejimni tanlang')}
+          </Text>
+          <View style={[styles.card, isDark ? styles.darkCard : styles.lightCard]}>
+            <View style={styles.row}>
+              {isDark ? <Moon size={22} color="#818cf8" /> : <Sun size={22} color="#f59e0b" />}
+              <Text style={[styles.label, isDark ? styles.darkText : styles.lightText]}>
+                {isDark ? t('Tungi rejim') : t("Yorug' rejim")}
+              </Text>
+            </View>
+
+            <Switch
+              value={isDark}
+              onValueChange={toggleTheme}
+              trackColor={{ false: '#d1d5db', true: '#6366f1' }}
+              thumbColor={isDark ? '#e5e7eb' : '#ffffff'}
+            />
+          </View>
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+
+  /* Backgrounds */
+  lightBg: { backgroundColor: '#f9fafb' },
+  darkBg: { backgroundColor: '#0f172a' },
+
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: 16,
+  },
+
+  headerTitle: {
+    fontSize: 18,
+    fontWeight: '600',
+  },
+
+  sectionTitle: {
+    fontSize: 16,
+    fontWeight: '600',
+    paddingHorizontal: 16,
+    marginBottom: 8,
+  },
+
+  card: {
+    borderRadius: 14,
+    padding: 16,
+    marginHorizontal: 16,
+    marginVertical: 8,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+
+  lightCard: { backgroundColor: '#ffffff' },
+  darkCard: { backgroundColor: '#1e293b', borderWidth: 1, borderColor: '#334155' },
+
+  row: { flexDirection: 'row', alignItems: 'center', gap: 10 },
+
+  label: { fontSize: 15, fontWeight: '500' },
+  darkText: { color: '#f8fafc' },
+  lightText: { color: '#0f172a' },
+
+  /* Language Cards */
+  langCard: {
+    borderRadius: 14,
+    padding: 16,
+    marginHorizontal: 16,
+    marginVertical: 6,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  langActiveCard: { backgroundColor: '#3b82f6' },
+});

babel.config.js

@@ -0,0 +1,22 @@
+module.exports = function (api) {
+  api.cache(true);
+
+  return {
+    presets: [['babel-preset-expo'], 'nativewind/babel'],
+
+    plugins: [
+      [
+        'module-resolver',
+        {
+          root: ['./'],
+
+          alias: {
+            '@': './',
+            'tailwind.config': './tailwind.config.js',
+          },
+        },
+      ],
+      'react-native-worklets/plugin',
+    ],
+  };
+};

components/AuthProvider.tsx

@@ -0,0 +1,48 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { createContext, useContext, useEffect, useState } from 'react';
+
+type AuthContextType = {
+  isAuthenticated: boolean;
+  isLoading: boolean;
+  login: (token: string) => Promise<void>;
+  logout: () => Promise<void>;
+};
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined);
+
+export function AuthProvider({ children }: { children: React.ReactNode }) {
+  const [isAuthenticated, setIsAuthenticated] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    const checkToken = async () => {
+      const token = await AsyncStorage.getItem('access_token');
+      setIsAuthenticated(!!token);
+      setIsLoading(false);
+    };
+    checkToken();
+  }, []);
+
+  const login = async (token: string) => {
+    await AsyncStorage.setItem('access_token', token);
+    setIsAuthenticated(true);
+  };
+
+  const logout = async () => {
+    await AsyncStorage.removeItem('access_token');
+    await AsyncStorage.removeItem('refresh_token');
+    setIsAuthenticated(false);
+  };
+
+  return (
+    <AuthContext.Provider value={{ isAuthenticated, isLoading, login, logout }}>
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+export const useAuth = () => {
+  const context = useContext(AuthContext);
+  if (!context) throw new Error('useAuth must be used within AuthProvider');
+  return context;
+};

components/QueryProvider.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactNode, useState } from 'react';
+
+const QueryProvider = ({ children }: { children: ReactNode }) => {
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            refetchOnWindowFocus: false,
+            retry: 1,
+            staleTime: 1000 * 60 * 5,
+            refetchOnReconnect: false,
+            refetchOnMount: false,
+            refetchInterval: 1000 * 60 * 5,
+          },
+        },
+      })
+  );
+  return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
+};
+
+export default QueryProvider;

components/ThemeContext.tsx

@@ -0,0 +1,59 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import React, { createContext, useContext, useEffect, useState } from 'react';
+import { Appearance } from 'react-native';
+
+type ThemeType = 'light' | 'dark';
+
+interface ThemeContextProps {
+  theme: ThemeType;
+  isDark: boolean;
+  toggleTheme: () => void;
+}
+
+const ThemeContext = createContext<ThemeContextProps | null>(null);
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+  const systemTheme = Appearance.getColorScheme();
+
+  const [theme, setTheme] = useState<ThemeType>(systemTheme === 'dark' ? 'dark' : 'light');
+
+  // 🔹 Load saved theme
+  useEffect(() => {
+    (async () => {
+      const savedTheme = await AsyncStorage.getItem('APP_THEME');
+      if (savedTheme === 'dark' || savedTheme === 'light') {
+        setTheme(savedTheme);
+      }
+    })();
+  }, []);
+
+  // 🔹 Save theme
+  useEffect(() => {
+    AsyncStorage.setItem('APP_THEME', theme);
+  }, [theme]);
+
+  const toggleTheme = () => {
+    setTheme((prev) => (prev === 'dark' ? 'light' : 'dark'));
+  };
+
+  return (
+    <ThemeContext.Provider
+      value={{
+        theme,
+        isDark: theme === 'dark',
+        toggleTheme,
+      }}
+    >
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+// Custom hook
+export function useTheme() {
+  const ctx = useContext(ThemeContext);
+  if (!ctx) {
+    throw new Error('useTheme must be used inside ThemeProvider');
+  }
+  return ctx;
+}

components/ui/AuthHeader.tsx

@@ -0,0 +1,151 @@
+import { languages } from '@/constants/languages';
+import { getLang, saveLang } from '@/hooks/storage.native';
+import { useLanguage } from '@/i18n/useLanguage';
+import { useQueryClient } from '@tanstack/react-query';
+import { useRouter } from 'expo-router';
+import { ArrowLeft, Check, ChevronDown, Globe } from 'lucide-react-native';
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+
+export default function AuthHeader({ back = true }: { back?: boolean }) {
+  const router = useRouter();
+  const { language, changeLanguage, getLanguageName } = useLanguage();
+  const { i18n } = useTranslation();
+  const [open, setOpen] = useState(false);
+  const queryClient = useQueryClient();
+
+  useEffect(() => {
+    const loadLanguage = async () => {
+      const lang = await getLang();
+      if (lang === 'uz' || lang === 'ru' || lang === 'en') {
+        changeLanguage(lang);
+      }
+    };
+
+    loadLanguage();
+  }, [language]);
+
+  const selectLanguage = async (lang: string) => {
+    changeLanguage(lang as any);
+    queryClient.invalidateQueries();
+    await i18n.changeLanguage(lang);
+    await saveLang(lang);
+    setOpen(false);
+  };
+
+  return (
+    <View style={{ ...styles.header, justifyContent: back ? 'space-between' : 'flex-end' }}>
+      {/* Back */}
+      {back && (
+        <TouchableOpacity style={styles.back} onPress={() => router.back()} activeOpacity={0.7}>
+          <ArrowLeft size={22} color="#fff" />
+        </TouchableOpacity>
+      )}
+
+      {/* Language */}
+      <View>
+        <TouchableOpacity style={styles.langBtn} onPress={() => setOpen(!open)} activeOpacity={0.7}>
+          <Globe size={18} color="#94a3b8" />
+          <Text style={styles.langText}>{getLanguageName()}</Text>
+          <ChevronDown size={16} color="#94a3b8" />
+        </TouchableOpacity>
+
+        {open && (
+          <View style={styles.dropdown}>
+            {languages.map((l) => {
+              const active = language === l.code;
+              return (
+                <TouchableOpacity
+                  key={l.code}
+                  style={[styles.option, active && styles.optionActive]}
+                  onPress={() => selectLanguage(l.code)}
+                >
+                  <Text style={[styles.optionText, active && styles.optionTextActive]}>
+                    {l.name}
+                  </Text>
+                  {active && (
+                    <View style={styles.check}>
+                      <Check size={14} color="#fff" />
+                    </View>
+                  )}
+                </TouchableOpacity>
+              );
+            })}
+          </View>
+        )}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 24,
+    paddingVertical: 12,
+    zIndex: 50,
+  },
+  back: {
+    width: 44,
+    height: 44,
+    borderRadius: 12,
+    backgroundColor: 'rgba(255,255,255,0.1)',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1,
+    borderColor: 'rgba(255,255,255,0.15)',
+  },
+  langBtn: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    backgroundColor: 'rgba(255,255,255,0.1)',
+    paddingHorizontal: 14,
+    paddingVertical: 10,
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: 'rgba(255,255,255,0.15)',
+  },
+  langText: {
+    color: '#94a3b8',
+    fontWeight: '600',
+    fontSize: 14,
+  },
+  dropdown: {
+    position: 'absolute',
+    top: 52,
+    right: 0,
+    backgroundColor: '#fff',
+    borderRadius: 16,
+    padding: 8,
+    minWidth: 180,
+    elevation: 20,
+  },
+  option: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    padding: 12,
+    borderRadius: 12,
+  },
+  optionActive: {
+    backgroundColor: '#eff6ff',
+  },
+  optionText: {
+    color: '#475569',
+    fontWeight: '600',
+  },
+  optionTextActive: {
+    color: '#3b82f6',
+  },
+  check: {
+    width: 20,
+    height: 20,
+    borderRadius: 10,
+    backgroundColor: '#3b82f6',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

components/ui/CategorySelect.tsx

@@ -0,0 +1,255 @@
+import { useTheme } from '@/components/ThemeContext';
+import { products_api } from '@/screens/home/lib/api';
+import { useMutation, useQuery } from '@tanstack/react-query';
+import { AxiosError } from 'axios';
+import { ChevronLeft, ChevronRight } from 'lucide-react-native';
+import React, { Dispatch, SetStateAction, useState } from 'react';
+import {
+  ActivityIndicator,
+  FlatList,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+
+interface Category {
+  id: number;
+  name: string;
+  code: string;
+  external_id: string | null;
+  level: number;
+  is_leaf: boolean;
+  icon_name: string | null;
+}
+
+interface CategoryResponse {
+  data: {
+    data: Category[];
+  };
+}
+
+interface Props {
+  selectedCategories: Category | null;
+  setSelectedCategories: Dispatch<SetStateAction<Category | null>>;
+}
+
+interface HistoryItem {
+  parentId: number | null;
+  categories: Category[];
+}
+
+export default function CategorySelect({ selectedCategories, setSelectedCategories }: Props) {
+  const { isDark } = useTheme();
+  const [currentCategories, setCurrentCategories] = useState<Category[]>([]);
+  const [currentParentId, setCurrentParentId] = useState<number | null>(null);
+  const [history, setHistory] = useState<HistoryItem[]>([]);
+
+  // Root categories
+  const { isLoading: rootLoading, error: rootError } = useQuery<CategoryResponse>({
+    queryKey: ['categories'],
+    queryFn: async () => products_api.getCategorys(),
+    select(data) {
+      setCurrentCategories(data.data.data);
+      setCurrentParentId(null);
+      setHistory([]);
+      return data;
+    },
+  });
+
+  // Child categories
+  const { mutate, isPending: mutatePending } = useMutation({
+    mutationFn: (id: number) => products_api.getCategorys({ parent: id }),
+    onSuccess: (response: CategoryResponse, id) => {
+      const childCategories = response.data.data;
+      setHistory((prev) => [...prev, { parentId: currentParentId, categories: currentCategories }]);
+      setCurrentCategories(childCategories);
+      setCurrentParentId(id);
+    },
+    onError: (err: AxiosError) => {
+      console.error('Child category loading error:', err);
+    },
+  });
+
+  const toggleCategory = (category: Category) => {
+    if (category.is_leaf) {
+      setSelectedCategories(category);
+    } else {
+      mutate(category.id);
+    }
+  };
+
+  const goBack = () => {
+    if (history.length > 0) {
+      const previous = history[history.length - 1];
+      setCurrentCategories(previous.categories);
+      setCurrentParentId(previous.parentId);
+      setHistory((prev) => prev.slice(0, -1));
+    }
+  };
+
+  const isLoading = rootLoading || mutatePending;
+  const error = rootError;
+
+  const renderCategory = ({ item: category }: { item: Category }) => {
+    const isSelected = selectedCategories?.id === category.id;
+    return (
+      <TouchableOpacity
+        style={[
+          styles.chip,
+          isDark ? styles.darkChip : styles.lightChip,
+          isSelected && styles.chipSelected,
+        ]}
+        onPress={() => toggleCategory(category)}
+      >
+        <Text
+          style={[
+            styles.chipText,
+            isDark ? styles.darkChipText : styles.lightChipText,
+            isSelected && styles.chipTextSelected,
+          ]}
+        >
+          {category.name}
+        </Text>
+        {!category.is_leaf && (
+          <ChevronRight size={20} color={isSelected ? '#ffffff' : isDark ? '#64748b' : '#94a3b8'} />
+        )}
+      </TouchableOpacity>
+    );
+  };
+
+  if (isLoading && currentCategories.length === 0) {
+    return (
+      <View style={styles.centerContainer}>
+        <ActivityIndicator size="small" color="#3b82f6" />
+      </View>
+    );
+  }
+
+  if (error && currentCategories.length === 0) {
+    return (
+      <View style={styles.centerContainer}>
+        <Text style={{ color: '#f87171' }}>Ma'lumot yuklashda xatolik yuz berdi</Text>
+      </View>
+    );
+  }
+
+  if (currentCategories.length === 0) {
+    return (
+      <View style={styles.centerContainer}>
+        <Text style={isDark ? styles.darkText : styles.lightText}>Kategoriyalar topilmadi</Text>
+      </View>
+    );
+  }
+
+  return (
+    <View style={[styles.container, isDark ? styles.darkBg : styles.lightBg]}>
+      <View style={styles.header}>
+        {history.length > 0 && (
+          <TouchableOpacity
+            onPress={goBack}
+            style={[styles.backButton, isDark ? styles.darkBackButton : styles.lightBackButton]}
+          >
+            <ChevronLeft color={'#3b82f6'} size={20} />
+          </TouchableOpacity>
+        )}
+      </View>
+
+      <FlatList
+        data={currentCategories}
+        renderItem={renderCategory}
+        keyExtractor={(item) => item.id.toString()}
+        scrollEnabled={false}
+        showsVerticalScrollIndicator={true}
+        ItemSeparatorComponent={() => <View style={{ height: 10 }} />}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginBottom: 20,
+  },
+  darkBg: {
+    backgroundColor: '#0f172a',
+  },
+  lightBg: {
+    backgroundColor: '#f8fafc',
+  },
+  centerContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+    marginBottom: 12,
+  },
+  backButton: {
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 8,
+  },
+  darkBackButton: {
+    backgroundColor: '#1e293b',
+  },
+  lightBackButton: {
+    backgroundColor: '#ffffff',
+  },
+  chip: {
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    borderRadius: 20,
+    borderWidth: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.05,
+    shadowRadius: 2,
+    elevation: 1,
+  },
+  darkChip: {
+    backgroundColor: '#1e293b',
+    borderColor: '#334155',
+  },
+  lightChip: {
+    backgroundColor: '#ffffff',
+    borderColor: '#e2e8f0',
+  },
+  chipSelected: {
+    backgroundColor: '#3b82f6',
+    borderColor: '#3b82f6',
+    shadowColor: '#3b82f6',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.3,
+    shadowRadius: 4,
+    elevation: 3,
+  },
+  chipText: {
+    fontSize: 14,
+    fontWeight: '500',
+    flex: 1,
+  },
+  darkChipText: {
+    color: '#cbd5e1',
+  },
+  lightChipText: {
+    color: '#64748b',
+  },
+  chipTextSelected: {
+    color: '#ffffff',
+    fontWeight: '600',
+  },
+  darkText: {
+    color: '#f1f5f9',
+  },
+  lightText: {
+    color: '#0f172a',
+  },
+});

components/ui/Combobox.tsx

@@ -0,0 +1,164 @@
+import { Check, ChevronDown } from 'lucide-react-native';
+import React, { useState } from 'react';
+import { FlatList, Modal, StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native';
+
+interface ComboboxProps {
+  value: string;
+  onChange: (value: string, label: string) => void;
+  items: { label: string; value: string }[];
+  placeholder?: string;
+  disabled?: boolean;
+}
+
+export default function Combobox({ value, onChange, items, placeholder, disabled }: ComboboxProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
+
+  const selectedItem = items.find((item) => item.value === value);
+  const displayText = selectedItem ? selectedItem.label : placeholder || 'Select...';
+
+  const filteredItems = items.filter((item) =>
+    item.label.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  const handleSelect = (item: { label: string; value: string }) => {
+    onChange(item.value, item.label);
+    setIsOpen(false);
+    setSearchQuery('');
+  };
+
+  return (
+    <>
+      <TouchableOpacity
+        style={[styles.trigger, disabled && styles.triggerDisabled]}
+        onPress={() => !disabled && setIsOpen(true)}
+        disabled={disabled}
+      >
+        <Text style={[styles.triggerText, disabled && styles.triggerTextDisabled]}>
+          {displayText}
+        </Text>
+        <ChevronDown size={16} color={disabled ? '#9ca3af' : '#6b7280'} />
+      </TouchableOpacity>
+
+      <Modal
+        visible={isOpen}
+        transparent
+        animationType="slide"
+        onRequestClose={() => setIsOpen(false)}
+      >
+        <View style={styles.modalOverlay}>
+          <View style={styles.modalContent}>
+            <View style={styles.modalHeader}>
+              <Text style={styles.modalTitle}>Select Option</Text>
+              <TouchableOpacity onPress={() => setIsOpen(false)}>
+                <Text style={styles.closeButton}>Done</Text>
+              </TouchableOpacity>
+            </View>
+
+            <TextInput
+              style={styles.searchInput}
+              placeholder="Search..."
+              value={searchQuery}
+              onChangeText={setSearchQuery}
+              autoCapitalize="none"
+            />
+
+            <FlatList
+              data={filteredItems}
+              keyExtractor={(item) => item.value}
+              renderItem={({ item }) => (
+                <TouchableOpacity style={styles.option} onPress={() => handleSelect(item)}>
+                  <Text style={styles.optionText}>{item.label}</Text>
+                  {value === item.value && <Check size={18} color="#2563eb" />}
+                </TouchableOpacity>
+              )}
+              style={styles.optionsList}
+            />
+          </View>
+        </View>
+      </Modal>
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  trigger: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    backgroundColor: '#fff',
+    borderWidth: 1,
+    borderColor: '#d1d5db',
+    borderRadius: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 12,
+  },
+  triggerDisabled: {
+    backgroundColor: '#f9fafb',
+    borderColor: '#e5e7eb',
+  },
+  triggerText: {
+    fontSize: 14,
+    color: '#374151',
+    flex: 1,
+  },
+  triggerTextDisabled: {
+    color: '#9ca3af',
+  },
+  modalOverlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    justifyContent: 'flex-end',
+  },
+  modalContent: {
+    backgroundColor: '#fff',
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+    maxHeight: '80%',
+    paddingBottom: 20,
+  },
+  modalHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: 16,
+    borderBottomWidth: 1,
+    borderBottomColor: '#e5e7eb',
+  },
+  modalTitle: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: '#111827',
+  },
+  closeButton: {
+    fontSize: 16,
+    color: '#2563eb',
+    fontWeight: '600',
+  },
+  searchInput: {
+    margin: 16,
+    padding: 12,
+    backgroundColor: '#f9fafb',
+    borderRadius: 8,
+    fontSize: 14,
+    borderWidth: 1,
+    borderColor: '#e5e7eb',
+  },
+  optionsList: {
+    flex: 1,
+  },
+  option: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 16,
+    paddingVertical: 14,
+    borderBottomWidth: 1,
+    borderBottomColor: '#f3f4f6',
+  },
+  optionText: {
+    fontSize: 15,
+    color: '#374151',
+    flex: 1,
+  },
+});