create-react-native-starter-kit 0.0.0-stage → 1.0.0

package/lib/patch-native.js

@@ -0,0 +1,387 @@
+const fs = require('fs');
+const path = require('path');
+
+/**
+ * Find files recursively matching a pattern or name
+ */
+function findFile(dir, fileName) {
+  if (!fs.existsSync(dir)) return null;
+  const entries = fs.readdirSync(dir, { withFileTypes: true });
+  for (const entry of entries) {
+    const fullPath = path.join(dir, entry.name);
+    if (entry.isDirectory()) {
+      if (entry.name === 'node_modules' || entry.name === 'Pods' || entry.name === 'build') continue;
+      const found = findFile(fullPath, fileName);
+      if (found) return found;
+    } else if (entry.name === fileName) {
+      return fullPath;
+    }
+  }
+  return null;
+}
+
+/**
+ * Patch android/app/build.gradle
+ */
+function patchAndroidBuildGradle(projectDir) {
+  const gradlePath = path.join(projectDir, 'android', 'app', 'build.gradle');
+  if (!fs.existsSync(gradlePath)) {
+    console.log('⚠️ Could not find android/app/build.gradle');
+    return false;
+  }
+
+  let content = fs.readFileSync(gradlePath, 'utf8');
+
+  // Check if androidx.activity is already added
+  if (!content.includes('androidx.activity:activity')) {
+    const target = 'dependencies {';
+    const injection = `dependencies {
+    implementation("androidx.activity:activity:1.+") //by own`;
+    if (content.includes(target)) {
+      content = content.replace(target, injection);
+      fs.writeFileSync(gradlePath, content, 'utf8');
+      console.log('✅ Patched android/app/build.gradle');
+      return true;
+    }
+  }
+  return false;
+}
+
+/**
+ * Patch MainActivity.kt
+ */
+function patchAndroidMainActivity(projectDir) {
+  const javaDir = path.join(projectDir, 'android', 'app', 'src', 'main', 'java');
+  const mainActivityPath = findFile(javaDir, 'MainActivity.kt');
+
+  if (!mainActivityPath) {
+    console.log('⚠️ Could not find MainActivity.kt');
+    return false;
+  }
+
+  let content = fs.readFileSync(mainActivityPath, 'utf8');
+
+  const requiredImports = [
+    'android.os.Bundle',
+    'com.facebook.react.ReactApplication',
+    'com.swmansion.rnscreens.fragment.restoration.RNScreensFragmentFactory',
+  ].filter(name => !new RegExp(`^import\\s+${name.replace(/\./g, '\\.')}\\s*$`, 'm').test(content));
+
+  if (requiredImports.length > 0) {
+    const importBlock = `//By Own\n${requiredImports.map(name => `import ${name}`).join('\n')}\n`;
+    // Match only the package line itself so the inserted block always ends on its own line.
+    const packageLineRegex = /^package\s+[\w.]+[ \t]*\r?\n/m;
+    if (packageLineRegex.test(content)) {
+      content = content.replace(packageLineRegex, match => `${match}\n${importBlock}`);
+    } else {
+      content = `${importBlock}\n${content}`;
+    }
+  }
+
+  const activityHooks = `
+  //By Own
+  override fun onCreate(savedInstanceState: Bundle?) {
+    supportFragmentManager.fragmentFactory = RNScreensFragmentFactory()
+    super.onCreate(savedInstanceState)
+    reloadIfDisplaySizeChanged()
+  }
+
+  /**
+   * Changing "Display size" recreates this activity but keeps the JS runtime alive, so sizes
+   * computed once at JS load (normalize(), screen-width constants) stay stale and layouts break.
+   * Reloading the bundle recomputes them for the new density.
+   */
+  private fun reloadIfDisplaySizeChanged() {
+    val densityDpi = resources.configuration.densityDpi
+    if (lastDensityDpi != 0 && lastDensityDpi != densityDpi) {
+      (application as ReactApplication).reactHost?.reload("Display size changed")
+    }
+    lastDensityDpi = densityDpi
+  }
+
+  //By Own
+  private companion object {
+    /** Survives activity recreation (same process); 0 means first launch. */
+    var lastDensityDpi = 0
+  }
+`;
+
+  if (!content.includes('reloadIfDisplaySizeChanged')) {
+    const classRegex = /(class\s+MainActivity\s*:\s*ReactActivity\(\)\s*\{)/;
+    if (classRegex.test(content)) {
+      content = content.replace(classRegex, `$1${activityHooks}`);
+    }
+  }
+
+  fs.writeFileSync(mainActivityPath, content, 'utf8');
+  console.log('✅ Patched MainActivity.kt');
+  return true;
+}
+
+/**
+ * Patch AndroidManifest.xml
+ */
+function patchAndroidManifest(projectDir) {
+  const manifestPath = path.join(projectDir, 'android', 'app', 'src', 'main', 'AndroidManifest.xml');
+  if (!fs.existsSync(manifestPath)) {
+    console.log('⚠️ Could not find AndroidManifest.xml');
+    return false;
+  }
+
+  let content = fs.readFileSync(manifestPath, 'utf8');
+  let modified = false;
+
+  if (!content.includes('xmlns:tools')) {
+    content = content.replace(
+      '<manifest xmlns:android="http://schemas.android.com/apk/res/android"',
+      '<manifest xmlns:android="http://schemas.android.com/apk/res/android"\n    xmlns:tools="http://schemas.android.com/tools"',
+    );
+    modified = true;
+  }
+
+  if (!content.includes('android.permission.CAMERA')) {
+    const permissionBlock = `    <uses-permission android:name="android.permission.CAMERA" />
+    <uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
+    <uses-permission
+      android:name="android.permission.READ_EXTERNAL_STORAGE"
+      android:maxSdkVersion="32" />
+    <!-- RN debug adds this for Metro over LAN; use adb reverse instead. -->
+    <uses-permission
+      android:name="android.permission.ACCESS_LOCAL_NETWORK"
+      tools:node="remove" />
+
+`;
+    if (content.includes('<application')) {
+      content = content.replace('<application', `${permissionBlock}<application`);
+      modified = true;
+    }
+  }
+
+  if (!content.includes('enableOnBackInvokedCallback')) {
+    content = content.replace(
+      '<application',
+      '<application\n      android:enableOnBackInvokedCallback="false"',
+    );
+    modified = true;
+  }
+
+  if (
+    content.includes('<activity') &&
+    !content.includes('android:screenOrientation=')
+  ) {
+    content = content.replace(
+      '<activity',
+      '<activity\n        android:screenOrientation="portrait"',
+    );
+    modified = true;
+  }
+
+  if (modified) {
+    fs.writeFileSync(manifestPath, content, 'utf8');
+    console.log('✅ Patched AndroidManifest.xml');
+  }
+  return modified;
+}
+
+/**
+ * Get all font files from src/assets/fonts
+ */
+function getFontFiles(projectDir) {
+  const fontsDir = path.join(projectDir, 'src', 'assets', 'fonts');
+  if (!fs.existsSync(fontsDir)) return [];
+  return fs.readdirSync(fontsDir).filter(f => f.endsWith('.ttf') || f.endsWith('.otf'));
+}
+
+/**
+ * Patch iOS Info.plist
+ */
+function patchIOSInfoPlist(projectDir) {
+  const iosDir = path.join(projectDir, 'ios');
+  const infoPlistPath = findFile(iosDir, 'Info.plist');
+
+  if (!infoPlistPath) {
+    console.log('⚠️ Could not find iOS Info.plist');
+    return false;
+  }
+
+  let content = fs.readFileSync(infoPlistPath, 'utf8');
+  let modified = false;
+
+  // Add Photo & Camera Permissions
+  const permissionsToAdd = [];
+  if (!content.includes('NSPhotoLibraryUsageDescription')) {
+    permissionsToAdd.push(`\t<key>NSPhotoLibraryUsageDescription</key>
+\t<string>We need access to your photo gallery to update your profile picture.</string>`);
+  }
+  if (!content.includes('NSCameraUsageDescription')) {
+    permissionsToAdd.push(`\t<key>NSCameraUsageDescription</key>
+\t<string>We need access to your camera to take photos for your profile picture.</string>`);
+  }
+
+  // Add UIAppFonts
+  const fonts = getFontFiles(projectDir);
+  if (fonts.length > 0 && !content.includes('<key>UIAppFonts</key>')) {
+    const fontStrings = fonts.map(font => `\t\t<string>${font}</string>`).join('\n');
+    permissionsToAdd.push(`\t<key>UIAppFonts</key>
+\t<array>
+${fontStrings}
+\t</array>`);
+  }
+
+  if (content.includes('UIInterfaceOrientationLandscapeLeft')) {
+    content = content.replace(
+      /<key>UISupportedInterfaceOrientations<\/key>\s*<array>[\s\S]*?<\/array>/,
+      `<key>UISupportedInterfaceOrientations</key>
+	<array>
+		<string>UIInterfaceOrientationPortrait</string>
+	</array>`,
+    );
+    modified = true;
+  }
+
+  if (permissionsToAdd.length > 0) {
+    const insertion = permissionsToAdd.join('\n') + '\n</dict>';
+    content = content.replace(/<\/dict>\s*<\/plist>/, `${insertion}\n</plist>`);
+    modified = true;
+  }
+
+  if (modified) {
+    fs.writeFileSync(infoPlistPath, content, 'utf8');
+    console.log('✅ Patched iOS Info.plist with permissions and custom fonts');
+  }
+
+  return modified;
+}
+
+/**
+ * Keep CocoaPods on the same iOS minimum as the app target.
+ */
+function patchIOSPodfile(projectDir) {
+  const podfilePath = path.join(projectDir, 'ios', 'Podfile');
+  if (!fs.existsSync(podfilePath)) {
+    return false;
+  }
+
+  let content = fs.readFileSync(podfilePath, 'utf8');
+  if (content.includes("min_ios = '15.1'")) {
+    return false;
+  }
+
+  const marker = 'react_native_post_install(';
+  const start = content.indexOf(marker);
+  if (start === -1) {
+    return false;
+  }
+
+  const callEnd = content.indexOf('\n    )', start);
+  if (callEnd === -1) {
+    return false;
+  }
+
+  const injection = `
+    # Force every pod (including resource bundles) to match the app's
+    # iOS 15.1 minimum. Without this, some pods stay on 9.0 and Xcode fails.
+    min_ios = '15.1'
+    installer.pods_project.build_configurations.each do |config|
+      config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = min_ios
+    end
+    installer.pods_project.targets.each do |target|
+      target.build_configurations.each do |config|
+        config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = min_ios
+      end
+    end`;
+
+  content =
+    content.slice(0, callEnd + '\n    )'.length) +
+    injection +
+    content.slice(callEnd + '\n    )'.length);
+  fs.writeFileSync(podfilePath, content, 'utf8');
+  console.log('✅ Patched ios/Podfile deployment target');
+  return true;
+}
+
+/**
+ * The wrapper default (10s) drops the Gradle distribution download on slow networks.
+ */
+function patchGradleWrapper(projectDir) {
+  const wrapperPath = path.join(
+    projectDir,
+    'android',
+    'gradle',
+    'wrapper',
+    'gradle-wrapper.properties',
+  );
+  if (!fs.existsSync(wrapperPath)) {
+    return false;
+  }
+
+  const timeoutMs = 180000;
+  let content = fs.readFileSync(wrapperPath, 'utf8');
+  const match = content.match(/^networkTimeout=(\d+)\s*$/m);
+
+  if (match && Number(match[1]) >= timeoutMs) {
+    return false;
+  }
+
+  if (match) {
+    content = content.replace(
+      /^networkTimeout=\d+\s*$/m,
+      `networkTimeout=${timeoutMs}`,
+    );
+  } else if (content.includes('distributionUrl=')) {
+    content = content.replace(
+      /^(distributionUrl=.*)$/m,
+      `$1\nnetworkTimeout=${timeoutMs}`,
+    );
+  } else {
+    content = `${content.replace(/\s*$/, '')}\nnetworkTimeout=${timeoutMs}\n`;
+  }
+
+  fs.writeFileSync(wrapperPath, content, 'utf8');
+  console.log('✅ Patched gradle-wrapper.properties (networkTimeout)');
+  return true;
+}
+
+/**
+ * Draw behind system bars. Screens already use safe area insets.
+ */
+function patchGradleProperties(projectDir) {
+  const propsPath = path.join(projectDir, 'android', 'gradle.properties');
+  if (!fs.existsSync(propsPath)) {
+    return false;
+  }
+
+  let content = fs.readFileSync(propsPath, 'utf8');
+  if (!content.includes('edgeToEdgeEnabled=false')) {
+    return false;
+  }
+
+  content = content.replace('edgeToEdgeEnabled=false', 'edgeToEdgeEnabled=true');
+  fs.writeFileSync(propsPath, content, 'utf8');
+  console.log('✅ Patched android/gradle.properties (edgeToEdgeEnabled)');
+  return true;
+}
+
+/**
+ * Run all native patches
+ */
+function patchAllNative(projectDir) {
+  patchAndroidBuildGradle(projectDir);
+  patchAndroidMainActivity(projectDir);
+  patchAndroidManifest(projectDir);
+  patchGradleWrapper(projectDir);
+  patchGradleProperties(projectDir);
+  patchIOSInfoPlist(projectDir);
+  patchIOSPodfile(projectDir);
+}
+
+module.exports = {
+  patchAllNative,
+  patchAndroidBuildGradle,
+  patchAndroidMainActivity,
+  patchAndroidManifest,
+  patchGradleWrapper,
+  patchGradleProperties,
+  patchIOSInfoPlist,
+  patchIOSPodfile,
+};

package/package.json

@@ -1,6 +1,49 @@
 {
   "name": "create-react-native-starter-kit",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "1.0.0",
+  "description": "Create a React Native CLI app with a ready folder structure, shared components, theming, i18n, API layer, offline handling and native setup done for you",
+  "main": "bin/create-react-native-starter-kit.js",
+  "bin": {
+    "create-react-native-starter-kit": "./bin/create-react-native-starter-kit.js"
+  },
+  "files": [
+    "bin",
+    "lib",
+    "scripts",
+    "template",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "sync-template": "node scripts/sync-template.js",
+    "test": "node test-patchers.js",
+    "prepack": "node scripts/sync-template.js"
+  },
+  "keywords": [
+    "react-native",
+    "react-native-cli",
+    "starter",
+    "boilerplate",
+    "generator",
+    "scaffolder",
+    "template",
+    "starter-kit",
+    "typescript",
+    "react-navigation",
+    "redux-toolkit",
+    "tanstack-query"
+  ],
+  "author": "Satyam Narayan (https://github.com/satyam-narayan)",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/satyam-narayan/create-react-native-starter-kit.git"
+  },
+  "homepage": "https://github.com/satyam-narayan/create-react-native-starter-kit#readme",
+  "bugs": {
+    "url": "https://github.com/satyam-narayan/create-react-native-starter-kit/issues"
+  },
+  "engines": {
+    "node": ">=22.13.0"
+  }
+}

