Native lib reorder and fix ios

demo/src/screens/nativeComponentScreens/SafeAreaSpacerViewScreen.tsx

@@ -23,6 +23,7 @@ export default class SafeAreaSpacerViewScreen extends PureComponent {
               <Text red50> SafeAreaSpacerView </Text>
               {'can be used as a BOTTOM or TOP spacer and will get the height of the safe area insets'}
             </Text>
+            <SafeAreaSpacerView style={{width: 100, backgroundColor: 'red'}}/>
           </View>
         </ScrollView>
         <View style={styles.topView}>

lib/components/HighlighterOverlayView/HighlighterViewNativeComponent.ts

@@ -0,0 +1,77 @@
+import type {ViewProps} from 'react-native';
+import type {
+  Float,
+  Int32,
+  WithDefault
+} from 'react-native/Libraries/Types/CodegenTypes';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+
+export interface HighlightFrame {
+  x: Float;
+  y: Float;
+  width: Float;
+  height: Float;
+}
+
+export interface MinimumRectSize {
+  width: Float;
+  height: Float;
+}
+
+export interface HighlightViewTagParams {
+  paddingLeft?: WithDefault<Float, 0>;
+  paddingTop?: WithDefault<Float, 0>;
+  paddingRight?: WithDefault<Float, 0>;
+  paddingBottom?: WithDefault<Float, 0>;
+  offsetX?: WithDefault<Float, 0>;
+  offsetY?: WithDefault<Float, 0>;
+}
+
+export interface NativeProps extends ViewProps {
+  /**
+   * The frame to highlight with x, y, width, height coordinates
+   */
+  highlightFrame?: HighlightFrame;
+
+  /**
+   * The overlay color (processed color int for Android)
+   */
+  overlayColor?: WithDefault<Int32, 0>;
+
+  /**
+   * The border radius for the highlighted area
+   */
+  borderRadius?: WithDefault<Float, 0>;
+
+  /**
+   * The stroke color (processed color int for Android)
+   */
+  strokeColor?: WithDefault<Int32, 0>;
+
+  /**
+   * The stroke width
+   */
+  strokeWidth?: WithDefault<Float, 0>;
+
+  /**
+   * The React tag of the view to highlight
+   */
+  highlightViewTag?: Int32;
+
+  /**
+   * Parameters for view-based highlighting including padding and offset
+   */
+  highlightViewTagParams?: HighlightViewTagParams;
+
+  /**
+   * Minimum rectangle size for the highlight area
+   */
+  minimumRectSize?: MinimumRectSize;
+
+  /**
+   * Inner padding for the highlight area
+   */
+  innerPadding?: WithDefault<Float, 0>;
+}
+
+export default codegenNativeComponent<NativeProps>('HighlighterView');

lib/components/HighlighterOverlayView.tsx → lib/components/HighlighterOverlayView/index.tsx

@@ -1,7 +1,10 @@
 import React from 'react';
-import {requireNativeComponent, processColor, Platform, StyleSheet, Modal, ViewStyle} from 'react-native';
+import {processColor, StyleSheet, Modal, ViewStyle} from 'react-native';
+// Import the Codegen specification for New Architecture
+import HighlighterViewNativeComponent, {
+  HighlightViewTagParams as NativeHighlightViewTagParams
+} from './HighlighterViewNativeComponent';
 
-const NativeHighlighterView = requireNativeComponent('HighlighterView');
 const DefaultOverlayColor = 'rgba(0, 0, 0, 0.5)';
 
 type HighlightFrameType = {
@@ -34,7 +37,6 @@ export type HighlighterOverlayViewProps = {
   testID?: string;
 };
 
-
 const HighlighterOverlayView = (props: HighlighterOverlayViewProps) => {
   const {
     overlayColor,
@@ -52,13 +54,22 @@ const HighlighterOverlayView = (props: HighlighterOverlayViewProps) => {
     innerPadding
   } = props;
 
-  let overlayColorToUse = overlayColor || DefaultOverlayColor;
-  let strokeColorToUse = strokeColor;
-  if (Platform.OS === 'android') {
-    // @ts-ignore
-    overlayColorToUse = processColor(overlayColorToUse);
-    // @ts-ignore
-    strokeColorToUse = processColor(strokeColorToUse);
+  // Process colors for New Architecture Codegen component
+  const overlayColorToUse = processColor(overlayColor || DefaultOverlayColor) as number;
+  const strokeColorToUse = strokeColor ? (processColor(strokeColor) as number) : undefined;
+
+  // Convert highlightViewTagParams to match native Codegen spec
+  let nativeHighlightViewTagParams: NativeHighlightViewTagParams | undefined;
+  if (highlightViewTagParams) {
+    const padding = typeof highlightViewTagParams.padding === 'number' ? highlightViewTagParams.padding : 0;
+    nativeHighlightViewTagParams = {
+      paddingLeft: padding,
+      paddingTop: padding,
+      paddingRight: padding,
+      paddingBottom: padding,
+      offsetX: highlightViewTagParams.offset?.x || 0,
+      offsetY: highlightViewTagParams.offset?.y || 0
+    };
   }
 
   return (
@@ -68,18 +79,19 @@ const HighlighterOverlayView = (props: HighlighterOverlayViewProps) => {
       transparent
       onRequestClose={() => onRequestClose?.()}
     >
-      <NativeHighlighterView
-        // @ts-ignore, this became private, not sure if I should remove it 
+      <HighlighterViewNativeComponent
         highlightFrame={highlightFrame}
         style={[style, {...StyleSheet.absoluteFillObject, backgroundColor: 'transparent'}]}
         overlayColor={overlayColorToUse}
         borderRadius={borderRadius}
         strokeColor={strokeColorToUse}
         strokeWidth={strokeWidth}
-        highlightViewTag={highlightViewTag}
-        highlightViewTagParams={highlightViewTagParams}
+        highlightViewTag={highlightViewTag || undefined}
+        highlightViewTagParams={nativeHighlightViewTagParams}
         minimumRectSize={minimumRectSize}
         innerPadding={innerPadding}
+        testID={props.testID}
+        accessible={props.accessible}
       />
       {children}
     </Modal>

lib/components/Keyboard/KeyboardInput/CustomKeyboardView/CustomKeyboardView.android.tsx → lib/components/Keyboard/KeyboardAccessoryView/CustomKeyboardView/CustomKeyboardView.android.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {Keyboard, View} from 'react-native';
 import KeyboardRegistry from '../KeyboardRegistry';
-import CustomKeyboardViewBase, {CustomKeyboardViewBaseProps} from '../CustomKeyboardViewBase';
+import CustomKeyboardViewBase, {CustomKeyboardViewBaseProps} from './CustomKeyboardViewBase';
 
 export default class CustomKeyboardView extends CustomKeyboardViewBase<CustomKeyboardViewBaseProps> {
   static displayName = 'IGNORE';

lib/components/Keyboard/KeyboardInput/CustomKeyboardView/CustomKeyboardView.ios.tsx → lib/components/Keyboard/KeyboardAccessoryView/CustomKeyboardView/CustomKeyboardView.ios.tsx

@@ -1,6 +1,6 @@
-import TextInputKeyboardManager from './../TextInputKeyboardManager/TextInputKeyboardManager.ios';
-import KeyboardRegistry from './../KeyboardRegistry';
-import CustomKeyboardViewBase, {CustomKeyboardViewBaseProps} from './../CustomKeyboardViewBase';
+import TextInputKeyboardManager from '../TextInputKeyboardManager/TextInputKeyboardManager.ios';
+import KeyboardRegistry from '../KeyboardRegistry';
+import CustomKeyboardViewBase, {CustomKeyboardViewBaseProps} from './CustomKeyboardViewBase';
 
 export type CustomKeyboardViewProps = CustomKeyboardViewBaseProps & {
   /**

lib/components/Keyboard/KeyboardInput/CustomKeyboardViewBase.tsx → lib/components/Keyboard/KeyboardAccessoryView/CustomKeyboardView/CustomKeyboardViewBase.tsx

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
-import KeyboardRegistry from './KeyboardRegistry';
 import {EventSubscription} from 'react-native';
+import KeyboardRegistry from '../KeyboardRegistry';
 
 export type CustomKeyboardViewBaseProps = {
   inputRef?: any;

lib/components/Keyboard/KeyboardInput/utils/__tests__/EventEmitterManager.spec.js → lib/components/Keyboard/KeyboardAccessoryView/KeyboardRegistry/EventEmitterManager/__tests__/EventEmitterManager.spec.js

@@ -1,4 +1,4 @@
-const EventEmitterManager = require('../EventEmitterManager').default;
+const EventEmitterManager = require('../index').default;
 
 let EventEmitter;
 

lib/components/Keyboard/KeyboardInput/__tests__/KeyboardRegistry.spec.js → lib/components/Keyboard/KeyboardAccessoryView/KeyboardRegistry/__tests__/KeyboardRegistry.spec.js

@@ -1,6 +1,6 @@
 import {AppRegistry, View} from 'react-native';
 import React from 'react';
-import KeyboardRegistry from '../KeyboardRegistry';
+import KeyboardRegistry from '../index';
 
 describe('KeyboardRegistry - components', () => {
   const mockComponent = 'test_component';

lib/components/Keyboard/KeyboardInput/KeyboardRegistry.ts → lib/components/Keyboard/KeyboardAccessoryView/KeyboardRegistry/index.ts

@@ -1,6 +1,6 @@
-import {AppRegistry} from 'react-native';
 import _ from 'lodash';
-import EventEmitterManager from './utils/EventEmitterManager';
+import {AppRegistry} from 'react-native';
+import EventEmitterManager from './EventEmitterManager';
 
 /*
  * Tech debt: how to deal with multiple registries in the app?

lib/components/Keyboard/KeyboardInput/keyboardRegistry.api.json → lib/components/Keyboard/KeyboardAccessoryView/KeyboardRegistry/keyboardRegistry.api.json

@@ -1,49 +1,49 @@
 {
   "name": "KeyboardRegistry",
   "category": "infra",
-  "description": "used for registering keyboards and performing certain actions on the keyboards.",
+  "description": "used for registering keyboards and performing certain actions on the keyboards",
   "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/nativeComponentScreens/keyboardAccessory/demoKeyboards.js",
   "props": [
     {
       "name": "registerKeyboard",
       "type": "static function",
-      "description": "Register a new keyboard.\ncomponentID (string) - the ID of the keyboard.\ngenerator (function) - a function for the creation of the keyboard.\nparams (object) - to be returned when using other methods (i.e. getKeyboards and getAllKeyboards)."
+      "description": "Register a new keyboard.\ncomponentID (string) - the ID of the keyboard.\ngenerator (function) - a function for the creation of the keyboard.\nparams (object) - to be returned when using other methods (i.e. getKeyboards and getAllKeyboards)"
     },
     {
       "name": "getKeyboard",
       "type": "static function",
-      "description": "Get a specific keyboard\ncomponentID (string) - the ID of the keyboard."
+      "description": "Get a specific keyboard\ncomponentID (string) - the ID of the keyboard"
     },
     {
       "name": "getKeyboards",
       "type": "static function",
-      "description": "Get keyboards by IDs\ncomponentIDs (string[]) - the ID of the keyboard."
+      "description": "Get keyboards by IDs\ncomponentIDs (string[]) - the ID of the keyboard"
     },
     {"name": "getAllKeyboards", "type": "static function", "description": "Get all keyboards"},
     {
       "name": "addListener",
       "type": "static function",
-      "description": "Add a listener for a callback.\nglobalID (string) - ID that includes the componentID and the event name\n                     (i.e. if componentID='kb1' globalID='kb1.onItemSelected')\ncallback (function) - the callback to be called when the said event happens"
+      "description": "Add a listener for a callback.\nglobalID (string) - ID that includes the componentID and the event name\n(i.e. if componentID='kb1' globalID='kb1.onItemSelected')\ncallback (function) - the callback to be called when the said event happens"
     },
     {
       "name": "notifyListeners",
       "type": "static function",
-      "description": "Notify that an event has occurred.\nglobalID (string) - ID that includes the componentID and the event name\n                    (i.e. if componentID='kb1' globalID='kb1.onItemSelected')\nargs (object) - data to be sent to the listener."
+      "description": "Notify that an event has occurred.\nglobalID (string) - ID that includes the componentID and the event name\n(i.e. if componentID='kb1' globalID='kb1.onItemSelected')\nargs (object) - data to be sent to the listener"
     },
     {
       "name": "removeListeners",
       "type": "static function",
-      "description": "Remove a listener for a callback.\nglobalID (string) - ID that includes the componentID and the event name\n                    (i.e. if componentID='kb1' globalID='kb1.onItemSelected')"
+      "description": "Remove a listener for a callback.\nglobalID (string) - ID that includes the componentID and the event name\n(i.e. if componentID='kb1' globalID='kb1.onItemSelected')"
     },
     {
       "name": "onItemSelected",
       "type": "static function",
-      "description": "Default event to be used for when an item on the keyboard has been pressed.\ncomponentID (string) - the ID of the keyboard.\nargs (object) - data to be sent to the listener."
+      "description": "Default event to be used for when an item on the keyboard has been pressed.\ncomponentID (string) - the ID of the keyboard.\nargs (object) - data to be sent to the listener"
     },
     {
       "name": "requestShowKeyboard",
       "type": "static function",
-      "description": "Request to show the keyboard\ncomponentID (string) - the ID of the keyboard."
+      "description": "Request to show the keyboard\ncomponentID (string) - the ID of the keyboard"
     }
   ],
   "snippet": ["KeyboardRegistry.registerKeyboard('keyboardName$1', () => KeyboardComponent$2)"]

lib/components/Keyboard/KeyboardInput/KeyboardAccessoryView.tsx → lib/components/Keyboard/KeyboardAccessoryView/index.tsx

@@ -9,9 +9,9 @@ import {
   BackHandler,
   LayoutChangeEvent
 } from 'react-native';
-import KeyboardTrackingView, {KeyboardTrackingViewProps} from '../KeyboardTracking/KeyboardTrackingView';
+import KeyboardTrackingView, {KeyboardTrackingViewProps} from '../KeyboardTrackingView';
 import CustomKeyboardView from './CustomKeyboardView';
-import KeyboardUtils, {KeyboardHeightListener} from './utils/KeyboardUtils';
+import KeyboardUtils, {KeyboardHeightListener} from './KeyboardUtils';
 
 const IsIOS = Platform.OS === 'ios';
 const IsAndroid = Platform.OS === 'android';

lib/components/Keyboard/KeyboardInput/keyboardAccessoryView.api.json → lib/components/Keyboard/KeyboardAccessoryView/keyboardAccessoryView.api.json

@@ -15,9 +15,9 @@
     {
       "name": "kbInputRef",
       "type": "any",
-      "description": "The reference to the actual text input (or the keyboard may not reset when instructed to, etc.).",
-      "required": true,
-      "note": "iOS only"
+      "description": "The reference to the actual text input (or the keyboard may not reset when instructed to, etc.)",
+      "note": "iOS only",
+      "required": true
     },
     {
       "name": "kbComponent",
@@ -33,12 +33,12 @@
     {
       "name": "onItemSelected",
       "type": "() => void",
-      "description": "Callback that will be called when an item on the keyboard has been pressed."
+      "description": "Callback that will be called when an item on the keyboard has been pressed"
     },
     {
       "name": "onRequestShowKeyboard",
       "type": "() => void",
-      "description": "Callback that will be called if KeyboardRegistry.requestShowKeyboard is called."
+      "description": "Callback that will be called if KeyboardRegistry.requestShowKeyboard is called"
     },
     {
       "name": "onKeyboardResigned",

lib/components/Keyboard/KeyboardTracking/KeyboardAwareInsetsView.tsx → lib/components/Keyboard/KeyboardAwareInsetsView/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import {StyleSheet, Dimensions} from 'react-native';
-import KeyboardTrackingView, {KeyboardTrackingViewProps} from './KeyboardTrackingView';
+import KeyboardTrackingView, {KeyboardTrackingViewProps} from '../KeyboardTrackingView';
 
 type Props = KeyboardTrackingViewProps & {
   offset?: number;

lib/components/Keyboard/KeyboardTracking/KeyboardTrackingView/KeyboardTrackingView.ios.tsx → lib/components/Keyboard/KeyboardTrackingView/KeyboardTrackingView.ios.tsx

@@ -1,16 +1,13 @@
-/**
- * Created by artald on 15/05/2016.
- */
-
 import React, {PureComponent} from 'react';
-import ReactNative, {requireNativeComponent, NativeModules} from 'react-native';
+import ReactNative, {NativeModules} from 'react-native';
+// Import the Codegen specification for New Architecture
+import KeyboardTrackingViewNativeComponent from './KeyboardTrackingViewNativeComponent';
 import {KeyboardTrackingViewProps} from './index';
 
-const NativeKeyboardTrackingView = requireNativeComponent('KeyboardTrackingViewTemp');
 const KeyboardTrackingViewTempManager = NativeModules.KeyboardTrackingViewTempManager;
 
 /**
- * @description: A UI component that enables “keyboard tracking" for this view and it's sub-views.
+ * @description: A UI component that enables "keyboard tracking" for this view and it's sub-views.
  * Would typically be used when you have a TextField or TextInput inside this view.
  *
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/nativeComponentScreens/KeyboardTrackingViewScreen.js
@@ -27,7 +24,7 @@ class KeyboardTrackingView extends PureComponent<KeyboardTrackingViewProps> {
   ref?: any;
 
   render() {
-    return <NativeKeyboardTrackingView {...this.props} ref={r => (this.ref = r)}/>;
+    return <KeyboardTrackingViewNativeComponent {...this.props} ref={r => (this.ref = r)}/>;
   }
 
   async getNativeProps() {