reactjsreact-nativenative-base

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


Solution

  • 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>
      )
    }