Checkbox + RadioButton - fix long labels are stretching outside (#2446)

* Checkbox + RadioButton - fix long labels are stretching outside their container

* use flex shrink instead of margins

Author: Inbal-Tish

src/components/checkbox/index.tsx

@@ -240,9 +240,9 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
   render() {
     const {label, labelStyle, containerStyle, labelProps} = this.props;
     return label ? (
-      <View row centerV style={[containerStyle]}>
+      <View row centerV style={containerStyle}>
         {this.renderCheckbox()}
-        <Text style={[this.styles.checkboxLabel, labelStyle]} {...labelProps} onPress={this.onPress}>
+        <Text flexS style={[this.styles.checkboxLabel, labelStyle]} {...labelProps} onPress={this.onPress}>
           {label}
         </Text>
       </View>

src/components/radioButton/index.tsx

@@ -141,6 +141,7 @@ class RadioButton extends PureComponent<Props, RadioButtonState> {
     const {opacityAnimationValue, scaleAnimationValue} = this.state;
     const animationTime = 150;
     const animationDelay = 60;
+    
     if (selected) {
       Animated.parallel([
         Animated.timing(opacityAnimationValue, {
@@ -229,7 +230,7 @@ class RadioButton extends PureComponent<Props, RadioButtonState> {
     const {label, labelStyle, testID} = this.props;
     return (
       label && (
-        <Text marginL-10={!this.isContentOnLeft} marginR-10={this.isContentOnLeft} $textDefault style={labelStyle} testID={`${testID}.label`}>
+        <Text flexS marginL-10={!this.isContentOnLeft} marginR-10={this.isContentOnLeft} $textDefault style={labelStyle} testID={`${testID}.label`}>
           {label}
         </Text>
       )