Checkbox text overflows out of container

[darrenkeen]

Description

When using the Checkbox component, having some long text results in content going off the screen or out of the containers width.

CodeSandbox/Snack link

https://snack.expo.dev/K6hps6IFF

Steps to reproduce

Expo: 44.0.6 Native Base: 3.4.11 React: 17.0.1 React Native: 0.64.3

import { Box, Checkbox, NativeBaseProvider } from 'native-base';

export default function App() {
  return (
    <NativeBaseProvider>
      <Box>
        <Checkbox isInvalid value="invalid" mt={10}>
          This is a long bit of text inorder to go out of this page and see the
          issue
        </Checkbox>
      </Box>
    </NativeBaseProvider>
  );
}

I took a basic expo app to show this problem

NativeBase Version

3.4.11

Platform

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

Other Platform

No response

Additional Information

No response

[Viraj-10]

Hi @darrenkeen, Thanks for reporting the issue. we will look into it.

[HyperNovax]

I have a different problem with a long text. The checkbox icon take all height of the screen.

To resolve it, I add the style below :

return (
    <Checkbox value={'one'} _text={{ width: '100%', flex: 1 }} width={'100%'}>
      This is a long bit of text inorder to go out of this page and see the issue
    </Checkbox>
)

[sahilvasuja]

Hey, You can try this code 👇

import { Box, Checkbox, NativeBaseProvider, Text } from 'native-base';

export default function App() {
  return (
    <NativeBaseProvider>
      <Box>
        <Checkbox isInvalid value="invalid" mt={10}>
         <Text style={{flex: 1, flexWrap: 'wrap'}}>  This is a long bit of text inorder to go out of this page and see the issue
   </Text>
        </Checkbox>
      </Box>
    </NativeBaseProvider>
  );
}

[dhcmega]

Hi This also works:

<HStack space={1} >
    <Text bold>Descripción:</Text>
    <Text flex flexWrap="wrap" >{pet.description}</Text>
</HStack>

[gabrielpdsilva]

@dhcmega in Text component I think it should be flex={1} instead of only flex.