nx-react-native-cli 1.1.0 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nx-react-native-cli",
-  "version": "1.1.0",
+  "version": "2.0.0",
   "description": "A react native starter (with NX) cli script",
   "type": "module",
   "files": [

package/templates/.husky/pre-commit

@@ -1,5 +1,2 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
 echo -e "===\n>> Checking lint..."
 npm run lint:all

package/templates/.husky/pre-push

@@ -1,6 +1,3 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
 echo -e "===\n>> Checking branch name..."
 BRANCH=`git rev-parse --abbrev-ref HEAD`
 PROTECTED_BRANCHES="^(main|staging|development)$"

package/templates/.vscode/settings.json

@@ -9,10 +9,7 @@
   "[typescriptreact]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
-  "typescript.preferences.importModuleSpecifier": "project-relative",
+  "typescript.preferences.importModuleSpecifier": "non-relative",
   "tailwindCSS.classAttributes": ["className", "style"],
-  "tailwindCSS.experimental.classRegex": [
-    "tw`([^`]*)",
-    ["tw.style\\(([^)]*)\\)", "'([^']*)'"]
-  ]
+  "tailwindCSS.experimental.classRegex": ["tw`([^`]*)", ["tw.style\\(([^)]*)\\)", "'([^']*)'"]]
 }

package/templates/apps/mobile/.eslintrc.json

