CODEWITHSUNDEEP
cssreact-nativenative
Tomas Gil Amoedo
Tomas Gil Amoedo

Reputation: 595

How do I change borderColor in native base Select Component?

I'm trying to change the borderColor on this Select Component from Native base.

Here is an image of the default color and the focused color:

enter image description here

The border is black by default. I already tried with borderColor="" and none/unset but it isn't changing the color.

How can I change the default and active border color?

The code is here..

 useState,
} from 'react';

import {
 Box,
 Select,
 CheckIcon,
} from 'native-base';

function Dropdown({
 options = [],
 placeholder,
 backgroundColor,
 className,
 onChange = () => {},
}) {
 const [value, setValue] = useState('');

 return (
   <Box>
     <Box width="3/4" maxWidth="300">
       <Select
         className={className}
         onChange={onChange}
         minWidth="200"
         selectedValue={value}
         accessibilityLabel="Choose Service"
         placeholder={placeholder}
         backgroundColor={backgroundColor}
         _selectedItem={{
           bg: 'teal.600',
           endIcon: <CheckIcon size="5" />,
         }}
         _focus={{
           bg: 'white',
         }}
         marginTop={1}
         onValueChange={(itemValue) => setValue(itemValue)}
       >
         {options.map((option) => (
           <Select.Item
             label={option.label}
             value={option.value}
             key={option.value}
             style={{ display: 'flex', flexDirection: 'column', padding: 5 }}
           />
         ))}
       </Select>
     </Box>
   </Box>

 );
}```

Upvotes: 3

Views: 4339

Answers (2)

Veronica Canido
Veronica Canido

Reputation: 161

Not sure if you've figured out how to change the default border, but I stumbled upon this link to a possible regression thats now closed: https://github.com/GeekyAnts/NativeBase/issues/4937

This solution helped me change the DEFAULT gray border color. Also helped with the border color of a button too:

_light={{borderColor: 'amber.500'}}

Upvotes: 1

Ankit Tailor
Ankit Tailor

Reputation: 409

You can use borderColor to specify border color and borderWidth to specify border width. To specify border color for focused inside _focus.

const Example = () => {
  let [service, setService] = React.useState('');
  return (
    <Center>
      <Box w="3/4" maxW="300">
        <Select
          _focus={{ borderColor: 'yellow.500' }}
          borderColor="red.500"
          selectedValue={service}
          minWidth="200"
          accessibilityLabel="Choose Service"
          placeholder="Choose Service"
          _selectedItem={{
            bg: 'teal.600',
            endIcon: <CheckIcon size="5" />,
          }}
          mt={1}
          onValueChange={(itemValue) => setService(itemValue)}
        >
          <Select.Item label="UX Research" value="ux" />
          <Select.Item label="Web Development" value="web" />
          <Select.Item label="Cross Platform Development" value="cross" />
          <Select.Item label="UI Designing" value="ui" />
          <Select.Item label="Backend Development" value="backend" />
        </Select>
      </Box>
    </Center>
  );
};

Upvotes: 5

Related Questions