thakurballary / react-native-radio-buttons-group Goto Github PK
View Code? Open in Web Editor NEWSimple, best and easy to use radio buttons for react native apps.
License: MIT License
Simple, best and easy to use radio buttons for react native apps.
License: MIT License
onPress function is called with button.id
woould be more powerful to call onPress with button, so that one can get label, value and id
Since I bumped to RN 0.71.0, I've changed some eslint rules, and I have a Typescript error from this lib, which says that a declaration file is missing for 'lodash.isequal'
, in RadioGroup.tsx
file.
Can it be fixed ?
Here is the full description :
TS7016: Could not find a declaration file for module 'lodash.isequal'. '/Users/xxxx/node_modules/lodash.isequal/index.js' implicitly has an 'any' type.
Try `npm i --save-dev @types/lodash.isequal` if it exists or add a new declaration (.d.ts) file containing `declare module 'lodash.isequal';`
Hi, thanks for great library.
I want to allow multi select, how can I do it? Thanks so much
Hi! ๐
Firstly, thanks for your work on this project! ๐
Today I used patch-package to patch [email protected]
for the project I'm working on.
Here is the diff that solved my problem:
I added button support because I am applying e2e Test with BDD and I saw that the component was not supported.
diff --git a/node_modules/react-native-radio-buttons-group/lib/RadioButton.tsx b/node_modules/react-native-radio-buttons-group/lib/RadioButton.tsx
index db1dcac..ee598ad 100644
--- a/node_modules/react-native-radio-buttons-group/lib/RadioButton.tsx
+++ b/node_modules/react-native-radio-buttons-group/lib/RadioButton.tsx
@@ -18,6 +18,7 @@ export default function RadioButton({
selected = false,
size = 24,
borderSize = 2,
+ testID,
}: RadioButtonProps) {
const borderWidth = PixelRatio.roundToNearestPixel(borderSize);
@@ -45,6 +46,8 @@ export default function RadioButton({
<>
<Pressable
onPress={handlePress}
+ testID={testID}
+ accessibilityLabel={testID}
style={[
styles.container,
orientation,
diff --git a/node_modules/react-native-radio-buttons-group/lib/types.ts b/node_modules/react-native-radio-buttons-group/lib/types.ts
index 511f431..9d1e46d 100644
--- a/node_modules/react-native-radio-buttons-group/lib/types.ts
+++ b/node_modules/react-native-radio-buttons-group/lib/types.ts
@@ -14,6 +14,7 @@ export type RadioButtonProps = {
size?: number;
value?: string;
borderSize?: number;
+ testID?: string;
};
export type RadioGroupProps = {
This issue body was partially generated by patch-package.
Circular dependency warning when using the library. I get the following error on the react native app am using this on:
WARN Require cycle: node_modules\react-native-radio-buttons-group\lib\index.ts -> node_modules\react-native-radio-buttons-group\lib\RadioGroup.tsx -> node_modules\react-native-radio-buttons-group\lib\index.ts
As this is an error occurring in the library, it needs to be fixed at the source.
The component is always selecting the first Radio by default, it would be nice if we could disable this behavior, it's not a good practice to leave something pre-selected to the user as it may interfere with its choices.
The RadioGroup component has a labelStyle prop, as denoted in the Readme. The prop works, but seems not to be defined in the components type definitions. I need to use @ts-ignore to make the code compile.
...
<RadioGroup
radioButtons={radioButtons}
onPress={onChange}
selectedId={props.value}
// @ts-ignore this props is not defined in the typings, but exists
labelStyle={stylesheet.label}
/>
Hi,
I'm not able to change borderColor of the radio buttons. Can you please guide me on how to change it?
Below is my code:
<RadioGroup radioButtons={radioButtons} onPress={onPressRadioButton} containerStyle={{alignSelf: 'flex-start'}} borderColor={'#E6A4AA'} />
`
const [gender,setgender] = useState('Male');
const radioButtonsData = [{
id: '0', // acts as primary key, should be unique and non-empty string
label: 'Male',
/// value: 'option1'
}, {
id: '1',
label: 'Female',
/// value: 'option2'
}, {
id: '2',
label: 'Gay',
/// value: 'option2'
}
, {
id: '3',
label: 'Straight',
}
]
const [radioButtons, setRadioButtons] = useState(radioButtonsData);
function onPressRadioButton(radioButtonsArray) {
setRadioButtons(radioButtonsArray);
console.log(radioButtonsArray);
for(let j=0;j<radioButtonsArray.length;j++)
{
if(radioButtonsArray[j].selected==true)
{
setgender(radioButtonsData[j].label)
console.log(j)
}
}
console.log(gender);
}
return (
<View style={{ flex: 1 }}>
<View style={{ width: '92%', alignSelf: 'center', padding: 10 }}>
<Text style={{ fontWeight: 'bold', fontSize: 18 }}>Sexual Orientation</Text>
<View style={{alignSelf:'center'}}>
<RadioGroup
radioButtons={radioButtons}
onPress={onPressRadioButton}
/>
</View>
</View>
</View>
)`
Can you plz tell ? why inside onpress , another state is not updating ? What is the usage of this library ?
When it comes to mobile app design, the radio button touch area shall be bigger.
What you can do is increase the touch area by using the hitSlop
property eg:
<TouchableOpacity
hitSlop={{ top: 30, right: 30, bottom: 30, left: 30 }}
>
</TouchableOpacity>
Also, the touch area still will be small IMO. Allow users to select the radio button by touching on the description/title of the radio button...
Ty for the lib! ๐
Here the first item is initially selected by default. How can I make all the radio buttons unselected for the first time?
Can't give custom styles to the container. In my case Radios are not taking full space. So to do I have to provide custom styles like width: '100%', flexDirection: 'space-around'
, which is not possible.
Hello,
Here is a snack to show the issue.
https://snack.expo.dev/@jerrybels/react-native-radio-buttons-group-example
Selecting one of the options in useEffect
doesn't work as expected - the option isn't selected. I found out that it is selected if the state is initialized with an empty array :
const [radioButtons, setRadioButtons] = useState([]);
I don't really understand why. It's like the state is initialized after the effect took place? But then why aren't the options disappearing?
Thanks ahead.
<RadioGroup
labelStyle={{color: this.context.basicFontColor,}}
containerStyle={{
alignItems: 'flex-start',
color: this.context.basicFontColor,
backgroundColor:this.context.surfaceColor == '#1A1D21' ? '#2c2c2c' : this.context.surfaceColor
}}
descriptionStyle={{color: this.context.basicFontColor}}
textColor={{color: this.context.basicFontColor}}
color={this.context.basicFontColor}
selected={true}
radioButtons={viewButtonsData}
onPress={this.selectReqMethod}
/>
Does anyone know how can I change the fontsize of the label of each radio button?
i am try to style radio buttons,circle but nothing change i read doc and example but there is no example with styling. i am using this
color="#ffffff" containerStyle={{ color:" #FFFFFF" }} labelStyle={{ color:" #FFFFFF" }}
I've added the component in my React Native project, facing issues with the props "borderColor" and "color". It's giving me the following error:
Type '{ radioButtons: { id: string; label: string; value: string; }[]; onPress: (id: string) => void; selectedId: string | undefined; borderColor: string; }' is not assignable to type 'IntrinsicAttributes & RadioGroupProps'.
Property 'borderColor' does not exist on type 'IntrinsicAttributes & RadioGroupProps'.
Please check the attached image and let me know if I'm doing anything wrong.
I want to used it for my own library components but it doesnt have any accessibility prop and its a requeriment in the proyect Im working on, its something easy to add and it would not take more than a few lines. I think its a good improvement to have it
@ThakurBallary Please add this.
When we use RadioGroup Something like as below then not worked due to props passing issue.
You can fixed by adding this. Please add and give new update
I have all items aligned left but radio button since thers is some space between left border and small circle of radio button.
Is there any setting to align the button left, i.e. get rid of small space mentioned above...thanks
Color prop is not being used while displaying label and description of the radio button.
i want to change to color of the label
how do i do that??
Consider I have category state with value either A,B,C intialized by navigation props
I declared radio state as per docs with labels and value
I want the initial radio selected as per
This.state.radio.value == this.state.category
Thanks from future ! ๐
When I try using the "borderColor" prop, it typescript alway throws this error and it dose not work at all.
Type '{ containerStyle: { width: "100%"; display: "flex"; alignItems: "flex-start"; flexDirection: "column"; gap: number; marginTop: number; }; borderColor: string; radioButtons: { id: string; label: string; value: string; }[]; onPress: (item: string) => void; selectedId: string | undefined; }' is not assignable to type 'IntrinsicAttributes & RadioGroupProps'.
Property 'borderColor' does not exist on type 'IntrinsicAttributes & RadioGroupProps'.
RadioGroup row feature overflows from the screen
<RadioGroup
layout="row"
radioButtons={[
{id: '1', label: "now", value: 0, selected: true},
{id: '2', label: "10s", value: 10000, selected: false},
{id: '3', label: "30s", value: 30000, selected: false},
{id: '4', label: "1m", value: 60000, selected: false},
{id: '5', label: "5m", value: 300000, selected: false},
]}
onPress={(e)=>console.log(e)}
/>
Hello, I hope this finds you well.
I have found that when you pass a new or changed radioButtons prop to a RadioGroup component its options do not update.
Please could you fix this issue? Thank you in advance for your time and effort.
The behaviour that I expected and desired was that when you update the radioButtons prop given to a RadioGroup component, its radio button options would update if they were changed. For example, you should be able to update the label or colour of a RadioButtonProps option in the RadioGroup component.
I have found that when you update the radioButtons prop given to a RadioGroup component, its radio button options do not update. Every field of each RadioButtonProps option stays the same apart from the selected option, which appears to update automatically when the selected option changes - so I assume that this too cannot be changed manually.
For package versions etc, see https://github.com/taeh98/react-native-radio-buttons-group-not-updating/blob/main/package.json
<Common.RadioGroup
radioButtons={[
{
id: '1',
label: 'ืืืคืฆืื 1',
value: 'option1',
color: 'blue',
layout: 'row',
size: 24,
},
{
id: '2',
label: 'ืืืคืฆืื 2',
value: 'option2',
layout: 'row',
size: 26,
},
]}
layout={'row'}
onPress={arr=> {
console.log('pressed group')
let sel=arr.find(e => e.selected)?.value
this.setState({radio_selected:sel})
}}
containerStyle={{ backgroundColor: 'yellow' }}
/>
I wanna ask if I can change (for example) the size of the labels not just the circle
Hi, I'm using this component for an app. I followed the docs, though ran into trouble where it will mutate the original object, and never reset it back when the parent component unmounts/remounts. When it gets re-mounted it contains same values as the last time it was modified, it does not revert back to the original object! :*(
For the example the code is shown in docs as follows (added notes as comments):
import React, { useState } from 'react';
import RadioGroup from 'react-native-radio-buttons-group';
const radioButtonsData = [{ // <-- ORIGINAL OBJECT
id: '1', // acts as primary key, should be unique and non-empty string
label: 'Option 1',
value: 'option1'
}, {
id: '2',
label: 'Option 2',
value: 'option2'
}]
export default function App() {
const [radioButtons, setRadioButtons] = useState(radioButtonsData) // <--- PASSING ORIGINAL OBJECT
function onPressRadioButton(radioButtonsArray) {
setRadioButtons(radioButtonsArray);
}
return (
<RadioGroup
radioButtons={radioButtons}
onPress={onPressRadioButton}
/>
);
}
I believe the problem is here (RadioGroup.tsx):
export default function RadioGroup({ containerStyle, layout = 'column', onPress, radioButtons }: RadioGroupProps) {
const [radioButtonsLocal, setRadioButtonsLocal] = useState<RadioButtonProps[]>(radioButtons); // <-- this is OK
if(!isEqual(radioButtons, radioButtonsLocal)) {
setRadioButtonsLocal(radioButtons);
}
function handlePress(id: string) {
console.log("Same object ref?:", radioButtonsLocal === radioButtons); // <--- TRUE!
for (const button of radioButtonsLocal) {
if (button.selected && button.id === id) return;
button.selected = button.id === id; // <--- MUTATING ORIGINAL OBJECT radioButtonsData
}
setRadioButtonsLocal([...radioButtonsLocal]);
if (onPress) {
onPress(radioButtonsLocal);
}
}
Is this expected behavior? Currently, the workaround I am doing is to put the object inside the component so that it gets recreated each time fresh.
import React, { useState } from 'react';
import RadioGroup from 'react-native-radio-buttons-group';
export default function App() {
const [radioButtons, setRadioButtons] = useState([ // <-- placed inside of component
{
id: "1", // acts as primary key, should be unique and non-empty string
label: "Option 1",
value: "option1",
},
{
id: "2",
label: "Option 2",
value: "option2",
},
]);
function onPressRadioButton(radioButtonsArray) {
setRadioButtons(radioButtonsArray);
}
return (
<RadioGroup
radioButtons={radioButtons}
onPress={onPressRadioButton}
/>
);
}
Hey,
I would be interested to see if the label
prop of the RadioButton
could accept a ReactNode
instead of a string.
An example of what I want to achieve is shown in the screenshot, where I have some additional text with a different styling. Or even a text input. This is from a webapp.
This would also allow people to use any themed Text
components they might have, without having to override the labelStyle
prop.
I reckon, the code would look something like
const labelComp = (typeof label === "string" || typeof label === "number") ? <Text style={[margin, labelStyle]}>{label}</Text> : label;
This should keep it backwards compatible.
The docs then should probably state, that labelStyle
is ignored if the label
Prop is not a string.
A similar thing could be done for the description
prop.
I would be willing to contribute a PR for this.
You are importing the whole lodash library for a single function. This is a terrible pattern and will bloat the bundle, since there is no tree shaking at all.
If you just need isEqual, please use it like this:
npm install --save lodash.isequal
# or
yarn add lodash.isequal
and import
import isEqual from 'lodash.isequal';
RadioGroup How to change Style Radio Button and Text label
The current RadioGroup definition presents a problem because the labelStyle that is being applied on each RadioButton is the one that comes from Props, regardless of whether the RadioButton already has a labelStyle.
It should check if each button already has a labelStyle in the object, and if it doesn't it defaults to the one from the Props. Please take a look at the comments on the code below for better context.
export default function RadioGroup({
accessibilityLabel,
containerStyle,
labelStyle, /* <-- THIS IS THE ONLY LABELSTYLE THAT IS BEING CONSIDERED WHEN RENDERING */
layout = 'column',
onPress,
radioButtons,
selectedId,
testID
}: RadioGroupProps) {
function handlePress(id: string) {
if (id !== selectedId && onPress) {
onPress(id);
}
}
return (
<View
accessibilityLabel={accessibilityLabel}
accessibilityRole="radiogroup"
style={[styles.container, { flexDirection: layout }, containerStyle]}
testID={testID}
>
{radioButtons.map((button) => ( /* <-- IT NEVER CONSIDERS IF button HAS A LABEL STYLE */
<RadioButton
{...button}
key={button.id}
labelStyle={labelStyle} /* <-- APPLIES LABELSTYLE FROM PROPS, IGNORING LABELSTYLE FROM button */
selected={button.id === selectedId}
onPress={() => handlePress(button.id)}
/>
))}
</View>
)
}
Hi, great thanks for your library
I need to use it without the label text, you can check the UI here http://take.ms/SWBDO
Is there any way to hide the label text now?
I was trying to use label:' ' , but the radios work wrong in this way.
I can't set radio label color. The initialize color is black but I want white.
Hope fix this issue and update asap.
Hey,
I just noticed that, when you supply a onPress
in the RadioButtonProps
, it is always overwritten from the RadioGroup
.
<RadioButton
{...button}
key={button.id}
labelStyle={labelStyle}
selected={button.id === selectedId}
onPress={() => handlePress(button.id)}
/>
In a previous version the onPress
looked like this
onPress={(id: string) => {
handlePress(id);
if (button.onPress && typeof button.onPress === 'function') {
button.onPress(id);
}
}}
which I would prefer.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.