-
Notifications
You must be signed in to change notification settings - Fork 4
Open
Description
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
Labels
No labels