Separate uilib-native (#3395)

* Separate uilib-native

* Fixes

Author: M-i-k-e-l

android/app/build.gradle

@@ -125,7 +125,6 @@ dependencies {
     implementation("com.facebook.react:flipper-integration:0.73.9")
 
     implementation project(':react-native-navigation')
-    implementation project(':react-native-ui-lib')
     implementation 'com.facebook.fresco:fresco:2.5.0'
     implementation 'com.facebook.fresco:animated-gif:2.5.0'
 

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

@@ -22,7 +22,7 @@ class MainApplication : NavigationApplication() {
             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())
+//              addAll(UiLibPackageList(this@MainApplication).getPackageList())
               // add(MyReactNativePackage())
             }
 

android/settings.gradle

@@ -1,11 +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 = 'rnuilib'
-// apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
 include ':app'
 includeBuild('../node_modules/@react-native/gradle-plugin')
-
-include ':react-native-ui-lib'
-project(':react-native-ui-lib').projectDir = new File(rootProject.projectDir, '../lib/android')

ios/Podfile

@@ -25,8 +25,6 @@ if linkage != nil
 end
 
 target 'rnuilib' do
-  pod 'ReactNativeUiLib', :path => "../lib/ReactNativeUiLib.podspec"
-
   config = use_native_modules!
 
   use_react_native!(

ios/rnuilib.xcodeproj/project.pbxproj

@@ -878,7 +878,8 @@
 				OTHER_CPLUSPLUSFLAGS = "$(inherited)";
 				OTHER_LDFLAGS = (
 					"$(inherited)",
-					" ",
+					"-Wl",
+					"-ld_classic",
 				);
 				REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native";
 				SDKROOT = iphoneos;
@@ -939,7 +940,8 @@
 				OTHER_CPLUSPLUSFLAGS = "$(inherited)";
 				OTHER_LDFLAGS = (
 					"$(inherited)",
-					" ",
+					"-Wl",
+					"-ld_classic",
 				);
 				REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native";
 				SDKROOT = iphoneos;

jestSetup/jest-setup.js

@@ -1,4 +1,4 @@
-import {NativeModules, AccessibilityInfo, Animated} from 'react-native';
+import {AccessibilityInfo, Animated} from 'react-native';
 // ========= Mock Object.defineProperty to always allow overriding =========
 const originalDefineProperty = Object.defineProperty;
 Object.defineProperty = (obj, prop, desc) => {

lib/package.json

@@ -1,9 +1,9 @@
 {
   "name": "uilib-native",
-  "version": "4.3.2",
+  "version": "4.4.0",
   "homepage": "https://github.com/wix/react-native-ui-lib",
   "description": "uilib native components (separated from js components)",
-  "main": "components/index.js",
+  "main": "components/index",
   "scripts": {
     "releaseNative": "node ./scripts/releaseNative.js"
   },

lib/react-native.config.js

@@ -0,0 +1,22 @@
+module.exports = {
+  dependency: {
+    platforms: {
+      /* TODO: Once we upgrade to RN69 we should try using podspecPath again, for now I copied ReactNativeUiLib.podspec file to the root - it seems to work
+      I copied it, because we need it for both the main uilib and the uilib-native package */
+      // ios: {
+      //   podspecPath: './lib/ReactNativeUiLib.podspec'
+      // },
+      android: {
+        sourceDir: './android/',
+        packageImportPath: `import com.wix.reactnativeuilib.dynamicfont.DynamicFontPackage;
+import com.wix.reactnativeuilib.highlighterview.HighlighterViewPackage;
+import com.wix.reactnativeuilib.keyboardinput.KeyboardInputPackage;
+import com.wix.reactnativeuilib.textinput.TextInputDelKeyHandlerPackage;`,
+        packageInstance: `new DynamicFontPackage(),
+      new HighlighterViewPackage(),
+      new TextInputDelKeyHandlerPackage(),
+      new KeyboardInputPackage(getApplication())`
+      }
+    }
+  }
+};

package.json

@@ -54,6 +54,7 @@
     "react-native-redash": "^12.0.3",
     "semver": "^5.5.0",
     "tinycolor2": "^1.4.2",
+    "uilib-native": "^4.3.2",
     "url-parse": "^1.2.0",
     "wix-react-native-text-size": "1.0.9"
   },
@@ -137,7 +138,7 @@
   "jest": {
     "preset": "react-native",
     "transformIgnorePatterns": [
-      "node_modules/(?!(@react-native|react-native|react-native-reanimated|react-native-redash)/)"
+      "node_modules/(?!(@react-native|react-native|react-native-reanimated|react-native-redash|uilib-native)/)"
     ],
     "testPathIgnorePatterns": [
       "/e2e/",

react-native.config.js

@@ -7,7 +7,7 @@ module.exports = {
       //   podspecPath: './lib/ReactNativeUiLib.podspec'
       // },
       android: {
-        sourceDir: './lib/android/',
+        sourceDir: '../uilib-native/android/',
         packageImportPath: `import com.wix.reactnativeuilib.dynamicfont.DynamicFontPackage;
 import com.wix.reactnativeuilib.highlighterview.HighlighterViewPackage;
 import com.wix.reactnativeuilib.keyboardinput.KeyboardInputPackage;

scripts/build/buildPackages/buildCustomPackages.js

@@ -4,7 +4,7 @@ const _ = require('lodash');
 const packages = [
   {
     filename: 'keyboard.js',
-    content: `module.exports = require('./lib/components/Keyboard').default;\n`
+    content: `module.exports = require('uilib-native').Keyboard;\n`
   },
   {
     filename: 'assets.js',

src/components/featureHighlight/index.tsx

@@ -10,14 +10,13 @@ import {
   TouchableWithoutFeedbackProps,
   LayoutChangeEvent
 } from 'react-native';
+import {HighlighterOverlayView} from 'uilib-native';
 import {Colors, Typography} from '../../style';
 import {Constants, asBaseComponent} from '../../commons/new';
 import View from '../view';
 import Text from '../text';
 import Button, {ButtonProps, ButtonSize} from '../button';
 import PageControl, {PageControlProps} from '../pageControl';
-//@ts-expect-error
-import {HighlighterOverlayView} from '../../nativeComponents';
 
 const defaultOverlayColor = Colors.rgba(Colors.black, 0.82);
 const defaultTextColor = Colors.white;

src/index.ts

@@ -3,7 +3,7 @@ export {default as Assets} from './assets';
 export type {emojis as EmojisAssetsType} from './assets/emojis';
 export * from './style';
 export * from './services';
-export * from '../lib/components';
+export * from 'uilib-native';
 export {
   asBaseComponent,
   Config,

src/nativeComponents/index.js

@@ -8412,7 +8412,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lodash@npm:4.17.x, lodash@npm:4.x.x, lodash@npm:^4, lodash@npm:^4.17.10, lodash@npm:^4.17.21":
+"lodash@npm:4.17.x, lodash@npm:4.x.x, lodash@npm:^4, lodash@npm:^4.0.0, lodash@npm:^4.17.10, lodash@npm:^4.17.21":
   version: 4.17.21
   resolution: "lodash@npm:4.17.21"
   checksum: eb835a2e51d381e561e508ce932ea50a8e5a68f4ebdd771ea240d3048244a8d13658acbd502cd4829768c56f2e16bdd4340b9ea141297d472517b83868e677f7
@@ -10367,6 +10367,7 @@ __metadata:
     shell-utils: ^1.0.10
     tinycolor2: ^1.4.2
     typescript: 5.0.4
+    uilib-native: ^4.3.2
     url-parse: ^1.2.0
     wix-react-native-text-size: 1.0.9
   peerDependencies:
@@ -12037,6 +12038,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"uilib-native@npm:^4.3.2":
+  version: 4.3.2
+  resolution: "uilib-native@npm:4.3.2"
+  dependencies:
+    lodash: ^4.0.0
+    prop-types: ^15.5.10
+  peerDependencies:
+    react: ^16.0.0
+    react-native: ^0.51.0
+  checksum: 051fbba7a351f5ab098c8471a8b35f05c1b61df55b94b0fbb56d594e2fb856bc4ed1bc0575aedaa0659da5f14c4a0d2b4e6b4d48e5bce6eefab0067b5352b95f
+  languageName: node
+  linkType: hard
+
 "unbox-primitive@npm:^1.0.2":
   version: 1.0.2
   resolution: "unbox-primitive@npm:1.0.2"