@hero-design/rn 7.1.3-alpha6 → 7.2.0

package/src/theme/global/index.ts

@@ -1,21 +1,35 @@
-import { systemPalette } from './colors';
-import { space } from './space';
-import { fonts, fontSizes, lineHeights } from './typography';
-import { borderWidths } from './borders';
+import { scale as defaultScale, Scale } from './scale';
+import { systemPalette as defaultSystemPalette, SystemPalette } from './colors';
+import { getFonts, getFontSizes, getLineHeights } from './typography';
+import { getSpace } from './space';
+import { getBorderWidths } from './borders';
 
-const globalTheme = {
-  colors: {
-    ...systemPalette,
-  },
-  space,
-  fonts,
-  fontSizes,
-  lineHeights,
-  borderWidths,
-};
+const getGlobalTheme = (scale: Scale, systemPalette: SystemPalette) => {
+  const fonts = getFonts(scale.font);
+  const fontSizes = getFontSizes(scale.fontSize);
+  const lineHeights = getLineHeights(fontSizes);
+  const borderWidths = getBorderWidths(scale.borderWidth);
+  const space = getSpace(scale.space);
 
-type GlobalTheme = typeof globalTheme;
+  return {
+    colors: {
+      ...systemPalette,
+    },
+    fonts,
+    fontSizes,
+    lineHeights,
+    borderWidths,
+    space,
+  };
+};
 
-export { GlobalTheme };
+type GlobalTheme = ReturnType<typeof getGlobalTheme>;
 
-export default globalTheme;
+export {
+  GlobalTheme,
+  Scale,
+  SystemPalette,
+  getGlobalTheme,
+  defaultScale,
+  defaultSystemPalette,
+};

package/src/theme/global/scale.ts

@@ -0,0 +1,18 @@
+const BASE_BORDER_WIDTH = 1;
+
+const BASE_SPACE = 8;
+
+const BASE_FONT = 'BeVietnamPro';
+
+const BASE_FONT_SIZE = 10;
+
+const scale = {
+  borderWidth: BASE_BORDER_WIDTH,
+  space: BASE_SPACE,
+  font: BASE_FONT,
+  fontSize: BASE_FONT_SIZE,
+};
+
+type Scale = typeof scale;
+
+export { scale, Scale };

package/src/theme/global/space.ts

@@ -1,17 +1,27 @@
 import { scale } from '../../utils/scale';
 
-const BASE = 8;
+interface Space {
+  large: number;
+  medium: number;
+  small: number;
+  xlarge: number;
+  xsmall: number;
+  xxlarge: number;
+  xxsmall: number;
+  xxxlarge: number;
+  xxxxlarge: number;
+}
 
-const space = {
-  xxsmall: scale(BASE * 0.25),
-  xsmall: scale(BASE * 0.5),
-  small: scale(BASE),
-  medium: scale(BASE * 2),
-  large: scale(BASE * 3),
-  xlarge: scale(BASE * 4),
-  xxlarge: scale(BASE * 5),
-  xxxlarge: scale(BASE * 6),
-  xxxxlarge: scale(BASE * 7),
-};
+const getSpace = (baseSpace: number): Space => ({
+  xxsmall: scale(baseSpace * 0.25),
+  xsmall: scale(baseSpace * 0.5),
+  small: scale(baseSpace),
+  medium: scale(baseSpace * 2),
+  large: scale(baseSpace * 3),
+  xlarge: scale(baseSpace * 4),
+  xxlarge: scale(baseSpace * 5),
+  xxxlarge: scale(baseSpace * 6),
+  xxxxlarge: scale(baseSpace * 7),
+});
 
-export { space };
+export { Space, getSpace };

package/src/theme/global/typography.ts

@@ -1,35 +1,79 @@
 import { scale } from '../../utils/scale';
 
-const BASE = 16;
+interface Fonts {
+  light: string;
+  regular: string;
+  semiBold: string;
+}
 
-const fonts = {
-  light: 'Be Vietnam Pro Light',
-  regular: 'Be Vietnam Pro Regular',
-  semiBold: 'Be Vietnam Pro SemiBold',
-};
+interface FontSizes {
+  xxxxxlarge: number;
+  xxxxlarge: number;
+  xxxlarge: number;
+  xxlarge: number;
+  xlarge: number;
+  large: number;
+  medium: number;
+  small: number;
+  xsmall: number;
+}
+
+type LineHeights = FontSizes;
+
+// Hero design web typo scale is following
+// https://www.ibm.com/design/language/typography/type-specs-ui#scales
+const genFontSize = (prev: number, at: number): number =>
+  prev + Math.floor(Math.abs((at - 2) / 4) + 1) * 2;
 
