Customize Input component theme no longer working

[pierroo]

Description

With latest update 3.4.1, customizing template no longer works for some props

CodeSandbox/Snack link

https://docs.nativebase.io/next/customizing-components

Steps to reproduce

When using <Input> components, I used to have my extended Theme customized components, most of them now are broken with your latest update. For example:

components: {
    Input: {
      baseStyle: ({ colorMode }) => {
        return {
          bg: colorMode === 'light' ? '#F0F3F7' : BACKGROUND_PRIMARY,
          color: colorMode === 'light' ? '#172B4D' : '#fff',
          borderColor: 'transparent', // => not working
          borderWidth: 0, // => not working
          rounded: 'xl', // => not working
          px: 4,
          py: 3,
          _focus: {
            style: {
              borderColor: '#3BB3EA',
              backgroundColor: colorMode === 'light' ? 'white' : BACKGROUND_PRIMARY,
            }
          },
        }
      },
      defaultProps: {
        fontSize: '16px'
      }
    },
...

So now I have to go back to ALL my Input all over the app to customize them inline. Plus, if I add a rounded props on the input for example, the "focused outline" is completely square without the rounded props! It used to work just fine, I'm at loss of how impacting this is.

Is it a known issue?

Additional regression: InputLeftElement + InputRightElement now take their own default greyish background color when main Input is focused; which is not wanted: just like before, I would like those side element to keep the same background as the Input they are attached to.

I guess the documentation isn't updated yet for latest version? How can I customize Input through BaseStyle? (even placeholder colors, etc)

NativeBase Version

3.4.1

Platform

• [X] Android
• [ ] CRA
• [ ] Expo
• [ ] iOS
• [ ] Next

Other Platform

No response

Additional Information

No response

[ankit-tailor]

Hi @pierroo, Thanks for reporting the issue. We'll fix it soon.

[pierroo]

Hi @ankit-tailor thank you for looking into it. I see your latest release 3.4.3 mentioned some changes and fixes for the input, unfortunately it is even more broken than before. Not only the above still applies, but now there is also a weird issue with padding: when not focus, padding is respected; and suddenly when focused, the padding jumped to a different value, then I start typing and now the padding jumps back to normal. Super distracting and unwanted.

Also, now it seems that my customized borderWidth colored on input focused is broken: Which is a new issue again.

I also saw this new "fix" for 3.4.3: https://github.com/GeekyAnts/NativeBase/commit/b7332c3a86c9cafb144598ca508b39c0c73e80bf Supposed to fix the placeholder text styling, but it is still broken and doesn't respect my value.

For example in dark mode, placeholder is supposed to by white:

[Southclaws]

I'm seeing this too, you can set defaultProps in the theme and that works but baseStyle does not.

Setting per-component works as a workaround, luckily we're wrapping form components with a react hook form controller so this is easy to do app-wide.

          render={({ field }) => (
            <Input
              // NOTE: This is a fix for https://github.com/GeekyAnts/NativeBase/issues/4951
              {...overrides["Input"]?.baseStyle({ ...props, colorMode })} // from useColorMode
              {...props}
              value={field.value}
              onChangeText={(val) => field.onChange(val)}
              onBlur={field.onBlur}
              autoCompleteType={autoCompleteType ?? "off"}
            />
          )}

not ideal as it requires a useColorMode call in every single form component but it's fine until this is fixed and by importing our theme data with overrides["Input"].baseStyle means we can continue to tweak our themes via the proper theme file instead of doing ad-hoc changes in the component.

[Viraj-10]

Hi @Southclaws @pierroo, please use the following code to change placeholderTextColor. we will fix _light and _dark issues till then please use the following workaround. for now, it's mandatory to pass it inside a _light or _dark.

 Input: {
        baseStyle: {
          _light: {
            placeholderTextColor: 'red.500',
          },
          _dark :{
            placeholderTextColor: 'white'
          }
        },
      },

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[huynhtastic]

@Viraj-10 what is mandatory for us to pass in _light and _dark? Do we need to do this for all custom theming or just placeholderTextColor?

[Viraj-10]

Hi @huynhtastic, for now, it's for all the colour-specific props. We are working on this issue. It will be fixed in an upcoming release.

[ankit-tailor]

Hi everyone, Thanks for your patience. This issue is fixed in 3.4.15.

[vajiralasantha]

I was gonna use this for one of my project and turned out non of these methods worked for me. After spending hours, for some reasons only the following method worked for me.

components: {
    Heading: {
      baseStyle: ({colorMode}) => {
        return {
          _dark: {color: 'icon.add'},
          _light: {color: 'icon.trendUp'},
        };
      },
    },
  },

Im using

    "native-base": "3.4.17",
    "react": "18.2.0",
    "react-native": "0.70.1",

[spsaucier]

I'm still unable to change outline variant styles in version 3.4.17.

    variants: {
      outline: {
        baseStyle: {
          _focus: {
            borderColor: 'primary.300',
            bg: 'transparent',
          },
        },
      },
    },

[anthonyringoet]

Still works as expected on 3.2.2, did not work as expected in the most recent 3.4.x releases for me.

[czaku]

Also for me, I cannot style the input properly, what is weird styling works in light mode but not in dark mode.... native-base 3.4.25 with iOS 16.2 simulator (latest react native 0.71.2).

I am attempting to change the baseStyle of Input (without touching variants). I can override values in light mode, but dark ones just don't get overridden (regardless if I assign borderColor: colorMode === 'dark' ? 'red.300' : 'red.800', or borderColor: 'red.800', it just doesn't work in dark mode but works in light)

styling works if I specify:

          _light: {
            borderColor: 'green.500',
          },
          _dark: {
            borderColor: 'blue.500',
          },

but then as per https://docs.nativebase.io/pseudo-props-101 precedence looks like _light and _dark take precedence over focus...

[czaku]

@ankit-tailor can we reopen this issue as clearly from comments still exists?

[Phillip2025]

Hapenning as well with placeholderTextColor. Here is a sample code:

https://codesandbox.io/s/reverent-mayer-rmdb3m

Replace native-base version to 3.3.X for the intended behaviour