feat(app): initial commit

.bundle/config

@@ -0,0 +1,2 @@
+BUNDLE_PATH: "vendor/bundle"
+BUNDLE_FORCE_RUBY_PLATFORM: 1

.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: '@react-native',
+};

.gitignore

@@ -0,0 +1,75 @@
+# OSX
+#
+.DS_Store
+
+# Xcode
+#
+build/
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+*.xccheckout
+*.moved-aside
+DerivedData
+*.hmap
+*.ipa
+*.xcuserstate
+**/.xcode.env.local
+
+# Android/IntelliJ
+#
+build/
+.idea
+.gradle
+local.properties
+*.iml
+*.hprof
+.cxx/
+*.keystore
+!debug.keystore
+.kotlin/
+
+# node.js
+#
+node_modules/
+npm-debug.log
+yarn-error.log
+
+# fastlane
+#
+# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
+# screenshots whenever they are needed.
+# For more information about the recommended setup visit:
+# https://docs.fastlane.tools/best-practices/source-control/
+
+**/fastlane/report.xml
+**/fastlane/Preview.html
+**/fastlane/screenshots
+**/fastlane/test_output
+
+# Bundle artifact
+*.jsbundle
+
+# Ruby / CocoaPods
+**/Pods/
+/vendor/bundle/
+
+# Temporary files created by Metro to check the health of the file watcher
+.metro-health-check*
+
+# testing
+/coverage
+
+# Yarn
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

.prettierrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  arrowParens: 'avoid',
+  singleQuote: true,
+  trailingComma: 'all',
+};

.watchmanconfig

@@ -0,0 +1 @@
+{}

Gemfile

@@ -0,0 +1,17 @@
+source 'https://rubygems.org'
+
+# You may use http://rbenv.org/ or https://rvm.io/ to install and use this version
+ruby ">= 2.6.10"
+
+# Exclude problematic versions of cocoapods and activesupport that causes build failures.
+gem 'cocoapods', '>= 1.13', '!= 1.15.0', '!= 1.15.1'
+gem 'activesupport', '>= 6.1.7.5', '!= 7.1.0'
+gem 'xcodeproj', '< 1.26.0'
+gem 'concurrent-ruby', '< 1.3.4'
+
+# Ruby 3.4.0 has removed some libraries from the standard library.
+gem 'bigdecimal'
+gem 'logger'
+gem 'benchmark'
+gem 'mutex_m'
+gem 'nkf'

README.md

