Native lib reorder and fix ios (#3750)

* Native lib - reorganize components in folders for convenience + bump version to 5.0.0

* pointing to index

* revert naming change

* fix api files

* rename HighlighterOverlay web

* Moving sub components to the parent

* fix api file and move KeyboardUtils outside folder

* Revert "fix api file and move KeyboardUtils outside folder"

This reverts commit ff64327.

* fix api json

* fix folder name to match component name

* remove specs

* fix highligther view native registration

* fix for SafeAreaSpacerView

* fix types

* fix for KeyboardTrackingView

* trying to fix failed CI build

* SafeAreaSpacesView - moving to react implementation using native SafeAreaManager

* manager changes

* fix safe area

* fix SafeAreaSpacerView again

* removing logs

* Fix highlightViewTag type

* Fix TS error

* Typescript fixes \ revert

* Revert

---------

Co-authored-by: Miki Leib <[email protected]>
Co-authored-by: M-i-k-e-l <[email protected]>

Author: Inbal-Tish

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 renamed to 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 = {
@@ -25,7 +28,7 @@ export type HighlighterOverlayViewProps = {
   onRequestClose?: () => void;
   highlightFrame?: HighlightFrameType;
   style?: ViewStyle;
-  highlightViewTag?: number | null;
+  highlightViewTag?: number;
   children?: JSX.Element[] | JSX.Element;
   highlightViewTagParams?: HighlightViewTagParams;
   minimumRectSize?: Pick<HighlightFrameType, 'width' | 'height'>;
@@ -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}
+        highlightViewTagParams={nativeHighlightViewTagParams}
         minimumRectSize={minimumRectSize}
         innerPadding={innerPadding}
+        testID={props.testID}
+        accessible={props.accessible}
       />
       {children}
     </Modal>

lib/components/HighlighterOverlayView.web.tsx renamed to lib/components/HighlighterOverlayView/index.web.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.android.tsx renamed to lib/components/Keyboard/KeyboardAccessoryView/CustomKeyboardView/CustomKeyboardView.android.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/CustomKeyboardView/CustomKeyboardView.ios.tsx renamed to lib/components/Keyboard/KeyboardAccessoryView/CustomKeyboardView/CustomKeyboardView.ios.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/CustomKeyboardViewBase.tsx renamed to lib/components/Keyboard/KeyboardAccessoryView/CustomKeyboardView/CustomKeyboardViewBase.tsx

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