variant is not working anymore on Select on version 3.4.1

[goxr3plus]

What is the bug

I had the following code in v3.3.12

and it produced an unstyled select box .

Now after just upgrading to 3.4.1 i literally changed nothing from my code completely nothing i just upgraded the dependency

i tried all the variant combinations to check and all just produce this grey box around the Select

NativeBase Version

3.4.1

Platform

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

[goxr3plus]

@surajahmed Heyyy bosss how are you :) , do you know why this happened :) ?

[ankit-tailor]

Hi @goxr3plus , Thanks for reporting the issue. We're working on it.

[goxr3plus]

@surajahmed @ankit-tailor You have changed the way we style the <Select component ? i need to use a new property :) ?

[simonflk]

Presumably related... In the documentation under accessibility, it says:

use native variant. Accessibility improvements on styled variant is in-progress.

I am adding variant="native" and I still cannot open the select with Voiceover by double-tapping when the select button is focused.

[haveamission]

Also not working on Button not working either

[goxr3plus]

@ankit-tailor Any news on how can we fix that using the latest version of the library :) ?

[fahad39]

Kindly resolve this issue. I am using version 3.2.2 and I am also facing this issue

[punndcoder28]

Hey guys! We are facing the same issue as well on v3.4.6. Looks like variant prop is broken on <Select />

[F7-CalebM]

Hey everyone, I'm using v3.4.7 and I am noticing this issue as well. None of the variants are working

[ricohumme]

I upgraded from 3.3.12 to 3.4.9 and noticed this change in my layouts using the Text component. I traced this back starting from 3.4.0.

When is this scheduled to be fixed? thanks in advance

[goxr3plus]

I upgraded from 3.3.12 to 3.4.9 and noticed this change in my layouts using the Text component. I traced this back starting from 3.4.0.

When is this scheduled to be fixed? thanks in advance

I am sure it will be fixed until 2030. Until then enjoy broken components after updating like i did and created my custom components from scratch finally ☺

[ricohumme]

Until then I'll stick around on 3.3.12

[punndcoder28]

@ankit-tailor Any updates on the fix for this issue?

[ankit-tailor]

Hello Everyone, Sorry for the inconvenience. We are working on this and will fix it soon.

[kirgy]

Also suffering this issue; all theme variants are non-functional above version 3.3.12, downgrading to "native-base": "3.3.12" works around the problem.

[ankit-tailor]

Hey everyone, Select variant is fixed in v3.4.13. Let me know if it works for you.

[ricohumme]

When you say Select variant, is it just the select variant, or all variants which are fixed, like the Text variant case I mentioned?

[ankit-tailor]

Other variants are working fine, Can you share snack link or code snippet for Text variant?

[pors]

The Heading variant also doesn't work anymore.

In the theme definition:

        Heading: {
            defaultProps: {
                size: 'xl'
            },
            baseStyle: {
                alignSelf: 'flex-start',
                marginTop: "10px",
                marginBottom: "10px",
                fontSize: "32px",
            },
            variants: {
                auth: {
                    color: Colors.charcoalGrey,
                    marginLeft: "10px",
                },
                portfolio: {
                    color: Colors.lightGrey,
                    marginLeft: "0px",
                }
            }
        }

In the component:

<Heading variant="portfolio">Forgot password</Heading>

The variant prop has no effect. This code hasn't changed for months and it used to work.

[ricohumme]

@pors Does is still work for you on 3.3.12 ?

[Viraj-10]

Hi @pors,

Heading: {
       defaultProps: {
         size: 'xl',
       },
       baseStyle: {
         alignSelf: 'flex-start',
         marginTop: '10px',
         marginBottom: '10px',
         fontSize: '32px',
       },
       variants: {
         auth: {
           _light: { color: Colors.charcoalGrey },
           marginLeft: '10px',
         },
         portfolio: {
           _light: { color: Colors.lightGrey },
           marginLeft: '0px',
         },
       },
     },

try using above code.

[pors]

Hi @pors,

