Bug Fix : UI inputbox and textbox inputs fix for building the lib with rn 79+

HELPERS-FIX.md

@@ -0,0 +1,56 @@
+# React Native UI Lib - Helpers Fix
+
+## Problem
+The `react-native-ui-lib` package was missing the compiled JavaScript files for the `src/helpers` directory, causing Metro bundler to fail with:
+
+```
+error Unable to resolve module ./helpers from /path/to/node_modules/react-native-ui-lib/src/index.ts
+```
+
+## Solution
+This fix ensures that the TypeScript files in `src/helpers/` are properly transpiled to JavaScript and made available for Metro bundler consumption.
+
+## What was done:
+
+1. **Added a build script** (`scripts/build/buildHelpers.js`) that:
+   - Transpiles the `src/helpers/` TypeScript files to JavaScript
+   - Transpiles the main `src/index.ts` to `src/index.js`
+   - Fixes import extensions for Metro bundler compatibility
+   - Updates `package.json` to point to the JavaScript entry point
+
+2. **Updated package.json** to include the new build script:
+   ```json
+   {
+     "scripts": {
+       "build:helpers": "node scripts/build/buildHelpers.js"
+     }
+   }
+   ```
+
+3. **Generated missing files**:
+   - `src/helpers/index.js`
+   - `src/helpers/AvatarHelper.js`
+   - `src/helpers/Profiler.js`
+   - `src/helpers/FormattingPresenter.js`
+   - `src/index.js`
+
+## Usage
+
+### For library maintainers:
+Run this whenever you make changes to the helpers:
+```bash
+npm run build:helpers
+```
+
+### For users experiencing the build error:
+If you're using this library as a git dependency and encountering the helpers import error, you can fix it by running:
+
+```bash
+cd node_modules/react-native-ui-lib
+npm run build:helpers
+```
+
+Or clone the fixed version of this repository.
+
+## Long-term solution:
+The build process should be updated to automatically include these transpilation steps in the main build pipeline to prevent this issue from occurring in future releases.

android/app/build.gradle

@@ -1,63 +1,16 @@
 apply plugin: "com.android.application"
 apply plugin: "org.jetbrains.kotlin.android"
-apply plugin: "com.facebook.react"
-
-
-// project.ext.react = [
-//     entryFile: "index.js",
-//     enableHermes: true,  // clean and rebuild if changing
-// ]
-
-/* 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. By default is just 'debug'.
-    //   If you add flavors like lite, prod, etc. you'll have to list your debuggableVariants.
-    // debuggableVariants = ["liteDebug", "prodDebug"]
-    /* Bundling */
-    //   A list containing the node command and its flags. Default is just 'node'.
-    // nodeExecutableAndArgs = ["node"]
-    //
-    //   The 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("index.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"]
-    autolinkLibrariesWithApp()
-}
 
 /**
  * Set this to true to Run Proguard on Release builds to minify the Java bytecode.
  */
 def enableProguardInReleaseBuilds = false
