fix typescript and add ci check (react-native-elements#2909)

Co-authored-by: Jeremy Hamilton <jeremy.hamilton@tekfive.com>
tt0mmy · Mar 24, 2021 · c6c8aa7 · c6c8aa7
1 parent 661a3c8
commit c6c8aa7
Show file tree

Hide file tree

Showing 44 changed files with 112 additions and 89 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -16,6 +16,7 @@ install:
   - yarn
 script:
   - yarn lint
+  - yarn build
   - yarn test:ci && codecov --disable=gcov
 after_success:
   - |

diff --git a/src/avatar/Accessory.tsx b/src/avatar/Accessory.tsx
@@ -11,14 +11,15 @@ import {
 import { withTheme } from '../config';
 import Image, { ImageProps } from '../image/Image';
 import Icon, { IconProps } from '../icons/Icon';
+import { RneFunctionComponent } from '../helpers';
 
 export type AccessoryProps = Partial<IconProps> &
   Partial<ImageProps> & {
     underlayColor?: ColorValue;
     style?: StyleProp<ViewStyle>;
   };
 
-const Accessory: React.FunctionComponent<AccessoryProps> = ({
+const Accessory: RneFunctionComponent<AccessoryProps> = ({
   size = 10,
   style,
   underlayColor = '#000',

diff --git a/src/avatar/Avatar.tsx b/src/avatar/Avatar.tsx
@@ -14,7 +14,7 @@ import {
 } from 'react-native';
 import isEqual from 'lodash.isequal';
 import { withTheme } from '../config';
-import { renderNode } from '../helpers';
+import { renderNode, RneFunctionComponent } from '../helpers';
 import Icon, { IconObject } from '../icons/Icon';
 import Image, { ImageProps } from '../image/Image';
 import Accessory from './Accessory';
@@ -51,7 +51,7 @@ export type AvatarProps = {
   ImageComponent?: React.ComponentClass;
 };
 
-interface Avatar extends React.FunctionComponent<AvatarProps> {}
+interface Avatar extends RneFunctionComponent<AvatarProps> {}
 
 const AvatarComponent: Avatar = ({
   onPress,

diff --git a/src/badge/Badge.tsx b/src/badge/Badge.tsx
@@ -9,8 +9,7 @@ import {
   ViewStyle,
 } from 'react-native';
 import { withTheme } from '../config';
-import { ThemeProps } from '../config';
-import { renderNode } from '../helpers';
+import { renderNode, RneFunctionComponent } from '../helpers';
 
 export type BadgeProps = {
   containerStyle?: StyleProp<ViewStyle>;
@@ -23,9 +22,7 @@ export type BadgeProps = {
   status?: 'primary' | 'success' | 'warning' | 'error';
 };
 
-const Badge: React.FunctionComponent<BadgeProps & ThemeProps<BadgeProps>> = (
-  props
-) => {
+const Badge: RneFunctionComponent<BadgeProps> = (props) => {
   const {
     containerStyle,
     textStyle,

diff --git a/src/bottomSheet/BottomSheet.tsx b/src/bottomSheet/BottomSheet.tsx
@@ -10,6 +10,7 @@ import {
 } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { withTheme } from '../config';
+import { RneFunctionComponent } from '../helpers';
 
 export type BottomSheetProps = {
   containerStyle?: StyleProp<ViewStyle>;
@@ -22,7 +23,7 @@ const defaultProps = {
   isVisible: false,
 };
 
-const BottomSheet: React.FunctionComponent<BottomSheetProps> = ({
+const BottomSheet: RneFunctionComponent<BottomSheetProps> = ({
   containerStyle,
   isVisible,
   modalProps,

diff --git a/src/buttons/Button.tsx b/src/buttons/Button.tsx
@@ -16,11 +16,10 @@ import {
 } from 'react-native';
 import Color from 'color';
 import { withTheme } from '../config';
-import { renderNode, color } from '../helpers';
+import { renderNode, color, RneFunctionComponent } from '../helpers';
 import Icon, { IconNode } from '../icons/Icon';
 import { Theme } from '../config/theme';
 import { TextProps } from '../text/Text';
-import { ThemeProps } from '../config';
 
 const defaultLoadingProps = (
   type: 'solid' | 'clear' | 'outline',
@@ -53,9 +52,7 @@ export type ButtonProps = TouchableOpacityProps &
     raised?: boolean;
   };
 
-const Button: React.FunctionComponent<ButtonProps & ThemeProps<ButtonProps>> = (
-  props: ButtonProps & ThemeProps<ButtonProps>
-) => {
+const Button: RneFunctionComponent<ButtonProps> = (props) => {
   useEffect(() => {
     if (props.linearGradientProps && !props.ViewComponent) {
       console.error(

diff --git a/src/buttons/ButtonGroup.tsx b/src/buttons/ButtonGroup.tsx
@@ -10,8 +10,7 @@ import {
   TextStyle,
 } from 'react-native';
 import { withTheme } from '../config';
-import { ThemeProps } from '../config';
-import { normalizeText, color } from '../helpers';
+import { normalizeText, color, RneFunctionComponent } from '../helpers';
 import Text from '../text/Text';
 
 export type ButtonGroupProps = {
@@ -45,9 +44,7 @@ export type ButtonGroupProps = {
   vertical?: boolean;
 };
 
-const ButtonGroup: React.FunctionComponent<
-  ButtonGroupProps & ThemeProps<ButtonGroupProps>
-> = (props) => {
+const ButtonGroup: RneFunctionComponent<ButtonGroupProps> = (props) => {
   const { theme, ...rest } = props;
   const {
     Component = Platform.select<typeof React.Component>({

diff --git a/src/buttons/FAB.tsx b/src/buttons/FAB.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { StyleSheet, Animated } from 'react-native';
 import Button, { ButtonProps } from './Button';
 import { withTheme } from '../config';
+import { RneFunctionComponent } from '../helpers';
 
 export type FABProps = ButtonProps & {
   color?: string;
@@ -11,7 +12,7 @@ export type FABProps = ButtonProps & {
   upperCase?: boolean;
 };
 
-const FAB: React.FunctionComponent<FABProps> = ({
+const FAB: RneFunctionComponent<FABProps> = ({
   color,
   size = 'large',
   visible = true,

diff --git a/src/card/Card.tsx b/src/card/Card.tsx
@@ -6,15 +6,14 @@ import CardDivider from './CardDivider';
 import CardImage from './CardImage';
 import CardFeaturedTitle from './CardFeaturedTitle';
 import CardFeaturedSubtitle from './CardFeaturedSubtitle';
-import { ThemeProps } from '../config';
+import { RneFunctionComponent } from '../helpers';
 
 export type CardProps = {
   containerStyle?: StyleProp<ViewStyle>;
   wrapperStyle?: StyleProp<ViewStyle>;
 };
 
-interface Card
-  extends React.FunctionComponent<CardProps & ThemeProps<CardProps>> {}
+interface Card extends RneFunctionComponent<CardProps> {}
 
 const Card: Card = (props) => {
   const {

diff --git a/src/card/CardDivider.tsx b/src/card/CardDivider.tsx
@@ -2,8 +2,9 @@ import React from 'react';
 import { StyleSheet } from 'react-native';
 import { withTheme } from '../config';
 import Divider, { DividerProps } from '../divider/Divider';
+import { RneFunctionComponent } from '../helpers';
 
-const CardDivider: React.FunctionComponent<DividerProps> = ({
+const CardDivider: RneFunctionComponent<DividerProps> = ({
   style,
   ...props
 }) => {

diff --git a/src/card/CardFeaturedSubtitle.tsx b/src/card/CardFeaturedSubtitle.tsx
@@ -3,8 +3,9 @@ import { Platform, StyleSheet, TextStyle } from 'react-native';
 import normalize from '../helpers/normalizeText';
 import { fonts, withTheme } from '../config';
 import Text, { TextProps } from '../text/Text';
+import { RneFunctionComponent } from '../helpers';
 
-const CardFeaturedSubtitle: React.FunctionComponent<TextProps> = ({
+const CardFeaturedSubtitle: RneFunctionComponent<TextProps> = ({
   theme,
   style,
   ...props

diff --git a/src/card/CardFeaturedTitle.tsx b/src/card/CardFeaturedTitle.tsx
@@ -3,8 +3,9 @@ import { Platform, StyleSheet, TextStyle } from 'react-native';
 import normalize from '../helpers/normalizeText';
 import { fonts, withTheme } from '../config';
 import Text, { TextProps } from '../text/Text';
+import { RneFunctionComponent } from '../helpers';
 
-const CardFeaturedTitle: React.FunctionComponent<TextProps> = ({
+const CardFeaturedTitle: RneFunctionComponent<TextProps> = ({
   theme,
   style,
   ...props

diff --git a/src/card/CardImage.tsx b/src/card/CardImage.tsx
@@ -1,12 +1,10 @@
 import React from 'react';
 import { StyleSheet } from 'react-native';
 import { withTheme } from '../config';
+import { RneFunctionComponent } from '../helpers';
 import Image, { ImageProps } from '../image/Image';
 
-const CardImage: React.FunctionComponent<ImageProps> = ({
-  style,
-  ...props
-}) => {
+const CardImage: RneFunctionComponent<ImageProps> = ({ style, ...props }) => {
   return <Image style={StyleSheet.flatten([styles.image, style])} {...props} />;
 };
 

diff --git a/src/card/CardTitle.tsx b/src/card/CardTitle.tsx
@@ -3,8 +3,9 @@ import { Platform, StyleSheet, TextStyle } from 'react-native';
 import normalize from '../helpers/normalizeText';
 import { fonts, withTheme } from '../config';
 import Text, { TextProps } from '../text/Text';
+import { RneFunctionComponent } from '../helpers';
 
-const CardTitle: React.FunctionComponent<TextProps> = ({
+const CardTitle: RneFunctionComponent<TextProps> = ({
   style,
   theme,
   ...props

diff --git a/src/checkbox/CheckBox.tsx b/src/checkbox/CheckBox.tsx
@@ -14,6 +14,7 @@ import TextElement from '../text/Text';
 import CheckBoxIcon from './CheckBoxIcon';
 import { fonts, withTheme } from '../config';
 import { CheckBoxIconProps } from './CheckBoxIcon';
+import { RneFunctionComponent } from '../helpers';
 
 export type CheckBoxProps = TouchableOpacityProps &
   CheckBoxIconProps & {
@@ -30,7 +31,7 @@ export type CheckBoxProps = TouchableOpacityProps &
     fontFamily?: string;
   };
 
-const CheckBox: React.FunctionComponent<CheckBoxProps> = (props) => {
+const CheckBox: RneFunctionComponent<CheckBoxProps> = (props) => {
   const { theme, ...rest } = props;
   const {
     Component = TouchableOpacity,

diff --git a/src/checkbox/CheckBoxIcon.tsx b/src/checkbox/CheckBoxIcon.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { ThemeProps } from '../config';
+import { RneFunctionComponent } from '../helpers';
 import getIconType from '../helpers/getIconType';
 import { IconType } from '../icons/Icon';
 
@@ -15,9 +15,7 @@ export type CheckBoxIconProps = {
   uncheckedColor?: string;
 };
 
-const CheckBoxIcon: React.FunctionComponent<
-  CheckBoxIconProps & ThemeProps<CheckBoxIconProps>
-> = ({
+const CheckBoxIcon: RneFunctionComponent<CheckBoxIconProps> = ({
   checked,
   onIconPress,
   onLongIconPress,

diff --git a/src/config/withTheme.tsx b/src/config/withTheme.tsx
@@ -59,7 +59,7 @@ const ThemedComponent = (
 };
 
 function withTheme<P = {}, T = {}>(
-  WrappedComponent: React.ComponentType<P & ThemeProps<T>>,
+  WrappedComponent: React.ComponentType<P & Partial<ThemeProps<T>>>,
   themeKey: string
 ):
   | React.FunctionComponent<Omit<P, keyof ThemeProps<T>>>

diff --git a/src/divider/Divider.tsx b/src/divider/Divider.tsx
@@ -1,15 +1,17 @@
 import React from 'react';
 import { View, StyleSheet, ViewProps } from 'react-native';
 import { withTheme } from '../config';
-import { ThemeProps } from '../config';
+import { RneFunctionComponent } from '../helpers';
 
 export type DividerProps = ViewProps & {
   style?: object | any[];
 };
 
-const Divider: React.FunctionComponent<
-  DividerProps & ThemeProps<DividerProps>
-> = ({ style, theme, ...rest }) => (
+const Divider: RneFunctionComponent<DividerProps> = ({
+  style,
+  theme,
+  ...rest
+}) => (
   <View
     style={StyleSheet.flatten([
       {

diff --git a/src/header/Header.tsx b/src/header/Header.tsx
@@ -18,11 +18,10 @@ import {
 } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { withTheme } from '../config';
-import { renderNode } from '../helpers';
+import { renderNode, RneFunctionComponent } from '../helpers';
 
 import Text from '../text/Text';
 import Icon, { IconObject } from '../icons/Icon';
-import { ThemeProps } from '../config';
 
 type Placement = 'left' | 'center' | 'right';
 
@@ -88,9 +87,7 @@ export type HeaderProps = ViewProps & {
   elevated: boolean;
 };
 
-const Header: React.FunctionComponent<HeaderProps & ThemeProps<HeaderProps>> = (
-  props: HeaderProps & ThemeProps<HeaderProps>
-) => {
+const Header: RneFunctionComponent<HeaderProps> = (props) => {
   React.useEffect(() => {
     const { linearGradientProps, ViewComponent } = props;
     if (linearGradientProps && !ViewComponent) {

diff --git a/src/helpers/index.tsx b/src/helpers/index.tsx
@@ -3,12 +3,17 @@ import color from 'color';
 import renderNode from './renderNode';
 import getIconType from './getIconType';
 import normalizeText from './normalizeText';
+import { ThemeProps } from '../config';
 
 const Screen = Dimensions.get('window');
 const ScreenWidth = Screen.width;
 const ScreenHeight = Screen.height;
 const isIOS = Platform.OS === 'ios';
 
+export type RneFunctionComponent<T> = React.FunctionComponent<
+  T & Partial<ThemeProps<T>>
+>;
+
 export const patchWebProps = <T extends Record<any, any>>({
   updateTheme,
   replaceTheme,

diff --git a/src/icons/Icon.tsx b/src/icons/Icon.tsx
@@ -18,7 +18,7 @@ import Color from 'color';
 import getIconType from '../helpers/getIconType';
 import getIconStyle from '../helpers/getIconStyle';
 import { withTheme } from '../config';
-import { ThemeProps } from '../config';
+import { RneFunctionComponent } from '../helpers';
 
 export type IconType =
   | 'material'
@@ -59,9 +59,7 @@ export type IconProps = IconButtonProps & {
   brand?: boolean;
 };
 
-const Icon: React.FunctionComponent<IconProps & ThemeProps<IconProps>> = (
-  props
-) => {
+const Icon: RneFunctionComponent<IconProps> = (props) => {
   const {
     type = 'material',
     name,

diff --git a/src/image/Image.tsx b/src/image/Image.tsx
@@ -9,8 +9,7 @@ import {
   ViewStyle,
   StyleProp,
 } from 'react-native';
-import { withTheme } from '../config';
-import { ThemeProps } from '../config';
+import { ThemeProps, withTheme } from '../config';
 
 export type ImageProps = RNImageProps & {
   Component?: typeof React.Component;
@@ -29,7 +28,7 @@ type ImageState = {
 };
 
 class Image extends React.Component<
-  ImageProps & ThemeProps<ImageProps>,
+  ImageProps & Partial<ThemeProps<ImageProps>>,
   ImageState
 > {
   static getSize = ImageNative.getSize;

diff --git a/src/input/Input.tsx b/src/input/Input.tsx
@@ -42,7 +42,9 @@ export type InputProps = TextInputProps & {
   renderErrorMessage?: boolean;
 };
 
-class Input extends React.Component<InputProps & ThemeProps<InputProps>> {
+class Input extends React.Component<
+  InputProps & Partial<ThemeProps<InputProps>>
+> {
   input: any;
   shakeAnimationValue = new Animated.Value(0);
 

diff --git a/src/linearProgress/LinearProgress.tsx b/src/linearProgress/LinearProgress.tsx
@@ -9,6 +9,7 @@ import {
 } from 'react-native';
 import { FullTheme } from '../config';
 import Color from 'color';
+import { RneFunctionComponent } from '../helpers';
 
 export type LinearProgressProps = {
   value?: number; // 0 to 1
@@ -19,7 +20,7 @@ export type LinearProgressProps = {
   theme?: FullTheme;
 } & ViewProps;
 
-const LinearProgress: React.FunctionComponent<LinearProgressProps> = ({
+const LinearProgress: RneFunctionComponent<LinearProgressProps> = ({
   value = 0,
   variant = 'indeterminate',
   color = 'secondary',