Long wrapped checkbox label are not aligned

[somya-wittybrains]

Hi @srivastavaanurag79

For some check boxes the labels are very long so they were going out of modal width like below:

so I tried wrapping them around using checkboxLabelStyle={{ flex: 1, flexWrap: 'wrap' }}

The wrapping of text is working fine but they are not appropriately aligned. I have tried applying width, textAlign, selfAlign, flexShrink and other CSS properties but the alignment remains the same. Here is the image.

Could you please have a look and help me with the solution?

[srivastavaanurag79]

Will let you know when fixed, I will look into it tomorrow.

[srivastavaanurag79]

checkboxLabelStyle={{flexDirection: 'row', flexShrink: 1}} : This should do the trick for now, if you are in a hurry and make sure you don't have any trailing or leading space in the label text you are passing (I will add the trim property to get rid of it in the next release). I am adding this in the next release as the default style for checkbox label.

[srivastavaanurag79]

@somya-wittybrains published v0.3.8

[somya-wittybrains]

Hi, I am facing another related issue. If the labels comprise some lengthy statements there is no space between the current and previous selections. Here is a screenshot of the same.

The highlighted are two different labels but they look like one single statement. Could you please have a look and help me with this? Thanks

[srivastavaanurag79]

checkboxLabelStyle please use this prop to add custom margin according to your need

Example: checkboxLabelStyle={{marginVertical: 10}}