react-native-elements · arpitBhalla · Feb 26, 2022 · Feb 26, 2022 · Feb 26, 2022 · Feb 26, 2022
diff --git a/example/src/views/circularSlider.tsx b/example/src/views/circularSlider.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
-import { CircularSlider } from '@react-native-elements/circular-slider';
+import CircularSlider from '@react-native-elements/circular-slider';
 import { Header } from '../components/header';
 
 export default function () {

diff --git a/example/src/views/ratings.tsx b/example/src/views/ratings.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { StyleSheet, Text, View, Platform, ScrollView } from 'react-native';
-// import { Rating, AirbnbRating, RatingProps } from 'react-native-ratings';
+import { Rating, AirbnbRating } from '@react-native-elements/themed';
 import { Header } from '../components/header';
 
 const WATER_IMAGE = require('../images/water.png');
@@ -16,7 +16,7 @@ const Ratings: React.FunctionComponent<RatingsComponentProps> = () => {
   return (
     <View style={styles.container}>
       <Header title="Ratings" view="rating" />
-      {/* <ScrollView style={styles.viewContainer}>
+      <ScrollView style={styles.viewContainer}>
         <Text
           style={[
             styles.titleText,
@@ -63,7 +63,7 @@ const Ratings: React.FunctionComponent<RatingsComponentProps> = () => {
             showRating
             imageSize={40}
             onFinishRating={ratingCompleted}
-            {...(ratingProps as RatingProps)}
+            {...ratingProps}
             style={{ paddingVertical: 10 }}
           />
           <Rating
@@ -97,7 +97,7 @@ const Ratings: React.FunctionComponent<RatingsComponentProps> = () => {
             style={styles.rating}
           />
         </View>
-      </ScrollView> */}
+      </ScrollView>
     </View>
   );
 };

diff --git a/example/src/views/social_icons.tsx b/example/src/views/social_icons.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { View, ScrollView } from 'react-native';
 import { SocialIcon, SocialIconProps } from '@react-native-elements/themed';
 import { Header } from '../components/header';
-import { SocialMediaType } from '@react-native-elements/themed/dist/SocialIcon/SocialIcon';
+import { SocialMediaType } from '@react-native-elements/themed';
 import _ from 'lodash';
 
 type IconData = {

diff --git a/packages/base/src/AirbnbRating/AirbnbRating.tsx b/packages/base/src/AirbnbRating/AirbnbRating.tsx
@@ -5,7 +5,7 @@ import {
 } from 'react-native-ratings';
 import { RneFunctionComponent } from '../helpers';
 
-export type TapRatingProps = RatingProps;
+export interface TapRatingProps extends RatingProps {}
 
 /** Ratings are used to collect measurable feedback from users.
  * Use Rating over an Input where imagery can increase user interaction.

diff --git a/packages/base/src/Avatar/Avatar.Accessory.tsx b/packages/base/src/Avatar/Avatar.Accessory.tsx
@@ -17,13 +17,14 @@ import {
 } from '../helpers';
 
 export type AccessoryProps = Partial<IconProps> &
-  Partial<ImageProps> & {
+  Partial<ImageProps> &
+  InlinePressableProps & {
     /** Add underlay color to the accessory of avatar. */
     underlayColor?: ColorValue;
 
     /** Add custom styling to the accessory of avatar. */
     style?: StyleProp<ViewStyle>;
-  } & InlinePressableProps;
+  };
 
 /** This is used for adding an accessory to the Avatar.
  * Receives either all [Icon](icon#props) or [Image](image#props) props. */

diff --git a/packages/base/src/Avatar/Avatar.tsx b/packages/base/src/Avatar/Avatar.tsx
@@ -31,7 +31,7 @@ type AvatarIcon = IconObject & {
   iconStyle?: StyleProp<TextStyle>;
 };
 
-export type AvatarProps = {
+export interface AvatarProps extends InlinePressableProps {
   /** Component for enclosing element (eg: TouchableHighlight, View, etc).
    *
    *  @default `Press handlers present then Pressable else View`
@@ -88,7 +88,7 @@ export type AvatarProps = {
 
   /** Custom ImageComponent for Avatar. */
   ImageComponent?: React.ComponentClass;
-} & InlinePressableProps;
+}
 
 /**
  * Avatars are found all over ui design from lists to profile screens.

diff --git a/packages/base/src/Badge/Badge.tsx b/packages/base/src/Badge/Badge.tsx
@@ -16,7 +16,7 @@ import {
   RneFunctionComponent,
 } from '../helpers';
 
-export type BadgeProps = {
+export interface BadgeProps extends InlinePressableProps {
   /** Style for the container. */
   containerStyle?: StyleProp<ViewStyle>;
 
