Skip to content

Switch Component V2 - props are not overriden #99

@heloise-gllm

Description

@heloise-gllm

Switch component V2 is not customizable, the props seems to not be spread correctly.

I can't custom the w and h of the track nor for the thumb.
The bg color is never applied.
I can't use it with the theme despite having a FicusProvider with the theme props, and the following file that is imported in my index.ts.
But this file does not alter the Switch style (for example the colorScheme is not applied)

import {
  createMultiStyleConfigHelpers,
  defineStyle,
} from 'react-native-ficus-ui';

const sliderParts = ['container', 'thumb', 'track'] as const;

const { definePartsStyle, defineMultiStyleConfig } =
  createMultiStyleConfigHelpers(sliderParts);

const baseContainerStyle = defineStyle({});

const baseTrackStyle = defineStyle((props) => ({
  flexDirection: 'row',
  alignItems: 'center',
  borderRadius: 'full',
  bg: 'gray.950',

  _checked: {
    bg: `${props.colorScheme}.500`,
  },
}));

const baseThumbStyle = defineStyle({
  borderRadius: 'full',
  w: 24,
  h: 24,
  color: 'yellow',
  _checked: {
    color: 'black',
  },
});

const baseStyle = definePartsStyle((props) => ({
  container: baseContainerStyle,
  track: baseTrackStyle(props),
  thumb: baseThumbStyle,
}));

const sizes = {
  xs: defineStyle({
    track: {
      h: 16,
      w: 36,
      p: 2,
    },
    thumb: {
      w: 8,
      h: 8,
    },
  }),
  sm: defineStyle({
    track: {
      h: 24,
      w: 40,
      p: 2,
    },
    thumb: {
      w: 20,
      h: 20,
    },
  }),
  md: defineStyle({
    track: {
      h: 30,
      w: 55,
      p: 2,
    },
    thumb: {
      w: 26,
      h: 26,
    },
  }),
  lg: defineStyle({
    track: {
      h: 36,
      w: 70,
      p: 2,
    },
    thumb: {
      w: 32,
      h: 32,
    },
  }),
};

export const switchTheme = defineMultiStyleConfig({
  baseStyle,
  sizes,
  defaultProps: {
    size: 'xs',
    colorScheme: 'yellow',
    duration: 100,
  },
});

I tried reloading and restarting the app.


This was how the component was used in V1:

 <Switch
        
        activeThumbBg: 'black',
        thumbBg: theme.colors.main,
        activeBg: theme.colors.main,
        thumbSize: 8,
        
        bg={isEcoMode ? theme.colors.main : 'gray.950'}
        colorScheme="yellow"
        h={16}
        w={32}
        duration={100}
        isChecked={isEcoMode}
        onPress={toggleEcoMode}
      />

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions