Radio button bouncing up and down in nexus 5x-6.0.0 API 23

[jitenderchand1]

I have debug into RadioButton.js In that file onLayout is calling repetitively . Which is causing issue. It is togging width from 20 to 19 and then 19 to 20. Which causing bubbling issue.

[cubbuk]

Having the same issue. This results in a shaky effect on radio button.

[stevula]

I'm seeing this for checkboxes on Nexus 5 and Pixel 2, so I'm not sure it is device-specific. In my case, Checkbox._onLayout is called repetitively causing a never-ending ripple.

I suppose the reason for onLayout being called repetitively is probably somewhere in my app, though.

[dragos-panaitescu]

Hy, having the same issue with radio buttons on nexus 5x and 6p.

Any workarounds?

[stevula]

We ended up just using the native Android checkboxes since the issue wasn't present on iOS. Not really a solution but it was good enough for our purposes.

function PlatformSpecificCheckbox({ isChecked, style }) {
  PlatformSpecificCheckbox({ isChecked, style }) {
    return Platform.select({
      ios: (
        <MKCheckbox disabled checked={isChecked} />
      ),
      android: (
        <CheckBox disabled value={isChecked} />
      ),
    });
  }
}

The other approach we considered was forking or copying the the source code for MKCheckbox (here) and removing the <Ripple> from the render function, which also works but would not be fun to maintain.

I'm not sure if the issue is with the library or if something in our app state is causing the endless ripple effect. Either way, it would be nice to be able to disable the Ripple effect through props!

[cdoshi]

@xinthink Any update on this issue? The radio button's _onLayout is continuously being triggered causing a shaking effect.

if (width === this.state.width && height === this.state.height) {
   return;
}

is always false and hence setState is always triggered. I was able to fix it by modifying function in the following way

_onLayout = ({ nativeEvent: { layout: { width, height } } }) => {
  const padding = this.props.extraRippleRadius || DEFAULT_EXTRA_RIPPLE_RADII;

  if (parseInt(width+padding - this.state.width) < 1 && parseInt(height+padding - this.state.height) < 1) {
    return;
  }
  this.setState({
    width: width + padding,
    height: height + padding,
  });
};

I am not sure if this is the way to do it but it works. Let me know. I can open a PR if the above solution is a feasible one.