feat: enforce import type for the type imports (#2026)

Author: BatDroid

example/src/ExampleList.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { FlatList } from 'react-native';
 import { List, Divider, useTheme } from 'react-native-paper';
 import { useSafeArea } from 'react-native-safe-area-context';
-import { StackNavigationProp } from '@react-navigation/stack';
+import type { StackNavigationProp } from '@react-navigation/stack';
 
 import ActivityIndicatorExample from './Examples/ActivityIndicatorExample';
 import AppbarExample from './Examples/AppbarExample';

example/src/Examples/AppbarExample.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { View, Platform, StyleSheet } from 'react-native';
-import { StackNavigationProp } from '@react-navigation/stack';
+import type { StackNavigationProp } from '@react-navigation/stack';
 import {
   Colors,
   Appbar,

example/src/Examples/MenuExample.tsx

@@ -5,7 +5,7 @@ import {
   Platform,
   GestureResponderEvent,
 } from 'react-native';
-import { StackNavigationProp } from '@react-navigation/stack';
+import type { StackNavigationProp } from '@react-navigation/stack';
 import {
   Menu,
   Appbar,

example/src/Examples/SearchbarExample.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { StyleSheet, View } from 'react-native';
 import { Colors, Caption, Searchbar, useTheme } from 'react-native-paper';
-import { StackNavigationProp } from '@react-navigation/stack';
+import type { StackNavigationProp } from '@react-navigation/stack';
 
 type Props = {
   navigation: StackNavigationProp<{}>;

example/src/RootNavigator.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Appbar } from 'react-native-paper';
-import { DrawerNavigationProp } from '@react-navigation/drawer';
+import type { DrawerNavigationProp } from '@react-navigation/drawer';
 import { createStackNavigator } from '@react-navigation/stack';
 import ExampleList, { examples } from './ExampleList';
 

package.json

@@ -51,8 +51,8 @@
     "react-native-safe-area-view": "^0.14.9"
   },
   "devDependencies": {
-    "@babel/core": "^7.4.4",
-    "@babel/runtime": "^7.4.4",
+    "@babel/core": "^7.10.3",
+    "@babel/runtime": "^7.10.3",
     "@callstack/eslint-config": "^9.0.0",
     "@commitlint/config-conventional": "^8.3.4",
     "@react-native-community/bob": "^0.16.0",
@@ -68,7 +68,7 @@
     "all-contributors-cli": "^6.1.1",
     "babel-cli": "^6.26.0",
     "babel-core": "^7.0.0-bridge.0",
-    "babel-jest": "^24.3.1",
+    "babel-jest": "^26.1.0",
     "babel-test": "^0.1.1",
     "chalk": "^4.0.0",
     "commitlint": "^8.3.4",
@@ -81,9 +81,9 @@
     "flow-bin": "0.92.0",
     "glob": "^7.1.3",
     "husky": "^1.3.1",
-    "jest": "^24.9.0",
+    "jest": "^26.1.0",
     "jest-file-snapshot": "^0.3.2",
-    "metro-react-native-babel-preset": "^0.56.0",
+    "metro-react-native-babel-preset": "^0.59.0",
     "prettier": "^2.0.5",
     "react": "16.11.0",
     "react-dom": "16.11.0",

src/components/Appbar/AppbarAction.tsx

@@ -1,9 +1,13 @@
 import * as React from 'react';
 import color from 'color';
-import { StyleProp, ViewStyle, TouchableWithoutFeedback } from 'react-native';
+import type {
+  StyleProp,
+  ViewStyle,
+  TouchableWithoutFeedback,
+} from 'react-native';
 import { black } from '../../styles/colors';
 import IconButton from '../IconButton';
-import { IconSource } from '../Icon';
+import type { IconSource } from '../Icon';
 
 type Props = React.ComponentPropsWithoutRef<typeof IconButton> & {
   /**

src/components/Appbar/AppbarBackAction.tsx

@@ -8,7 +8,7 @@ import {
   StyleProp,
   ViewStyle,
 } from 'react-native';
-import { $Omit } from './../../types';
+import type { $Omit } from './../../types';
 import AppbarAction from './AppbarAction';
 import MaterialCommunityIcon from '../MaterialCommunityIcon';
 

src/components/Appbar/AppbarContent.tsx

@@ -15,7 +15,7 @@ import Text from '../Typography/Text';
 import { withTheme } from '../../core/theming';
 import { white } from '../../styles/colors';
 
-import { $RemoveChildren } from '../../types';
+import type { $RemoveChildren } from '../../types';
 
 type Props = $RemoveChildren<typeof View> & {
   /**

src/components/Avatar/AvatarIcon.tsx

@@ -4,7 +4,7 @@ import color from 'color';
 import Icon from '../Icon';
 import { withTheme } from '../../core/theming';
 import { white } from '../../styles/colors';
-import { IconSource } from './../Icon';
+import type { IconSource } from './../Icon';
 
 const defaultSize = 64;
 

src/components/Banner.tsx

@@ -5,7 +5,7 @@ import Text from './Typography/Text';
 import Button from './Button';
 import Icon, { IconSource } from './Icon';
 import { withTheme } from '../core/theming';
-import { $RemoveChildren } from '../types';
+import type { $RemoveChildren } from '../types';
 import shadow from '../styles/shadow';
 
 const ELEVATION = 1;

src/components/Checkbox/CheckboxAndroid.tsx

@@ -4,7 +4,7 @@ import color from 'color';
 import MaterialCommunityIcon from '../MaterialCommunityIcon';
 import TouchableRipple from '../TouchableRipple';
 import { withTheme } from '../../core/theming';
-import { $RemoveChildren } from '../../types';
+import type { $RemoveChildren } from '../../types';
 
 type Props = $RemoveChildren<typeof TouchableRipple> & {
   /**

src/components/Checkbox/CheckboxIOS.tsx

@@ -4,7 +4,7 @@ import color from 'color';
 import MaterialCommunityIcon from '../MaterialCommunityIcon';
 import TouchableRipple from '../TouchableRipple';
 import { withTheme } from '../../core/theming';
-import { $RemoveChildren } from '../../types';
+import type { $RemoveChildren } from '../../types';
 
 type Props = $RemoveChildren<typeof TouchableRipple> & {
   /**

src/components/DataTable/DataTableCell.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { StyleSheet, StyleProp, ViewStyle } from 'react-native';
 import Text from '../Typography/Text';
 import TouchableRipple from '../TouchableRipple';
-import { $RemoveChildren } from '../../types';
+import type { $RemoveChildren } from '../../types';
 
 type Props = $RemoveChildren<typeof TouchableRipple> & {
   /**

src/components/DataTable/DataTableRow.tsx

@@ -4,7 +4,7 @@ import { StyleSheet, StyleProp, View, ViewStyle } from 'react-native';
 import TouchableRipple from '../TouchableRipple';
 import { black, white } from '../../styles/colors';
 import { withTheme } from '../../core/theming';
-import { $RemoveChildren } from '../../types';
+import type { $RemoveChildren } from '../../types';
 
 type Props = $RemoveChildren<typeof TouchableRipple> & {
   /**

src/components/Divider.tsx

@@ -3,7 +3,7 @@ import color from 'color';
 import { StyleSheet, View, ViewStyle, StyleProp } from 'react-native';
 import { withTheme } from '../core/theming';
 import { black, white } from '../styles/colors';
-import { $RemoveChildren } from '../types';
+import type { $RemoveChildren } from '../types';
 
 type Props = $RemoveChildren<typeof View> & {
   /**

src/components/FAB/FAB.tsx

@@ -10,8 +10,8 @@ import Text from '../Typography/Text';
 import TouchableRipple from '../TouchableRipple';
 import { black, white } from '../../styles/colors';
 import { withTheme } from '../../core/theming';
-import { $RemoveChildren } from '../../types';
-import { IconSource } from './../Icon';
+import type { $RemoveChildren } from '../../types';
+import type { IconSource } from './../Icon';
 
 type Props = $RemoveChildren<typeof Surface> & {
   /**

src/components/FAB/FABGroup.tsx

@@ -13,7 +13,7 @@ import FAB from './FAB';
 import Text from '../Typography/Text';
 import Card from '../Card/Card';
 import { withTheme } from '../../core/theming';
-import { IconSource } from '../Icon';
+import type { IconSource } from '../Icon';
 
 type Props = {
   /**

src/components/HelperText.tsx

@@ -9,7 +9,7 @@ import {
 } from 'react-native';
 import AnimatedText from './Typography/AnimatedText';
 import { withTheme } from '../core/theming';
-import { $Omit } from '../types';
+import type { $Omit } from '../types';
 
 type Props = $Omit<
   $Omit<React.ComponentPropsWithRef<typeof AnimatedText>, 'padding'>,

src/components/IconButton.tsx

@@ -14,7 +14,7 @@ import Icon, { IconSource } from './Icon';
 import CrossFadeIcon from './CrossFadeIcon';
 import { withTheme } from '../core/theming';
 
-import { $RemoveChildren } from '../types';
+import type { $RemoveChildren } from '../types';
 
 type Props = $RemoveChildren<typeof TouchableRipple> & {
   /**

src/components/List/ListItem.tsx

@@ -11,7 +11,7 @@ import {
 import TouchableRipple from '../TouchableRipple';
 import Text from '../Typography/Text';
 import { withTheme } from '../../core/theming';
-import { $RemoveChildren, EllipsizeProp } from '../../types';
+import type { $RemoveChildren, EllipsizeProp } from '../../types';
 
 type Description =
   | React.ReactNode

src/components/Menu/Menu.tsx

@@ -17,7 +17,7 @@ import {
 } from 'react-native';
 
 import { withTheme } from '../../core/theming';
-import { $Omit } from '../../types';
+import type { $Omit } from '../../types';
 import Portal from '../Portal/Portal';
 import Surface from '../Surface';
 // eslint-disable-next-line @typescript-eslint/no-unused-vars

src/components/Portal/PortalConsumer.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { PortalMethods } from './PortalHost';
+import type { PortalMethods } from './PortalHost';
 
 type Props = {
   manager: PortalMethods;

src/components/RadioButton/RadioButtonAndroid.tsx

@@ -5,7 +5,7 @@ import { RadioButtonContext, RadioButtonContextType } from './RadioButtonGroup';
 import { handlePress, isChecked } from './utils';
 import TouchableRipple from '../TouchableRipple';
 import { withTheme } from '../../core/theming';
-import { $RemoveChildren } from '../../types';
+import type { $RemoveChildren } from '../../types';
 
 type Props = $RemoveChildren<typeof TouchableRipple> & {
   /**

src/components/RadioButton/RadioButtonIOS.tsx

@@ -6,7 +6,7 @@ import { handlePress, isChecked } from './utils';
 import MaterialCommunityIcon from '../MaterialCommunityIcon';
 import TouchableRipple from '../TouchableRipple';
 import { withTheme } from '../../core/theming';
-import { $RemoveChildren } from '../../types';
+import type { $RemoveChildren } from '../../types';
 
 type Props = $RemoveChildren<typeof TouchableRipple> & {
   /**

src/components/Searchbar.tsx

@@ -12,7 +12,7 @@ import color from 'color';
 import IconButton from './IconButton';
 import Surface from './Surface';
 import { withTheme } from '../core/theming';
-import { IconSource } from './Icon';
+import type { IconSource } from './Icon';
 import MaterialCommunityIcon from './MaterialCommunityIcon';
 
 type Props = React.ComponentPropsWithRef<typeof TextInput> & {
@@ -75,12 +75,12 @@ type Props = React.ComponentPropsWithRef<typeof TextInput> & {
  * ```js
  * import * as React from 'react';
  * import { Searchbar } from 'react-native-paper';
- * 
+ *
  * const MyComponent = () => {
  *   const [searchQuery, setSearchQuery] = React.useState('');
- * 
+ *
  *   const onChangeSearch = query => setSearchQuery(query);
- * 
+ *
  *   return (
  *     <Searchbar
  *       placeholder="Search"
@@ -89,7 +89,7 @@ type Props = React.ComponentPropsWithRef<typeof TextInput> & {
  *     />
  *   );
  * };
- * 
+ *
  * export default MyComponent;
 
  * ```

src/components/TextInput/Adornment/Icon.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { View, StyleSheet, StyleProp, ViewStyle } from 'react-native';
 
 import IconButton from '../../IconButton';
-import { $Omit } from '../../../../src/types';
+import type { $Omit } from '../../../../src/types';
 
 type Props = $Omit<
   React.ComponentProps<typeof IconButton>,

src/components/TextInput/Adornment/TextInputAdornment.tsx

@@ -9,7 +9,7 @@ import {
   Animated,
   Platform,
 } from 'react-native';
-import {
+import type {
   AdornmentConfig,
   AdornmentStyleAdjustmentForNativeInput,
 } from './types';

src/components/TextInput/Adornment/types.tsx

@@ -1,4 +1,4 @@
-import { AdornmentSide, AdornmentType } from './enums';
+import type { AdornmentSide, AdornmentType } from './enums';
 
 export type AdornmentConfig = {
   side: AdornmentSide;

src/components/TextInput/Label/InputLabel.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Animated, StyleSheet } from 'react-native';
 import AnimatedText from '../../Typography/AnimatedText';
 
-import { InputLabelProps } from '../types';
+import type { InputLabelProps } from '../types';
 
 const InputLabel = (props: InputLabelProps) => {
   const { parentState, labelBackground } = props;

src/components/TextInput/Label/LabelBackground.tsx

@@ -3,7 +3,7 @@ import { Animated, StyleSheet } from 'react-native';
 
 import AnimatedText from '../../Typography/AnimatedText';
 
-import { LabelBackgroundProps } from '../types';
+import type { LabelBackgroundProps } from '../types';
 
 const LabelBackground = ({
   parentState,

src/components/TextInput/TextInput.tsx

@@ -12,8 +12,8 @@ import TextInputFlat from './TextInputFlat';
 import TextInputIcon from './Adornment/Icon';
 import TextInputAffix from './Adornment/Affix';
 import { withTheme } from '../../core/theming';
-import { RenderProps, State } from './types';
-import { $Omit } from '../../types';
+import type { RenderProps, State } from './types';
+import type { $Omit } from '../../types';
 
 const BLUR_ANIMATION_DURATION = 180;
 const FOCUS_ANIMATION_DURATION = 150;

src/components/TextInput/TextInputFlat.tsx

@@ -13,7 +13,7 @@ import InputLabel from './Label/InputLabel';
 import TextInputAdornment, {
   TextInputAdornmentProps,
 } from './Adornment/TextInputAdornment';
-import { RenderProps, ChildTextInputProps } from './types';
+import type { RenderProps, ChildTextInputProps } from './types';
 
 import {
   MAXIMIZED_LABEL_FONT_SIZE,

src/components/TextInput/TextInputOutlined.tsx

@@ -16,7 +16,7 @@ import TextInputAdornment, {
 
 import InputLabel from './Label/InputLabel';
 import LabelBackground from './Label/LabelBackground';
-import { RenderProps, ChildTextInputProps } from './types';
+import type { RenderProps, ChildTextInputProps } from './types';
 
 import {
   MAXIMIZED_LABEL_FONT_SIZE,

src/components/TextInput/helpers.tsx

@@ -1,5 +1,5 @@
-import { Animated } from 'react-native';
-import { AdornmentConfig } from './Adornment/types';
+import type { Animated } from 'react-native';
+import type { AdornmentConfig } from './Adornment/types';
 import {
   LABEL_PADDING_HORIZONTAL,
   ADORNMENT_OFFSET,

src/components/TextInput/types.tsx

@@ -1,11 +1,11 @@
-import {
+import type {
   TextInput as NativeTextInput,
   Animated,
   TextStyle,
   LayoutChangeEvent,
 } from 'react-native';
-import { TextInputProps } from './TextInput';
-import { $Omit } from './../../types';
+import type { TextInputProps } from './TextInput';
+import type { $Omit } from './../../types';
 
 export type RenderProps = {
   ref: (a: NativeTextInput | null | undefined) => void;

src/components/ToggleButton/ToggleButton.tsx

@@ -13,7 +13,7 @@ import ToggleButtonGroup, {
 } from './ToggleButtonGroup';
 import ToggleButtonRow from './ToggleButtonRow';
 import { black, white } from '../../styles/colors';
-import { IconSource } from '../Icon';
+import type { IconSource } from '../Icon';
 
 type Props = {
   /**

src/components/__tests__/BottomNavigation.test.js

@@ -2,6 +2,7 @@ import * as React from 'react';
 import renderer from 'react-test-renderer';
 import BottomNavigation from '../BottomNavigation.tsx';
 
+jest.useFakeTimers();
 // Make sure any animation finishes before checking the snapshot results
 jest.mock('react-native', () => {
   const RN = jest.requireActual('react-native');