Heading: {
       defaultProps: {
         size: 'xl',
       },
       baseStyle: {
         alignSelf: 'flex-start',
         marginTop: '10px',
         marginBottom: '10px',
         fontSize: '32px',
       },
       variants: {
         auth: {
           _light: { color: Colors.charcoalGrey },
           marginLeft: '10px',
         },
         portfolio: {
           _light: { color: Colors.lightGrey },
           marginLeft: '0px',
         },
       },
     },

try using above code.

That works, thanks!

[pors]

I'm pretty sure it did!

[Elvin1993]

change /node_modules/native-base/src/components/primitives/Select/Select.tsx and add this code can fixed Select variant bug variant={props.variant}

const commonInput = (
    <Input
      placeholder={placeholder}
      InputRightElement={rightIcon}
      {...resolvedProps}
      // NOTE: Adding ts-ignore as we're not exposing isFocused in the Input component
      // @ts-ignore-next-line
      variant={props.variant} // !!!   add this code , can fixed Select variant bug
      isFocused={isFocused}
      isHovered={isHovered}
      aria-hidden={true}
      importantForAccessibility="no"
      value={selectedItem ? selectedItem.label : ''}
      editable={false}
      focusable={false}
      isDisabled={isDisabled}
      pointerEvents="none"
    />
  );

[ankit-tailor]

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

[pors]

@ankit-tailor upgrading to 3.4.15 crashes my app for web:

useResponsiveQuery.web.ts:2 Uncaught Error: Cannot find module 'react-native-web/dist/exports/StyleSheet/createCompileableStyle'
    at webpackMissingModule (useResponsiveQuery.web.ts:2:1)
    at ./node_modules/native-base/lib/module/utils/useResponsiveQuery/useResponsiveQuery.web.js (useResponsiveQuery.web.ts:2:1)

No problems with v3.4.12-alpha.1

[ankit-tailor]

Hey @pors, Do the below steps. We've added a new dependency in 3.4.15.

1. Delete node_modules
2. yarn install

[pors]

Hey @pors, Do the below steps. We've added a new dependency in 3.4.15.

1. Delete node_modules
2. yarn install

Doesn't help :(

[punndcoder28]

Using version 3.4.17 and the variant is still broken. @ankit-tailor please reopen this issue or should a new issue be created.

Code for the component is something as below.

<Select
              fontSize="md"
              fontWeight={500}
              p="2"
              pl="4"
              variant="underlined"
              borderWidth="1"
              borderColor="gtBlue.500"
              _selectedItem={{
                bg: 'gtBrandBlue',
                borderRadius: 32,
                borderWidth: 1,
                borderColor: 'black',
                _text: {
                  color: 'white',
                  fontWeight: 500,
                },
              }}
              _item={{
                my: 2,
                borderRadius: 32,
                borderWidth: 1,
                borderColor: 'gray.500',
                _text: {
                  fontWeight: 400,
                },
              }}
              selectedValue={value}
              onValueChange={changeLocation}>

Edit - A temporary solution I found was to use variant='unstyled' and style the borders (or other properties )as needed until variant is fixed

[gabrielsmenezes]

Using version 3.4.17 and the variant is still broken. @ankit-tailor please reopen this issue or should a new issue be created.

Code for the component is something as below.

<Select
              fontSize="md"
              fontWeight={500}
              p="2"
              pl="4"
              variant="underlined"
              borderWidth="1"
              borderColor="gtBlue.500"
              _selectedItem={{
                bg: 'gtBrandBlue',
                borderRadius: 32,
                borderWidth: 1,
                borderColor: 'black',
                _text: {
                  color: 'white',
                  fontWeight: 500,
                },
              }}
              _item={{
                my: 2,
                borderRadius: 32,
                borderWidth: 1,
                borderColor: 'gray.500',
                _text: {
                  fontWeight: 400,
                },
              }}
              selectedValue={value}
              onValueChange={changeLocation}>

Edit - A temporary solution I found was to use variant='unstyled' and style the borders (or other properties )as needed until variant is fixed

I'm using the version 3.4.17 and variant="rounded" is working.