-const fontSizes = {
-  xxxxxlarge: scale(BASE * 2), //      32
-  xxxxlarge: scale(BASE * 1.75), //    28
-  xxxlarge: scale(BASE * 1.5), //      24
-  xxlarge: scale(BASE * 1.25), //      20
-  xlarge: scale(BASE * 1.125), //      18
-  large: scale(BASE), //               16
-  medium: scale(BASE * 0.875), //      14
-  small: scale(BASE * 0.75), //        12
-  xsmall: scale(BASE * 0.625), //      10
+const getFonts = (baseFont: string): Fonts => ({
+  light: `${baseFont}-Light`,
+  regular: `${baseFont}-Regular`,
+  semiBold: `${baseFont}-SemiBold`,
+});
+
+const getFontSizes = (baseFontSize: number): FontSizes => {
+  const fontSizes = Array.from(new Array(9));
+  fontSizes.forEach((_, index) => {
+    if (index === 0) {
+      fontSizes[0] = baseFontSize;
+    } else {
+      fontSizes[index] = genFontSize(fontSizes[index - 1], index);
+    }
+    return undefined;
+  });
+  return {
+    xxxxxlarge: scale(fontSizes[8]), // 32
+    xxxxlarge: scale(fontSizes[7]), //  28
+    xxxlarge: scale(fontSizes[6]), //   24
+    xxlarge: scale(fontSizes[5]), //    20
+    xlarge: scale(fontSizes[4]), //     18
+    large: scale(fontSizes[3]), //      16
+    medium: scale(fontSizes[2]), //     14
+    small: scale(fontSizes[1]), //      12
+    xsmall: scale(fontSizes[0]), //     10
+  };
 };
 
-const lineHeights = {
-  xxxxxlarge: fontSizes.xxxxxlarge + 8,
-  xxxxlarge: fontSizes.xxxxlarge + 8,
-  xxxlarge: fontSizes.xxxlarge + 8,
-  xxlarge: fontSizes.xxlarge + 8,
-  xlarge: fontSizes.xlarge + 8,
-  large: fontSizes.large + 8,
-  medium: fontSizes.medium + 8,
-  small: fontSizes.small + 8,
-  xsmall: fontSizes.xsmall + 8,
+const getLineHeights = (fontSizes: FontSizes): LineHeights => {
+  const additionalSpace = 8;
+  return {
+    xxxxxlarge: fontSizes.xxxxxlarge + additionalSpace,
+    xxxxlarge: fontSizes.xxxxlarge + additionalSpace,
+    xxxlarge: fontSizes.xxxlarge + additionalSpace,
+    xxlarge: fontSizes.xxlarge + additionalSpace,
+    xlarge: fontSizes.xlarge + additionalSpace,
+    large: fontSizes.large + additionalSpace,
+    medium: fontSizes.medium + additionalSpace,
+    small: fontSizes.small + additionalSpace,
+    xsmall: fontSizes.xsmall + additionalSpace,
+  };
 };
 
-export { fonts, fontSizes, lineHeights };
+export {
+  Fonts,
+  FontSizes,
+  LineHeights,
+  getFonts,
+  getFontSizes,
+  getLineHeights,
+};

package/src/theme/index.ts

@@ -1,4 +1,11 @@
-import globalTheme, { GlobalTheme } from './global';
+import {
+  GlobalTheme,
+  Scale,
+  SystemPalette,
+  getGlobalTheme,
+  defaultScale,
+  defaultSystemPalette,
+} from './global';
 
 import getBadgeTheme from './components/badge';
 import getBottomNavigationTheme from './components/bottomNavigation';
@@ -22,19 +29,25 @@ type Theme = GlobalTheme & {
   };
 };
 
-const getTheme = (theme: GlobalTheme = globalTheme): Theme => ({
-  ...theme,
-  __hd__: {
-    badge: getBadgeTheme(theme),
-    bottomNavigation: getBottomNavigationTheme(theme),
-    card: getCardTheme(theme),
-    divider: getDividerTheme(theme),
-    icon: getIconTheme(theme),
-    tabs: getTabsTheme(theme),
-    typography: getTypographyTheme(theme),
-    fab: getFABTheme(theme),
-  },
-});
+const getTheme = (
+  scale: Scale = defaultScale,
+  systemPallete: SystemPalette = defaultSystemPalette
+): Theme => {
+  const globalTheme = getGlobalTheme(scale, systemPallete);
+  return {
+    ...globalTheme,
+    __hd__: {
+      badge: getBadgeTheme(globalTheme),
+      bottomNavigation: getBottomNavigationTheme(globalTheme),
+      card: getCardTheme(globalTheme),
+      divider: getDividerTheme(globalTheme),
+      icon: getIconTheme(globalTheme),
+      tabs: getTabsTheme(globalTheme),
+      typography: getTypographyTheme(globalTheme),
+      fab: getFABTheme(globalTheme),
+    },
+  };
+};
 
 const theme = getTheme();
 

package/src/types.ts

@@ -0,0 +1,7 @@
+import { BottomNavigationTabType } from './components/BottomNavigation';
+import { IconName } from './components/Icon';
+import { TabType } from './components/Tabs';
+
+import { Theme } from './theme';
+
+export type { BottomNavigationTabType, IconName, TabType, Theme };

package/testUtils/setup.ts

@@ -2,6 +2,17 @@ jest.mock('react-native-vector-icons', () => ({
   createIconSetFromIcoMoon: jest.fn(() => 'HeroIcon'),
 }));
 
+jest.mock('react-native', () => {
+  const RN = jest.requireActual('react-native');
+
+  RN.Animated.timing = () => ({
+    start: () => jest.fn(),
+    stop: () => jest.fn(),
+  });
+
+  return RN;
+});
+
 jest.mock('../src/utils/scale', () => ({
   scale: jest.fn(size => size),
 }));

package/tsconfig.json

@@ -12,11 +12,7 @@
     "noImplicitThis": true,
     "noUnusedLocals": true,
     "skipLibCheck": true,
-    "types": ["jest", "styled-components", "styled-components-react-native"],
-    "baseUrl": ".",
-    "paths": {
-      "styled-components-native": ["./src/styled-components.ts"]
-    }
+    "types": ["jest"],
   },
   "include": ["src", "playground"],
   "exclude": ["node_modules"],

