fix: fix library typing for React 19

package.json

@@ -123,9 +123,6 @@
     "shelljs": "^0.9.2",
     "typescript": "^5.8.3"
   },
-  "resolutions": {
-    "@types/react": "^18.2.72"
-  },
   "lint-staged": {
     "{src,Example}/**/*.{js,ts,tsx}": "yarn format-js",
     "FabricExample/ios/**/*.swift": "yarn format-ios-swift",

src/components/Screen.web.tsx

@@ -12,7 +12,7 @@
 // createAnimatedComponent` does not support stateless functional components; use a class component instead.
 // NOTE: React Server Components do not support class components.
 export class NativeScreen extends React.Component<ScreenProps> {
-  render(): JSX.Element {
+  render(): React.JSX.Element {
     let {
       active,
       activityState,
@@ -29,7 +29,7 @@
         <View
           // @ts-expect-error: hidden exists on web, but not in React Native
           hidden={activityState === 0}
           style={[style, { display: activityState !== 0 ? 'flex' : 'none' }]}
           {...rest}
         />
       );

src/components/ScreenStackHeaderConfig.tsx

@@ -131,7 +131,7 @@ ScreenStackHeaderConfig.displayName = 'ScreenStackHeaderConfig';
 
 export const ScreenStackHeaderBackButtonImage = (
   props: ImageProps,
-): JSX.Element => (
+): React.JSX.Element => (
   <ScreenStackHeaderSubview
     type="back"
     style={styles.headerSubview}
@@ -144,7 +144,7 @@ export const ScreenStackHeaderBackButtonImage = (
 
 export const ScreenStackHeaderRightView = (
   props: ScreenStackHeaderSubviewProps & ViewProps,
-): JSX.Element => {
+): React.JSX.Element => {
   const { style, ...rest } = props;
 
   return (
@@ -161,7 +161,7 @@ export const ScreenStackHeaderRightView = (
 
 export const ScreenStackHeaderLeftView = (
   props: ScreenStackHeaderSubviewProps & ViewProps,
-): JSX.Element => {
+): React.JSX.Element => {
   const { style, ...rest } = props;
 
   return (
@@ -176,7 +176,9 @@ export const ScreenStackHeaderLeftView = (
   );
 };
 
-export const ScreenStackHeaderCenterView = (props: ViewProps): JSX.Element => {
+export const ScreenStackHeaderCenterView = (
+  props: ViewProps,
+): React.JSX.Element => {
   const { style, ...rest } = props;
 
   return (
@@ -193,7 +195,7 @@ export const ScreenStackHeaderCenterView = (props: ViewProps): JSX.Element => {
 
 export const ScreenStackHeaderSearchBarView = (
   props: ViewProps,
-): JSX.Element => (
+): React.JSX.Element => (
   <ScreenStackHeaderSubview
     {...props}
     type="searchBar"

src/components/ScreenStackHeaderConfig.web.tsx

@@ -4,31 +4,31 @@ import { HeaderSubviewTypes, ScreenStackHeaderConfigProps } from '../types';
 
 export const ScreenStackHeaderBackButtonImage = (
   props: ImageProps,
-): JSX.Element => (
+): React.JSX.Element => (
   <View>
     <Image resizeMode="center" fadeDuration={0} {...props} />
   </View>
 );
 
-export const ScreenStackHeaderRightView = (props: ViewProps): JSX.Element => (
-  <View {...props} />
-);
+export const ScreenStackHeaderRightView = (
+  props: ViewProps,
+): React.JSX.Element => <View {...props} />;
 
-export const ScreenStackHeaderLeftView = (props: ViewProps): JSX.Element => (
-  <View {...props} />
-);
+export const ScreenStackHeaderLeftView = (
+  props: ViewProps,
+): React.JSX.Element => <View {...props} />;
 
-export const ScreenStackHeaderCenterView = (props: ViewProps): JSX.Element => (
-  <View {...props} />
-);
+export const ScreenStackHeaderCenterView = (
+  props: ViewProps,
+): React.JSX.Element => <View {...props} />;
 
 export const ScreenStackHeaderSearchBarView = (
   props: ViewProps,
-): JSX.Element => <View {...props} />;
+): React.JSX.Element => <View {...props} />;
 
 export const ScreenStackHeaderConfig = (
   props: ScreenStackHeaderConfigProps,
-): JSX.Element => <View {...props} />;
+): React.JSX.Element => <View {...props} />;
 
 export const ScreenStackHeaderSubview: React.ComponentType<
   ViewProps & { type?: HeaderSubviewTypes }

src/components/SearchBar.tsx

@@ -19,15 +19,15 @@ import SearchBarNativeComponent, {
 import type { CodegenTypes as CT } from 'react-native';
 
 const NativeSearchBar: React.ComponentType<
-  SearchBarNativeProps & { ref?: React.RefObject<SearchBarCommands> }
+  SearchBarNativeProps & { ref?: React.RefObject<SearchBarCommands | null> }
 > &
   typeof NativeSearchBarCommands =
   SearchBarNativeComponent as unknown as React.ComponentType<SearchBarNativeProps> &
     SearchBarCommandsType;
 const NativeSearchBarCommands: SearchBarCommandsType =
   SearchBarNativeCommands as SearchBarCommandsType;
 
-type NativeSearchBarRef = React.ElementRef<typeof NativeSearchBar>;
+type NativeSearchBarRef = React.ComponentRef<typeof NativeSearchBar>;
 
 type SearchBarCommandsType = {
   blur: (viewRef: NativeSearchBarRef) => void;
@@ -42,7 +42,7 @@ function SearchBar(
   props: SearchBarProps,
   forwardedRef: React.Ref<SearchBarCommands>,
 ) {
-  const searchBarRef = React.useRef<SearchBarCommands | null>(null);
+  const searchBarRef = React.useRef<SearchBarCommands>(null);
 
   React.useImperativeHandle(forwardedRef, () => ({
     blur: () => {

src/components/helpers/usePrevious.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react';
 
 export function usePrevious<T>(state: T): T | undefined {
-  const ref = useRef<T>();
+  const ref = useRef<T>(undefined);
 
   useEffect(() => {
     ref.current = state;

src/types.tsx

@@ -832,7 +832,7 @@ export interface SearchBarProps {
    * * `cancelSearch` - cancel search in search bar.
    * * `toggleCancelButton` - depending on passed boolean value, hides or shows cancel button (iOS only)
    */
-  ref?: React.RefObject<SearchBarCommands>;
+  ref?: React.RefObject<SearchBarCommands | null>;
 
   /**
    * The auto-capitalization behavior.

yarn.lock

@@ -4257,13 +4257,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/prop-types@npm:*":
-  version: 15.7.14
-  resolution: "@types/prop-types@npm:15.7.14"
-  checksum: 10c0/1ec775160bfab90b67a782d735952158c7e702ca4502968aa82565bd8e452c2de8601c8dfe349733073c31179116cf7340710160d3836aa8a1ef76d1532893b1
-  languageName: node
-  linkType: hard
-
 "@types/react-test-renderer@npm:^19.1.0":
   version: 19.1.0
   resolution: "@types/react-test-renderer@npm:19.1.0"
@@ -4273,13 +4266,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react@npm:^18.2.72":
-  version: 18.3.18
-  resolution: "@types/react@npm:18.3.18"
+"@types/react@npm:*, @types/react@npm:^19.2.0":
+  version: 19.2.7
+  resolution: "@types/react@npm:19.2.7"
   dependencies:
-    "@types/prop-types": "npm:*"
-    csstype: "npm:^3.0.2"
-  checksum: 10c0/8fb2b00672072135d0858dc9db07873ea107cc238b6228aaa2a9afd1ef7a64a7074078250db38afbeb19064be8ea6af5eac32d404efdd5f45e093cc4829d87f8
+    csstype: "npm:^3.2.2"
+  checksum: 10c0/a7b75f1f9fcb34badd6f84098be5e35a0aeca614bc91f93d2698664c0b2ba5ad128422bd470ada598238cebe4f9e604a752aead7dc6f5a92261d0c7f9b27cfd1
   languageName: node
   linkType: hard
 
@@ -6565,10 +6557,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"csstype@npm:^3.0.2":
-  version: 3.1.3
-  resolution: "csstype@npm:3.1.3"
-  checksum: 10c0/80c089d6f7e0c5b2bd83cf0539ab41474198579584fa10d86d0cafe0642202343cbc119e076a0b1aece191989477081415d66c9fefbf3c957fc2fc4b7009f248
+"csstype@npm:^3.2.2":
+  version: 3.2.3
+  resolution: "csstype@npm:3.2.3"
+  checksum: 10c0/cd29c51e70fa822f1cecd8641a1445bed7063697469d35633b516e60fe8c1bde04b08f6c5b6022136bb669b64c63d4173af54864510fbb4ee23281801841a3ce
   languageName: node
   linkType: hard