Codemod proptypes into typescript

package.json

@@ -64,6 +64,7 @@
     "@types/jest": "^29.2.4",
     "@types/react": "^18.0.26",
     "@types/react-native": "^0.70.8",
+    "@types/react-native-vector-icons": "^6.4.12",
     "@types/react-test-renderer": "^18.0.0",
     "babel-jest": "^26.6.3",
     "eslint": "^7.32.0",

src/components/Button/component.tsx

@@ -1,8 +1,14 @@
-import React from 'react';
-import { ViewPropTypes } from 'deprecated-react-native-prop-types';
-import { View, TouchableOpacity, Text, ActivityIndicator } from 'react-native';
+import React, { ComponentProps } from 'react';
+import {
+  StyleProp,
+  View,
+  TouchableOpacity,
+  TouchableOpacityProps,
+  Text,
+  TextStyle,
+  ActivityIndicator,
+} from 'react-native';
 import Icon from 'react-native-vector-icons/FontAwesome';
-import { PropTypes } from 'prop-types';
 import { styles } from './styles';
 
 const LoadingComponent = () => (
@@ -11,55 +17,46 @@ const LoadingComponent = () => (
   </View>
 );
 
+interface ButtonProps {
+  style?: StyleProp<TouchableOpacity | View>;
+  title: string;
+  titleStyle?: TextStyle | null;
+  icon?: string | null;
+  iconStyle?: ComponentProps<typeof Icon>['style'];
+  onPress?: TouchableOpacityProps['onPress'] | null;
+  loading?: boolean;
+  disabled?: boolean;
+  bold?: boolean;
+}
+
 export const Button = ({
-  style,
-  title,
-  titleStyle,
-  icon,
-  iconStyle,
-  onPress,
-  loading,
-  disabled,
-  bold,
-}) => {
+  style = null,
+  title = 'Save',
+  titleStyle = null,
+  icon = null,
+  iconStyle = null,
+  onPress = null,
+  loading = false,
+  disabled = false,
+  bold = false,
+}: ButtonProps) => {
   const Component = onPress ? TouchableOpacity : View;
   return (
     <Component
       disabled={disabled || loading}
       onPress={onPress}
-      style={[styles.button, disabled ? styles.buttonDisabled : null, style]}
-    >
+      style={[styles.button, disabled ? styles.buttonDisabled : null, style]}>
       {loading ? (
         <LoadingComponent />
       ) : (
         <View style={styles.contentWrapper}>
           {icon ? <Icon name={icon} style={[styles.icon, iconStyle]} /> : null}
-          <Text style={[styles.title, titleStyle, bold ? styles.titleBold : null]}>{title}</Text>
+          <Text
+            style={[styles.title, titleStyle, bold ? styles.titleBold : null]}>
+            {title}
+          </Text>
         </View>
       )}
     </Component>
   );
 };
-
-Button.propTypes = {
-  ...TouchableOpacity.propTypes,
-  style: ViewPropTypes.style,
-  title: PropTypes.string.isRequired,
-  titleStyle: PropTypes.oneOfType([PropTypes.number, PropTypes.object, PropTypes.array]),
-  icon: PropTypes.string,
-  iconStyle: PropTypes.oneOfType([PropTypes.number, PropTypes.object]),
-  onPress: PropTypes.func.isRequired,
-  loading: PropTypes.bool,
-  disabled: PropTypes.bool,
-  bold: PropTypes.bool,
-};
-Button.defaultProps = {
-  style: null,
-  title: 'Save',
-  titleStyle: null,
-  icon: null,
-  iconStyle: null,
-  loading: false,
-  disabled: false,
-  bold: false,
-};

src/components/Checkbox/component.tsx

@@ -1,11 +1,33 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import { ViewPropTypes } from 'deprecated-react-native-prop-types';
 import { TouchableOpacity, View, Text } from 'react-native';
 import Icon from 'react-native-vector-icons/FontAwesome';
 import { styles } from './styles';
 
