CheckBox text overflowing.

[uzun0ff]

Description

I expected that the text would behave the same way when the checkbox is checked and unchecked

NativeBase Version

3.4.19

Platform

• [X] Android
• [ ] CRA
• [X] Expo
• [X] iOS
• [ ] Next

Other Platform

No response

Additional Information

I am trying to figure out why the text in a checkbox appears to behave differently depending on when it is checked or unchecked. I've also attempted to style it with the _text property but to no avail.

Code:

  <Box {...props}>
      <Checkbox
        _checked={{ borderColor: 'opal', borderRadius: 'full', w: '12', h: '12' }}
        _icon={{ size: '6' }}
        _stack={{
          bg: action?.isChecked ? 'rgba(0, 0, 0, 0.02)' : 'rgba(0, 0, 0, 0.06)',
          p: '2',
          width: 'full',
          borderRadius: 'full',
        }}
        borderRadius="full"
        colorScheme="white"
        icon={<Icon as={<IconChecked color="cobalt" />} />}
        isChecked={!!action.isChecked}
        mb="2"
        minH="12"
        value={action.sk}
        w="12"
        onChange={() => setAction(!action?.isChecked)}
      >
        <Text flex="1" flexWrap="wrap" textDecorationLine={action?.isChecked ? 'line-through' : null} w="100%">
          {action.title}
        </Text>
      </Checkbox>
    </Box>

Result:

[alexu96]

Hello @uzun0ff , please provide steps to reproduce this issue with a screenshot / screen recording .