I'm recently using Native Base in my React Native app. I'm creating my customize theme and creating some variant for my buttons. I want to change background color if button is disabled.
These are default native base variants
[https://github.com/GeekyAnts/NativeBase/blob/v3-pre-beta/src/theme/components/button.ts] and I've seen how they're using props.isDisabled
to change some props.
But for me console.log are sending me undefined
Here is my code
import { extendTheme } from 'native-base'
import { Dict } from 'native-base/lib/typescript/theme/tools'
const variantLogin = (props: Dict) => {
console.log('const is disabled', props.isDisabled)
return {
bg: props.isDisabled
? theme?.colors?.gray['200']
: theme?.colors?.orange?.main,
_text: {
color: props.isDisabled
? theme?.colors?.gray['500']
: theme?.colors?.white,
},
}
}
export const theme = extendTheme({
colors: {
white: '#ffffff',
black: '#000000',
gray: {
100: '#f5f5f5',
200: '#d8d8d8',
300: '#c4c4c4',
500: '#828282',
800: '#4b4a4a',
900: '#1a1a1a',
},
gold: {
main: '#e7c14d',
},
},
components: {
Button: {
variants: {
login: variantLogin
}
}
}
})
export default theme
Color changes right with
<Button isDisabled={disabled} variant={'login'}>{text}</NativeButton>
It shows and orange button with white letters, but not when is disabled, only more transparency appears.
I don't know if there's a way to pass isDisabled
prop, but here's a way to solve it:
const variantLogin = (props: Dict) => {
return {
bg: theme?.colors?.orange?.main,
_disabled: {
bg: theme?.colors?.gray['200'],
},
_text: {
color: theme?.colors?.white,
_disabled: { color: theme?.colors?.gray['500']}
},
}
}