chore: package.json re-arrangement and small typescript issues fixed

Author: ruben-rebelo

docs/src/components/ScreenshotTabs.tsx

@@ -1,4 +1,4 @@
-import React, { JSX } from 'react';
+import React, { ReactNode } from 'react';
 
 //@ts-ignore
 import TabItem from '@theme/TabItem';
@@ -21,7 +21,7 @@ const ScreenshotTabs: React.FC<ScreenshotTabsProps> = ({
   screenshotData,
   baseUrl,
 }) => {
-  const renderScreenhot = (src: string): JSX.Element => (
+  const renderScreenhot = (src: string): ReactNode => (
     <img src={`${baseUrl}${src}`} className={getClassName(src)} />
   );
 

docs/src/components/ThemeColorsTable.tsx

@@ -1,4 +1,4 @@
-import React, { JSX } from 'react';
+import React, { ReactNode } from 'react';
 
 //@ts-ignore
 import Admonition from '@theme/Admonition';
@@ -13,11 +13,11 @@ import {
   getUniqueNestedKeys,
 } from '../utils/themeColors';
 
-const getTableHeader = (keys: string[]): JSX.Element[] => {
+const getTableHeader = (keys: string[]): ReactNode[] => {
   return keys.map((key) => <th key={key}>{key}</th>);
 };
 
-const getTableCell = (keys: string[], modes: DataObject): JSX.Element[] => {
+const getTableCell = (keys: string[], modes: DataObject): ReactNode[] => {
   return keys.map((key) => {
     const value = modes[key];
     if (typeof value === 'string') {
@@ -33,7 +33,7 @@ const FlatTable = ({
 }: {
   themeColorsData: DataObject;
   uniqueKeys: string[];
-}): JSX.Element => {
+}): ReactNode => {
   const rows = Object.keys(themeColorsData).map((mode) => {
     return (
       <tr key={`${mode}`}>
@@ -68,7 +68,7 @@ const TabbedTable = ({
 }: {
   themeColorsData: DataObject;
   uniqueKeys: string[];
-}): JSX.Element => {
+}): ReactNode => {
   const tabTableContent = Object.keys(themeColorsData).map((key) => {
     const modes = themeColorsData[key] as DataObject;
     const rows = Object.keys(modes).map((mode) => {
@@ -111,7 +111,7 @@ const ThemeColorsTable = ({
 }: {
   themeColorsData: DataObject;
   componentName: string;
-}): JSX.Element | null => {
+}): ReactNode | null => {
   const uniqueKeys = getUniqueNestedKeys(themeColorsData);
   const nestingLevel = getMaxNestedLevel(themeColorsData);
   const isFlatTable = nestingLevel === 1;

docs/src/utils/themes.tsx

@@ -1,7 +1,6 @@
 import {
   argbFromHex,
   themeFromSourceColor,
-  //@ts-ignore
   // eslint-disable-next-line import/no-unresolved
 } from '@material/material-color-utilities';
 import camelCase from 'camelcase';

package.json

@@ -52,7 +52,6 @@
   },
   "dependencies": {
     "@callstack/react-theme-provider": "^3.0.9",
-    "@react-native/babel-preset": "^0.82.1",
     "color": "^3.1.2",
     "use-latest-callback": "^0.2.3"
   },
@@ -63,6 +62,7 @@
     "@callstack/eslint-config": "^13.0.2",
     "@commitlint/config-conventional": "^8.3.4",
     "@react-native-vector-icons/material-design-icons": "^12.0.0",
+    "@react-native/babel-preset": "^0.82.1",
     "@react-navigation/native": "^6.1.2",
     "@release-it/conventional-changelog": "^1.1.0",
     "@testing-library/jest-native": "^5.4.1",
@@ -92,7 +92,6 @@
     "husky": "^1.3.1",
     "jest": "^29.6.3",
     "jest-file-snapshot": "^0.3.2",
-    "metro-react-native-babel-preset": "0.73.9",
     "react": "19.1.1",
     "react-dom": "18.3.1",
     "react-native": "0.82.1",

src/components/BottomNavigation/BottomNavigationRouteScreen.tsx

@@ -1,4 +1,4 @@
-import React, { JSX } from 'react';
+import React, { ReactNode } from 'react';
 import { Animated, Platform, View, ViewProps } from 'react-native';
 
 interface Props extends ViewProps {
@@ -7,7 +7,7 @@ interface Props extends ViewProps {
 }
 
 class BottomNavigationRouteScreen extends React.Component<Props> {
-  render(): JSX.Element {
+  render(): ReactNode {
     const { style, index, children, visibility, ...rest } = this.props;
 
     // On Web, the unfocused tab screens can still be clicked since they are transparent, but still there

src/components/Typography/AnimatedText.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { JSX } from 'react';
+import { ReactNode } from 'react';
 import {
   Animated,
   I18nManager,
@@ -103,6 +103,6 @@ const styles = StyleSheet.create({
 });
 
 export const customAnimatedText = <T,>() =>
-  AnimatedText as (props: Props<T>) => JSX.Element;
+  AnimatedText as (props: Props<T>) => ReactNode;
 
 export default AnimatedText;

src/components/Typography/Text.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { JSX } from 'react';
+import { ReactNode } from 'react';
 import {
   I18nManager,
   StyleProp,
@@ -178,7 +178,7 @@ const styles = StyleSheet.create({
 
 type TextComponent<T> = (
   props: Props<T> & { ref?: React.RefObject<TextRef> }
-) => JSX.Element;
+) => ReactNode;
 
 const Component = forwardRef(Text) as TextComponent<never>;