fix: pass through native props to components

Author: minheq

src/components/Alert/Alert.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { TouchableOpacity, View } from 'react-native';
+import { TouchableOpacity, View, ViewProps } from 'react-native';
 import { DeepPartial } from 'ts-essentials';
 
 import { Intent } from '../../constants/Intent';
@@ -10,7 +10,7 @@ import { Spacing } from '../Layout';
 import { Strong, Text } from '../Typography';
 import { AlertStyles, GetAlertStyles, getAlertStyles } from './Alert.styles';
 
-export interface AlertProps {
+export interface AlertProps extends ViewProps {
   theme: Theme;
   title?: string;
   description?: string;
@@ -58,6 +58,7 @@ const AlertBase = (props: AlertProps) => {
     intent = 'info',
     getStyles,
     theme,
+    ...viewProps
   } = props;
 
   const { containerStyle, bodyStyle } = mergeStyles(getAlertStyles, getStyles)(
@@ -66,7 +67,7 @@ const AlertBase = (props: AlertProps) => {
   );
 
   return (
-    <View style={containerStyle}>
+    <View style={containerStyle} {...viewProps}>
       {icon || (
         <Spacing paddingRight={2} justifyContent="center">
           {resolveIcon(intent, theme)}

src/components/Avatar/Avatar.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Image, ImageSourcePropType, View } from 'react-native';
+import { Image, ImageSourcePropType, View, ViewProps } from 'react-native';
 import { DeepPartial } from 'ts-essentials';
 
 import { Theme, withTheme } from '../../theme';
@@ -26,7 +26,7 @@ export const globalGetInitials: GetInitialsType = (name, fallback = '?') => {
     .join('');
 };
 
-export interface AvatarProps {
+export interface AvatarProps extends ViewProps {
   /**
    * The source attribute of the image.
    * When it's not available, render initials instead.
@@ -99,6 +99,7 @@ export const AvatarBase = (props: AvatarProps) => {
     forceShowInitials = false,
     sizeLimitOneCharacter = 20,
     getStyles,
+    ...viewProps
   } = props;
 
   const { imageHasFailedLoading } = { imageHasFailedLoading: false };
@@ -125,7 +126,7 @@ export const AvatarBase = (props: AvatarProps) => {
   );
 
   return (
-    <View style={boxStyle}>
+    <View style={boxStyle} {...viewProps}>
       {(imageUnavailable || forceShowInitials) && (
         <Text
           getStyles={() => ({

src/components/Badge/Badge.styles.ts

@@ -1,6 +1,7 @@
 import { TextStyle, ViewStyle } from 'react-native';
 
 import { FillColor, Fills, Theme } from '../../theme/ThemeInterface';
+import { Shape, shapeMapping } from '../Layout/Box';
 
 export interface BadgeSizes {
   small: ViewStyle;
@@ -41,14 +42,15 @@ export const getBadgeVariables = (theme: Theme): BadgeVariables => {
 };
 
 export interface BadgeStylesProps {
+  shape: Shape;
   size: BadgeSize;
   color: FillColor;
   isSolid: boolean;
 }
 
 export interface BadgeStyles {
   textStyle: TextStyle;
-  boxStyle: ViewStyle;
+  containerStyle: ViewStyle;
 }
 
 export type GetBadgeStyles = (
@@ -57,11 +59,12 @@ export type GetBadgeStyles = (
 ) => BadgeStyles;
 
 export const getBadgeStyles: GetBadgeStyles = (
-  { size, color, isSolid },
+  { size, color, isSolid, shape },
   theme,
 ) => {
   const badgeVariables = getBadgeVariables(theme);
 
+  const shapeStyles = shapeMapping[shape];
   const fills = isSolid
     ? badgeVariables.fills.solid
     : badgeVariables.fills.subtle;
@@ -70,11 +73,17 @@ export const getBadgeStyles: GetBadgeStyles = (
   const { height, paddingLeft, paddingRight } = badgeVariables.sizes[size];
 
   return {
-    boxStyle: {
+    containerStyle: {
+      alignItems: 'center',
+      alignSelf: 'flex-start',
       backgroundColor: colors.backgroundColor,
+      display: 'flex',
+      flexDirection: 'row',
       height,
+      justifyContent: 'center',
       paddingLeft,
       paddingRight,
+      ...shapeStyles,
     },
     textStyle: {
       color: colors.color,

src/components/Badge/Badge.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { View, ViewProps } from 'react-native';
 import { DeepPartial } from 'ts-essentials';
 
 import { Theme, withTheme } from '../../theme';
@@ -13,7 +14,7 @@ import {
   getBadgeStyles,
 } from './Badge.styles';
 
-export interface BadgeProps {
+export interface BadgeProps extends ViewProps {
   children: React.ReactNode;
   theme: Theme;
   color?: FillColor;
@@ -32,29 +33,16 @@ const BadgeBase = (props: BadgeProps) => {
     shape = 'rounded',
     size = 'small',
     theme,
+    ...viewProps
   } = props;
 
-  const { boxStyle, textStyle } = mergeStyles(getBadgeStyles, getStyles)(
-    { size, color, isSolid },
+  const { containerStyle, textStyle } = mergeStyles(getBadgeStyles, getStyles)(
+    { size, color, isSolid, shape },
     theme,
   );
 
   return (
-    <Box
-      shape={shape}
-      style={{
-        alignItems: 'center',
-        alignSelf: 'flex-start',
-        backgroundColor: boxStyle.backgroundColor,
-        display: 'flex',
-        flexDirection: 'row',
-        height: boxStyle.height,
-        justifyContent: 'center',
-        paddingLeft: boxStyle.paddingLeft,
-        paddingRight: boxStyle.paddingRight,
-        ...boxStyle,
-      }}
-    >
+    <View style={containerStyle} {...viewProps}>
       <Strong
         size={size}
         getStyles={() => ({
@@ -63,7 +51,7 @@ const BadgeBase = (props: BadgeProps) => {
       >
         {children}
       </Strong>
-    </Box>
+    </View>
   );
 };
 

src/components/Checkbox/Checkbox.tsx

@@ -18,7 +18,7 @@ import {
 
 export type CheckboxShape = 'circle' | 'square';
 
-export interface CheckboxProps {
+export interface CheckboxProps extends TouchableHighlightProps {
   theme: Theme;
   isChecked?: boolean;
   isDisabled?: boolean;
@@ -31,7 +31,7 @@ export interface CheckboxProps {
   getStyles?: ReplaceReturnType<GetCheckboxStyles, DeepPartial<CheckboxStyles>>;
 }
 
-const CheckboxBase = (props: CheckboxProps & TouchableHighlightProps) => {
+const CheckboxBase = (props: CheckboxProps) => {
   const {
     isChecked = false,
     isDisabled = false,

src/components/Layout/Box.tsx

@@ -25,38 +25,44 @@ export interface BoxProps extends ViewStyle {
   shape?: Shape;
 }
 
-const shapeMap = {
+export const shapeMapping: {
+  [shape: string]: ViewStyle;
+} = {
   circle: {
-    borderRadius: '50%',
+    borderRadius: 999,
   },
   pill: {
-    borderRadius: '999px',
+    borderRadius: 999,
   },
   rounded: {
-    borderRadius: `${BASE_BORDER_RADII}px`,
+    borderRadius: BASE_BORDER_RADII,
   },
   roundedBottom: {
-    borderRadius: `0 0 ${BASE_BORDER_RADII}px ${BASE_BORDER_RADII}px`,
+    borderBottomLeftRadius: BASE_BORDER_RADII,
+    borderBottomRightRadius: BASE_BORDER_RADII,
   },
   roundedLeft: {
-    borderRadius: `${BASE_BORDER_RADII}px 0 0 ${BASE_BORDER_RADII}px`,
+    borderBottomLeftRadius: BASE_BORDER_RADII,
+    borderTopLeftRadius: BASE_BORDER_RADII,
   },
   roundedRight: {
-    borderRadius: `0 ${BASE_BORDER_RADII}px ${BASE_BORDER_RADII}px 0`,
+    borderBottomRightRadius: BASE_BORDER_RADII,
+    borderTopRightRadius: BASE_BORDER_RADII,
   },
   roundedTop: {
-    borderRadius: `${BASE_BORDER_RADII}px ${BASE_BORDER_RADII}px 0 0`,
+    borderTopLeftRadius: BASE_BORDER_RADII,
+    borderTopRightRadius: BASE_BORDER_RADII,
   },
   square: {
-    borderRadius: '0',
+    borderRadius: 0,
   },
 };
 
 const propToFn = {
   elevation: (elevation: 0 | 1 | 2 | 3 | 4, theme: Theme) => {
     return theme.elevations[elevation];
   },
-  shape: (shape: Shape) => shapeMap[shape],
+  shape: (shape: Shape) => shapeMapping[shape],
 };
 
 const Box = ({ theme, ...props }: BoxProps) => {

src/components/Progress/Progress.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Platform, View } from 'react-native';
+import { Platform, View, ViewProps } from 'react-native';
 import { Spring } from 'react-spring';
 import { DeepPartial } from 'ts-essentials';
 
@@ -12,15 +12,21 @@ import {
   ProgressStyles,
 } from './Progress.styles';
 
-export interface ProgressProps {
+export interface ProgressProps extends ViewProps {
   theme: Theme;
   percent?: number;
   size?: ProgressSize;
   getStyles?: ReplaceReturnType<GetProgressStyles, DeepPartial<ProgressStyles>>;
 }
 
 const ProgressBase = (props: ProgressProps) => {
-  const { percent = 0, size = 'medium', getStyles, theme } = props;
+  const {
+    percent = 0,
+    size = 'medium',
+    getStyles,
+    theme,
+    ...viewProps
+  } = props;
   const { containerStyle, progressStyle } = mergeStyles(
     getProgressStyles,
     getStyles,
@@ -30,7 +36,7 @@ const ProgressBase = (props: ProgressProps) => {
     <Spring to={{ value: percent }}>
       {({ value }) => {
         return (
-          <View style={containerStyle}>
+          <View style={containerStyle} {...viewProps}>
             <View
               // @ts-ignore
               accessibilityRole={Platform.OS === 'web' ? 'progress' : 'none'}