package/scripts/sync-template.js

@@ -0,0 +1,52 @@
+#!/usr/bin/env node
+
+/**
+ * Refreshes cli/template from the starter repo that contains this cli folder.
+ * Runs automatically before `npm pack` / `npm publish`.
+ * When the cli folder is used on its own (no parent repo), the existing template is kept.
+ */
+
+const fs = require('fs');
+const path = require('path');
+const { copyDirectoryRecursive } = require('../lib/copy-src');
+
+const CLI_ROOT = path.resolve(__dirname, '..');
+const REPO_ROOT = path.resolve(CLI_ROOT, '..');
+const TEMPLATE_DIR = path.join(CLI_ROOT, 'template');
+
+const DIRECTORIES = ['src', 'patches'];
+const FILES = ['.env.example'];
+
+function main() {
+  if (!fs.existsSync(path.join(REPO_ROOT, 'src'))) {
+    if (!fs.existsSync(path.join(TEMPLATE_DIR, 'src'))) {
+      console.error('❌ No starter src/ found next to cli/ and cli/template is empty.');
+      process.exit(1);
+    }
+    console.log('ℹ️  Starter repo not found next to cli/. Keeping the existing template.');
+    return;
+  }
+
+  fs.rmSync(TEMPLATE_DIR, { recursive: true, force: true });
+  fs.mkdirSync(TEMPLATE_DIR, { recursive: true });
+
+  for (const dir of DIRECTORIES) {
+    const from = path.join(REPO_ROOT, dir);
+    if (fs.existsSync(from)) {
+      copyDirectoryRecursive(from, path.join(TEMPLATE_DIR, dir));
+      console.log(`✅ template/${dir}`);
+    }
+  }
+
+  for (const file of FILES) {
+    const from = path.join(REPO_ROOT, file);
+    if (fs.existsSync(from)) {
+      fs.copyFileSync(from, path.join(TEMPLATE_DIR, file));
+      console.log(`✅ template/${file}`);
+    }
+  }
+
+  console.log('🎉 cli/template is up to date.');
+}
+
+main();

