feat: add radio button group item to anable pressing the whole row #1468
Conversation
|
Hey @mmarkusik, thank you for your pull request 🤗. The documentation from this branch can be viewed here. |
src/components/RadioButtonItem.tsx
Outdated
| }; | ||
|
|
||
| /** | ||
| * Radio button item allows you to press the whole row (item) instead of only the button. |
There was a problem hiding this comment.
| * Radio button item allows you to press the whole row (item) instead of only the button. | |
| * RadioButton.Item allows you to press the whole row (item) instead of only the RadioButton. |
src/components/RadioButtonItem.tsx
Outdated
| * onValueChange={value => this.setState({ value })} | ||
| * value={this.state.value} | ||
| * > | ||
| * <RadioButtonItem label="First item" value="first" /> |
There was a problem hiding this comment.
| * <RadioButtonItem label="First item" value="first" /> | |
| * <RadioButton.Item label="First item" value="first" /> |
src/components/RadioButtonItem.tsx
Outdated
| * value={this.state.value} | ||
| * > | ||
| * <RadioButtonItem label="First item" value="first" /> | ||
| * <RadioButtonItem label="Second item" value="second" /> |
There was a problem hiding this comment.
| * <RadioButtonItem label="Second item" value="second" /> | |
| * <RadioButton.Item label="Second item" value="second" /> |
| import RadioButton from './RadioButton'; | ||
| import { RadioButtonContext, RadioButtonContextType } from './RadioButtonGroup'; | ||
|
|
||
| type Props = { |
There was a problem hiding this comment.
We need to accept style prop and pass it to the View like that: style={[styles.container, style]} so users can change flex-direction or other properties
Trancever
left a comment
Trancever
left a comment
There was a problem hiding this comment.
I miss clicked, it should be "Request changes"
example/src/ExampleList.tsx
Outdated
| progressbar: ProgressBarExample, | ||
| radio: RadioButtonExample, | ||
| radioGroup: RadioButtonGroupExample, | ||
| radioButtonGroupWithItemsExample: RadioButtonGroupWithItemsExample, |
There was a problem hiding this comment.
should be radioGroupWithItems: RadioButtonGroupWithItemsExample,
| value={this.state.value} | ||
| onValueChange={(value: string) => this.setState({ value })} | ||
| > | ||
| <RadioButton.Item label="First item" value="first"></RadioButton.Item> |
There was a problem hiding this comment.
<RadioButton.Item label="First item" value="first" />
| onValueChange={(value: string) => this.setState({ value })} | ||
| > | ||
| <RadioButton.Item label="First item" value="first"></RadioButton.Item> | ||
| <RadioButton.Item |
|
@Trancever there is a problem with RadionButton animation. Using RadioGroup.Item disables RadioButton touchable ripple animation. Maybe adding |
|
@hamidfzm Can you provide a minimal repro showing this? Can be a Snack or short gif with code sample. |
5 participants
Motivation
This PR solves RadioGroup clicking row with children #808
Test plan
Run the app. See
Radio Button Group With Itemsexample.