package/types/src/components/Badge/StyledBadge.d.ts

@@ -1,9 +1,20 @@
-import { View } from 'react-native';
+/// <reference types="react" />
+import { View, Text } from 'react-native';
 declare type ThemeIntent = 'success' | 'warning' | 'danger' | 'info';
-declare const StyledView: import("styled-components").StyledComponent<typeof View, import("../../theme").Theme, {
+declare const StyledView: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
     themeIntent: ThemeIntent;
-}, never>;
-declare const StyledText: import("styled-components").StyledComponent<({ children, fontSize, fontWeight, intent, ...nativeProps }: import("../Typography/Text").TextProps) => JSX.Element, import("../../theme").Theme, {
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const StyledText: import("@emotion/native").StyledComponent<import("react-native").TextProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
     themeIntent: ThemeIntent;
-}, never>;
+}, {}, {
+    ref?: import("react").Ref<Text> | undefined;
+}>;
 export { StyledView, StyledText };

package/types/src/components/Badge/index.d.ts

@@ -10,7 +10,7 @@ interface BadgeProps extends ViewProps {
      */
     intent?: 'success' | 'warning' | 'danger' | 'info';
     /**
-     * Addditional style.
+     * Additional style.
      */
     style?: StyleProp<ViewStyle>;
     /**

package/types/src/components/BottomNavigation/StyledBottomNavigation.d.ts

@@ -1,18 +1,52 @@
+/// <reference types="react" />
 import { View } from 'react-native';
-declare const BottomNavigationTab: import("styled-components").StyledComponent<typeof View, import("../../theme").Theme, {
+declare const BottomNavigationTab: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
     themeVisibility?: boolean | undefined;
-}, never>;
-declare const BottomNavigationContainer: import("styled-components").StyledComponent<typeof View, import("../../theme").Theme, {}, never>;
-declare const ContentWrapper: import("styled-components").StyledComponent<typeof View, import("../../theme").Theme, {}, never>;
-declare const BottomBarWrapper: import("styled-components").StyledComponent<typeof View, import("../../theme").Theme, {
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const BottomNavigationContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const ContentWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const BottomBarWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
     themeInsets: {
         top: number;
         right: number;
         bottom: number;
         left: number;
     };
-}, never>;
-declare const BottomBar: import("styled-components").StyledComponent<typeof View, import("../../theme").Theme, {}, never>;
-declare const BottomBarItem: import("styled-components").StyledComponent<typeof View, import("../../theme").Theme, {}, never>;
-declare const StyledBottomBarText: import("styled-components").StyledComponent<({ children, fontSize, fontWeight, intent, ...nativeProps }: import("../Typography/Text").TextProps) => JSX.Element, import("../../theme").Theme, {}, never>;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const BottomBar: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const BottomBarItem: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const StyledBottomBarText: import("@emotion/native").StyledComponent<import("../Typography/Text").TextProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {}>;
 export { BottomBar, BottomBarItem, BottomNavigationTab, BottomNavigationContainer, BottomBarWrapper, ContentWrapper, StyledBottomBarText, };

package/types/src/components/BottomNavigation/index.d.ts

@@ -1,19 +1,18 @@
 import { ReactNode } from 'react';
 import { StyleProp, ViewStyle, ViewProps } from 'react-native';
-import { IconProps } from '../Icon';
-declare type IconType = IconProps['icon'];
-export declare type Tab = {
+import { IconName } from '../Icon';
+export declare type BottomNavigationTabType = {
     key: string;
     title?: string;
-    icon: IconType;
+    icon: IconName;
     component: ReactNode;
     testID?: string;
 };
-interface BottomNavigationType extends ViewProps {
+interface BottomNavigationProps extends ViewProps {
     /**
-     * Callback which is called on tab change, receiving id of upcoming active Tab.
+     * Callback which is called on tab press, receiving key of upcoming active Tab.
      */
-    onChange: (key: string) => void;
+    onTabPress: (key: string) => void;
     /**
      * Whether inactive tabs should be removed and unmounted in React.
      * Defaults to `false`.
@@ -24,11 +23,17 @@ interface BottomNavigationType extends ViewProps {
      */
     selectedTabKey: string;
     /**
-     * List of Tab to be rendered. Each Tab must have an unique id.
+     * List of Tabs to be rendered. Each Tab must have an unique key.
      */
-    tabs: Tab[];
+    tabs: {
+        key: string;
+        title?: string;
+        icon: IconName;
+        component: ReactNode;
+        testID?: string;
+    }[];
     /**
-     * Addditional style.
+     * Additional style.
      */
     style?: StyleProp<ViewStyle>;
     /**
@@ -36,5 +41,5 @@ interface BottomNavigationType extends ViewProps {
      */
     testID?: string;
 }
