react-native-ficus-ui icon indicating copy to clipboard operation
react-native-ficus-ui copied to clipboard

Unable to Style Input Component via Theme Configuration

Open omar-bear opened this issue 1 year ago • 1 comments

Description

I am unable to style the Input component from the theme.

After looking through the Ficus UI codebase and examining the useDefaultProps hook, which is supposed to grab the Input component's style from the theme, I styled the Input in the following way:

import { InputProps } from 'react-native-ficus-ui';
import foundations from '@/theme/foundations';

export default {
  name: 'light',
  ...foundations,
  components: {
    // ...other components
    Input: {
      variant: 'default',
      variants: {
        default: {
          colorScheme: 'gray',
          bg: 'gray.50',
          borderColor: 'gray.200',
          borderWidth: 1,
          focusBorderWidth: 2,
          borderRadius: 'full',
          focusBorderColor: 'success.600',
          placeholderTextColor: 'gray.400',
        } as InputProps,
      },
    },
    // ...other components
  },
};

I also tried directly like this:

import { InputProps } from 'react-native-ficus-ui';
import foundations from '@/theme/foundations';

export default {
  name: 'light',
  ...foundations,
  components: {
    // ...other components
    Input: {
      colorScheme: 'gray',
      bg: 'gray.50',
      borderColor: 'gray.200',
      borderWidth: 1,
      focusBorderWidth: 2,
      borderRadius: 'full',
      focusBorderColor: 'success.600',
      placeholderTextColor: 'gray.400',
    },
    // ...other components
  },
};

However, it's still not working.

omar-bear avatar Feb 14 '24 10:02 omar-bear