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

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. Let the code and a image of how its looking right now, Thanks!


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][1]][1]


  [1]: https://i.stack.imgur.com/oxQjS.png

CodePudding user response：

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