@@ -0,0 +1,97 @@
+This is a new [**React Native**](https://reactnative.dev) project, bootstrapped using [`@react-native-community/cli`](https://github.com/react-native-community/cli).
+
+# Getting Started
+
+> **Note**: Make sure you have completed the [Set Up Your Environment](https://reactnative.dev/docs/set-up-your-environment) guide before proceeding.
+
+## Step 1: Start Metro
+
+First, you will need to run **Metro**, the JavaScript build tool for React Native.
+
+To start the Metro dev server, run the following command from the root of your React Native project:
+
+```sh
+# Using npm
+npm start
+
+# OR using Yarn
+yarn start
+```
+
+## Step 2: Build and run your app
+
+With Metro running, open a new terminal window/pane from the root of your React Native project, and use one of the following commands to build and run your Android or iOS app:
+
+### Android
+
+```sh
+# Using npm
+npm run android
+
+# OR using Yarn
+yarn android
+```
+
+### iOS
+
+For iOS, remember to install CocoaPods dependencies (this only needs to be run on first clone or after updating native deps).
+
+The first time you create a new project, run the Ruby bundler to install CocoaPods itself:
+
+```sh
+bundle install
+```
+
+Then, and every time you update your native dependencies, run:
+
+```sh
+bundle exec pod install
+```
+
+For more information, please visit [CocoaPods Getting Started guide](https://guides.cocoapods.org/using/getting-started.html).
+
+```sh
+# Using npm
+npm run ios
+
+# OR using Yarn
+yarn ios
+```
+
+If everything is set up correctly, you should see your new app running in the Android Emulator, iOS Simulator, or your connected device.
+
+This is one way to run your app — you can also build it directly from Android Studio or Xcode.
+
+## Step 3: Modify your app
+
+Now that you have successfully run the app, let's make changes!
+
+Open `App.tsx` in your text editor of choice and make some changes. When you save, your app will automatically update and reflect these changes — this is powered by [Fast Refresh](https://reactnative.dev/docs/fast-refresh).
+
+When you want to forcefully reload, for example to reset the state of your app, you can perform a full reload:
+
+- **Android**: Press the <kbd>R</kbd> key twice or select **"Reload"** from the **Dev Menu**, accessed via <kbd>Ctrl</kbd> + <kbd>M</kbd> (Windows/Linux) or <kbd>Cmd ⌘</kbd> + <kbd>M</kbd> (macOS).
+- **iOS**: Press <kbd>R</kbd> in iOS Simulator.
+
+## Congratulations! :tada:
+
+You've successfully run and modified your React Native App. :partying_face:
+
+### Now what?
+
+- If you want to add this new React Native code to an existing application, check out the [Integration guide](https://reactnative.dev/docs/integration-with-existing-apps).
+- If you're curious to learn more about React Native, check out the [docs](https://reactnative.dev/docs/getting-started).
+
+# Troubleshooting
+
+If you're having issues getting the above steps to work, see the [Troubleshooting](https://reactnative.dev/docs/troubleshooting) page.
+
+# Learn More
+
+To learn more about React Native, take a look at the following resources:
+
+- [React Native Website](https://reactnative.dev) - learn more about React Native.
+- [Getting Started](https://reactnative.dev/docs/environment-setup) - an **overview** of React Native and how setup your environment.
+- [Learn the Basics](https://reactnative.dev/docs/getting-started) - a **guided tour** of the React Native **basics**.
+- [Blog](https://reactnative.dev/blog) - read the latest official React Native **Blog** posts.
+- [`@facebook/react-native`](https://github.com/facebook/react-native) - the Open Source; GitHub **repository** for React Native.

android/app/build.gradle

@@ -0,0 +1,119 @@
+apply plugin: "com.android.application"
+apply plugin: "org.jetbrains.kotlin.android"
+apply plugin: "com.facebook.react"
+
+/**
+ * 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 {
+    /* 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")
+    //   The cli.js file which is the React Native CLI entrypoint. Default is ../../node_modules/react-native/cli.js
+    // cliFile = file("../../node_modules/react-native/cli.js")
+
+    /* 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. Default is "debug", "debugOptimized".
+    //   If you add flavors like lite, prod, etc. you'll have to list your debuggableVariants.
+    // debuggableVariants = ["liteDebug", "liteDebugOptimized", "prodDebug", "prodDebugOptimized"]
+
+    /* Bundling */
+    //   A list containing the node command and its flags. Default is just 'node'.
+    // nodeExecutableAndArgs = ["node"]
+    //
+    //   The command to run when bundling. By default is 'bundle'
+    // bundleCommand = "ram-bundle"
+    //
+    //   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 to Run Proguard on Release builds to minify the Java bytecode.
+ */
+def enableProguardInReleaseBuilds = false
+
+/**
+ * The preferred build flavor of JavaScriptCore (JSC)
+ *
+ * For example, to use the international variant, you can use:
+ * `def jscFlavor = io.github.react-native-community:jsc-android-intl:2026004.+`
+ *
+ * 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.sgcart"
+    defaultConfig {
+        applicationId "com.sgcart"
+        minSdkVersion rootProject.ext.minSdkVersion
+        targetSdkVersion rootProject.ext.targetSdkVersion
+        versionCode 1
+        versionName "1.0"
+    }
+    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
+            minifyEnabled enableProguardInReleaseBuilds
+            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
+        }
+    }
+}
+
+dependencies {
+    // The version of react-native is set by the React Native Gradle Plugin
+    implementation("com.facebook.react:react-android")
+
+    if (hermesEnabled.toBoolean()) {
+        implementation("com.facebook.react:hermes-android")
+    } else {
+        implementation jscFlavor
+    }
+}

android/app/proguard-rules.pro

@@ -0,0 +1,10 @@
+# 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
+
+# Add any project specific keep options here:

android/app/src/main/AndroidManifest.xml

@@ -0,0 +1,30 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+  <uses-permission android:name="android.permission.INTERNET" />
+  <uses-permission android:name="android.permission.RECORD_AUDIO" />
+  <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
+  <uses-permission android:name="android.permission.CAMERA" />
+
+  <application
+    android:name=".MainApplication"
+    android:label="@string/app_name"
+    android:icon="@mipmap/ic_launcher"
+    android:roundIcon="@mipmap/ic_launcher_round"
+    android:allowBackup="false"
+    android:theme="@style/AppTheme"
+    android:usesCleartextTraffic="${usesCleartextTraffic}"
+    android:supportsRtl="true">
+    <activity
+      android:name=".MainActivity"
+      android:label="@string/app_name"
+      android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
+      android:launchMode="singleTask"
+      android:windowSoftInputMode="adjustResize"
+      android:exported="true"
+      android:theme="@style/BootTheme">
+      <intent-filter>
+        <action android:name="android.intent.action.MAIN" />
+        <category android:name="android.intent.category.LAUNCHER" />
+      </intent-filter>
+    </activity>
+  </application>
+</manifest>

android/app/src/main/java/com/sgtownship/MainActivity.kt

@@ -0,0 +1,29 @@
+package com.sgcart
+
+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 com.zoontek.rnbootsplash.RNBootSplash
+
+class MainActivity : ReactActivity() {
+
+  override fun onCreate(savedInstanceState: Bundle?) {
+    RNBootSplash.init(this, R.style.BootTheme)
+    super.onCreate(savedInstanceState)
+}
+
+  /**
+   * Returns the name of the main component registered from JavaScript. This is used to schedule
+   * rendering of the component.
+   */
+  override fun getMainComponentName(): String = "sgcart"
+
+  /**
+   * 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 =
+      DefaultReactActivityDelegate(this, mainComponentName, fabricEnabled)
+}

android/app/src/main/java/com/sgtownship/MainApplication.kt

@@ -0,0 +1,27 @@
+package com.sgcart
+
+import android.app.Application
+import com.facebook.react.PackageList
+import com.facebook.react.ReactApplication
+import com.facebook.react.ReactHost
+import com.facebook.react.ReactNativeApplicationEntryPoint.loadReactNative
+import com.facebook.react.defaults.DefaultReactHost.getDefaultReactHost
+
+class MainApplication : Application(), ReactApplication {
+
+  override val reactHost: ReactHost by lazy {
+    getDefaultReactHost(
+      context = applicationContext,
+      packageList =
+        PackageList(this).packages.apply {
+          // Packages that cannot be autolinked yet can be added manually here, for example:
+          // add(MyReactNativePackage())
+        },
+    )
+  }
+
+  override fun onCreate() {
+    super.onCreate()
+    loadReactNative(this)
+  }
+}

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

@@ -0,0 +1,74 @@
+<?xml version="1.0" encoding="utf-8"?>
+<vector
+    android:height="108dp"
+    android:width="108dp"
+    android:viewportHeight="108"
+    android:viewportWidth="108"
+    xmlns:android="http://schemas.android.com/apk/res/android">
+    <path android:fillColor="#3DDC84"
+          android:pathData="M0,0h108v108h-108z"/>
+    <path android:fillColor="#00000000" android:pathData="M9,0L9,108"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M19,0L19,108"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M29,0L29,108"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M39,0L39,108"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M49,0L49,108"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M59,0L59,108"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M69,0L69,108"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M79,0L79,108"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M89,0L89,108"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M99,0L99,108"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M0,9L108,9"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M0,19L108,19"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M0,29L108,29"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M0,39L108,39"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M0,49L108,49"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M0,59L108,59"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M0,69L108,69"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M0,79L108,79"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M0,89L108,89"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M0,99L108,99"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M19,29L89,29"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M19,39L89,39"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M19,49L89,49"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M19,59L89,59"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M19,69L89,69"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M19,79L89,79"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M29,19L29,89"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M39,19L39,89"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M49,19L49,89"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M59,19L59,89"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M69,19L69,89"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M79,19L79,89"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+</vector>

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/values/colors.xml

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

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

@@ -0,0 +1,3 @@
+<resources>
+    <string name="app_name">sgcart</string>
+</resources>

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

@@ -0,0 +1,12 @@
+<resources>
+    <!-- Base application theme. -->
+    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
+        <!-- Customize your theme here. -->
+    </style>
+
+    <style name="BootTheme" parent="Theme.BootSplash">
+        <item name="bootSplashBackground">@color/bootsplash_background</item>
+        <item name="bootSplashLogo">@drawable/bootsplash_logo</item>
+        <item name="postBootSplashTheme">@style/AppTheme</item>
+    </style>
+</resources>

android/build.gradle

@@ -0,0 +1,21 @@
+buildscript {
+    ext {
+        buildToolsVersion = "36.0.0"
+        minSdkVersion = 24
+        compileSdkVersion = 36
+        targetSdkVersion = 36
+        ndkVersion = "27.1.12297006"
+        kotlinVersion = "2.1.20"
+    }
+    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")
+    }
+}
+
+apply plugin: "com.facebook.react.rootproject"

android/gradle.properties

@@ -0,0 +1,44 @@
+# 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
+
+# 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=false

android/gradle/wrapper/gradle-wrapper.properties

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

android/gradlew

@@ -0,0 +1,248 @@
+#!/bin/sh
+
+#
+# Copyright © 2015 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
+
+
+
+# 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" )
+
+    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, 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" \
+        -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,98 @@
+@REM Copyright (c) Meta Platforms, Inc. and affiliates.
+@REM
+@REM This source code is licensed under the MIT license found in the
+@REM LICENSE file in the root directory of this source tree.
+
+@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
+
+
+
+@rem Execute Gradle
+"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -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,6 @@
+pluginManagement { includeBuild("../node_modules/@react-native/gradle-plugin") }
+plugins { id("com.facebook.react.settings") }
+extensions.configure(com.facebook.react.ReactSettingsExtension){ ex -> ex.autolinkLibrariesFromCommand() }
+rootProject.name = 'sgtownship'
+include ':app'
+includeBuild('../node_modules/@react-native/gradle-plugin')

app.json

@@ -0,0 +1,4 @@
+{
+  "name": "sgcart",
+  "displayName": "sgcart"
+}

app/App.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import {
+  StatusBar,
+} from 'react-native';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { Wrapper } from '@components';
+
+function App() {
+  return (
+    <SafeAreaProvider>
+      <StatusBar
+        backgroundColor="#ffffff"
+        barStyle="dark-content"
+      />
+      <Wrapper />
+    </SafeAreaProvider>
+  );
+}
+
+export default App;

app/components/button/button.props.ts

@@ -0,0 +1,9 @@
+import { GestureResponderEvent, StyleProp, ViewStyle, TextStyle } from 'react-native';
+
+export interface ButtonProps {
+  title: string;
+  onPress: (event: GestureResponderEvent) => void;
+  style?: StyleProp<ViewStyle>;
+  textStyle?: StyleProp<TextStyle>;
+  loading?: boolean;
+}

app/components/button/button.styles.ts

@@ -0,0 +1,22 @@
+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({
+  button: {
+    backgroundColor: '#050505',
+    borderRadius: 12,
+    height: 56,
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: '100%',
+    marginVertical: 12,
+  },
+  text: {
+    color: '#ffffff',
+    fontSize: 16,
+    fontWeight: 'bold',
+    letterSpacing: 1.2,
+  },
+  disabled: {
+    opacity: 0.7,
+  },
+});

app/components/button/button.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { TouchableOpacity, Text, ActivityIndicator } from 'react-native';
+import { ButtonProps } from './button.props';
+import { styles } from './button.styles';
+
+export function Button({
+  title,
+  onPress,
+  style,
+  textStyle,
+  loading = false,
+}: ButtonProps) {
+  return (
+    <TouchableOpacity
+      activeOpacity={0.8}
+      disabled={loading}
+      style={[styles.button, loading && styles.disabled, style]}
+      onPress={onPress}
+    >
+      {loading ? (
+        <ActivityIndicator color="#ffffff" />
+      ) : (
+        <Text style={[styles.text, textStyle]}>{title}</Text>
+      )}
+    </TouchableOpacity>
+  );
+}

app/components/button/index.ts

@@ -0,0 +1,2 @@
+export * from './button';
+export * from './button.props';

app/components/checkBox/checkBox.props.ts

@@ -0,0 +1,9 @@
+import { StyleProp, ViewStyle, TextStyle } from 'react-native';
+
+export interface CheckBoxProps {
+  value: boolean;
+  onValueChange: (newValue: boolean) => void;
+  label?: string;
+  containerStyle?: StyleProp<ViewStyle>;
+  labelStyle?: StyleProp<TextStyle>;
+}

app/components/checkBox/checkBox.styles.ts

@@ -0,0 +1,32 @@
+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  box: {
+    width: 20,
+    height: 20,
+    borderWidth: 1.5,
+    borderColor: '#a0abcc',
+    borderRadius: 4,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: 8,
+  },
+  boxSelected: {
+    backgroundColor: '#0d1b2a',
+    borderColor: '#0d1b2a',
+  },
+  checkmark: {
+    color: '#ffffff',
+    fontSize: 12,
+    fontWeight: 'bold',
+    bottom: 1, // slight adjustment for vertical centering of symbol
+  },
+  label: {
+    fontSize: 14,
+    color: '#6e7a91',
+  },
+});

app/components/checkBox/checkBox.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { TouchableOpacity, View, Text } from 'react-native';
+import { CheckBoxProps } from './checkBox.props';
+import { styles } from './checkBox.styles';
+
+export function CheckBox({
+  value,
+  onValueChange,
+  label,
+  containerStyle,
+  labelStyle,
+}: CheckBoxProps) {
+  const handlePress = () => {
+    onValueChange(!value);
+  };
+
+  return (
+    <TouchableOpacity
+      activeOpacity={0.7}
+      style={[styles.container, containerStyle]}
+      onPress={handlePress}
+    >
+      <View style={[styles.box, value && styles.boxSelected]}>
+        {value && <Text style={styles.checkmark}>✓</Text>}
+      </View>
+      {label && <Text style={[styles.label, labelStyle]}>{label}</Text>}
+    </TouchableOpacity>
+  );
+}

app/components/checkBox/index.ts

@@ -0,0 +1,2 @@
+export * from './checkBox';
+export * from './checkBox.props';

app/components/index.ts

@@ -0,0 +1,5 @@
+export * from './wrapper';
+export * from './inputField';
+export * from './checkBox';
+export * from './button';
+export * from './inlineButton';

app/components/inlineButton/index.ts

@@ -0,0 +1,2 @@
+export * from './inlineButton';
+export * from './inlineButton.props';

app/components/inlineButton/inlineButton.props.ts

@@ -0,0 +1,10 @@
+import { GestureResponderEvent, StyleProp, ViewStyle, TextStyle } from 'react-native';
+
+export interface InlineButtonProps {
+  onPress: (event: GestureResponderEvent) => void;
+  text?: string;
+  highlightedText?: string;
+  style?: StyleProp<ViewStyle>;
+  textStyle?: StyleProp<TextStyle>;
+  highlightedTextStyle?: StyleProp<TextStyle>;
+}

app/components/inlineButton/inlineButton.styles.ts

@@ -0,0 +1,21 @@
+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({
+  button: {
+    paddingVertical: 4,
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  text: {
+    color: '#9e9e9e',
+    fontSize: 14,
+  },
+  highlight: {
+    color: '#cd9355',
+    fontWeight: '600',
+    fontSize: 14,
+  },
+});

app/components/inlineButton/inlineButton.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { TouchableOpacity, Text, View } from 'react-native';
+import { InlineButtonProps } from './inlineButton.props';
+import { styles } from './inlineButton.styles';
+
+export function InlineButton({
+  onPress,
+  text,
+  highlightedText,
+  style,
+  textStyle,
+  highlightedTextStyle,
+}: InlineButtonProps) {
+  return (
+    <TouchableOpacity
+      activeOpacity={0.7}
+      style={[styles.button, style]}
+      onPress={onPress}
+    >
+      <View style={styles.row}>
+        {text && <Text style={[styles.text, textStyle]}>{text} </Text>}
+        {highlightedText && (
+          <Text style={[styles.highlight, highlightedTextStyle]}>
+            {highlightedText}
+          </Text>
+        )}
+      </View>
+    </TouchableOpacity>
+  );
+}

app/components/inputField/index.ts

@@ -0,0 +1,2 @@
+export * from './inputField';
+export * from './inputField.props';

app/components/inputField/inputField.props.ts

@@ -0,0 +1,7 @@
+import { TextInputProps, StyleProp, ViewStyle } from 'react-native';
+
+export interface InputFieldProps extends TextInputProps {
+  label?: string;
+  containerStyle?: StyleProp<ViewStyle>;
+  renderRightAccessory?: () => React.ReactNode;
+}

app/components/inputField/inputField.styles.ts

@@ -0,0 +1,34 @@
+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({
+  container: {
+    marginBottom: 16,
+    width: '100%',
+  },
+  label: {
+    fontSize: 12,
+    fontWeight: 'bold',
+    color: '#6e7a91',
+    marginBottom: 8,
+    letterSpacing: 0.5,
+  },
+  inputWrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: '#eef3fd',
+    borderRadius: 12,
+    paddingHorizontal: 16,
+    height: 56,
+    width: '100%',
+  },
+  input: {
+    flex: 1,
+    height: '100%',
+    color: '#0d1b2a',
+    fontSize: 15,
+    padding: 0,
+  },
+  rightAccessory: {
+    marginLeft: 8,
+  },
+});

app/components/inputField/inputField.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { View, TextInput, Text } from 'react-native';
+import { InputFieldProps } from './inputField.props';
+import { styles } from './inputField.styles';
+
+export function InputField({
+  label,
+  containerStyle,
+  renderRightAccessory,
+  style,
+  placeholderTextColor = '#a0abcc',
+  ...rest
+}: InputFieldProps) {
+  return (
+    <View style={[styles.container, containerStyle]}>
+      {label && <Text style={styles.label}>{label}</Text>}
+      <View style={styles.inputWrapper}>
+        <TextInput
+          style={[styles.input, style]}
+          placeholderTextColor={placeholderTextColor}
+          {...rest}
+        />
+        {renderRightAccessory && (
+          <View style={styles.rightAccessory}>
+            {renderRightAccessory()}
+          </View>
+        )}
+      </View>
+    </View>
+  );
+}

app/components/wrapper/index.ts

@@ -0,0 +1,2 @@
+export * from './wrapper';
+export * from './wrapper.props'

app/components/wrapper/wrapper.props.ts

@@ -0,0 +1,6 @@
+import { ViewStyle } from 'react-native';
+
+export interface WrapperProps {
+  style?: ViewStyle;
+  onAuthenticated?: () => void;
+}

app/components/wrapper/wrapper.styles.ts

@@ -0,0 +1,29 @@
+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  loadingContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  webview: {
+    flex: 1,
+  },
+  testButton: {
+  position: 'absolute',
+  bottom: 40,
+  right: 20,
+  backgroundColor: 'blue',
+  paddingHorizontal: 16,
+  paddingVertical: 12,
+  borderRadius: 8,
+},
+
+testButtonText: {
+  color: '#fff',
+  fontWeight: '600',
+},
+});

app/components/wrapper/wrapper.tsx

@@ -0,0 +1,179 @@
+import React, {
+  useCallback,
+  useEffect,
+  useState,
+} from 'react';
+import { ActivityIndicator, View, Alert, Platform, PermissionsAndroid } from 'react-native';
+import {WebView} from 'react-native-webview';
+import { styles } from './wrapper.styles';
+import {urls} from '@config'
+import { WrapperProps } from './wrapper.props';
+import BootSplash from 'react-native-bootsplash';
+import keychainService from '../../services/keychainService';
+import storageService from '../../services/storageService';
+import biometricService from '../../services/biometricService';
+import useBiometric from '../../hooks/useBiometric';
+import { LoginScreen, SignupScreen, ForgotPasswordScreen } from '@features';
+
+
+export function Wrapper({ style }: WrapperProps) {
+  const [loading, setLoading] = useState(true);
+  const [authenticated, setAuthenticated] =  useState(false);
+  const [currentScreen, setCurrentScreen] = useState<'login' | 'signup' | 'forgotPassword'>('login');
+
+  const { authenticate } = useBiometric();
+
+  const handleAuthSuccess = useCallback(async (token: string) => {
+    await keychainService.saveToken(token);
+
+    try {
+      const bioAvailability = await biometricService.isAvailable();
+      if (bioAvailability.available) {
+        Alert.alert(
+          'Enable Biometric Login',
+          `Would you like to enable ${bioAvailability.biometryType} login for faster access next time?`,
+          [
+            {
+              text: 'No',
+              onPress: () => setAuthenticated(true),
+              style: 'cancel',
+            },
+            {
+              text: 'Yes',
+              onPress: async () => {
+                await storageService.setBiometricEnabled(true);
+                setAuthenticated(true);
+              },
+            },
+          ],
+          { cancelable: false }
+        );
+      } else {
+        setAuthenticated(true);
+      }
+    } catch (error) {
+      console.log('Error checking biometric availability during login:', error);
+      setAuthenticated(true);
+    }
+  }, []);
+
+  const initialize = useCallback(async () => {
+  try {
+    const token = await keychainService.getToken();
+
+    if (!token) {
+      // No token – render LoginScreen later
+      setAuthenticated(false);
+      setLoading(false);
+      return;
+    }
+
+    const biometricEnabled =
+      await storageService.isBiometricEnabled();
+
+    if (!biometricEnabled) {
+      setAuthenticated(true);
+
+      return;
+    }
+
+    const success = await authenticate();
+
+    if (success) {
+      setAuthenticated(true);
+    }
+  } finally {
+    setLoading(false);
+
+    BootSplash.hide({
+      fade: true,
+    });
+  }
+}, [authenticate]);
+
+useEffect(() => {
+  initialize();
+}, [initialize]);
+
+useEffect(() => {
+  if (authenticated) {
+    const requestPermissions = async () => {
+      if (Platform.OS === 'android') {
+        try {
+          await PermissionsAndroid.requestMultiple([
+            PermissionsAndroid.PERMISSIONS.RECORD_AUDIO,
+            PermissionsAndroid.PERMISSIONS.CAMERA,
+          ]);
+        } catch (err) {
+          console.warn(err);
+        }
+      }
+    };
+    requestPermissions();
+  }
+}, [authenticated]);
+
+if (loading) {
+  return (
+    <View style={styles.loadingContainer}>
+      <ActivityIndicator size="large" color="red" />
+    </View>
+  );
+}
+
+  if (!authenticated) {
+    if (currentScreen === 'signup') {
+      return (
+        <SignupScreen
+          onSignupSuccess={handleAuthSuccess}
+          onSignInPress={() => {
+            setCurrentScreen('login');
+          }}
+        />
+      );
+    }
+
+    if (currentScreen === 'forgotPassword') {
+      return (
+        <ForgotPasswordScreen
+          onSendCode={(emailOrPhone) => {
+            // Alert removed
+            setCurrentScreen('login');
+          }}
+          onSignInPress={() => {
+            setCurrentScreen('login');
+          }}
+        />
+      );
+    }
+
+    return (
+      <LoginScreen
+        onLoginSuccess={handleAuthSuccess}
+        onForgotPassword={() => {
+          setCurrentScreen('forgotPassword');
+        }}
+        onCreateAccount={() => {
+          setCurrentScreen('signup');
+        }}
+      />
+    );
+  }
+  
+  return (
+    <View style={[styles.container, style]}>
+      <WebView
+        source={{ uri: urls.webUrl }}
+        style={styles.webview}
+        originWhitelist={['*']}
+        javaScriptEnabled={true}
+        domStorageEnabled={true}
+        allowsInlineMediaPlayback
+        mediaPlaybackRequiresUserAction={false}
+        allowFileAccess={true}
+        allowUniversalAccessFromFileURLs={true}
+        allowFileAccessFromFileURLs={true}
+      />
+    </View>
+  );
+}

app/config/appConfig.ts

@@ -0,0 +1,4 @@
+export const appConfig = {
+  enableBiometric: true,
+  mockLogin: true,
+};

app/config/env.ts

@@ -0,0 +1,4 @@
+export const env = {
+  appName: 'SG Card',
+  version: '1.0.0',
+};

app/config/index.ts

@@ -0,0 +1 @@
+export * from './urls';

app/config/urls.ts

@@ -0,0 +1,3 @@
+export const urls = {
+    webUrl: 'https://sgcart.convexsol.co/'
+}

app/features/forgotPassword/forgotPassword.screen.tsx

@@ -0,0 +1,80 @@
+import React, { useState } from 'react';
+import { View, Text, SafeAreaView, Alert } from 'react-native';
+import { InputField, Button, InlineButton } from '@components';
+import { styles } from './forgotPassword.styles';
+
+interface ForgotPasswordScreenProps {
+  onSendCode: (emailOrPhone: string) => void;
+  onSignInPress: () => void;
+}
+
+export function ForgotPasswordScreen({
+  onSendCode,
+  onSignInPress,
+}: ForgotPasswordScreenProps) {
+  const [emailOrPhone, setEmailOrPhone] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const handleSendCode = async () => {
+    if (!emailOrPhone.trim()) {
+      Alert.alert('Error', 'Please enter your email or phone number');
+      return;
+    }
+
+    setLoading(true);
+
+    try {
+      // Simulating verification code API call
+      await new Promise((resolve) => {
+        setTimeout(() => {
+          resolve('');
+        }, 1000);
+      });
+      Alert.alert('Success', `Verification code sent to ${emailOrPhone}`);
+      onSendCode(emailOrPhone);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <View style={styles.card}>
+        {/* Header */}
+        <View style={styles.headerContainer}>
+          <Text style={styles.title}>Forgot Password</Text>
+          <Text style={styles.subtitle}>
+            Enter your registered email address or phone number to reset your password.
+          </Text>
+        </View>
+
+        {/* Email or Phone Input */}
+        <InputField
+          label="EMAIL OR PHONE NUMBER"
+          placeholder="email@example.com or phone number"
+          value={emailOrPhone}
+          onChangeText={setEmailOrPhone}
+          keyboardType="email-address"
+          autoCapitalize="none"
+          autoCorrect={false}
+        />
+
+        {/* Send Verification Code Button */}
+        <Button
+          title="SEND VERIFICATION CODE"
+          onPress={handleSendCode}
+          loading={loading}
+        />
+
+        {/* Remember your password? Sign In */}
+        <View style={styles.footerContainer}>
+          <InlineButton
+            onPress={onSignInPress}
+            text="Remember your password?"
+            highlightedText="Sign In"
+          />
+        </View>
+      </View>
+    </SafeAreaView>
+  );
+}

app/features/forgotPassword/forgotPassword.styles.ts

@@ -0,0 +1,45 @@
+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#f8fafc',
+    justifyContent: 'center',
+    paddingHorizontal: 24,
+  },
+  card: {
+    backgroundColor: '#ffffff',
+    borderRadius: 24,
+    paddingVertical: 40,
+    paddingHorizontal: 24,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.05,
+    shadowRadius: 12,
+    elevation: 4,
+    borderWidth: 1,
+    borderColor: '#f1f5f9',
+  },
+  headerContainer: {
+    alignItems: 'center',
+    marginBottom: 32,
+  },
+  title: {
+    fontSize: 28,
+    fontWeight: '800',
+    color: '#1e293b',
+    marginBottom: 12,
+    letterSpacing: -0.5,
+  },
+  subtitle: {
+    fontSize: 14,
+    color: '#94a3b8',
+    textAlign: 'center',
+    lineHeight: 20,
+    paddingHorizontal: 16,
+  },
+  footerContainer: {
+    marginTop: 24,
+    alignItems: 'center',
+  },
+});

app/features/forgotPassword/index.ts

@@ -0,0 +1 @@
+export * from './forgotPassword.screen';

app/features/index.ts

@@ -0,0 +1,3 @@
+export * from './login';
+export * from './signup';
+export * from './forgotPassword';

app/features/login/index.ts

@@ -0,0 +1 @@
+export * from './login.screen';

app/features/login/login.screen.tsx

@@ -0,0 +1,125 @@
+import React, { useState } from 'react';
+import { View, Text, TouchableOpacity, SafeAreaView, Alert } from 'react-native';
+import { InputField, CheckBox, Button, InlineButton } from '@components';
+import { styles } from './login.styles';
+import authService from '../../services/authService';
+
+interface LoginScreenProps {
+  onLoginSuccess: (token: string) => void;
+  onCreateAccount?: () => void;
+  onForgotPassword?: () => void;
+}
+
+export function LoginScreen({
+  onLoginSuccess,
+  onCreateAccount,
+  onForgotPassword,
+}: LoginScreenProps) {
+  const [emailOrPhone, setEmailOrPhone] = useState('');
+  const [password, setPassword] = useState('');
+  const [secureTextEntry, setSecureTextEntry] = useState(true);
+  const [rememberMe, setRememberMe] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const handleSignIn = async () => {
+    if (!emailOrPhone.trim() || !password.trim()) {
+      Alert.alert('Error', 'Please enter both email/phone number and password');
+      return;
+    }
+
+    setLoading(true);
+
+    try {
+      const token = await authService.signIn(emailOrPhone, password);
+      onLoginSuccess(token);
+    } catch (error: any) {
+      Alert.alert('Login Failed', error.message || 'Something went wrong');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const toggleSecureEntry = () => {
+    setSecureTextEntry(prev => !prev);
+  };
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <View style={styles.card}>
+        {/* Header */}
+        <View style={styles.headerContainer}>
+          <Text style={styles.title}>Welcome Back</Text>
+          <Text style={styles.subtitle}>
+            Please enter your credentials to access your account.
+          </Text>
+        </View>
+
+        {/* Email or Phone Input */}
+        <InputField
+          label="EMAIL OR PHONE NUMBER"
+          placeholder="ujjwal@sentientgeeks.com"
+          value={emailOrPhone}
+          onChangeText={setEmailOrPhone}
+          keyboardType="email-address"
+          autoCapitalize="none"
+          autoCorrect={false}
+        />
+
+        {/* Password Input */}
+        <InputField
+          label="PASSWORD"
+          placeholder="••••••••"
+          value={password}
+          onChangeText={setPassword}
+          secureTextEntry={secureTextEntry}
+          autoCapitalize="none"
+          autoCorrect={false}
+          renderRightAccessory={() => (
+            <TouchableOpacity
+              style={styles.eyeButton}
+              onPress={toggleSecureEntry}
+              activeOpacity={0.7}
+            >
+              <Text style={styles.eyeText}>
+                {secureTextEntry ? '👁️' : '🙈'}
+              </Text>
+            </TouchableOpacity>
+          )}
+        />
+
+        {/* Remember Me & Forgot Password */}
+        <View style={styles.rowContainer}>
+          <CheckBox
+            value={rememberMe}
+            onValueChange={setRememberMe}
+            label="Remember me"
+          />
+          <InlineButton
+            onPress={onForgotPassword ?? (() => {})}
+            highlightedText="Forgot password?"
+            highlightedTextStyle={styles.forgotPasswordText}
+          />
+        </View>
+
+        {/* Sign In Button */}
+        <Button
+          title="SIGN IN"
+          onPress={handleSignIn}
+          loading={loading}
+        />
+
+        {/* Divider */}
+        <View style={styles.divider} />
+
+        {/* Create Account */}
+        <View style={styles.footerContainer}>
+          <InlineButton
+            onPress={onCreateAccount ?? (() => {})}
+            text="Don't have an account?"
+            highlightedText="Create one"
+          />
+        </View>
+      </View>
+    </SafeAreaView>
+  );
+}

app/features/login/login.styles.ts

@@ -0,0 +1,70 @@
+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#f8fafc',
+    justifyContent: 'center',
+    paddingHorizontal: 24,
+  },
+  card: {
+    backgroundColor: '#ffffff',
+    borderRadius: 24,
+    paddingVertical: 40,
+    paddingHorizontal: 24,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.05,
+    shadowRadius: 12,
+    elevation: 4,
+    borderWidth: 1,
+    borderColor: '#f1f5f9',
+  },
+  headerContainer: {
+    alignItems: 'center',
+    marginBottom: 32,
+  },
+  title: {
+    fontSize: 28,
+    fontWeight: '800',
+    color: '#1e293b',
+    marginBottom: 12,
+    letterSpacing: -0.5,
+  },
+  subtitle: {
+    fontSize: 14,
+    color: '#94a3b8',
+    textAlign: 'center',
+    lineHeight: 20,
+    paddingHorizontal: 16,
+  },
+  rowContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginTop: 8,
+    marginBottom: 24,
+  },
+  forgotPasswordText: {
+    color: '#cd9355',
+    fontWeight: '600',
+    fontSize: 14,
+  },
+  footerContainer: {
+    marginTop: 24,
+    alignItems: 'center',
+  },
+  divider: {
+    height: 1,
+    backgroundColor: '#f1f5f9',
+    width: '100%',
+    marginVertical: 24,
+  },
+  eyeButton: {
+    padding: 4,
+  },
+  eyeText: {
+    fontSize: 16,
+    color: '#94a3b8',
+  },
+});

app/features/signup/index.ts

@@ -0,0 +1 @@
+export * from './signup.screen';

app/features/signup/signup.screen.tsx

@@ -0,0 +1,146 @@
+import React, { useState } from 'react';
+import { View, Text, TouchableOpacity, SafeAreaView, Alert } from 'react-native';
+import { InputField, Button, InlineButton } from '@components';
+import { styles } from './signup.styles';
+
+interface SignupScreenProps {
+  onSignupSuccess: (token: string) => void;
+  onSignInPress: () => void;
+}
+
+export function SignupScreen({
+  onSignupSuccess,
+  onSignInPress,
+}: SignupScreenProps) {
+  const [fullName, setFullName] = useState('');
+  const [emailOrPhone, setEmailOrPhone] = useState('');
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  
+  const [securePasswordEntry, setSecurePasswordEntry] = useState(true);
+  const [secureConfirmPasswordEntry, setSecureConfirmPasswordEntry] = useState(true);
+  
+  const [loading, setLoading] = useState(false);
+
+  const handleSignUp = async () => {
+    if (!fullName.trim() || !emailOrPhone.trim() || !password.trim() || !confirmPassword.trim()) {
+      Alert.alert('Error', 'Please fill in all fields');
+      return;
+    }
+
+    if (password !== confirmPassword) {
+      Alert.alert('Error', 'Passwords do not match');
+      return;
+    }
+
+    setLoading(true);
+
+    try {
+      // Simulating signup API call
+      await new Promise((resolve) => {
+        setTimeout(() => {
+          resolve('');
+        }, 1000);
+      });
+      Alert.alert('Success', 'Account created successfully!');
+      onSignupSuccess('mock-access-token');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <View style={styles.card}>
+        {/* Header */}
+        <View style={styles.headerContainer}>
+          <Text style={styles.title}>Create Account</Text>
+          <Text style={styles.subtitle}>
+            Join us to manage orders, addresses, and wishlist items.
+          </Text>
+        </View>
+
+        {/* Full Name Input */}
+        <InputField
+          label="FULL NAME"
+          placeholder="John Doe"
+          value={fullName}
+          onChangeText={setFullName}
+          autoCapitalize="words"
+          autoCorrect={false}
+        />
+
+        {/* Email or Phone Input */}
+        <InputField
+          label="EMAIL OR PHONE NUMBER"
+          placeholder="ujjwal@sentientgeeks.com"
+          value={emailOrPhone}
+          onChangeText={setEmailOrPhone}
+          keyboardType="email-address"
+          autoCapitalize="none"
+          autoCorrect={false}
+        />
+
+        {/* Password Input */}
+        <InputField
+          label="PASSWORD"
+          placeholder="••••••••"
+          value={password}
+          onChangeText={setPassword}
+          secureTextEntry={securePasswordEntry}
+          autoCapitalize="none"
+          autoCorrect={false}
+          renderRightAccessory={() => (
+            <TouchableOpacity
+              style={styles.eyeButton}
+              onPress={() => setSecurePasswordEntry(prev => !prev)}
+              activeOpacity={0.7}
+            >
+              <Text style={styles.eyeText}>
+                {securePasswordEntry ? '👁️' : '🙈'}
+              </Text>
+            </TouchableOpacity>
+          )}
+        />
+
+        {/* Confirm Password Input */}
+        <InputField
+          label="CONFIRM PASSWORD"
+          placeholder="Confirm your password"
+          value={confirmPassword}
+          onChangeText={setConfirmPassword}
+          secureTextEntry={secureConfirmPasswordEntry}
+          autoCapitalize="none"
+          autoCorrect={false}
+          renderRightAccessory={() => (
+            <TouchableOpacity
+              style={styles.eyeButton}
+              onPress={() => setSecureConfirmPasswordEntry(prev => !prev)}
+              activeOpacity={0.7}
+            >
+              <Text style={styles.eyeText}>
+                {secureConfirmPasswordEntry ? '👁️' : '🙈'}
+              </Text>
+            </TouchableOpacity>
+          )}
+        />
+
+        {/* Sign Up Button */}
+        <Button
+          title="SIGN UP"
+          onPress={handleSignUp}
+          loading={loading}
+        />
+
+        {/* Already have an account? Sign In */}
+        <View style={styles.footerContainer}>
+          <InlineButton
+            onPress={onSignInPress}
+            text="Already have an account?"
+            highlightedText="Sign In"
+          />
+        </View>
+      </View>
+    </SafeAreaView>
+  );
+}

app/features/signup/signup.styles.ts

@@ -0,0 +1,52 @@
+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#f8fafc',
+    justifyContent: 'center',
+    paddingHorizontal: 24,
+  },
+  card: {
+    backgroundColor: '#ffffff',
+    borderRadius: 24,
+    paddingVertical: 32,
+    paddingHorizontal: 24,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.05,
+    shadowRadius: 12,
+    elevation: 4,
+    borderWidth: 1,
+    borderColor: '#f1f5f9',
+  },
+  headerContainer: {
+    alignItems: 'center',
+    marginBottom: 24,
+  },
+  title: {
+    fontSize: 28,
+    fontWeight: '800',
+    color: '#1e293b',
+    marginBottom: 12,
+    letterSpacing: -0.5,
+  },
+  subtitle: {
+    fontSize: 14,
+    color: '#94a3b8',
+    textAlign: 'center',
+    lineHeight: 20,
+    paddingHorizontal: 16,
+  },
+  footerContainer: {
+    marginTop: 24,
+    alignItems: 'center',
+  },
+  eyeButton: {
+    padding: 4,
+  },
+  eyeText: {
+    fontSize: 16,
+    color: '#94a3b8',
+  },
+});

