CODEWITHSUNDEEP
reactjsreact-nativenative-base
Tomas Gil Amoedo
Tomas Gil Amoedo

Reputation: 595

How do i change the color of the tick in the checkbox from NativeBase?

I'm having this issue with Native Base, basically I want change the default color for the tick which is black to white in the Checkbox component. If anybody knows it would be really appreaciated. Here is my code and a image of how its looking right now.

import React from 'react';

import { Checkbox } from 'native-base';

function CheckboxComponent({
  isDisabled = false,
  bgColor = '#2A75EC',
}) {
  const [groupValues, setGroupValues] = React.useState([]);
  return (
    <Checkbox.Group onChange={setGroupValues} value={groupValues} accessibilityLabel="choose numbers">
      <Checkbox
        isDisabled={isDisabled}
        value="one"
        bgColor={bgColor}
        borderColor={bgColor}
        colorScheme="red.700"
        borderWidth="2"
        _checked={{ borderColor: bgColor }}
        _pressed={{ tintColor: 'white' }}
      />
    </Checkbox.Group>
  );
}

export default CheckboxComponent;

image of how it looks right now:
import React from 'react';

import { Checkbox } from 'native-base';

function CheckboxComponent({
  isDisabled = false,
  bgColor = '#2A75EC',
}) {
  const [groupValues, setGroupValues] = React.useState([]);
  return (
    <Checkbox.Group onChange={setGroupValues} value={groupValues} accessibilityLabel="choose numbers">
      <Checkbox
        isDisabled={isDisabled}
        value="one"
        bgColor={bgColor}
        borderColor={bgColor}
        colorScheme="red.700"
        borderWidth="2"
        _checked={{ borderColor: bgColor }}
        _pressed={{ tintColor: 'white' }}
      />
    </Checkbox.Group>
  );
}

export default CheckboxComponent;

actualCheckbox

Upvotes: 2

Views: 3329

Answers (2)

Jolly Good
Jolly Good

Reputation: 550

To further add to David Scholz's answer above, the link to their github is given for the component styles. https://github.com/GeekyAnts/NativeBase/blob/master/src/theme/components/checkbox.ts enter image description here

_icon only has one property which is color, so we can override this value

<Checkbox value="test"
        _icon={{color: "red"}}
 />

Upvotes: 2

David Scholz
David Scholz

Reputation: 9733

You can color the checkmark of the Checkbox using the _icon prop. Here is a minimal working example, which colors the checkmark red.

import React from "react"
import { HStack, Checkbox } from "native-base"

export const Test = () => {
  return (
    <HStack space={6}>
      <Checkbox value="test"
        _icon={{color: "red"}}
      />  
    </HStack>
  )
}

Upvotes: 4

Related Questions