-declare const BottomNavigation: ({ onChange, renderActiveTabOnly, selectedTabKey, tabs, ...nativeProps }: BottomNavigationType) => JSX.Element;
+declare const BottomNavigation: ({ onTabPress, renderActiveTabOnly, selectedTabKey, tabs, ...nativeProps }: BottomNavigationProps) => JSX.Element;
 export default BottomNavigation;

package/types/src/components/Button/IconButton.d.ts

@@ -1,14 +1,14 @@
 import { StyleProp, ViewStyle, TouchableOpacityProps } from 'react-native';
-import { IconProps } from '../Icon';
+import { IconProps, IconName } from '../Icon';
 export interface IconButtonProps {
     /**
-     * Set how far you can touch from the button
+     * Set how far you can touch from the button.
      */
     hitSlop?: TouchableOpacityProps['hitSlop'];
     /**
      * Name of the Icon.
      */
-    icon: IconProps['icon'];
+    icon: IconName;
     /**
      * Intent of the Icon.
      */
@@ -22,11 +22,11 @@ export interface IconButtonProps {
      */
     size?: IconProps['size'];
     /**
-     * Addditional style.
+     * Additional style.
      */
     style?: StyleProp<ViewStyle>;
     /**
-     * Testing id of component
+     * Testing id of component.
      */
     testID?: string;
 }

package/types/src/components/Card/StyledCard.d.ts

@@ -1,3 +1,9 @@
+/// <reference types="react" />
 import { View } from 'react-native';
-declare const StyledCard: import("styled-components").StyledComponent<typeof View, import("../../theme").Theme, {}, never>;
+declare const StyledCard: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
 export { StyledCard };

package/types/src/components/Divider/StyledDivider.d.ts

@@ -1,7 +1,13 @@
+/// <reference types="react" />
 import { View } from 'react-native';
 declare type MarginSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
-declare const StyledDivider: import("styled-components").StyledComponent<typeof View, import("../../theme").Theme, {
+declare const StyledDivider: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
     themeMarginHorizontal?: MarginSize | undefined;
     themeMarginVertical?: MarginSize | undefined;
-}, never>;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
 export { StyledDivider };

package/types/src/components/Divider/index.d.ts

@@ -9,7 +9,7 @@ interface DividerProps extends ViewProps {
      */
     marginVertical?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
     /**
-     * Addditional style.
+     * Additional style.
      */
     style?: StyleProp<ViewStyle>;
     /**

package/types/src/components/FAB/ActionGroup/StyledActionGroup.d.ts

@@ -1,12 +1,30 @@
+/// <reference types="react" />
 import { Animated, View, ViewProps } from 'react-native';
 import { TextProps } from '../../Typography/Text';
-declare const StyledContainer: import("styled-components").StyledComponent<typeof View, import("../../../theme").Theme, ViewProps, never>;
-declare const StyledActionGroupContainer: import("styled-components").StyledComponent<Animated.AnimatedComponent<typeof View>, import("../../../theme").Theme, Animated.AnimatedProps<ViewProps & import("react").RefAttributes<View>> & {
+declare const StyledContainer: import("@emotion/native").StyledComponent<ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const StyledActionGroupContainer: import("@emotion/native").StyledComponent<Animated.AnimatedProps<ViewProps & import("react").RefAttributes<View>> & {
     children?: import("react").ReactNode;
-}, never>;
-declare const StyledFAB: import("styled-components").StyledComponent<({ onPress, icon, animated, testID, active, style }: import("../FAB").FABProps) => JSX.Element, import("../../../theme").Theme, {}, never>;
-declare const StyledBackdrop: import("styled-components").StyledComponent<Animated.AnimatedComponent<typeof View>, import("../../../theme").Theme, Animated.AnimatedProps<ViewProps & import("react").RefAttributes<View>> & {
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {}>;
+declare const StyledFAB: import("@emotion/native").StyledComponent<import("../FAB").FABProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {}>;
+declare const StyledBackdrop: import("@emotion/native").StyledComponent<Animated.AnimatedProps<ViewProps & import("react").RefAttributes<View>> & {
     children?: import("react").ReactNode;
-}, never>;
-declare const StyledHeaderText: import("styled-components").StyledComponent<({ children, fontSize, fontWeight, intent, ...nativeProps }: TextProps) => JSX.Element, import("../../../theme").Theme, TextProps, never>;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {}>;
+declare const StyledHeaderText: import("@emotion/native").StyledComponent<TextProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {}>;
 export { StyledHeaderText, StyledBackdrop, StyledContainer, StyledActionGroupContainer, StyledFAB, };

package/types/src/components/FAB/ActionGroup/StyledActionItem.d.ts

@@ -1,4 +1,13 @@
+/// <reference types="react" />
 import { TouchableOpacity, TouchableOpacityProps } from 'react-native';
-declare const StyledActionItem: import("styled-components").StyledComponent<typeof TouchableOpacity, import("../../../theme").Theme, TouchableOpacityProps, never>;
-declare const StyledActionItemText: import("styled-components").StyledComponent<({ children, fontSize, fontWeight, intent, ...nativeProps }: import("../../Typography/Text").TextProps) => JSX.Element, import("../../../theme").Theme, TouchableOpacityProps, never>;
+declare const StyledActionItem: import("@emotion/native").StyledComponent<TouchableOpacityProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {
+    ref?: import("react").Ref<TouchableOpacity> | undefined;
+}>;
+declare const StyledActionItemText: import("@emotion/native").StyledComponent<import("../../Typography/Text").TextProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & TouchableOpacityProps, {}, {}>;
 export { StyledActionItem, StyledActionItemText };

package/types/src/components/FAB/ActionGroup/index.d.ts

@@ -11,7 +11,7 @@ export interface ActionGroupProps {
      * */
     active?: boolean;
     /**
-     * Addditional style.
+     * Additional style.
      */
     style?: StyleProp<ViewStyle>;
     /**

package/types/src/components/FAB/FAB.d.ts

@@ -1,13 +1,13 @@
 import { StyleProp, ViewStyle } from 'react-native';
-import { IconProps } from '../Icon';
+import { IconName } from '../Icon';
 export interface FABProps {
     /**
      * Name of the Icon.
      */
-    icon: IconProps['icon'];
+    icon: IconName;
     /**
      * This function is called on pressing the button.
-     * */
+     */
     onPress?: () => void;
     /**
      * Specify if the button is animated.
@@ -18,7 +18,7 @@ export interface FABProps {
      */
     active?: boolean;
     /**
-     * Addditional style.
+     * Additional style.
      */
     style?: StyleProp<ViewStyle>;
     /**