refactor: modernize typescript setup

.eslintrc

@@ -16,6 +16,8 @@
     "no-nested-ternary": "off",
     "no-undef": "off",
     "global-require": "off",
+    "react/react-in-jsx-scope": "off",
+    "react/jsx-uses-react": "off",
 
     "import/no-extraneous-dependencies": "off",
     "import/first": "off",

docs/babel.config.js

@@ -1,4 +1,7 @@
 module.exports = {
   presets: ['@docusaurus/core/lib/babel/preset'],
-  plugins: ['react-native-reanimated/plugin'],
+  plugins: [
+    ['@babel/plugin-transform-react-jsx', { runtime: 'automatic' }],
+    'react-native-reanimated/plugin',
+  ],
 };

docs/package.json

@@ -39,6 +39,7 @@
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "^2.3.6",
+    "@jest/globals": "^29.7.0",
     "@tsconfig/docusaurus": "^1.0.6",
     "@types/marked": "^4.0.7",
     "@types/react-color": "^3.0.6",

docs/src/components/AppStoreIcon.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 type Props = {
   color: string;
 };

docs/src/components/DynamicColorTheme.tsx

@@ -1,4 +1,5 @@
-import React, { useState, ReactNode } from 'react';
+import React, { useState } from 'react';
+import type { ReactNode } from 'react';
 
 import Color from 'color';
 //@ts-ignore

docs/src/components/ExtendedExample.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 //@ts-ignore
 import CodeBlock from '@theme/CodeBlock';
 //@ts-ignore