app/hooks/useBiometric.ts

@@ -0,0 +1,48 @@
+import { useCallback, useEffect, useState } from 'react';
+import biometricService from '../services/biometricService';
+import {
+  BiometricType,
+  UseBiometricReturn,
+} from '../types/biometric.types';
+
+export default function useBiometric(): UseBiometricReturn {
+  const [loading, setLoading] = useState(false);
+
+  const [isAvailable, setIsAvailable] =
+    useState(false);
+
+  const [biometryType, setBiometryType] =
+    useState<BiometricType>(BiometricType.NONE);
+
+  const checkAvailability = useCallback(async () => {
+    const result =
+      await biometricService.isAvailable();
+
+    setIsAvailable(result.available);
+
+    setBiometryType(result.biometryType);
+  }, []);
+
+  const authenticate = useCallback(async () => {
+    setLoading(true);
+
+    const result =
+      await biometricService.authenticate();
+
+    setLoading(false);
+
+    return result.success;
+  }, []);
+
+  useEffect(() => {
+    checkAvailability();
+  }, [checkAvailability]);
+
+  return {
+    loading,
+    isAvailable,
+    biometryType,
+    authenticate,
+    checkAvailability,
+  };
+}

app/services/authService.ts

@@ -0,0 +1,45 @@
+class AuthService {
+  /**
+   * Performs user sign in.
+   * Mock implementation uses email: ujjwal@sentientgeeks.com and password: Test@123
+   */
+  async signIn(emailOrPhone: string, password: string): Promise<string> {
+    // Simulating API call delay
+    await new Promise<void>((resolve) => setTimeout(() => resolve(), 1000));
+
+    // Mock credentials check
+    if (emailOrPhone.trim() === 'ujjwal@sentientgeeks.com' && password === 'Test@123') {
+      return 'mock-access-token';
+    }
+
+    /*
+    // REAL API IMPLEMENTATION:
+    try {
+      const response = await fetch('https://api.yourdomain.com/auth/login', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          username: emailOrPhone,
+          password: password,
+        }),
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(errorData.message || 'Login failed');
+      }
+
+      const data = await response.json();
+      return data.accessToken; // returns the real token
+    } catch (error) {
+      throw error;
+    }
+    */
+
+    throw new Error('Invalid email/phone number or password.');
+  }
+}
+
+export default new AuthService();

