Add fix for carousel asBaseComponent

demo/src/screens/componentScreens/CarouselScreen.tsx

@@ -6,8 +6,8 @@ import {
   Spacings,
   View,
   Text,
-  Carousel,
   Image,
+  Carousel,
   Colors
 } from 'react-native-ui-lib';
 import {
@@ -46,7 +46,7 @@ interface State {
 }
 
 class CarouselScreen extends Component<Props ,State> {
-  carousel = React.createRef<any>();
+  carousel = React.createRef<typeof Carousel>();
 
   constructor(props: Props) {
     super(props);
@@ -164,7 +164,7 @@ class CarouselScreen extends Component<Props ,State> {
               size: 10,
               containerStyle: styles.loopCarousel
             }}
-            pageControlPosition={Carousel.pageControlPositions.OVER}
+            pageControlPosition={Carousel.pageControlPositions.UNDER}
           >
             {IMAGES.map((image, i) => {
               return (

generatedTypes/commons/modifiers.d.ts

@@ -77,8 +77,8 @@ export declare type ContainerModifiers = AlignmentModifiers & PositionModifiers
 export declare function extractColorValue(props: Dictionary<any>): any;
 export declare function extractBackgroundColorValue(props: Dictionary<any>): any;
 export declare function extractTypographyValue(props: Dictionary<any>): object | undefined;
-export declare function extractPaddingValues(props: Dictionary<any>): Partial<Record<NativePaddingKeyType, number>>;
-export declare function extractMarginValues(props: Dictionary<any>): Partial<Record<NativeMarginModifierKeyType, number>>;
+export declare function extractPaddingValues(props: Dictionary<any>): Partial<Record<"padding" | "paddingLeft" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingHorizontal" | "paddingVertical", number>>;
+export declare function extractMarginValues(props: Dictionary<any>): Partial<Record<"margin" | "marginLeft" | "marginTop" | "marginRight" | "marginBottom" | "marginHorizontal" | "marginVertical", number>>;
 export declare function extractAlignmentsValues(props: Dictionary<any>): any;
 export declare function extractPositionStyle(props: Dictionary<any>): {
     position: "absolute";

generatedTypes/components/badge/index.d.ts

@@ -354,7 +354,7 @@ declare const _default: React.ComponentClass<ViewProps & TouchableOpacityProps &
     /**
      * the badge size (default, small)
      */
-    size: number | "small" | "default" | "pimpleSmall" | "pimpleBig" | "pimpleHuge" | "large";
+    size: number | "small" | "pimpleSmall" | "pimpleBig" | "pimpleHuge" | "default" | "large";
     /**
      * Press handler
      */

generatedTypes/components/card/index.d.ts

@@ -2,8 +2,7 @@ import React from 'react';
 import { Animated, ViewStyle } from 'react-native';
 import { ViewPropTypes } from '../view';
 import { TouchableOpacityProps } from '../touchableOpacity';
-import CardImage from './CardImage';
-import CardSection, { CardSectionProps } from './CardSection';
+import { CardSectionProps } from './CardSection';
 export { CardSectionProps };
 export declare type CardPropTypes = ViewPropTypes & TouchableOpacityProps & {
     /**
@@ -135,7 +134,58 @@ declare const _default: React.ComponentClass<ViewPropTypes & Pick<import("react-
 } & {
     useCustomTheme?: boolean | undefined;
 }, any> & {
-    Image: typeof CardImage;
-    Section: typeof CardSection;
+    Image: React.ComponentType<import("./CardImage").CardImageProps>;
+    Section: React.ComponentClass<ViewPropTypes & {
+        content?: ((import("react-native").TextProps & import("../../commons/modifiers").CustomModifier & Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & {
+            color?: string | undefined;
+            center?: boolean | undefined;
+            uppercase?: boolean | undefined;
+            highlightString?: string | undefined;
+            highlightStyle?: import("react-native").TextStyle | undefined;
+            animated?: boolean | undefined;
+            textAlign?: string | undefined;
+        } & {
+            text?: string | undefined;
+        }) | (import("react-native").TextProps & import("../../commons/modifiers").CustomModifier & Partial<Record<"black" | "white" | "dark10" | "dark20" | "dark30" | "dark40" | "dark50" | "dark60" | "dark70" | "dark80" | "grey10" | "grey20" | "grey30" | "grey40" | "grey50" | "grey60" | "grey70" | "grey80" | "blue10" | "blue20" | "blue30" | "blue40" | "blue50" | "blue60" | "blue70" | "blue80" | "cyan10" | "cyan20" | "cyan30" | "cyan40" | "cyan50" | "cyan60" | "cyan70" | "cyan80" | "green10" | "green20" | "green30" | "green40" | "green50" | "green60" | "green70" | "green80" | "yellow10" | "yellow20" | "yellow30" | "yellow40" | "yellow50" | "yellow60" | "yellow70" | "yellow80" | "orange10" | "orange20" | "orange30" | "orange40" | "orange50" | "orange60" | "orange70" | "orange80" | "red10" | "red20" | "red30" | "red40" | "red50" | "red60" | "red70" | "red80" | "purple10" | "purple20" | "purple30" | "purple40" | "purple50" | "purple60" | "purple70" | "purple80" | "violet10" | "violet20" | "violet30" | "violet40" | "violet50" | "violet60" | "violet70" | "violet80", boolean>> & Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & {
+            color?: string | undefined;
+            center?: boolean | undefined;
+            uppercase?: boolean | undefined;
+            highlightString?: string | undefined;
+            highlightStyle?: import("react-native").TextStyle | undefined;
+            animated?: boolean | undefined;
+            textAlign?: string | undefined;
+        } & {
+            text?: string | undefined;
+        }) | (import("react-native").TextProps & Partial<Record<"text10" | "text20" | "text30" | "text40" | "text50" | "text60" | "text65" | "text70" | "text80" | "text90" | "text100" | "text10T" | "text10L" | "text10R" | "text10M" | "text10BO" | "text10H" | "text10BL" | "text20T" | "text20L" | "text20R" | "text20M" | "text20BO" | "text20H" | "text20BL" | "text30T" | "text30L" | "text30R" | "text30M" | "text30BO" | "text30H" | "text30BL" | "text40T" | "text40L" | "text40R" | "text40M" | "text40BO" | "text40H" | "text40BL" | "text50T" | "text50L" | "text50R" | "text50M" | "text50BO" | "text50H" | "text50BL" | "text60T" | "text60L" | "text60R" | "text60M" | "text60BO" | "text60H" | "text60BL" | "text65T" | "text65L" | "text65R" | "text65M" | "text65BO" | "text65H" | "text65BL" | "text70T" | "text70L" | "text70R" | "text70M" | "text70BO" | "text70H" | "text70BL" | "text80T" | "text80L" | "text80R" | "text80M" | "text80BO" | "text80H" | "text80BL" | "text90T" | "text90L" | "text90R" | "text90M" | "text90BO" | "text90H" | "text90BL" | "text100T" | "text100L" | "text100R" | "text100M" | "text100BO" | "text100H" | "text100BL", boolean>> & import("../../commons/modifiers").CustomModifier & Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & {
+            color?: string | undefined;
+            center?: boolean | undefined;
+            uppercase?: boolean | undefined;
+            highlightString?: string | undefined;
+            highlightStyle?: import("react-native").TextStyle | undefined;
+            animated?: boolean | undefined;
+            textAlign?: string | undefined;
+        } & {
+            text?: string | undefined;
+        }) | (import("react-native").TextProps & Partial<Record<"text10" | "text20" | "text30" | "text40" | "text50" | "text60" | "text65" | "text70" | "text80" | "text90" | "text100" | "text10T" | "text10L" | "text10R" | "text10M" | "text10BO" | "text10H" | "text10BL" | "text20T" | "text20L" | "text20R" | "text20M" | "text20BO" | "text20H" | "text20BL" | "text30T" | "text30L" | "text30R" | "text30M" | "text30BO" | "text30H" | "text30BL" | "text40T" | "text40L" | "text40R" | "text40M" | "text40BO" | "text40H" | "text40BL" | "text50T" | "text50L" | "text50R" | "text50M" | "text50BO" | "text50H" | "text50BL" | "text60T" | "text60L" | "text60R" | "text60M" | "text60BO" | "text60H" | "text60BL" | "text65T" | "text65L" | "text65R" | "text65M" | "text65BO" | "text65H" | "text65BL" | "text70T" | "text70L" | "text70R" | "text70M" | "text70BO" | "text70H" | "text70BL" | "text80T" | "text80L" | "text80R" | "text80M" | "text80BO" | "text80H" | "text80BL" | "text90T" | "text90L" | "text90R" | "text90M" | "text90BO" | "text90H" | "text90BL" | "text100T" | "text100L" | "text100R" | "text100M" | "text100BO" | "text100H" | "text100BL", boolean>> & Partial<Record<"black" | "white" | "dark10" | "dark20" | "dark30" | "dark40" | "dark50" | "dark60" | "dark70" | "dark80" | "grey10" | "grey20" | "grey30" | "grey40" | "grey50" | "grey60" | "grey70" | "grey80" | "blue10" | "blue20" | "blue30" | "blue40" | "blue50" | "blue60" | "blue70" | "blue80" | "cyan10" | "cyan20" | "cyan30" | "cyan40" | "cyan50" | "cyan60" | "cyan70" | "cyan80" | "green10" | "green20" | "green30" | "green40" | "green50" | "green60" | "green70" | "green80" | "yellow10" | "yellow20" | "yellow30" | "yellow40" | "yellow50" | "yellow60" | "yellow70" | "yellow80" | "orange10" | "orange20" | "orange30" | "orange40" | "orange50" | "orange60" | "orange70" | "orange80" | "red10" | "red20" | "red30" | "red40" | "red50" | "red60" | "red70" | "red80" | "purple10" | "purple20" | "purple30" | "purple40" | "purple50" | "purple60" | "purple70" | "purple80" | "violet10" | "violet20" | "violet30" | "violet40" | "violet50" | "violet60" | "violet70" | "violet80", boolean>> & Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & {
+            color?: string | undefined;
+            center?: boolean | undefined;
+            uppercase?: boolean | undefined;
+            highlightString?: string | undefined;
+            highlightStyle?: import("react-native").TextStyle | undefined;
+            animated?: boolean | undefined;
+            textAlign?: string | undefined;
+        } & {
+            text?: string | undefined;
+        }))[] | undefined;
+        contentStyle?: import("react-native").StyleProp<ViewStyle>;
+        backgroundColor?: string | undefined;
+        leadingIcon?: import("../image").ImageProps | undefined;
+        trailingIcon?: import("../image").ImageProps | undefined;
+        imageSource?: number | import("react-native").ImageURISource | import("react-native").ImageURISource[] | undefined;
+        imageStyle?: import("react-native").StyleProp<import("react-native").ImageStyle>;
+        imageProps?: import("../image").ImageProps | undefined;
+    } & {
+        useCustomTheme?: boolean | undefined;
+    }, any>;
 };
 export default _default;

generatedTypes/components/carousel/index.d.ts

@@ -1,4 +1,4 @@
-import React, { Component, RefObject, ReactNode, Key } from 'react';
+import React, { Component, RefObject } from 'react';
 import { ScrollView, LayoutChangeEvent, NativeSyntheticEvent, NativeScrollEvent } from 'react-native';
 import { CarouselProps, CarouselState, PageControlPosition } from './types';
 export { CarouselProps };
@@ -54,7 +54,7 @@ declare class Carousel extends Component<CarouselProps, CarouselState> {
     onMomentumScrollEnd: () => void;
     goToNextPage(): void;
     onScroll: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
-    renderChild: (child: ReactNode, key: Key) => JSX.Element | undefined;
+    renderChild: (child: React.ReactNode, key: string | number) => JSX.Element | undefined;
     renderChildren(): JSX.Element[] | null | undefined;
     renderPageControl(): JSX.Element | undefined;
     renderCounter(): JSX.Element | undefined;
@@ -65,5 +65,7 @@ declare class Carousel extends Component<CarouselProps, CarouselState> {
 export { Carousel };
 declare const _default: React.ComponentClass<CarouselProps & {
     useCustomTheme?: boolean | undefined;
-}, any> & typeof Carousel;
+}, any> & Carousel & {
+    pageControlPositions: typeof PageControlPosition;
+};
 export default _default;

generatedTypes/components/radioButton/RadioGroup.d.ts

@@ -26,7 +26,7 @@ declare class RadioGroup extends PureComponent<Props, RadioGroupState> {
         value: string | number | boolean | undefined;
         onValueChange: (value: string | number | boolean | undefined) => void;
     };
-    onValueChange: (value: RadioGroupPropTypes['initialValue']) => void;
+    onValueChange: (value: string | number | boolean | undefined) => void;
     render(): JSX.Element;
 }
 export { RadioGroup };

generatedTypes/components/tabBar/index.d.ts

@@ -2,7 +2,6 @@ import React from 'react';
 import { Animated, ViewStyle } from 'react-native';
 import { BaseComponentInjectedProps } from '../../commons/new';
 import { ViewPropTypes } from '../view';
-import TabBarItem from './TabBarItem';
 export declare type TabBarProps = BaseComponentInjectedProps & ViewPropTypes & {
     /**
      * Show Tab Bar bottom shadow
@@ -84,6 +83,27 @@ declare const _default: React.ComponentClass<BaseComponentInjectedProps & ViewPr
 } & {
     useCustomTheme?: boolean | undefined;
 }, any> & {
-    Item: typeof TabBarItem;
+    Item: React.ComponentClass<BaseComponentInjectedProps & {
+        icon?: number | undefined;
+        iconColor?: string | undefined;
+        iconSelectedColor?: string | undefined;
+        label?: string | undefined;
+        labelStyle?: import("react-native").TextStyle | undefined;
+        badge?: import("../badge").BadgeProps | undefined;
+        maxLines?: number | undefined;
+        selectedLabelStyle: import("react-native").TextStyle;
+        selected?: boolean | undefined;
+        showDivider?: boolean | undefined;
+        width?: number | undefined;
+        ignore?: boolean | undefined;
+        onPress?: ((props: any) => void) | undefined;
+        uppercase?: boolean | undefined;
+        activeBackgroundColor?: string | undefined;
+        indicatorStyle?: ViewStyle | undefined;
+        style?: ViewStyle | undefined;
+        testID?: string | undefined;
+    } & {
+        useCustomTheme?: boolean | undefined;
+    }, any> & import("./TabBarItem").State;
 };
 export default _default;

generatedTypes/style/colorName.d.ts

@@ -1,7 +1,7 @@
 export declare class ColorName {
     _init(): void;
     name(color?: string): any[];
-    _hsl(color: string): number[];
+    _hsl(color: string): any[];
     _rgb(color: string): number[];
 }
 declare const object: ColorName;

src/components/carousel/index.tsx

@@ -471,7 +471,7 @@ class Carousel extends Component<CarouselProps, CarouselState> {
 }
 
 export {Carousel}; // For tests
-export default asBaseComponent<CarouselProps, typeof Carousel>(Carousel);
+export default asBaseComponent<CarouselProps, Carousel & {pageControlPositions: typeof PageControlPosition}>(Carousel);
 
 const styles = StyleSheet.create({
   counter: {