create-react-native-starter-kit 1.0.0 → 1.0.1

package/README.md

@@ -1,7 +1,7 @@
 # create-react-native-starter-kit
 
 [![npm version](https://img.shields.io/npm/v/create-react-native-starter-kit.svg)](https://www.npmjs.com/package/create-react-native-starter-kit)
-[![license](https://img.shields.io/npm/l/create-react-native-starter-kit.svg)](./LICENSE)
+[![license](https://img.shields.io/badge/license-MIT-blue.svg)](./LICENSE)
 [![GitHub](https://img.shields.io/badge/GitHub-satyam--narayan-181717?logo=github)](https://github.com/satyam-narayan/create-react-native-starter-kit)
 [![Buy Me a Coffee](https://img.shields.io/badge/Buy%20Me%20a%20Coffee-support-FFDD00?logo=buymeacoffee&logoColor=black)](https://www.buymeacoffee.com/satyamnarayan)
 

package/lib/patch-native.js

@@ -1,3 +1,4 @@
+const crypto = require('crypto');
 const fs = require('fs');
 const path = require('path');
 
@@ -253,6 +254,204 @@ ${fontStrings}
   return modified;
 }
 
+const SCENE_MANIFEST = `\t<key>UIApplicationSceneManifest</key>
+\t<dict>
+\t\t<key>UIApplicationSupportsMultipleScenes</key>
+\t\t<false/>
+\t\t<key>UISceneConfigurations</key>
+\t\t<dict>
+\t\t\t<key>UIWindowSceneSessionRoleApplication</key>
+\t\t\t<array>
+\t\t\t\t<dict>
+\t\t\t\t\t<key>UISceneConfigurationName</key>
+\t\t\t\t\t<string>Default Configuration</string>
+\t\t\t\t\t<key>UISceneDelegateClassName</key>
+\t\t\t\t\t<string>$(PRODUCT_MODULE_NAME).SceneDelegate</string>
+\t\t\t\t</dict>
+\t\t\t</array>
+\t\t</dict>
+\t</dict>`;
+
+// Same shape as the current react-native-community/template, limited to APIs that exist in
+// React Native 0.87 (no connectionOptions overload and no scene-based RCTLinkingManager helpers).
+const APP_DELEGATE_SOURCE = `import UIKit
+
+@main
+class AppDelegate: UIResponder, UIApplicationDelegate {
+  func application(
+    _ application: UIApplication,
+    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]? = nil
+  ) -> Bool {
+    true
+  }
+}
+`;
+
+const sceneDelegateSource = moduleName => `import React
+import React_RCTAppDelegate
+import ReactAppDependencyProvider
+import UIKit
+
+class SceneDelegate: RCTDefaultReactNativeFactoryDelegate, UIWindowSceneDelegate {
+  var window: UIWindow?
+  var reactNativeFactory: RCTReactNativeFactory?
+
+  func scene(
+    _ scene: UIScene,
+    willConnectTo session: UISceneSession,
+    options connectionOptions: UIScene.ConnectionOptions
+  ) {
+    guard let windowScene = scene as? UIWindowScene else {
+      return
+    }
+
+    dependencyProvider = RCTAppDependencyProvider()
+    reactNativeFactory = RCTReactNativeFactory(delegate: self)
+    window = UIWindow(windowScene: windowScene)
+
+    var launchOptions: [AnyHashable: Any] = [:]
+    if let url = connectionOptions.urlContexts.first?.url {
+      launchOptions[UIApplication.LaunchOptionsKey.url] = url
+    }
+
+    reactNativeFactory?.startReactNative(
+      withModuleName: "${moduleName}",
+      in: window,
+      launchOptions: launchOptions
+    )
+  }
+
+  func scene(_ scene: UIScene, openURLContexts URLContexts: Set<UIOpenURLContext>) {
+    guard let url = URLContexts.first?.url else {
+      return
+    }
+    RCTLinkingManager.application(UIApplication.shared, open: url, options: [:])
+  }
+
+  func scene(_ scene: UIScene, continue userActivity: NSUserActivity) {
+    RCTLinkingManager.application(
+      UIApplication.shared,
+      continue: userActivity,
+      restorationHandler: { _ in }
+    )
+  }
+
+  override func sourceURL(for bridge: RCTBridge) -> URL? {
+    self.bundleURL()
+  }
+
+  override func bundleURL() -> URL? {
+#if DEBUG
+    RCTBundleURLProvider.sharedSettings().jsBundleURL(forBundleRoot: "index")
+#else
+    Bundle.main.url(forResource: "main", withExtension: "jsbundle")
+#endif
+  }
+}
+`;
+
+/** Xcode object IDs are 24 uppercase hex chars and only need to be unique within the pbxproj. */
+function newPbxprojId(pbxproj, taken = []) {
+  for (;;) {
+    const id = crypto.randomBytes(12).toString('hex').toUpperCase();
+    if (!pbxproj.includes(id) && !taken.includes(id)) return id;
+  }
+}
+
+function findXcodeProject(iosDir) {
+  if (!fs.existsSync(iosDir)) return null;
+  const projectDir = fs
+    .readdirSync(iosDir)
+    .find(entry => entry.endsWith('.xcodeproj') && entry !== 'Pods.xcodeproj');
+  if (!projectDir) return null;
+  const pbxprojPath = path.join(iosDir, projectDir, 'project.pbxproj');
+  return fs.existsSync(pbxprojPath) ? pbxprojPath : null;
+}
+
+/**
+ * Add SceneDelegate.swift next to every AppDelegate.swift entry (file reference, group, Sources
+ * phase). Returns null when the project does not have the layout the template generates.
+ */
+function addSceneDelegateToPbxproj(pbxproj, appFolder) {
+  if (pbxproj.includes('SceneDelegate.swift')) return pbxproj;
+
+  const buildFileLine = /^([ \t]*)(\w+) \/\* AppDelegate\.swift in Sources \*\/ = \{isa = PBXBuildFile; fileRef = (\w+) \/\* AppDelegate\.swift \*\/; \};$/m;
+  const buildFile = pbxproj.match(buildFileLine);
+  if (!buildFile) return null;
+  const [, indent, appBuildId, appRefId] = buildFile;
+
+  const fileRefLine = new RegExp(`^[ \\t]*${appRefId} /\\* AppDelegate\\.swift \\*/ = \\{isa = PBXFileReference;.*\\};$`, 'm');
+  const groupChild = new RegExp(`^([ \\t]*)${appRefId} /\\* AppDelegate\\.swift \\*/,$`, 'm');
+  const sourcesEntry = new RegExp(`^([ \\t]*)${appBuildId} /\\* AppDelegate\\.swift in Sources \\*/,$`, 'm');
+  if (!fileRefLine.test(pbxproj) || !groupChild.test(pbxproj) || !sourcesEntry.test(pbxproj)) {
+    return null;
+  }
+
+  const sceneFileRefId = newPbxprojId(pbxproj);
+  const sceneBuildFileId = newPbxprojId(pbxproj, [sceneFileRefId]);
+
+  return pbxproj
+    .replace(
+      buildFileLine,
+      match =>
+        `${match}\n${indent}${sceneBuildFileId} /* SceneDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = ${sceneFileRefId} /* SceneDelegate.swift */; };`,
+    )
+    .replace(
+      fileRefLine,
+      match =>
+        `${match}\n${indent}${sceneFileRefId} /* SceneDelegate.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; name = SceneDelegate.swift; path = ${appFolder}/SceneDelegate.swift; sourceTree = "<group>"; };`,
+    )
+    .replace(groupChild, (match, childIndent) => `${match}\n${childIndent}${sceneFileRefId} /* SceneDelegate.swift */,`)
+    .replace(
+      sourcesEntry,
+      (match, entryIndent) => `${match}\n${entryIndent}${sceneBuildFileId} /* SceneDelegate.swift in Sources */,`,
+    );
+}
+
+/**
+ * Bring an AppDelegate-only iOS project (React Native <= 0.87) to the scene-based layout of the
+ * current template: SceneDelegate.swift owns the window, AppDelegate is empty, Info.plist declares
+ * the scene. Newer projects that already ship SceneDelegate.swift are left as generated.
+ */
+function patchIOSSceneLifecycle(projectDir) {
+  const iosDir = path.join(projectDir, 'ios');
+  const appDelegatePath = findFile(iosDir, 'AppDelegate.swift');
+  if (!appDelegatePath) {
+    console.log('⚠️ Could not find AppDelegate.swift, skipped UIScene setup');
+    return false;
+  }
+
+  const appDir = path.dirname(appDelegatePath);
+  const sceneDelegatePath = path.join(appDir, 'SceneDelegate.swift');
+  if (fs.existsSync(sceneDelegatePath)) {
+    return false;
+  }
+
+  const appDelegate = fs.readFileSync(appDelegatePath, 'utf8');
+  const moduleName = appDelegate.match(/withModuleName:\s*"([^"]+)"/);
+  const infoPlistPath = path.join(appDir, 'Info.plist');
+  const pbxprojPath = findXcodeProject(iosDir);
+  const pbxproj = pbxprojPath && addSceneDelegateToPbxproj(fs.readFileSync(pbxprojPath, 'utf8'), path.basename(appDir));
+
+  if (!moduleName || !appDelegate.includes('RCTReactNativeFactory') || !fs.existsSync(infoPlistPath) || !pbxproj) {
+    console.log('⚠️ iOS project does not match the React Native template, skipped UIScene setup');
+    return false;
+  }
+
+  let infoPlist = fs.readFileSync(infoPlistPath, 'utf8');
+  if (!infoPlist.includes('UIApplicationSceneManifest')) {
+    infoPlist = infoPlist.replace(/<\/dict>\s*<\/plist>\s*$/, `${SCENE_MANIFEST}\n</dict>\n</plist>\n`);
+  }
+
+  fs.writeFileSync(sceneDelegatePath, sceneDelegateSource(moduleName[1]), 'utf8');
+  fs.writeFileSync(appDelegatePath, APP_DELEGATE_SOURCE, 'utf8');
+  fs.writeFileSync(infoPlistPath, infoPlist, 'utf8');
+  fs.writeFileSync(pbxprojPath, pbxproj, 'utf8');
+
+  console.log('✅ Moved iOS app startup to SceneDelegate.swift (UIScene life cycle)');
+  return true;
+}
+
 /**
  * Keep CocoaPods on the same iOS minimum as the app target.
  */
@@ -372,6 +571,7 @@ function patchAllNative(projectDir) {
   patchGradleWrapper(projectDir);
   patchGradleProperties(projectDir);
   patchIOSInfoPlist(projectDir);
+  patchIOSSceneLifecycle(projectDir);
   patchIOSPodfile(projectDir);
 }
 
@@ -383,5 +583,6 @@ module.exports = {
   patchGradleWrapper,
   patchGradleProperties,
   patchIOSInfoPlist,
+  patchIOSSceneLifecycle,
   patchIOSPodfile,
 };

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "create-react-native-starter-kit",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "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"
+    "create-react-native-starter-kit": "bin/create-react-native-starter-kit.js"
   },
   "files": [
     "bin",

package/template/src/assets/icons/index.ts

@@ -8,6 +8,7 @@ import Eye from './eye.svg';
 import EyeClose from './eyeClose.svg';
 import Folder from './folder.svg';
 import Home from './home.svg';
+import Log_out from './log_out.svg';
 import Setting from './setting.svg';
 import Tooltip_dark from './tooltip_dark.svg';
 import Tooltip_light from './tooltip_light.svg';
@@ -24,6 +25,7 @@ export const Icons = {
   eyeClose: EyeClose,
   folder: Folder,
   home: Home,
+  log_out: Log_out,
   setting: Setting,
   tooltip_dark: Tooltip_dark,
   tooltip_light: Tooltip_light,

package/template/src/assets/icons/log_out.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 4H6C4.89543 4 4 4.89543 4 6V18C4 19.1046 4.89543 20 6 20H10" stroke="#F2574C" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16 8L20 12M20 12L16 16M20 12H10" stroke="#F2574C" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/template/src/components/shared/form-input/FormInput.tsx

@@ -9,6 +9,7 @@ import { useAppTheme } from '@/context/ThemeContext';
 import Icon from '../Icon';
 import { isIOS } from '@/constants/device';
 import { FORM_FIELD } from './formFieldStyles';
+import { spacing } from '@/theme';
 
 const FormInput = <T extends FieldValues>({
   control,
@@ -112,7 +113,7 @@ export default FormInput;
 const styles = StyleSheet.create({
   container: {
     width: '100%',
-    marginBottom: 0,
+    marginBottom: spacing.md,
   },
   labelCont: {
     flexDirection: 'row',

package/template/src/components/shared/skelton/layouts/home.layout.ts

@@ -1,26 +1,16 @@
 import { spacing } from '@/theme';
-import { normalize } from '@/utils/normalize';
 import { ICustomViewStyle } from 'react-native-reanimated-skeleton/lib/typescript/constants';
 
 const AVATAR_SIZE = 150;
 
-/** Matches Home content: title → avatar. */
+/** Matches Home content: the centered AvatarPicker (the title is rendered outside the boundary). */
 export const homeShimmerLayout = (): ICustomViewStyle[] => [
-  // Title
-  {
-    key: 'title',
-    width: normalize(160),
-    height: normalize(24),
-    borderRadius: 8,
-    alignSelf: 'center',
-    marginTop: spacing.md,
-  },
-  // AvatarPicker
   {
     key: 'avatar',
     width: AVATAR_SIZE,
     height: AVATAR_SIZE,
     borderRadius: AVATAR_SIZE / 2,
+    alignSelf: 'center',
     marginTop: spacing.md,
   },
 ];

package/template/src/screens/app/main-tab/index.tsx

@@ -57,7 +57,7 @@ const MainTabs = ({ navigation }: props) => {
           overrideVariantColor: color.border,
           overrideVariantTextColor: color.text_secondary,
         }}
-        icon="clock"
+        icon="log_out"
         onPressPrimaryBtn={() => {
           setIsAlertOpen(false);
           handleLogout();

package/template/src/screens/app/profile-setup/index.tsx

@@ -54,10 +54,9 @@ const ProfileSetup = ({ navigation }: Props) => {
   };
   return (
     <KeyboardAvoidingView
-      style={[layout.flexContainer,{paddingBottom:bottom+spacing.sm}]}
+      style={layout.flexContainer}
       behavior={isIOS ? 'padding' : 'height'}
       keyboardVerticalOffset={isIOS ? 64 : 0}
-      contentContainerStyle={{flexGrow:1}}
     >
       <ScrollView showsVerticalScrollIndicator={false}>
       <FormInput
@@ -148,12 +147,14 @@ const ProfileSetup = ({ navigation }: Props) => {
       />
 
     </ScrollView>
+      {/* KeyboardAvoidingView overrides its own paddingBottom, so the inset is a margin here. */}
       <CustomButton
         title={t('common.continue')}
         onPress={handleSubmit(handleContinue)}
         variant="primary"
         fullWidth
-        />
+        containerStyle={{ marginTop: spacing.sm, marginBottom: bottom + spacing.sm }}
+      />
     </KeyboardAvoidingView>
   );
 };

package/template/src/screens/auth/login/index.tsx

@@ -52,6 +52,7 @@ const Login = ({ navigation }: Props) => {
         weight="600"
         textColor={color.text_primary}
         textAlign="center"
+        style={layout.marginBottomLg}
       >
         {t('auth.welcome-back')}
       </CustomText>
@@ -69,8 +70,8 @@ const Login = ({ navigation }: Props) => {
           field: t('auth.email'),
         })}
         variant="text"
-        isTooltip
-        tooltipMessage='We"ll never share your email with anyone else.'
+        // isTooltip
+        // tooltipMessage='We"ll never share your email with anyone else.'
       />
 
       <FormInput

package/template/src/screens/auth/signup/index.tsx

@@ -42,6 +42,7 @@ const Signup = ({ navigation }: Props) => {
         weight="600"
         textColor={color.text_primary}
         textAlign="center"
+        style={layout.marginBottomLg}
       >
         {t('auth.lets-get-started')}
       </CustomText>

package/template/src/theme/layout.ts

@@ -19,4 +19,5 @@ export const layout = StyleSheet.create({
   separator: { height: 1, marginVertical: spacing.md },
   marginTopMd: { marginTop: spacing.md },
   marginBottomMd: { marginBottom: spacing.md },
+  marginBottomLg: { marginBottom: spacing.lg },
 });