app/services/biometricService.ts

@@ -0,0 +1,79 @@
+import ReactNativeBiometrics, {
+  BiometryTypes,
+} from 'react-native-biometrics';
+import {
+  AuthenticationResult,
+  BiometricAvailability,
+  BiometricType,
+} from '../types/biometric.types';
+import { BIOMETRIC } from '../utils/constants';
+
+const rnBiometrics = new ReactNativeBiometrics();
+
+class BiometricService {
+  async isAvailable(): Promise<BiometricAvailability> {
+    try {
+      const { available, biometryType } =
+        await rnBiometrics.isSensorAvailable();
+
+      if (!available) {
+        return {
+          available: false,
+          biometryType: BiometricType.NONE,
+        };
+      }
+
+      switch (biometryType) {
+        case BiometryTypes.TouchID:
+          return {
+            available: true,
+            biometryType: BiometricType.TOUCH_ID,
+          };
+
+        case BiometryTypes.FaceID:
+          return {
+            available: true,
+            biometryType: BiometricType.FACE_ID,
+          };
+
+        case BiometryTypes.Biometrics:
+          return {
+            available: true,
+            biometryType: BiometricType.BIOMETRICS,
+          };
+
+        default:
+          return {
+            available: false,
+            biometryType: BiometricType.NONE,
+          };
+      }
+    } catch {
+      return {
+        available: false,
+        biometryType: BiometricType.NONE,
+      };
+    }
+  }
+
+  async authenticate(): Promise<AuthenticationResult> {
+    try {
+      const { success } = await rnBiometrics.simplePrompt({
+        promptMessage: BIOMETRIC.PROMPT_TITLE,
+        cancelButtonText: BIOMETRIC.CANCEL_TEXT,
+      });
+
+      return {
+        success,
+      };
+    } catch (error: any) {
+      console.log('Biometric Error:', error);
+      return {
+        success: false,
+        error: error?.message ?? 'Authentication failed',
+      };
+    }
+  }
+}
+
+export default new BiometricService();

