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