react-nativenative-base

Creating customize theme variant for Button in Native Base (changing disabled colors)


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.


Solution

  • 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']}
        },
      }
    }