app/services/keychainService.ts

@@ -0,0 +1,75 @@
+import * as Keychain from 'react-native-keychain';
+import { KEYCHAIN } from '../utils/constants';
+
+class KeychainService {
+  /**
+   * Save access token securely
+   */
+  async saveToken(token: string): Promise<boolean> {
+    try {
+      const result = await Keychain.setGenericPassword(
+        KEYCHAIN.USERNAME,
+        token,
+        {
+          service: KEYCHAIN.SERVICE,
+          accessible: Keychain.ACCESSIBLE.WHEN_UNLOCKED,
+        },
+      );
+      return !!result;
+    } catch (error) {
+      console.log('Keychain Save Error', error);
+      return false;
+    }
+  }
+
+  /**
+   * Get stored token
+   */
+  async getToken(): Promise<string | null> {
+    try {
+      const credentials = await Keychain.getGenericPassword({
+        service: KEYCHAIN.SERVICE,
+      });
+
+      if (!credentials) {
+        return null;
+      }
+
+      return credentials.password;
+    } catch (error) {
+      console.log('Keychain Get Error', error);
+      return null;
+    }
+  }
+
+  /**
+   * Check whether token exists
+   */
+  async hasToken(): Promise<boolean> {
+    const token = await this.getToken();
+    return !!token;
+  }
+
+  /**
+   * Remove token
+   */
+  async removeToken(): Promise<boolean> {
+    try {
+      return await Keychain.resetGenericPassword({
+        service: KEYCHAIN.SERVICE,
+      });
+    } catch (error) {
+      console.log('Keychain Remove Error', error);
+      return false;
+    }
+  }
+
+  /**
+   * Save mock token for testing
+   */
+  async mockLogin(): Promise<boolean> {
+    return this.saveToken('mock-access-token');
+  }
+}
+
+export default new KeychainService();