-export const CheckBox = (props) => {
+interface CheckBoxProps {
+  component?: any;
+  checked?: boolean;
+  iconRight?: boolean;
+  title?: string | React.ReactElement;
+  center?: boolean;
+  right?: boolean;
+  containerStyle?: unknown;
+  textStyle?: unknown;
+  onPress?(...args: unknown[]): unknown;
+  onLongPress?(...args: unknown[]): unknown;
+  checkedIcon?: string;
+  uncheckedIcon?: string;
+  iconType?: string;
+  size?: number;
+  checkedColor?: string;
+  uncheckedColor?: string;
+  checkedTitle?: string;
+  onIconPress?(...args: unknown[]): unknown;
+  onLongIconPress?(...args: unknown[]): unknown;
+  fontFamily?: string;
+}
+
+export const CheckBox = (props: CheckBoxProps) => {
   const {
     component,
     checked,
@@ -97,24 +119,6 @@ CheckBox.defaultProps = {
 };
 
 CheckBox.propTypes = {
-  component: PropTypes.any,
-  checked: PropTypes.bool,
-  iconRight: PropTypes.bool,
-  title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-  center: PropTypes.bool,
-  right: PropTypes.bool,
   containerStyle: ViewPropTypes.style,
-  textStyle: Text.propTypes.style,
-  onPress: PropTypes.func,
-  onLongPress: PropTypes.func,
-  checkedIcon: PropTypes.string,
-  uncheckedIcon: PropTypes.string,
-  iconType: PropTypes.string,
-  size: PropTypes.number,
-  checkedColor: PropTypes.string,
-  uncheckedColor: PropTypes.string,
-  checkedTitle: PropTypes.string,
-  onIconPress: PropTypes.func,
-  onLongIconPress: PropTypes.func,
-  fontFamily: PropTypes.string,
+  textStyle: Text.propTypes.style
 };

src/components/ContentList/ContentListHeader.tsx

@@ -1,10 +1,20 @@
 import React from 'react';
 import { View, Text, TouchableOpacity } from 'react-native';
-import PropTypes from 'prop-types';
 import Icon from 'react-native-vector-icons/FontAwesome';
 import { styles } from './styles';
 
-export const ContentListHeader = ({ title, dark, showViewAll, ...props }) => (
+interface ContentListHeaderProps {
+  title: string;
+  dark: boolean;
+  showViewAll?: boolean;
+}
+
+export const ContentListHeader = ({
+  title,
+  dark,
+  showViewAll,
+  ...props
+}: ContentListHeaderProps) => (
   <View style={styles.contentListHeaderContainer}>
     <Text style={[styles.contentListHeaderText, dark ? styles.lightText : '']}>{title}</Text>
     {showViewAll && <TouchableOpacity style={styles.contentListActionLink} {...props}>
@@ -17,12 +27,6 @@ export const ContentListHeader = ({ title, dark, showViewAll, ...props }) => (
   </View>
 );
 
-ContentListHeader.propTypes = {
-  title: PropTypes.string.isRequired,
-  dark: PropTypes.bool.isRequired,
-  showViewAll: PropTypes.bool,
-};
-
 ContentListHeader.defaultProps = {
   showViewAll: true,
 };

src/components/ContentList/component.tsx

@@ -1,11 +1,25 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { View, FlatList } from 'react-native';
 import { ContentListHeader } from './ContentListHeader';
 import { ItemRenderer } from './ItemRenderer';
 import { styles } from './styles';
 
-export const ContentList = ({ title, data, onPress, dark = false, showViewAll = true, ...props }) => (
+interface ContentListProps {
+  title: string;
+  data?: unknown[];
+  onPress(...args: unknown[]): unknown;
+  dark?: boolean;
+  showViewAll?: boolean;
+}
+
+export const ContentList = ({
+  title,
+  data,
+  onPress,
+  dark = false,
+  showViewAll = true,
+  ...props
+}: ContentListProps) => (
   // console.log('data is', title, data);
   <View style={[styles.contentListContainer, dark ? styles.darkBg : styles.lightBg]}>
     <ContentListHeader dark={dark} title={title} onPress={onPress} showViewAll={showViewAll} />
@@ -18,14 +32,6 @@ export const ContentList = ({ title, data, onPress, dark = false, showViewAll =
   </View>
 );
 
-ContentList.propTypes = {
-  title: PropTypes.string.isRequired,
-  data: PropTypes.array,
-  onPress: PropTypes.func.isRequired,
-  dark: PropTypes.bool,
-  showViewAll: PropTypes.bool,
-};
-
 ContentList.defaultProps = {
   data: [],
   dark: false,

src/components/Counter/component.tsx

@@ -1,21 +1,20 @@
 import * as React from 'react';
-import { PropTypes } from 'prop-types';
 import { Text, TextInput, TouchableOpacity, View } from 'react-native';
 import { isNil, isFinite } from 'lodash';
 import { styles } from './styles';
 
-export class Counter extends React.PureComponent {
-  static propTypes = {
-    disabled: PropTypes.bool,
-    initialValue: PropTypes.number.isRequired,
-    value: PropTypes.number,
-    maxValue: PropTypes.number,
-    minValue: PropTypes.number,
-    onValueChanged: PropTypes.func,
-    progressCounter: PropTypes.bool,
-    inputRef: PropTypes.func,
-  }
+interface CounterProps {
+  disabled?: boolean;
+  initialValue: number;
+  value?: number;
+  maxValue?: number;
+  minValue?: number;
+  onValueChanged?(...args: unknown[]): unknown;
+  progressCounter?: boolean;
+  inputRef?(...args: unknown[]): unknown;
+}
 
+export class Counter extends React.PureComponent<CounterProps> {
   static defaultProps = {
     disabled: false,
     maxValue: undefined,

src/components/DatePicker/component.tsx

@@ -1,5 +1,4 @@
 import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
 import {
   View,
   Text,
@@ -13,13 +12,13 @@ import {
 } from 'react-native';
 import { styles } from './styles';
 
-export class DatePicker extends PureComponent {
-  static propTypes = {
-    duration: PropTypes.number,
-    style: PropTypes.object,
-    disabled: PropTypes.bool,
-  };
+interface DatePickerProps {
+  duration?: number;
+  style?: object;
+  disabled?: boolean;
+}
 
+export class DatePicker extends PureComponent<DatePickerProps> {
   static defaultProps = {
     duration: 300,
     style: null,

src/components/Feedback/component.tsx

@@ -1,17 +1,21 @@
 import React from 'react';
 import { ViewPropTypes } from 'deprecated-react-native-prop-types';
 import { Animated, Text } from 'react-native';
-import { PropTypes } from 'prop-types';
 import { styles } from './styles';
 
-export class Feedback extends React.Component {
+interface FeedbackProps {
+  containerStyle?: unknown;
+  titleStyle?: unknown;
+  title: string;
+  autoHide?: boolean;
+  autoHideDuration?: number;
+  fadeDuration?: number;
+}
+
+export class Feedback extends React.Component<FeedbackProps> {
   static propTypes = {
     containerStyle: ViewPropTypes.style,
-    titleStyle: ViewPropTypes.style,
-    title: PropTypes.string.isRequired,
-    autoHide: PropTypes.bool,
-    autoHideDuration: PropTypes.number,
-    fadeDuration: PropTypes.number,
+    titleStyle: ViewPropTypes.style
   };
 
   static defaultProps = {