package/template/.env.example

@@ -0,0 +1,3 @@
+# Leave API_BASE_URL unset to use the built-in mock API (src/services/api/mock).
+# Set it to your backend URL to call the real server.
+# API_BASE_URL=https://api.example.com

package/template/patches/react-native-element-dropdown+2.12.4.patch

@@ -0,0 +1,67 @@
+diff --git a/node_modules/react-native-element-dropdown/lib/commonjs/components/Dropdown/index.js b/node_modules/react-native-element-dropdown/lib/commonjs/components/Dropdown/index.js
+index 3166ef9..cdbc26d 100644
+--- a/node_modules/react-native-element-dropdown/lib/commonjs/components/Dropdown/index.js
++++ b/node_modules/react-native-element-dropdown/lib/commonjs/components/Dropdown/index.js
+@@ -167,14 +167,14 @@ const DropdownComponent = /*#__PURE__*/_react.default.forwardRef((props, current
+         if (mode === 'auto') {
+           isFull = false;
+         }
+-        const top = isFull ? 20 : height + pageY + 2;
++        const top = isFull ? 20 : height + pageY;
+         const bottom = H - top + height;
+         const left = _reactNative.I18nManager.isRTL ? W - width - pageX : pageX;
+         setPosition({
+           isFull,
+           width: Math.floor(width),
+-          top: Math.floor(top + statusBarHeight),
+-          bottom: Math.floor(bottom - statusBarHeight),
++          top: Math.floor(top),
++          bottom: Math.floor(bottom),
+           left: Math.floor(left),
+           height: Math.floor(height)
+         });
+diff --git a/node_modules/react-native-element-dropdown/lib/module/components/Dropdown/index.js b/node_modules/react-native-element-dropdown/lib/module/components/Dropdown/index.js
+index 914d4d1..213f70b 100644
+--- a/node_modules/react-native-element-dropdown/lib/module/components/Dropdown/index.js
++++ b/node_modules/react-native-element-dropdown/lib/module/components/Dropdown/index.js
+@@ -159,14 +159,14 @@ const DropdownComponent = /*#__PURE__*/React.forwardRef((props, currentRef) => {
+         if (mode === 'auto') {
+           isFull = false;
+         }
+-        const top = isFull ? 20 : height + pageY + 2;
++        const top = isFull ? 20 : height + pageY;
+         const bottom = H - top + height;
+         const left = I18nManager.isRTL ? W - width - pageX : pageX;
+         setPosition({
+           isFull,
+           width: Math.floor(width),
+-          top: Math.floor(top + statusBarHeight),
+-          bottom: Math.floor(bottom - statusBarHeight),
++          top: Math.floor(top),
++          bottom: Math.floor(bottom),
+           left: Math.floor(left),
+           height: Math.floor(height)
+         });
+diff --git a/node_modules/react-native-element-dropdown/src/components/Dropdown/index.tsx b/node_modules/react-native-element-dropdown/src/components/Dropdown/index.tsx
+index 2a73f2f..55d0da5 100644
+--- a/node_modules/react-native-element-dropdown/src/components/Dropdown/index.tsx
++++ b/node_modules/react-native-element-dropdown/src/components/Dropdown/index.tsx
+@@ -201,15 +201,15 @@ const DropdownComponent = React.forwardRef<IDropdownRef, DropdownProps<any>>(
+             isFull = false;
+           }
+ 
+-          const top = isFull ? 20 : height + pageY + 2;
++          const top = isFull ? 20 : height + pageY;
+           const bottom = H - top + height;
+           const left = I18nManager.isRTL ? W - width - pageX : pageX;
+ 
+           setPosition({
+             isFull,
+             width: Math.floor(width),
+-            top: Math.floor(top + statusBarHeight),
+-            bottom: Math.floor(bottom - statusBarHeight),
++            top: Math.floor(top),
++            bottom: Math.floor(bottom),
+             left: Math.floor(left),
+             height: Math.floor(height),
+           });

package/template/src/app/App.tsx

@@ -0,0 +1,25 @@
+import { StatusBar } from 'react-native';
+import { AppProviders } from './providers';
+import { RootNavigator } from './navigation/root';
+import '@/i18n';
+import Toast from 'react-native-toast-message';
+import { useAppTheme } from '@/context/ThemeContext';
+import { toastConfig } from '@/services/toast';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+
+const App = () => {
+  const { theme, mode } = useAppTheme();
+  const isDark = mode === 'dark';
+
+  return (
+    <GestureHandlerRootView>
+      <AppProviders>
+        <StatusBar barStyle={isDark ? 'light-content' : 'dark-content'} />
+        <RootNavigator />
+        <Toast config={toastConfig} />
+      </AppProviders>
+    </GestureHandlerRootView>
+  );
+};
+
+export default App;

package/template/src/app/navigation/root.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { NavigationContainer } from '@react-navigation/native';
+import { navigationRef } from '@/types';
+import { useAppSelector } from '@/hooks/useAppSelector';
+import { selectIsAuthenticated } from '@/redux/selectors/auth.selectors';
+import AppStack from './stacks/app.stack';
+import AuthStack from './stacks/auth.stack';
+import GlobalLoader from '@/components/shared/GlobalLoader';
+
+interface RootNavigatorProps {
+  onReady?: () => void;
+}
+
+export const RootNavigator: React.FC<RootNavigatorProps> = ({ onReady }) => {
+  const isAuthenticated = useAppSelector(selectIsAuthenticated);
+  return (
+    <>
+      <NavigationContainer ref={navigationRef} onReady={onReady}>
+        {isAuthenticated ? <AppStack /> : <AuthStack />}
+      </NavigationContainer>
+      <GlobalLoader />
+    </>
+  );
+};

package/template/src/app/navigation/stacks/app.stack.tsx

@@ -0,0 +1,67 @@
+import { useAppTheme } from '@/context/ThemeContext';
+import MainTabs from '@/screens/app/main-tab';
+import ProfileSetup from '@/screens/app/profile-setup';
+import { FontFamily } from '@/theme';
+import { layout } from '@/theme/layout';
+import { AppStackParamList } from '@/types';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import AppBottomTabs from './app.tab';
+import { useAppSelector } from '@/hooks/useAppSelector';
+import { StyleSheet } from 'react-native';
+
+const Stack = createNativeStackNavigator<AppStackParamList>();
+
+const AppStack = () => {
+  const { color } = useAppTheme();
+  const { isProfileSetup } = useAppSelector(state => state.user);
+  return (
+    <Stack.Navigator
+      initialRouteName={isProfileSetup ? 'BottomTabs' : 'ProfileSetup'}
+      screenOptions={{
+        headerTitleAlign: 'center',
+        headerShown: true,
+        headerTitleStyle: [
+          styles.headerTitle,
+          { color: color.text_primary },
+        ],
+        contentStyle: [
+          { backgroundColor: color.background_primary },
+          layout.flex,
+        ],
+        headerStyle: { backgroundColor: color.background_secondary },
+        headerBackVisible: false,
+        animation: 'slide_from_right',
+        // headerShadowVisible: false,
+      }}
+    >
+      <Stack.Screen
+        name="ProfileSetup"
+        component={ProfileSetup}
+        options={{
+          headerTitle: 'Profile Setup',
+        }}
+      />
+      <Stack.Screen
+        component={AppBottomTabs}
+        name="BottomTabs"
+        options={{ headerShown: false }}
+      />
+      <Stack.Screen
+        name="MainTabs"
+        component={MainTabs}
+        options={{
+          headerTitle: 'Main Tab',
+        }}
+      />
+    </Stack.Navigator>
+  );
+};
+
+export default AppStack;
+
+const styles = StyleSheet.create({
+  headerTitle: {
+    fontFamily: FontFamily.InterTightMedium,
+    fontSize: 20,
+  },
+});