fix: combine styles

src/components/Accordion/Accordion.tsx

@@ -1,7 +1,8 @@
 import React, {useCallback, useMemo, useState} from 'react'
-import {FlatList, StyleProp, Text, TextStyle, ViewStyle} from 'react-native'
+import {FlatList, StyleSheet, StyleProp, Text, TextStyle, ViewStyle} from 'react-native'
 import {AccordionItem} from './AccordionItem'
 import type {AnimationType} from './ToggleAnimation'
+import {useTheme} from '../../hooks'
 
 type ViewStyleProp = StyleProp<ViewStyle> | Array<StyleProp<ViewStyle>>
 type TextTitleStyleProp = StyleProp<TextStyle> | Array<StyleProp<TextStyle>>
@@ -103,6 +104,7 @@ export interface AccordionProps extends CommonAccordionProps {
 
 const AccordionComponent = React.forwardRef<FlatList, AccordionProps>(
   ({sections, expandMultiple = false, keyExtractor, wrapperStyle, ...rest}, ref) => {
+    const AccordionTheme = useTheme().components.Accordion
     const [array, setArray] = useState<string[]>([])
 
     const _keyExtractor = useMemo(
@@ -149,7 +151,7 @@ const AccordionComponent = React.forwardRef<FlatList, AccordionProps>(
 
     return (
       <FlatList
-        style={wrapperStyle}
+        style={[AccordionTheme.wrapperStyle, StyleSheet.flatten(wrapperStyle)]}
         data={sections}
         ref={ref}
         keyExtractor={keyExtractor}

src/components/Button/Button.tsx

@@ -95,7 +95,7 @@ export const Button: React.FC<ButtonProps> = ({
       outlineWidth={outlineWidth}
       borderRadius={borderRadius ?? ButtonTheme.borderRadius}
       disabled={disabled}
-      style={[{height: ButtonTheme.height}, StyleSheet.flatten(style)]}
+      style={[{height: ButtonTheme.height}, ButtonTheme.style, StyleSheet.flatten(style)]}
       {...props}>
       {!!leftIcon && leftIcon}
       {typeof children === 'string' ? (

src/components/Card/Card.tsx

@@ -1,4 +1,5 @@
 import React, {PropsWithChildren} from 'react'
+import {StyleSheet} from 'react-native'
 import type {StyleProp, ViewStyle} from 'react-native'
 import styled from 'styled-components/native'
 import {activeOpacity} from '../../helpers'
@@ -45,7 +46,7 @@ export const Card: React.FC<CardProps> = ({
     <CardWrapper
       onPress={onPress}
       activeOpacity={onPress ? activeOpacity.low : activeOpacity.none}
-      style={style}
+      style={[CardTheme.style, StyleSheet.flatten(style)]}
       padding={padding ?? CardTheme.padding}
       borderRadius={borderRadius ?? CardTheme.borderRadius}
       backgroundColor={backgroundColor ?? CardTheme.backgroundColor}

src/components/Checkbox/Checkbox.tsx

@@ -7,6 +7,7 @@ import {
   ImageStyle,
   ImageSourcePropType,
   TouchableWithoutFeedbackProps,
+  StyleSheet,
 } from 'react-native'
 import Animated, {
   useAnimatedStyle,
@@ -211,7 +212,7 @@ export const Checkbox = forwardRef<ICheckboxMethods, ICheckboxProps>(
     return (
       <Container
         testID="container"
-        style={style}
+        style={[CheckboxTheme.style, StyleSheet.flatten(style)]}
         disabled={disabled}
         onPressIn={bounceInEffect}
         onPressOut={bounceOutEffect}

src/components/CodeInput/CodeInput.tsx

@@ -10,6 +10,7 @@ import React, {
 import {
   KeyboardTypeOptions,
   StyleProp,
+  StyleSheet,
   TextInput,
   TextInputProps,
   TextProps,
@@ -451,7 +452,7 @@ export const CodeInput = forwardRef<CodeInputRef, CodeInputProps>(
     }
 
     return (
-      <Container testID={testID} style={containerStyle}>
+      <Container testID={testID} style={[CodeInputTheme.containerStyle, StyleSheet.flatten(containerStyle)]}>
         {labelComponent ? (
           <LabelContainer testID={`${testID}-label-container`}>
             {labelComponent}

src/components/CountDown/CountDown.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-shadow */
 import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState} from 'react'
-import {type ViewProps, type TextStyle, type StyleProp} from 'react-native'
+import {type ViewProps, type TextStyle, type StyleProp, StyleSheet} from 'react-native'
 import styled from 'styled-components/native'
 import dayjs from 'dayjs'
 import {Text} from '../Text/Text'
@@ -281,15 +281,15 @@ export const CountDown = forwardRef<CountDownRef, CountDownProps>(
           fontSize={fontSize || CountDownTheme.fontSize}
           color={textColor || CountDownTheme.textColor}
           fontFamily={fontFamily || CountDownTheme.fontFamily}
-          style={textStyle || CountDownTheme.textStyle}>
+          style={[CountDownTheme.textStyle, StyleSheet.flatten(textStyle)]}>
           {value}
         </TimeText>
         {showLabels && (
           <LabelText
             fontSize={CountDownTheme.labelFontSize}
             color={textColor || CountDownTheme.labelColor}
             fontFamily={fontFamily || CountDownTheme.fontFamily}
-            style={unitTextStyle || CountDownTheme.unitTextStyle}>
+            style={[CountDownTheme.unitTextStyle, StyleSheet.flatten(unitTextStyle)]}>
             {timeLabels[unit.toLowerCase() as keyof typeof timeLabels]}
           </LabelText>
         )}
@@ -298,7 +298,7 @@ export const CountDown = forwardRef<CountDownRef, CountDownProps>(
             fontSize={fontSize || CountDownTheme.fontSize}
             color={textColor || CountDownTheme.textColor}
             fontFamily={fontFamily || CountDownTheme.fontFamily}
-            style={textStyle || CountDownTheme.textStyle}>
+            style={[CountDownTheme.textStyle, StyleSheet.flatten(textStyle)]}>
             {separator}
           </SeparatorText>
         )}
@@ -319,7 +319,7 @@ export const CountDown = forwardRef<CountDownRef, CountDownProps>(
 
       return (
         <CountDownContainer
-          style={style}
+          style={[CountDownTheme.style, StyleSheet.flatten(style)]}
           testID={testID}
           accessible={accessible}
           accessibilityRole={accessibilityRole}
@@ -332,7 +332,7 @@ export const CountDown = forwardRef<CountDownRef, CountDownProps>(
               fontSize={fontSize || CountDownTheme.fontSize}
               color={textColor || CountDownTheme.textColor}
               fontFamily={fontFamily || CountDownTheme.fontFamily}
-              style={textStyle || CountDownTheme.textStyle}>
+              style={[CountDownTheme.textStyle, StyleSheet.flatten(textStyle)]}>
               -
             </SeparatorText>
           )}
@@ -358,7 +358,7 @@ export const CountDown = forwardRef<CountDownRef, CountDownProps>(
       : `Countdown: ${countDownTime} seconds`
     return (
       <SimpleCountDownContainer
-        style={style}
+        style={[CountDownTheme.style, StyleSheet.flatten(style)]}
         testID={testID}
         accessible={accessible}
         accessibilityRole={accessibilityRole}
@@ -368,7 +368,7 @@ export const CountDown = forwardRef<CountDownRef, CountDownProps>(
           color={textColor || CountDownTheme.textColor}
           fontSize={fontSize || CountDownTheme.fontSize}
           fontFamily={fontFamily || CountDownTheme.fontFamily}
-          style={textStyle || CountDownTheme.textStyle}>
+          style={[CountDownTheme.textStyle, StyleSheet.flatten(textStyle)]}>
           {countDownTime}s
         </SimpleCountDownText>
       </SimpleCountDownContainer>

src/components/Icon/Icon.tsx

@@ -46,7 +46,7 @@ export const Icon: React.FunctionComponent<IconProps> = ({
       disabled={(!onPress && !onLongPress) || (disabled ?? IconTheme.disabled)}
       onPress={onPress}
       onLongPress={onLongPress}
-      style={buttonStyle ?? IconTheme.buttonStyle}
+      style={[IconTheme.buttonStyle, StyleSheet.flatten(buttonStyle)]}
       hitSlop={hitSlop}>
       <Image
         testID="icon-image"
@@ -57,7 +57,8 @@ export const Icon: React.FunctionComponent<IconProps> = ({
             height: size ?? IconTheme.size,
             tintColor: color ?? IconTheme.color,
           },
-          StyleSheet.flatten(style ?? IconTheme.style),
+          IconTheme.style,
+          StyleSheet.flatten(style),
         ]}
         resizeMode={resizeMode ?? IconTheme.resizeMode}
       />

src/components/RadioButton/RadioButton.tsx

@@ -158,8 +158,8 @@ export const RadioButton = forwardRef<View, IRadioButtonProps>(
         <LabelTextView
           disabled={!!(disabled ?? RadioButtonTheme.disabled)}
           disableOpacity={disableOpacity ?? RadioButtonTheme.disableOpacity}
-          style={textContainerStyle ?? RadioButtonTheme.textContainerStyle}>
-          <LabelText style={textStyle ?? RadioButtonTheme.textStyle}>{label}</LabelText>
+          style={[RadioButtonTheme.textContainerStyle, StyleSheet.flatten(textContainerStyle)]}>
+          <LabelText style={[RadioButtonTheme.textStyle, StyleSheet.flatten(textStyle)]}>{label}</LabelText>
         </LabelTextView>
       ) : null)
 
@@ -170,7 +170,9 @@ export const RadioButton = forwardRef<View, IRadioButtonProps>(
     }
 
     return (
-      <RadioButtonWrapper testID="container" style={wrapperStyle ?? RadioButtonTheme.wrapperStyle}>
+      <RadioButtonWrapper
+        testID="container"
+        style={[RadioButtonTheme.wrapperStyle, StyleSheet.flatten(wrapperStyle)]}>
         <Bounceable
           testID="bounceable"
           ref={ref}
@@ -187,7 +189,8 @@ export const RadioButton = forwardRef<View, IRadioButtonProps>(
                 disabled ?? RadioButtonTheme.disabled ? disableOpacity ?? RadioButtonTheme.disableOpacity : 1,
               borderWidth: RadioButtonTheme.borderWidth,
             },
-            style ?? RadioButtonTheme.style,
+            RadioButtonTheme.style,
+            style,
           ])}
           onPress={handlePress}
           {...rest}>
@@ -197,7 +200,7 @@ export const RadioButton = forwardRef<View, IRadioButtonProps>(
             inner={inner}
             isActive={!!(value ?? isActive)}
             innerBackgroundColor={innerBackgroundColor ?? RadioButtonTheme.innerBackgroundColor ?? '#007AFF'}
-            style={innerContainerStyle ?? RadioButtonTheme.innerContainerStyle}
+            style={[RadioButtonTheme.innerContainerStyle, StyleSheet.flatten(innerContainerStyle)]}
             testID="circle"
           />
         </Bounceable>

src/components/Slider/Slider.tsx

@@ -306,15 +306,16 @@ export const Slider: SliderComponentProps = ({
 
   return (
     <GestureHandlerRootView testID="slider">
-      <Container style={[!!sliderWidth && {width: sliderWidth}, style ?? SliderTheme.style]}>
-        <Track style={trackStyle ?? SliderTheme.trackStyle} onLayout={getTrackWidth} />
+      <Container
+        style={[!!sliderWidth && {width: sliderWidth}, SliderTheme.style, StyleSheet.flatten(style)]}>
+        <Track style={[SliderTheme.trackStyle, StyleSheet.flatten(trackStyle)]} onLayout={getTrackWidth} />
         {!!actualShowTrackPoint && (
           <TrackPoint
             sliderWidth={sliderWidth ?? 200}
             totalPoint={totalPoint}
             hitSlopPoint={actualHitSlopPoint}
             activeOpacity={actualTapToSeek ? 0 : 1}
-            trackPointStyle={trackPointStyle ?? SliderTheme.trackPointStyle}
+            trackPointStyle={[SliderTheme.trackPointStyle, StyleSheet.flatten(trackPointStyle)]}
             onPressPoint={(point: number) => actualTapToSeek && onPressPoint(point)}
           />
         )}
@@ -329,12 +330,16 @@ export const Slider: SliderComponentProps = ({
         <Thumb
           text={actualMinimumValue?.toString()}
           bgColorLabelView={bgColorLabelView ?? SliderTheme.bgColorLabelView}
-          labelStyle={labelStyle ?? SliderTheme.labelStyle}
+          labelStyle={[SliderTheme.labelStyle, StyleSheet.flatten(labelStyle)]}
           alwaysShowValue={actualAlwaysShowValue}
           thumbSize={actualThumbSize}
           thumbComponent={thumbComponent}
           animatedProps={animatedProps}
-          thumbStyle={[thumbStyle ?? SliderTheme.thumbStyle, {left: -actualThumbSize.width / 2}]}
+          thumbStyle={[
+            SliderTheme.thumbStyle,
+            StyleSheet.flatten(thumbStyle),
+            {left: -actualThumbSize.width / 2},
+          ]}
           animatedThumbStyle={animatedThumbStyle}
           opacityStyle={opacityStyle}
           onGestureEvent={handler}

src/components/Typography/Typography.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import {StyleSheet} from 'react-native'
 import styled from 'styled-components/native'
 import type {TextProps, TextStyle} from 'react-native'
 import {useTheme} from '../../hooks'
@@ -79,12 +80,7 @@ export const Typography: React.FC<TypographyProps> = ({
   return (
     <StyledText
       color={actualColor}
-      style={[
-        {
-          ...variantStyles,
-          ...(typeof style === 'object' ? style : {}),
-        },
-      ]}
+      style={[TypographyTheme.style, variantStyles, StyleSheet.flatten(style)]}
       {...rest}
     />
   )

src/theme/components/Accordion.ts

@@ -1,8 +1,12 @@
+import type {StyleProp, ViewStyle} from 'react-native'
 import base from '../base'
-import type {ViewStyle} from 'react-native'
 import type {IFontWeight} from '../base/typography'
 
 export interface AccordionThemeProps {
+  /**
+   * Style for the wrapper container
+   */
+  wrapperStyle?: StyleProp<ViewStyle>
   // Container styles
   container: {
     paddingBottom: number
@@ -42,6 +46,7 @@ export interface AccordionThemeProps {
 }
 
 export const AccordionTheme: AccordionThemeProps = {
+  wrapperStyle: undefined,
   container: {
     paddingBottom: base.spacing.petite,
     overflow: 'hidden',

src/theme/components/Button/Button.ts

@@ -1,9 +1,11 @@
+import type {StyleProp, ViewStyle} from 'react-native'
 import base from '../../base'
 import {metrics} from '../../../helpers'
 import type {ButtonProps} from '../../../components/Button/Button'
 
 export type ButtonThemeProps = {
   height?: number
+  style?: StyleProp<ViewStyle>
 } & Pick<
   ButtonProps,
   'backgroundColor' | 'disabledColor' | 'borderRadius' | 'textColor' | 'outlineWidth' | 'outlineColor'
@@ -15,4 +17,7 @@ export const ButtonTheme: ButtonThemeProps = {
   disabledColor: base.colors.muted,
   borderRadius: metrics.borderRadius,
   textColor: base.colors.white,
+  style: {
+    height: metrics.xxl,
+  },
 }

src/theme/components/Checkbox.ts

@@ -1,8 +1,11 @@
+import type {StyleProp, ViewStyle} from 'react-native'
 import base from '../base'
 import {metrics} from '../../helpers'
 import type {ICheckboxProps} from '../../components/Checkbox/Checkbox'
 
-export type CheckboxThemeProps = Pick<
+export type CheckboxThemeProps = {
+  style?: StyleProp<ViewStyle>
+} & Pick<
   ICheckboxProps,
   'size' | 'borderRadius' | 'fillColor' | 'unfillColor' | 'checkMarkColor' | 'borderWidth'
 >
@@ -14,4 +17,5 @@ export const CheckboxTheme: CheckboxThemeProps = {
   unfillColor: base.colors.transparent,
   checkMarkColor: base.colors.white,
   borderWidth: base.borderWidths.tiny,
+  style: undefined,
 }