app/services/storageService.ts

@@ -0,0 +1,31 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { STORAGE_KEYS } from '../utils/constants';
+
+class StorageService {
+  async setBiometricEnabled(value: boolean): Promise<void> {
+    await AsyncStorage.setItem(
+      STORAGE_KEYS.BIOMETRIC_ENABLED,
+      JSON.stringify(value),
+    );
+  }
+
+  async isBiometricEnabled(): Promise<boolean> {
+    const value = await AsyncStorage.getItem(
+      STORAGE_KEYS.BIOMETRIC_ENABLED,
+    );
+
+    return value ? JSON.parse(value) : false;
+  }
+
+  async clearBiometric(): Promise<void> {
+    await AsyncStorage.removeItem(
+      STORAGE_KEYS.BIOMETRIC_ENABLED,
+    );
+  }
+
+  async clearAll(): Promise<void> {
+    await AsyncStorage.clear();
+  }
+}
+
+export default new StorageService();

app/types/biometric.types.ts

@@ -0,0 +1,24 @@
+export enum BiometricType {
+  NONE = 'NONE',
+  TOUCH_ID = 'TouchID',
+  FACE_ID = 'FaceID',
+  BIOMETRICS = 'Biometrics',
+}
+
+export interface BiometricAvailability {
+  available: boolean;
+  biometryType: BiometricType;
+}
+
+export interface AuthenticationResult {
+  success: boolean;
+  error?: string;
+}
+
+export interface UseBiometricReturn {
+  isAvailable: boolean;
+  biometryType: BiometricType;
+  loading: boolean;
+  authenticate: () => Promise<boolean>;
+  checkAvailability: () => Promise<void>;
+}

