search

callstack / react-native-paper

Material Design for React Native (Android & iOS)
https://reactnativepaper.com
MIT License
12.69k stars 2.07k forks source link

RadionButton doesn't seem to implement MD3 #4279

Open tibbe opened 7 months ago

tibbe commented 7 months ago

Current behaviour

According to the MD3 spec (https://m3.material.io/components/radio-button/guidelines), RadioButton should have a different look-n-feel than it currently does. For example, in "leading" mode the label should follow the button after some margin but instead its right-aligned towards then end of the screen:

<RadioButton.Group onValueChange={onChange} value={value}>
  <RadioButton.Item
    label={item.label}
    position="leading"
    value={item.value}
  />
</RadioButton.Group>

Expected behaviour

RadioButton should match the MD3 spec.

How to reproduce?

Just use RadioButton and compare it to the MD3 spec.

Preview

Screenshot_1705410465

What have you tried so far?

Tried different combinations of RadioButton.Group, RadioButton, and RadioButton.Android.

Your Environment

software version
ios x
android x
react-native 0.71.14
react-native-paper 5.11.4
node 18.16.1
npm. 9.5.1
expo sdk not used
jikseyres16 commented 6 months ago

I'm doing this as a workaround, hope it helps

labelStyle={{alignItems: 'center', textAlign: 'left'}}