docs/src/components/ExtendsLink.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 export default function ExtendsLink({
   name,
   link,

docs/src/components/GetStartedButtons.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { StyleSheet, View } from 'react-native';
 
 //@ts-ignore

docs/src/components/GithubIcon.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 type Props = {
   color: string;
 };

docs/src/components/GooglePlayIcon.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 type Props = {
   color: string;
 };

docs/src/components/IconsList.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 
 const latestIcons: { [key in string]: number } = {
   ...require('../../node_modules/@react-native-vector-icons/material-design-icons/glyphmaps/MaterialDesignIcons.json'),

docs/src/components/Markdown.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 const { marked } = require('marked');
 
 interface MarkdownProps {

docs/src/components/PropTable.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 // @ts-ignore
 // eslint-disable-next-line import/no-unresolved
 import useDoc from '@site/component-docs-plugin/useDocs';

docs/src/components/ScreenshotTabs.tsx

@@ -1,4 +1,5 @@
-import React, { ReactNode } from 'react';
+import React from 'react';
+import type { ReactNode } from 'react';
 
 //@ts-ignore
 import TabItem from '@theme/TabItem';

docs/src/components/Showcase.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import color from 'color';
 
 import AppStoreIcon from './AppStoreIcon';

docs/src/components/Switch.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 interface SwitchProps {
   value: boolean;
   onValueChange?: () => void;

docs/src/components/ThemeColorsTable.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 
 //@ts-ignore
 import Admonition from '@theme/Admonition';
@@ -7,11 +7,8 @@ import TabItem from '@theme/TabItem';
 //@ts-ignore
 import Tabs from '@theme/Tabs';
 
-import {
-  DataObject,
-  getMaxNestedLevel,
-  getUniqueNestedKeys,
-} from '../utils/themeColors';
+import { getMaxNestedLevel, getUniqueNestedKeys } from '../utils/themeColors';
+import type { DataObject } from '../utils/themeColors';
 
 const getTableHeader = (keys: string[]): ReactNode[] => {
   return keys.map((key) => <th key={key}>{key}</th>);

docs/src/components/ThemeIcon.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 type Props = {
   type: 'dark' | 'light';
 };

docs/src/utils/__tests__/themeColors.test.tsx

@@ -1,3 +1,5 @@
+import { describe, expect, it } from '@jest/globals';
+
 import { getMaxNestedLevel, getUniqueNestedKeys } from '../themeColors';
 
 const Button = {

example/metro.config.js

@@ -6,4 +6,5 @@ const { withMetroConfig } = require('react-native-monorepo-config');
 module.exports = withMetroConfig(getDefaultConfig(__dirname), {
   root: path.resolve(__dirname, '..'),
   dirname: __dirname,
+  conditions: ['react-native-paper-source'],
 });

example/package.json

@@ -38,8 +38,8 @@
   "devDependencies": {
     "@babel/core": "^7.29.0",
     "babel-preset-expo": "~56.0.0",
-    "react-native-builder-bob": "^0.41.0",
-    "react-native-monorepo-config": "^0.3.4"
+    "react-native-builder-bob": "^0.42.1",
+    "react-native-monorepo-config": "^0.4.0"
   },
   "engines": {
     "node": ">=20"

example/src/DrawerItems.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { ColorValue, Platform, StyleSheet, View } from 'react-native';
+import { Platform, StyleSheet, View } from 'react-native';
+import type { ColorValue } from 'react-native';
 
 import { DrawerContentScrollView } from '@react-navigation/drawer';
 import Constants, { ExecutionEnvironment } from 'expo-constants';

example/src/ExampleList.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { FlatList } from 'react-native';
 
 import { useNavigation } from '@react-navigation/native';

example/src/Examples/AvatarExample.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { StyleSheet, View } from 'react-native';
 
 import { Avatar, List, Palette } from 'react-native-paper';

example/src/Examples/BannerExample.tsx

@@ -1,12 +1,6 @@
 import * as React from 'react';
-import {
-  Dimensions,
-  Image,
-  LayoutChangeEvent,
-  Platform,
-  StyleSheet,
-  View,
-} from 'react-native';
+import { Dimensions, Image, Platform, StyleSheet, View } from 'react-native';
+import type { LayoutChangeEvent } from 'react-native';
 
 import { Banner, FAB, Palette, useTheme } from 'react-native-paper';
 

example/src/Examples/BottomNavigationExample.tsx

@@ -9,12 +9,8 @@ import {
 } from 'react-native';
 
 import { useNavigation } from '@react-navigation/native';
-import {
-  Appbar,
-  BottomNavigation,
-  BottomNavigationRoute,
-  Menu,
-} from 'react-native-paper';
+import { Appbar, BottomNavigation, Menu } from 'react-native-paper';
+import type { BottomNavigationRoute } from 'react-native-paper';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import ScreenWrapper from '../ScreenWrapper';

example/src/Examples/ButtonExample.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { Image, StyleSheet, View } from 'react-native';
 
 import { Button, List, Text, useTheme } from 'react-native-paper';

example/src/Examples/Dialogs/DialogWithCustomColors.tsx

@@ -1,5 +1,3 @@
-import * as React from 'react';
-
 import { Button, Portal, Dialog, Palette } from 'react-native-paper';
 
 import { TextComponent } from './DialogTextComponent';

example/src/Examples/Dialogs/DialogWithDismissableBackButton.tsx

@@ -1,5 +1,3 @@
-import * as React from 'react';
-
 import { Button, Portal, Dialog, Palette } from 'react-native-paper';
 
 import { TextComponent } from './DialogTextComponent';

example/src/Examples/Dialogs/DialogWithIcon.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { StyleSheet } from 'react-native';
 
 import { Button, Portal, Dialog, Palette } from 'react-native-paper';

example/src/Examples/Dialogs/DialogWithLoadingIndicator.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { ActivityIndicator, Platform, StyleSheet, View } from 'react-native';
 
 import { Dialog, Palette, Portal } from 'react-native-paper';

example/src/Examples/Dialogs/DialogWithLongText.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { Dimensions, ScrollView, StyleSheet } from 'react-native';
 
 import { Button, Portal, Dialog } from 'react-native-paper';

example/src/Examples/Dialogs/UndismissableDialog.tsx

@@ -1,5 +1,3 @@
-import * as React from 'react';
-
 import { Button, Portal, Dialog, Palette } from 'react-native-paper';
 
 import { TextComponent } from './DialogTextComponent';

example/src/Examples/DividerExample.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { FlatList } from 'react-native';
 
 import { Divider, List, useTheme } from 'react-native-paper';

example/src/Examples/FABExample.tsx

@@ -1,24 +1,17 @@
 import * as React from 'react';
-import {
-  FlatList,
-  NativeScrollEvent,
-  NativeSyntheticEvent,
-  ScrollView,
-  StyleSheet,
-  View,
-} from 'react-native';
+import { FlatList, ScrollView, StyleSheet, View } from 'react-native';
+import type { NativeScrollEvent, NativeSyntheticEvent } from 'react-native';
 
 import {
   Chip,
   Divider,
   FAB,
-  FABSize,
-  FABVariant,
   List,
   Switch,
   Text,
   useTheme,
 } from 'react-native-paper';
+import type { FABSize, FABVariant } from 'react-native-paper';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 type FabType = 'icon' | 'extended' | 'extendedTransforming' | 'menu';

example/src/Examples/IconButtonExample.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { StyleSheet, View } from 'react-native';
 
 import { IconButton, List, Palette } from 'react-native-paper';

example/src/Examples/IconExample.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { StyleSheet, View, Image } from 'react-native';
 
 import { Icon, List } from 'react-native-paper';

example/src/Examples/ListItemExample.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { View, StyleSheet } from 'react-native';
 
 import { List, Divider, Checkbox, Avatar, Switch } from 'react-native-paper';

example/src/Examples/ListSectionExample.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { StyleSheet, Image, View } from 'react-native';
 
 import { List, Text, Chip, Divider } from 'react-native-paper';

example/src/Examples/MenuExample.tsx

@@ -1,10 +1,6 @@
 import * as React from 'react';
-import {
-  GestureResponderEvent,
-  Platform,
-  StyleSheet,
-  View,
-} from 'react-native';
+import { Platform, StyleSheet, View } from 'react-native';
+import type { GestureResponderEvent } from 'react-native';
 
 import { useNavigation } from '@react-navigation/native';
 import {

example/src/Examples/ProgressBarExample.tsx

@@ -5,10 +5,10 @@ import {
   Button,
   Palette,
   ProgressBar,
-  ProgressBarProps,
   Text,
   useTheme,
 } from 'react-native-paper';
+import type { ProgressBarProps } from 'react-native-paper';
 
 import ScreenWrapper from '../ScreenWrapper';
 

example/src/Examples/SegmentedButtonsExample.tsx

@@ -1,5 +1,3 @@
-import * as React from 'react';
-
 import { useNavigation } from '@react-navigation/native';
 import { List } from 'react-native-paper';
 

example/src/Examples/SurfaceExample.tsx

@@ -1,7 +1,7 @@
-import * as React from 'react';
 import { ScrollView, StyleSheet, View } from 'react-native';
 
-import { Elevation, Surface, Text, Palette, List } from 'react-native-paper';
+import { Surface, Text, Palette, List } from 'react-native-paper';
+import type { Elevation } from 'react-native-paper';
 
 import ScreenWrapper from '../ScreenWrapper';
 

example/src/Examples/TeamsList.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { StyleSheet } from 'react-native';
 
 import { useNavigation } from '@react-navigation/native';

example/src/Examples/TextExample.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { Platform, StyleSheet, View } from 'react-native';
 
 import {

example/src/Examples/ThemeExample.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { StyleSheet } from 'react-native';
 
 import { useNavigation } from '@react-navigation/native';

example/src/Examples/ThemingWithReactNavigation.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { View, StyleSheet, Platform } from 'react-native';
 
 import Icon from '@react-native-vector-icons/material-design-icons';