app/utils/constants.ts

@@ -0,0 +1,18 @@
+export const STORAGE_KEYS = {
+  BIOMETRIC_ENABLED: 'BIOMETRIC_ENABLED',
+} as const;
+
+export const KEYCHAIN = {
+  SERVICE: 'sgcart-auth',
+  USERNAME: 'sgcart-user',
+} as const;
+
+export const BIOMETRIC = {
+  PROMPT_TITLE: 'Authenticate',
+  PROMPT_DESCRIPTION: 'Authenticate to continue',
+  CANCEL_TEXT: 'Cancel',
+} as const;
+
+export const MOCK = {
+  TOKEN: 'mock-access-token',
+};

assets/bootsplash/manifest.json

@@ -0,0 +1,7 @@
+{
+  "background": "#ffffff",
+  "logo": {
+    "width": 180,
+    "height": 180
+  }
+}

babel.config.js

@@ -0,0 +1,16 @@
+module.exports = {
+  presets: ['module:@react-native/babel-preset'],
+  plugins: [
+    [
+      'module-resolver',
+      {
+        root: ['./'],
+        alias: {
+          '@config': './app/config',
+          '@components': './app/components',
+          '@features': './app/features',
+        }
+      }
+    ]
+  ]
+};

index.js

@@ -0,0 +1,5 @@
+import { AppRegistry } from 'react-native';
+import App from './app/App';
+import { name as appName } from './app.json';
+
+AppRegistry.registerComponent(appName, () => App);