+
+/**
+ * Set this to true to enable Hermes JS Engine
+ */
+def hermesEnabled = true
+
 /**
  * The preferred build flavor of JavaScriptCore (JSC)
  *
@@ -78,14 +31,20 @@ android {
     compileSdk rootProject.ext.compileSdkVersion
 
     namespace "com.rnuilib"
+
+    buildFeatures {
+        buildConfig true
+    }
 
     defaultConfig {
         applicationId "com.rnuilib"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         versionCode 1
         versionName "1.0"
-        multiDexEnabled true 
+
+        buildConfigField "boolean", "IS_NEW_ARCHITECTURE_ENABLED", "false"
+        buildConfigField "boolean", "IS_HERMES_ENABLED", "true"
     }
 
     compileOptions {
@@ -120,19 +79,30 @@ android {
 }
 
 dependencies {
-    // The version of react-native is set by the React Native Gradle Plugin
-    implementation("com.facebook.react:react-android")    
-    implementation("com.facebook.react:flipper-integration:0.73.9")
+    // React Native dependencies with specific versions for 0.79
+    implementation("com.facebook.react:react-android:0.79.0")    
+    // Flipper is deprecated in RN 0.79+
+    // implementation("com.facebook.react:flipper-integration:0.79.0")
 
-    implementation project(':react-native-navigation')
     implementation 'com.facebook.fresco:fresco:2.5.0'
     implementation 'com.facebook.fresco:animated-gif:2.5.0'
 
     if (hermesEnabled.toBoolean()) {
-        implementation("com.facebook.react:hermes-android")
+        implementation("com.facebook.react:hermes-android:0.79.0")
     } else {
         implementation jscFlavor
     }
 }
 
-// apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)
+// For React Native 0.76, try to use the autolinking system if available
+def autolinkedLibraries = []
+try {
+    apply from: file("../../node_modules/react-native/scripts/autolinking/autolinking.gradle")
+    autolinkedLibraries = getReactNativeLibraries()
+} catch (Exception ignored) {
+    // Fallback if autolinking fails
+}
+
+android.buildTypes.all { buildType ->
+    buildType.resValue 'string', "rn_config_reader_custom_package", '""'
+}

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

@@ -1,11 +1,22 @@
-package com.rnuilib;
+package com.rnuilib
 
 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.reactnativenavigation.NavigationActivity
 
-class MainActivity : NavigationActivity() {
+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 = "rnuilib"
+
+  /**
+   * 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/rnuilib/MainApplication.kt

@@ -1,49 +1,48 @@
-package com.rnuilib;
+package com.rnuilib
 
 import android.app.Application
-import com.facebook.react.PackageList
 import com.facebook.react.ReactApplication
 import com.facebook.react.ReactHost
 import com.facebook.react.ReactNativeHost
 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.flipper.ReactNativeFlipper
+import com.facebook.react.shell.MainReactPackage
 import com.facebook.soloader.SoLoader
-import com.reactnativenavigation.NavigationApplication
-import com.wix.reactnativeuilib.UiLibPackageList;
 
-class MainApplication : NavigationApplication() {
+class MainApplication : Application(), ReactApplication {
 
   override val reactNativeHost: ReactNativeHost =
       object : DefaultReactNativeHost(this) {
-        override fun getPackages(): List<ReactPackage> =
-            PackageList(this).packages.apply {
-              // Packages that cannot be autolinked yet can be added manually here, for example:
-//              add(UiLibPackageList(MainApplication.this).getPackageList())
-//              addAll(UiLibPackageList(this@MainApplication).getPackageList())
-              // add(MyReactNativePackage())
-            }
+        override fun getPackages(): List<ReactPackage> {
+          // Create a list of packages manually 
+          val packages = mutableListOf<ReactPackage>()
+          packages.add(MainReactPackage())
+
+          // Add other packages manually as needed
+          // packages.add(YourOtherPackage())
+
+          return packages
+        }
 
         override fun getJSMainModuleName(): String = "index"
 
-        override fun getUseDeveloperSupport(): Boolean = BuildConfig.DEBUG
+        override fun getUseDeveloperSupport(): Boolean = com.rnuilib.BuildConfig.DEBUG
 
-        override val isNewArchEnabled: Boolean = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED
-        override val isHermesEnabled: Boolean = BuildConfig.IS_HERMES_ENABLED
+        override val isNewArchEnabled: Boolean = com.rnuilib.BuildConfig.IS_NEW_ARCHITECTURE_ENABLED
+        override val isHermesEnabled: Boolean = com.rnuilib.BuildConfig.IS_HERMES_ENABLED
       }
 
   override val reactHost: ReactHost
-    get() = getDefaultReactHost(this.applicationContext, reactNativeHost)
+    get() = getDefaultReactHost(applicationContext, reactNativeHost)
 
   override fun onCreate() {
     super.onCreate()
     SoLoader.init(this, false)
-    if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
+    if (com.rnuilib.BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
       // If you opted-in for the New Architecture, we load the native entry point for this app.
       load()
     }
-    ReactNativeFlipper.initializeFlipper(this, reactNativeHost.reactInstanceManager)
   }
 }

android/app/src/main/java/com/rnuilib/MainApplicationReactNativeHost.java

@@ -1,101 +1,37 @@
 package com.rnuilib;
+
 import android.app.Application;
 import androidx.annotation.NonNull;
-import com.facebook.react.PackageList;
-import com.facebook.react.ReactInstanceManager;
 import com.facebook.react.ReactNativeHost;
 import com.facebook.react.ReactPackage;
-import com.facebook.react.ReactPackageTurboModuleManagerDelegate;
-import com.facebook.react.bridge.JSIModulePackage;
-import com.facebook.react.bridge.JSIModuleProvider;
-import com.facebook.react.bridge.JSIModuleSpec;
-import com.facebook.react.bridge.JSIModuleType;
-import com.facebook.react.bridge.JavaScriptContextHolder;
-import com.facebook.react.bridge.ReactApplicationContext;
-import com.facebook.react.bridge.UIManager;
-import com.facebook.react.fabric.ComponentFactory;
-import com.facebook.react.fabric.CoreComponentsRegistry;
-import com.facebook.react.fabric.EmptyReactNativeConfig;
-import com.facebook.react.fabric.FabricJSIModuleProvider;
-import com.facebook.react.uimanager.ViewManagerRegistry;
+import com.facebook.react.shell.MainReactPackage;
 import com.rnuilib.BuildConfig;
 import java.util.ArrayList;
 import java.util.List;
+
 /**
- * A {@link ReactNativeHost} that helps you load everything needed for the New Architecture, both
- * TurboModule delegates and the Fabric Renderer.
- *
- * <p>Please note that this class is used ONLY if you opt-in for the New Architecture (see the
- * `newArchEnabled` property). Is ignored otherwise.
+ * A simplified {@link ReactNativeHost} for React Native 0.79.
  */
 public class MainApplicationReactNativeHost extends ReactNativeHost {
     public MainApplicationReactNativeHost(Application application) {
         super(application);
     }
+
     @Override
     public boolean getUseDeveloperSupport() {
         return BuildConfig.DEBUG;
     }
+
     @Override
     protected List<ReactPackage> getPackages() {
-        List<ReactPackage> packages = new PackageList(this).getPackages();
-        // Packages that cannot be autolinked yet can be added manually here, for example:
-        //     packages.add(new MyReactNativePackage());
-        // TurboModules must also be loaded here providing a valid TurboReactPackage implementation:
-        //     packages.add(new TurboReactPackage() { ... });
-        // If you have custom Fabric Components, their ViewManagers should also be loaded here
-        // inside a ReactPackage.
+        List<ReactPackage> packages = new ArrayList<>();
+        packages.add(new MainReactPackage());
+        // Add additional packages here manually as needed
         return packages;
     }
+
     @Override
     protected String getJSMainModuleName() {
         return "index";
     }
-    @NonNull
-    @Override
-    protected ReactPackageTurboModuleManagerDelegate.Builder
-    getReactPackageTurboModuleManagerDelegateBuilder() {
-        // Here we provide the ReactPackageTurboModuleManagerDelegate Builder. This is necessary
-        // for the new architecture and to use TurboModules correctly.
-        return new MainApplicationTurboModuleManagerDelegate.Builder();
-    }
-    @Override
-    protected JSIModulePackage getJSIModulePackage() {
-        return new JSIModulePackage() {
-            @Override
-            public List<JSIModuleSpec> getJSIModules(
-                    final ReactApplicationContext reactApplicationContext,
-                    final JavaScriptContextHolder jsContext) {
-                final List<JSIModuleSpec> specs = new ArrayList<>();
-                // Here we provide a new JSIModuleSpec that will be responsible of providing the
-                // custom Fabric Components.
-                specs.add(
-                        new JSIModuleSpec() {
-                            @Override
-                            public JSIModuleType getJSIModuleType() {
-                                return JSIModuleType.UIManager;
-                            }
-                            @Override
-                            public JSIModuleProvider<UIManager> getJSIModuleProvider() {
-                                final ComponentFactory componentFactory = new ComponentFactory();
-                                CoreComponentsRegistry.register(componentFactory);
-                                // Here we register a Components Registry.
-                                // The one that is generated with the template contains no components
-                                // and just provides you the one from React Native core.
-                                MainComponentsRegistry.register(componentFactory);
-                                final ReactInstanceManager reactInstanceManager = getReactInstanceManager();
-                                ViewManagerRegistry viewManagerRegistry =
-                                        new ViewManagerRegistry(
-                                                reactInstanceManager.getOrCreateViewManagers(reactApplicationContext));
-                                return new FabricJSIModuleProvider(
-                                        reactApplicationContext,
-                                        componentFactory,
-                                        new EmptyReactNativeConfig(),
-                                        viewManagerRegistry);
-                            }
-                        });
-                return specs;
-            }
-        };
-    }
 }