@@ -21,7 +21,10 @@
   "overrides": [
     {
       "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
-      "rules": {}
+      "rules": {
+        "import/no-unresolved": "off",
+        "import/extensions": "off"
+      }
     },
     {
       "files": ["*.ts", "*.tsx"],

package/templates/apps/mobile/Gemfile

@@ -2,8 +2,13 @@ source 'https://rubygems.org'
 
 # You may use http://rbenv.org/ or https://rvm.io/ to install and use this version
 ruby ">= 2.6.10"
+gem "fastlane", "= 2.221.1"
 
 # 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'
+
+plugins_path = File.join(File.dirname(__FILE__), './fastlane', 'Pluginfile')
+eval_gemfile(plugins_path) if File.exist?(plugins_path)

package/templates/apps/mobile/android/app/build.gradle

@@ -63,14 +63,14 @@ def enableProguardInReleaseBuilds = false
  * The preferred build flavor of JavaScriptCore (JSC)
  *
  * For example, to use the international variant, you can use:
- * `def jscFlavor = 'org.webkit:android-jsc-intl:+'`
+ * `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 = 'org.webkit:android-jsc:+'
+def jscFlavor = 'io.github.react-native-community:jsc-android:2026004.+'
 
 android {
     ndkVersion rootProject.ext.ndkVersion
@@ -156,4 +156,4 @@ dependencies {
     } else {
         implementation jscFlavor
     }
-}
+}

package/templates/apps/mobile/android/app/src/main/java/com/appsmobile/MainActivity.kt

@@ -0,0 +1,28 @@
+package com.appsmobile
+
+import com.facebook.react.ReactActivity
+import com.facebook.react.ReactActivityDelegate
+import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled
+import com.facebook.react.defaults.DefaultReactActivityDelegate
+import android.os.Bundle;
+
+class MainActivity : ReactActivity() {
+
+  /**
+   * Returns the name of the main component registered from JavaScript. This is used to schedule
+   * rendering of the component.
+   */
+  override fun getMainComponentName(): String = "AppsMobile"
+
+  //react-native-screens override
+  override fun onCreate(savedInstanceState: Bundle?) {
+    super.onCreate(null);
+  }
+
+  /**
+   * 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)
+}

package/templates/apps/mobile/android/app/src/main/java/com/appsmobile/MainApplication.kt

@@ -9,6 +9,7 @@ import com.facebook.react.ReactPackage
 import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.load
 import com.facebook.react.defaults.DefaultReactHost.getDefaultReactHost
 import com.facebook.react.defaults.DefaultReactNativeHost
+import com.facebook.react.soloader.OpenSourceMergedSoMapping
 import com.facebook.soloader.SoLoader
 
 class MainApplication : Application(), ReactApplication {
@@ -34,7 +35,7 @@ class MainApplication : Application(), ReactApplication {
 
   override fun onCreate() {
     super.onCreate()
-    SoLoader.init(this, false)
+    SoLoader.init(this, OpenSourceMergedSoMapping)
     if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
       // If you opted-in for the New Architecture, we load the native entry point for this app.
       load()

package/templates/apps/mobile/android/build.gradle

@@ -3,9 +3,9 @@ buildscript {
         buildToolsVersion = "35.0.0"
         minSdkVersion = 24
         compileSdkVersion = 35
-        targetSdkVersion = 34
-        ndkVersion = "26.1.10909125"
-        kotlinVersion = "1.9.24"
+        targetSdkVersion = 35
+        ndkVersion = "27.1.12297006"
+        kotlinVersion = "2.0.21"
     }
     repositories {
         google()

package/templates/apps/mobile/android/gradle/wrapper/gradle-wrapper.properties

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

package/templates/apps/mobile/android/gradlew

@@ -15,6 +15,8 @@
 # See the License for the specific language governing permissions and
 # limitations under the License.
 #
+# SPDX-License-Identifier: Apache-2.0
+#
 
 ##############################################################################
 #
@@ -55,7 +57,7 @@
 #       Darwin, MinGW, and NonStop.
 #
 #   (3) This script is generated from the Groovy template
-#       https://github.com/gradle/gradle/blob/HEAD/subprojects/plugins/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt
+#       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/.
@@ -84,7 +86,7 @@ done
 # 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 "${APP_HOME:-./}" > /dev/null && pwd -P ) || exit
+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

package/templates/apps/mobile/android/gradlew.bat

@@ -13,6 +13,8 @@
 @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 ##########################################################################

package/templates/apps/mobile/babel.config.json

@@ -10,6 +10,29 @@
         "path": ".env"
       }
     ],
+    [
+      "module-resolver",
+      {
+        "root": ["."],
+        "extensions": [
+          ".ios.js",
+          ".android.js",
+          ".js",
+          ".ts",
+          ".tsx",
+          ".json",
+          ".png",
+          ".jpg",
+          ".jpeg",
+          ".gif",
+          ".svg",
+          ".webp"
+        ],
+        "alias": {
+          "@": "./src"
+        }
+      }
+    ],
     "react-native-reanimated/plugin"
   ]
 }

package/templates/apps/mobile/fastlane/.env.template

@@ -1,13 +1,18 @@
 # Fastlane ENV
 IS_CI=false
 
+# Match
+GIT_URL=
+GIT_BRANCH=
+GIT_API_TOKEN=
+
 # Firebase
+FIREBASE_SERVICE_ACCOUNT=
 FASTLANE_FIREBASE_APP_ID=
 FASTLANE_FIREBASE_GROUP_TESTERS=
 
 # AppStore
 MATCH_PASSWORD=
-GITHUB_API_TOKEN=
 FASTLANE_APPSTORE_KEY_ID=
 FASTLANE_APPSTORE_ISSUER_ID=
 FASTLANE_APPSTORE_KEY_CONTENT=
@@ -18,7 +23,7 @@ FASTLANE_APPSTORE_EXTERNAL_DESTINATIONS=""
 # MISC
 FASTLANE_CHANGELOGS="Performance and Feature updates"
 
-# Android (Production ONLY)
+# Android (Production ONLY, Dev is already handled in build.gradle)
 STORE_PASSWORD=
 KEY_PASSWORD=
 KEY_ALIAS=

package/templates/apps/mobile/fastlane/Fastfile

@@ -1,7 +1,35 @@
 
 require 'fileutils'
+require 'base64'
+require 'json'
 
 def app_name = "AppsMobile"
+def service_account_path = '/tmp/fbd-sa.json'
+
+def decode_base64_to_json(encoded_string, output_path)
+  begin
+    # Decode the Base64 string
+    decoded_data = Base64.decode64(encoded_string)
+
+    # Parse JSON from the decoded data
+    json_data = JSON.parse(decoded_data)
+
+    # Write to the specified file
+    File.open(output_path, 'w') do |file|
+      file.write(JSON.pretty_generate(json_data))
+    end
+
+    puts "JSON file successfully written to: #{output_path}"
+  rescue JSON::ParserError
+    puts "Error: Decoded data is not valid JSON."
+  rescue StandardError => e
+    puts "Error: #{e.message}"
+  end
+end
+
+def get_service_account_credentials()
+    decode_base64_to_json(ENV['FIREBASE_SERVICE_ACCOUNT'], service_account_path)
+end
 
 def delete_gradle_temp()
     UI.message("Deleting Gradle Temp...")
@@ -136,6 +164,10 @@ def setup_android()
         gradle_file_path: "./android/app/build.gradle",
         version_code: build_number
     )
+
+    # Retrieving Service Account Credentials
+    UI.message("Retrieving Service Account Credentials...")
+    get_service_account_credentials()
 end
 
 def ios_build_ipa(configuration, scheme)
@@ -216,7 +248,7 @@ end
 def publish_bundle(flavor)
     UI.message("Uploading aab build to Firebase...")
     release = firebase_app_distribution(
-        service_credentials_file: to_boolean(ENV['IS_CI']) ? '/tmp/google-service-account-key.json' : nil,
+        service_credentials_file: service_account_path,
         app: ENV['FASTLANE_FIREBASE_APP_ID'],
         android_artifact_type: "AAB",
         android_artifact_path: "./android/app/build/outputs/bundle/#{flavor}Release/app-#{flavor}-release.aab",
@@ -228,7 +260,7 @@ end
 def publish_apk(flavor)
     UI.message("Uploading apk build to Firebase...")
     release = firebase_app_distribution(
-        service_credentials_file: to_boolean(ENV['IS_CI']) ? '/tmp/google-service-account-key.json' : nil,
+        service_credentials_file: service_account_path,
         app: ENV['FASTLANE_FIREBASE_APP_ID'],
         android_artifact_type: "APK",
         android_artifact_path: "./android/app/build/outputs/apk/#{flavor}/release/app-#{flavor}-release.apk",
@@ -238,6 +270,11 @@ def publish_apk(flavor)
 end
 
 platform :android do 
+    desc "Get Service Account Credentials"
+    lane :get_service_account_credentials do
+        get_service_account_credentials()
+    end
+
     desc "Build Android (Dev Server)"
     lane :dev do 
         begin
@@ -253,10 +290,14 @@ platform :android do
     desc "Build Android (Production Server)"
     lane :prod do 
         begin
-            flavor = 'production'
+            flavor = 'prod'
             setup_android()
-            android_build_bundle(flavor)
-            publish_bundle(flavor)
+            # TODO: COMMENT IF FIREBASE PROD IS LINKED TO GOOGLE PLAY
+            android_build_apk(flavor)
+            publish_apk(flavor)
+            # TODO: UNCOMMENT IF FIREBASE PROD IS LINKED TO GOOGLE PLAY
+            # android_build_bundle(flavor)
+            # publish_bundle(flavor)
         rescue => exception
             UI.error(exception)
         end

package/templates/apps/mobile/fastlane/Matchfile

@@ -1,5 +1,5 @@
-git_url("")
-git_branch("main")
-git_basic_authorization(ENV['GITHUB_API_TOKEN'])
+git_url(ENV['GIT_URL'])
+git_branch(ENV['GIT_BRANCH'])
+git_basic_authorization(ENV['GIT_API_TOKEN'])
 storage_mode("git")
 type("appstore")

package/templates/apps/mobile/ios/AppDelegate.mm

@@ -0,0 +1,33 @@
+#import "AppDelegate.h"
+
+#import <React/RCTBundleURLProvider.h>
+#import <ReactAppDependencyProvider/RCTAppDependencyProvider.h>
+
+@implementation AppDelegate
+
+- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
+{
+  self.moduleName = @"AppsMobile";
+  self.dependencyProvider = [RCTAppDependencyProvider new];
+  // You can add your custom initial props in the dictionary below.
+  // They will be passed down to the ViewController used by React Native.
+  self.initialProps = @{};
+
+  return [super application:application didFinishLaunchingWithOptions:launchOptions];
+}
+
+- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
+{
+  return [self bundleURL];
+}
+
+- (NSURL *)bundleURL
+{
+#if DEBUG
+  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"src/main"];
+#else
+  return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
+#endif
+}
+
+@end

package/templates/apps/mobile/metro.config.js

@@ -0,0 +1,42 @@
+const path = require('path');
+const { withNxMetro } = require('@nx/react-native');
+const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
+
+const defaultConfig = getDefaultConfig(__dirname);
+const { assetExts, sourceExts } = defaultConfig.resolver;
+
+/**
+ * Metro configuration
+ * https://reactnative.dev/docs/metro
+ *
+ * @type {import('metro-config').MetroConfig}
+ */
+const customConfig = {
+  cacheVersion: 'mobile',
+  transformer: {
+    babelTransformerPath: require.resolve('react-native-svg-transformer'),
+    getTransformOptions: async () => ({
+      transform: {
+        experimentalImportSupport: false,
+        inlineRequires: true,
+      },
+    }),
+  },
+  resolver: {
+    extraNodeModules: {
+      '@': path.resolve(__dirname, 'src'),
+    },
+    assetExts: assetExts.filter((ext) => ext !== 'svg'),
+    sourceExts: [...sourceExts, 'cjs', 'mjs', 'svg'],
+  },
+};
+
+module.exports = withNxMetro(mergeConfig(defaultConfig, customConfig), {
+  // Change this to true to see debugging info.
+  // Useful if you have issues resolving modules
+  debug: false,
+  // all the file extensions used for imports other than 'ts', 'tsx', 'js', 'jsx', 'json'
+  extensions: [],
+  // Specify folders to watch, in addition to Nx defaults (workspace libraries and node_modules)
+  watchFolders: [],
+});

package/templates/apps/mobile/package.json

@@ -15,7 +15,7 @@
     "pre-build": "npm run ensure-symlink && npm run sync-deps && npm run pod-install",
     "list:ios-configurations": "cd ios && xcodebuild -list",
     "list:ios-devices": "xcrun xctrace list devices",
-    "xcode": "open ios/AppsMobile.xcworkspace",
+    "xcode": "open -a Xcode ios/AppsMobile.xcworkspace",
     "touch-xcode": "cd ios && touch .xcode.env",
     "check-env:mobile": "cd ../.. && npm run check-env:mobile",
     "setup-fastlane": "rbenv local && bundle install && bundle update",
@@ -26,7 +26,6 @@
   "dependencies": {
     "@gorhom/bottom-sheet": "*",
     "@hookform/resolvers": "*",
-    "@react-native-async-storage/async-storage": "*",
     "@react-native-community/datetimepicker": "*",
     "@react-native-community/hooks": "*",
     "@react-native/metro-config": "*",
@@ -54,7 +53,6 @@
     "metro-config": "*",
     "react-hook-form": "*",
     "react-native-dotenv": "*",
-    "react-native-fast-image": "*",
     "react-native-gesture-handler": "*",
     "react-native-get-random-values": "*",
     "react-native-haptic-feedback": "*",
@@ -69,6 +67,7 @@
     "react-native-simple-toast": "*",
     "react-native-svg-transformer": "*",
     "react-native-svg": "*",
+    "react-native-turbo-image": "*",
     "react-native-url-polyfill": "*",
     "react-native": "*",
     "react": "*",

package/templates/apps/mobile/project.json

@@ -17,7 +17,8 @@
       "dependsOn": ["check-env", "ensure-symlink", "pod-install"],
       "options": {
         "port": 8081,
-        "resetCache": true
+        "resetCache": true,
+        "client-logs": true
       }
     },
     "serve": {

package/templates/apps/mobile/src/app/index.tsx

@@ -1,21 +1,21 @@
-import AsyncStorage from '@react-native-async-storage/async-storage';
 import { createAsyncStoragePersister } from '@tanstack/query-async-storage-persister';
 import { QueryClient } from '@tanstack/react-query';
-import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client';
+import { AsyncStorage, PersistQueryClientProvider } from '@tanstack/react-query-persist-client';
 import React from 'react';
 import { LogBox } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import 'react-native-get-random-values';
+import { MMKV } from 'react-native-mmkv';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { enableFreeze } from 'react-native-screens';
 import { useDeviceContext } from 'twrnc';
 
+import { StorageManager } from '@/components';
+import CONFIG from '@/config';
+import ApplicationRoutes from '@/routes';
+import { tw } from '@/tailwind';
 import 'react-native-url-polyfill/auto';
 
-import { StorageManager } from '../components';
-import ApplicationRoutes from '../routes';
-import { tw } from '../tailwind';
-
 LogBox.ignoreLogs(['VirtualizedLists', 'onAnimatedValueUpdate']);
 
 enableFreeze(true);
@@ -31,8 +31,23 @@ const queryClient = new QueryClient({
   },
 });
 
+const storage = new MMKV({
+  encryptionKey: CONFIG.STORAGE_KEY,
+  id: 'react-query-persist',
+});
+
+export const MmkvStorage: AsyncStorage = {
+  getItem: (name) => {
+    const value = storage.getString(name);
+
+    return value ?? null;
+  },
+  removeItem: (name) => storage.delete(name),
+  setItem: (name, value) => storage.set(name, value),
+};
+
 const persister = createAsyncStoragePersister({
-  storage: AsyncStorage,
+  storage: MmkvStorage as AsyncStorage,
 });
 
 const persistOptions = { maxAge: CACHE_TIME, persister };

package/templates/apps/mobile/src/components/atoms/BottomSheet/bottom-sheet.component.tsx

@@ -13,8 +13,8 @@ import { Keyboard, StyleProp, ViewStyle } from 'react-native';
 import { TouchableWithoutFeedback } from 'react-native-gesture-handler';
 import Animated, { Extrapolation, interpolate, useAnimatedStyle } from 'react-native-reanimated';
 
-import { tw } from '../../../tailwind';
-import { DefaultComponentProps } from '../../../types';
+import { tw } from '@/tailwind';
+import { DefaultComponentProps } from '@/types';
 
 export type BottomSheetProps = DefaultComponentProps & {
   backgroundStyle?: StyleProp<Omit<ViewStyle, 'left' | 'right' | 'position' | 'top' | 'bottom'>>;
@@ -127,7 +127,12 @@ export function BottomSheet(props: BottomSheetProps) {
   );
 }
 
-export function useBottomSheet() {
+export function useBottomSheet(): {
+  closeSheet: () => void;
+  expandSheet: () => void;
+  isVisible: boolean;
+  sheetRef: RefObject<BottomSheetModal>;
+} {
   const [isVisible, setIsVisible] = useState<boolean>(false);
   const sheetRef = useRef<BottomSheetModal>(null);
 
@@ -143,5 +148,5 @@ export function useBottomSheet() {
     setIsVisible(false);
   }, []);
 
-  return { closeSheet, expandSheet, isVisible, sheetRef };
+  return { closeSheet, expandSheet, isVisible, sheetRef: sheetRef as RefObject<BottomSheetModal> };
 }

package/templates/apps/mobile/src/components/atoms/Button/button.component.tsx

@@ -9,9 +9,9 @@ import {
   ViewStyle,
 } from 'react-native';
 
-import { colors, disabledInputStyle, tw } from '../../../tailwind';
-import { DefaultComponentProps } from '../../../types/component.type';
-import { Typography } from '../Typography';
+import { Typography } from '@/components/atoms/Typography';
+import { colors, disabledInputStyle, tw } from '@/tailwind';
+import { DefaultComponentProps } from '@/types';
 
 type Props = DefaultComponentProps &
   TouchableOpacityProps & {

package/templates/apps/mobile/src/components/atoms/Divider/divider-component.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-
 import { View } from 'react-native';
-import { tw } from '../../../tailwind';
-import { DefaultComponentProps } from '../../../types';
+
+import { tw } from '@/tailwind';
+import { DefaultComponentProps } from '@/types';
 
 type Props = DefaultComponentProps & {};
 

package/templates/apps/mobile/src/components/atoms/ExcludedEdges/excluded-edges.component.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 import { Platform } from 'react-native';
 import { Edge, SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
 
-import { tw } from '../../../tailwind';
-import { DefaultComponentProps } from '../../../types';
+import { tw } from '@/tailwind';
+import { DefaultComponentProps } from '@/types';
 
 type Props = DefaultComponentProps & {
   children?: React.ReactNode;

package/templates/apps/mobile/src/components/atoms/InputLayout/input-layout.component.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { StyleProp, TextStyle, View } from 'react-native';
 
-import { tw } from '../../../tailwind';
-import { DefaultComponentProps } from '../../../types';
-import { Typography } from '../Typography';
+import { Typography } from '@/components/atoms/Typography';
+import { tw } from '@/tailwind';
+import { DefaultComponentProps } from '@/types';
 
 type Props = DefaultComponentProps & {
   children?: React.ReactNode;

package/templates/apps/mobile/src/components/atoms/KeyboardAwareScrollView/keyboard-aware-scroll-view.component.tsx

@@ -1,17 +1,23 @@
-import React, { ReactElement } from 'react';
-import { NativeScrollEvent, NativeSyntheticEvent, StyleProp, ViewStyle } from 'react-native';
+import React from 'react';
+import {
+  NativeScrollEvent,
+  NativeSyntheticEvent,
+  RefreshControlProps,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
 import { KeyboardAwareScrollView as RNKeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
 import Animated from 'react-native-reanimated';
 
-import { tw } from '../../../tailwind';
-import { DefaultComponentProps } from '../../../types';
+import { tw } from '@/tailwind';
+import { DefaultComponentProps } from '@/types';
 
 type Props = DefaultComponentProps & {
   children?: React.ReactNode;
   scrollViewRef?: React.RefObject<RNKeyboardAwareScrollView>;
   containerStyle?: StyleProp<ViewStyle>;
   extraBottomPadding?: number;
-  refreshControl?: ReactElement;
+  refreshControl?: React.ReactElement<RefreshControlProps> | undefined;
   onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
 };