@@ -39,7 +39,7 @@ export type BadgeProps = {
 
   /** Determines color of the indicator. */
   status?: 'primary' | 'success' | 'warning' | 'error';
-} & InlinePressableProps;
+}
 
 /** Badges are small components typically used to communicate a numerical value or indicate the status of an item to the user. */
 export const Badge: RneFunctionComponent<BadgeProps> = ({

diff --git a/packages/base/src/BottomSheet/BottomSheet.tsx b/packages/base/src/BottomSheet/BottomSheet.tsx
@@ -13,7 +13,7 @@ import {
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { RneFunctionComponent } from '../helpers';
 
-export type BottomSheetProps = {
+export interface BottomSheetProps {
   /** Style of the bottom sheet's container. Use this to change the color of the underlay. */
   containerStyle?: StyleProp<ViewStyle>;
 
@@ -31,7 +31,7 @@ export type BottomSheetProps = {
 
   /** Used to add props to Scroll view. */
   scrollViewProps?: ScrollViewProps;
-};
+}
 
 /**
  * Overlay Modal that displays content from the bottom of the screen.

diff --git a/packages/base/src/ButtonGroup/ButtonGroup.tsx b/packages/base/src/ButtonGroup/ButtonGroup.tsx
@@ -19,7 +19,7 @@ import {
 } from '../helpers';
 import { Text } from '../Text';
 
-export type ButtonGroupProps = InlinePressableProps & {
+export interface ButtonGroupProps extends InlinePressableProps {
   /** Button for the component. */
   button?: object;
 
@@ -97,7 +97,7 @@ export type ButtonGroupProps = InlinePressableProps & {
 
   /** Display the ButtonGroup vertically. */
   vertical?: boolean;
-};
+}
 
 /** ButtonGroup is a linear set of segments, each of which function as a button that can display a different view/or perform a different action.
  * Use a ButtonGroup to offer choices that are closely related but mutually exclusive.

diff --git a/packages/base/src/Card/Card.Divider.tsx b/packages/base/src/Card/Card.Divider.tsx
@@ -3,7 +3,7 @@ import { StyleSheet } from 'react-native';
 import { DividerProps, Divider } from '../Divider';
 import { RneFunctionComponent } from '../helpers';
 
-export type CardDividerProps = DividerProps;
+export interface CardDividerProps extends DividerProps {}
 
 /** Add divider to the card which acts as a separator between elements.
  * This, Receives all [Divider](divider#props) props. */

diff --git a/packages/base/src/Card/Card.FeaturedSubtitle.tsx b/packages/base/src/Card/Card.FeaturedSubtitle.tsx
@@ -5,7 +5,7 @@ import { fonts } from '../helpers/index-config';
 import { Text, TextProps } from '../Text';
 import { defaultTheme, RneFunctionComponent } from '../helpers';
 
-export type CardFeaturedSubtitleProps = TextProps;
+export interface CardFeaturedSubtitleProps extends TextProps {}
 
 /** Add a featured subtitle to the Card.
  * This, Receives all [Text](text#props) props. */

diff --git a/packages/base/src/Card/Card.FeaturedTitle.tsx b/packages/base/src/Card/Card.FeaturedTitle.tsx
@@ -5,7 +5,7 @@ import { fonts } from '../helpers/index-config';
 import { Text, TextProps } from '../Text';
 import { defaultTheme, RneFunctionComponent } from '../helpers';
 
-export type CardFeaturedTitleProps = TextProps;
+export interface CardFeaturedTitleProps extends TextProps {}
 
 /** Add a featured title to the Card.
  * This, Receives all [Text](text#props) props. */

diff --git a/packages/base/src/Card/Card.Image.tsx b/packages/base/src/Card/Card.Image.tsx
@@ -3,7 +3,7 @@ import { StyleSheet } from 'react-native';
 import { RneFunctionComponent } from '../helpers';
 import { ImageProps, Image } from '../Image';
 
-export type CardImageProps = ImageProps;
+export interface CardImageProps extends ImageProps {}
 
 /** Add information in the form of image to the card.
  * This, Receives all [Image](Image.mdx#props) props. */

diff --git a/packages/base/src/Card/Card.Title.tsx b/packages/base/src/Card/Card.Title.tsx
@@ -5,7 +5,7 @@ import { fonts } from '../helpers/index-config';
 import { Text, TextProps } from '../Text';
 import { defaultTheme, RneFunctionComponent } from '../helpers';
 
-export type CardTitleProps = TextProps;
+export interface CardTitleProps extends TextProps {}
 
 /** Add a general title to the Card.
  * This, Receives all [Text](text#props) props. */

diff --git a/packages/base/src/Card/Card.tsx b/packages/base/src/Card/Card.tsx
@@ -2,13 +2,13 @@ import React from 'react';
 import { View, Platform, StyleSheet, StyleProp, ViewStyle } from 'react-native';
 import { defaultTheme, RneFunctionComponent } from '../helpers';
 
-export type CardBaseProps = {
+export interface CardBaseProps {
   /** Outer container style. */
   containerStyle?: StyleProp<ViewStyle>;
 
   /** Inner container style. */
   wrapperStyle?: StyleProp<ViewStyle>;
-};
+}
 
 /** Cards are a great way to display information, usually containing content and actions about a single subject.
  * Cards can contain images, buttons, text and more.

diff --git a/packages/base/src/CheckBox/CheckBox.tsx b/packages/base/src/CheckBox/CheckBox.tsx
@@ -15,41 +15,40 @@ import { CheckBoxIcon, CheckBoxIconProps } from './components/CheckBoxIcon';
 import { fonts } from '../helpers/index-config';
 import { defaultTheme, RneFunctionComponent } from '../helpers';
 
-export type CheckBoxProps = PressableProps &
-  CheckBoxIconProps & {
-    /** Specify React Native component for main button. */
-    Component?: typeof React.Component;
+export interface CheckBoxProps extends PressableProps, CheckBoxIconProps {
+  /** Specify React Native component for main button. */
+  Component?: typeof React.Component;
 
-    /** Moves icon to right of text. */
-    iconRight?: boolean;
+  /** Moves icon to right of text. */
+  iconRight?: boolean;
 
-    /** Title of checkbox. */
-    title?: string | React.ReactElement<{}>;
+  /** Title of checkbox. */
+  title?: string | React.ReactElement<{}>;
 
-    /** Additional props for the title Text component. */
-    titleProps?: TextProps;
+  /** Additional props for the title Text component. */
+  titleProps?: TextProps;
 
-    /** Aligns checkbox to center. */
-    center?: boolean;
+  /** Aligns checkbox to center. */
+  center?: boolean;
 
-    /** Aligns checkbox to right. */
-    right?: boolean;
+  /** Aligns checkbox to right. */
+  right?: boolean;
 
-    /** Style of main container. */
-    containerStyle?: StyleProp<ViewStyle>;
+  /** Style of main container. */
+  containerStyle?: StyleProp<ViewStyle>;
 
-    /** Style for the wrapper of checkbox. */
-    wrapperStyle?: StyleProp<ViewStyle>;
+  /** Style for the wrapper of checkbox. */
+  wrapperStyle?: StyleProp<ViewStyle>;
 
-    /** Style of text. */
-    textStyle?: StyleProp<TextStyle>;
+  /** Style of text. */
+  textStyle?: StyleProp<TextStyle>;
 
-    /** Specify a custom checked message. */
-    checkedTitle?: string;
+  /** Specify a custom checked message. */
+  checkedTitle?: string;
 
-    /** Specify different font family. */
-    fontFamily?: string;
-  };
+  /** Specify different font family. */
+  fontFamily?: string;
+}
 
 /** CheckBoxes allow users to complete tasks that involve making choices such as selecting options, or switching settings - On or Off.
  * It provides a clear visual of either a true or false choice. */

diff --git a/packages/base/src/CheckBox/components/CheckBoxIcon.tsx b/packages/base/src/CheckBox/components/CheckBoxIcon.tsx
@@ -3,7 +3,7 @@ import { RneFunctionComponent } from '../../helpers';
 import getIconType from '../../helpers/getIconType';
 import { IconType } from '../../Icon';
 
-export type CheckBoxIconProps = {
+export interface CheckBoxIconProps {
   /** Flag for checking the icon. */
   checked: boolean;
 
@@ -30,7 +30,7 @@ export type CheckBoxIconProps = {
 
   /** Default unchecked color. */
   uncheckedColor?: string;
-};
+}
 
 export const CheckBoxIcon: RneFunctionComponent<CheckBoxIconProps> = ({
   checked,

diff --git a/packages/base/src/Chip/Chip.tsx b/packages/base/src/Chip/Chip.tsx
@@ -3,13 +3,11 @@ import { StyleSheet, TouchableWithoutFeedback } from 'react-native';
 import { RneFunctionComponent } from '../helpers';
 import { ButtonProps, Button } from '../Button';
 
-export type ChipProps = Omit<
-  ButtonProps,
-  'loading' | 'loadingStyle' | 'loadingProps'
-> & {
+export interface ChipProps
+  extends Omit<ButtonProps, 'loading' | 'loadingStyle' | 'loadingProps'> {
   /** Type of button. */
   type?: 'solid' | 'outline';
-};
+}
 
 /** Chips are compact elements that represent an input, attribute, or action.
  * They may display text, icons, or both. */

diff --git a/packages/base/src/Dialog/Dialog.Actions.tsx b/packages/base/src/Dialog/Dialog.Actions.tsx
@@ -2,10 +2,10 @@ import React, { ReactNode } from 'react';
 import { View, StyleSheet } from 'react-native';
 import { RneFunctionComponent } from '../helpers';
 
-export type DialogActionsProps = {
+export interface DialogActionsProps {
   /** Add Enclosed components as an action to the dialog. */
   children?: ReactNode;
-};
+}
 
 /** Define Dialog Actions using this component. */
 export const DialogActions: RneFunctionComponent<DialogActionsProps> = ({

diff --git a/packages/base/src/Dialog/Dialog.Button.tsx b/packages/base/src/Dialog/Dialog.Button.tsx
@@ -3,7 +3,7 @@ import { StyleSheet } from 'react-native';
 import { ButtonProps, Button } from '../Button';
 import { RneFunctionComponent } from '../helpers';
 
-export type DialogButtonProps = ButtonProps;
+export interface DialogButtonProps extends ButtonProps {}
 
 /** This is used to add a button to the Dialog.
  * Receives all [Button](button#props) props. */

diff --git a/packages/base/src/Dialog/Dialog.Loading.tsx b/packages/base/src/Dialog/Dialog.Loading.tsx
@@ -9,13 +9,13 @@ import {
 } from 'react-native';
 import { defaultTheme, RneFunctionComponent } from '../helpers';
 
-export type DialogLoadingProps = {
+export interface DialogLoadingProps {
   /** Add additional styling for loading component. */
   loadingStyle?: StyleProp<ViewStyle>;
 
   /** Add additional props for ActivityIndicator component */
   loadingProps?: ActivityIndicatorProps;
-};
+}
 
 /** `DialogLoader` allows adding loader to the Dialog. Loader is simply ActivityIndicator. */
 export const DialogLoading: RneFunctionComponent<DialogLoadingProps> = ({

diff --git a/packages/base/src/Dialog/Dialog.Title.tsx b/packages/base/src/Dialog/Dialog.Title.tsx
@@ -3,7 +3,7 @@ import { Text, StyleSheet, TextStyle, StyleProp, Platform } from 'react-native';
 import { RneFunctionComponent } from '../helpers';
 import { TextProps } from '../Text';
 
-export type DialogTitleProps = {
+export interface DialogTitleProps {
   /** Add Dialog title. */
   title?: string;
 
@@ -12,7 +12,7 @@ export type DialogTitleProps = {
 
   /** Add additional props for Text component. */
   titleProps?: TextProps;
-};
+}
 
 /** `DialogTitle` allows you to add title to the Dialog. */
 export const DialogTitle: RneFunctionComponent<DialogTitleProps> = ({

diff --git a/packages/base/src/Dialog/Dialog.tsx b/packages/base/src/Dialog/Dialog.tsx
@@ -3,16 +3,14 @@ import { View, StyleSheet, StyleProp, ViewStyle } from 'react-native';
 import { Overlay, OverlayProps } from '../Overlay';
 import { RneFunctionComponent } from '../helpers';
 
-export type DialogBaseProps = Omit<OverlayProps, 'fullScreen'> & {
+export interface DialogBaseProps
+  extends Partial<Omit<OverlayProps, 'fullScreen'>> {
   /** Add Enclosed components. */
   children?: ReactNode;
 
-  /** If true, the dialog is visible. */
-  isVisible?: boolean;
-
   /** Add additional styling to the internal Overlay component. */
   overlayStyle?: StyleProp<ViewStyle>;
-};
+}
 
 /** Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.
  * You can wrap any component with a simple Dialog component to display quick information to the user.