ios/.xcode.env

@@ -0,0 +1,11 @@
+# This `.xcode.env` file is versioned and is used to source the environment
+# used when running script phases inside Xcode.
+# To customize your local environment, you can create an `.xcode.env.local`
+# file that is not versioned.
+
+# NODE_BINARY variable contains the PATH to the node executable.
+#
+# Customize the NODE_BINARY variable here.
+# For example, to use nvm with brew, add the following line
+# . "$(brew --prefix nvm)/nvm.sh" --no-use
+export NODE_BINARY=$(command -v node)

ios/Podfile

@@ -0,0 +1,34 @@
+# Resolve react_native_pods.rb with node to allow for hoisting
+require Pod::Executable.execute_command('node', ['-p',
+  'require.resolve(
+    "react-native/scripts/react_native_pods.rb",
+    {paths: [process.argv[1]]},
+  )', __dir__]).strip
+
+platform :ios, min_ios_version_supported
+prepare_react_native_project!
+
+linkage = ENV['USE_FRAMEWORKS']
+if linkage != nil
+  Pod::UI.puts "Configuring Pod with #{linkage}ally linked Frameworks".green
+  use_frameworks! :linkage => linkage.to_sym
+end
+
+target 'sgtownship' do
+  config = use_native_modules!
+
+  use_react_native!(
+    :path => config[:reactNativePath],
+    # An absolute path to your application root.
+    :app_path => "#{Pod::Config.instance.installation_root}/.."
+  )
+
+  post_install do |installer|
+    react_native_post_install(
+      installer,
+      config[:reactNativePath],
+      :mac_catalyst_enabled => false,
+      # :ccache_enabled => true
+    )
+  end
+end