moschan / react-native-simple-radio-button Goto Github PK
View Code? Open in Web Editor NEWSimple and handy animated radio button component for React Native
License: MIT License
Simple and handy animated radio button component for React Native
License: MIT License
Has anyone integrated the radio button with redux-form as a custom component? Could an example be added to the docs?
Hi, I run android example , and found basic radio can't change when click the other one.
I test it in emulator.
<RadioButtonInput
obj={obj}
index={i}
isSelected={this.state.value3Index === i}
onPress={onPress}
borderWidth={1}
buttonInnerColor={'#e74c3c'}
buttonOuterColor={this.state.value3Index === i ? '#2196f3' : '#000'}
buttonSize={40}
buttonOuterSize={80}
buttonStyle={{}}
buttonWrapStyle={{marginLeft: 10}}
/>
<RadioButtonLabel
obj={obj}
index={i}
labelHorizontal={true}
onPress={onPress}
labelStyle={{fontSize: 20, color: '#2ecc71'}}
labelWrapStyle={{}}
/>
My app has 2 pages.
page A --navigator.push--> page B
page B --navigator.pop-->page A
B uses react-native-simple-radio-button.
in page B, the inputed radio's value was calulated , and set result to state.
When back to A from B, the display is quakeing up and down for a minute.
If B doesnot calulate(not set state), A is ok, does not quake.
If B calulates(set state), A is NG, quakes.
this issue is just IOS.
android is ok.
When I set [animation={false}], it will be ok.
thanks.
HI, can you add selected and not selected color props?
You keep using the Radio component in your examples, yet you never import it and when I try to import it I get an error. Is this an old documentation?
First off, what you built is perfect for what i need, so thank you.
I'm dynamically setting the initial value based on the current state. When I call the function to get the value for initial, it defaults to the first radio button, even though the number returned from the function is correct (in the console). And if I manually put the exact same number into initial - 2 for example - it will select the appropriate radio button, so for the most part the implementation is correct. Can you see any reason why dynamically setting the "initial" value would not work? Thanks!
I'm using 2.5.0-alpha.1
<RadioForm style={{justifyContent:'center', height: 75}}
radio_props={distance_metrics}
formHorizontal={true}
labelHorizontal={false}
buttonColor={'#ffffff'}
animation={true}
labelStyle={styles.settingsLabel}
initial={this.getInitialRadioSelection()}
onPress={(value) => {this.changeDistanceUnitMetric({value:value})}}
/>
getInitialRadioSelection()
getInitialRadioSelection() {
var distanceUnitMetricIs = this.state.distanceUnitMetric;
var initialSelection = 0;
switch (distanceUnitMetricIs) {
case 'meters':
return 1;
case 'yards':
return 0;
case 'feet':
return 2;
default :
return 0;
}
}
The label color is changing but not changing the button color
Hi,
I am wondering if it possible to provide a feedback text right next to the options (like "correct" or "wrong" and change the color of that option accordingly).
hi, great extension, but how to change the color of the label text and also the align of the label text? for example i need to change the label text color to white and center align it.
Needs a way to set buttons to 'disabled', where touches have no effect.
Going to modify for my current use case, then try and put together a PR
Hi guys! was trying to get the evaluations alternatives from a api and then make the radioform to show to the user for which alternatives is going to select, but cant set the isSelected value, all the radio buttons appears like not selected, can you give a hand with this?
And this is how i make the alternatives:
class Accesibility extends Component {
constructor(props) {
super(props);
}
_setValue(value, index) {
var ops = options.vae;
switch(index) {
case 0:
ops["vae[0]"] = value;
break;
case 1:
ops["vae[1]"] = value;
break;
case 2:
ops["vae[2]"] = value;
break;
case 3:
ops["vae[3]"] = value;
break;
case 4:
ops["vae[4]"] = value;
break;
}
}
renderEvaluations() {
return this.props.evs.map((data, i) => {
return(
<View key={i}>
<Text key={i} style={[styles.title, {marginTop: 40}]}>{data.title}</Text>
{ this.renderAlternatives(data.opts, i) }
</View>
)
})
}
renderAlternatives(opts, index) {
return opts.map((data, i) => {
return(
<RadioForm key={i} formHorizontal={false} animation={true} style={styles.radioForm}>
<RadioButton labelHorizontal={true} key={i} style={styles.radioContainer}>
<RadioButtonInput
obj={data.vie_id}
index={i}
buttonSize={13}
buttonInnerColor={'#FFF'}
buttonOuterColor={'#7F7F7F'}
isSelected={true}
onPress={() => this._setValue(data.vie_id, index)}
/>
<View style={styles.labelContainer}>
<Text style={styles.labelFormar}>{data.vie_dsc}</Text>
</View>
</RadioButton>
</RadioForm>
)
})
}
render() {
return(
<KeyboardAwareScrollView style={styles.content}>
{
this.renderEvaluations()
}
</KeyboardAwareScrollView>
);
}
Hola! @moschan has created a ZenHub account for the moschan organization. ZenHub is the leading team collaboration and project management solution built for GitHub.
To get set up with ZenHub, all you have to do is download the browser extension and log in with your GitHub account. Once you do, you’ll get access to ZenHub’s complete feature-set immediately.
ZenHub adds a series of enhancements directly inside the GitHub UI:
Still curious? See more ZenHub features or read user reviews. This issue was written by your friendly ZenHub bot, posted by request from @moschan.
wrong color selected radio button after update to react-native 0.49.3
<RadioForm style={radioStyle} ref="radioForm" radio_props={this.state.types1} initial={0} formHorizontal labelHorizontal buttonColor={'#757171'} labelColor={'#757171'} animation onPress={(value, index) => { this.setState({ value1: value, value1Index: index }); }} />
hi!
i was wondering how to have values function like a normal radio button? i believe in your examples the radio button's values (value: 0) are being used to render the radio button in a specific order.
in my case and in most cases i think it would be better to use an 'order/index' value to display the buttons in a specific order and leave the value as it is normally used. this way someone can just get the button's value.
example:
types1: [{label: 'param1', order: 0, value: 0}, {label: 'param2', order: 1, value: 1}, {label: 'param2', order: 2, value: 3}]
in the above maybe it would be possible to retrieve 'value: 0' and use it.
what do you think?
Animations look good on iOS, using the same code on Android produces "fake" animations. It looks like the animations are defaulting to the "basic" behavior of just fading in and out. I'm not seeing the nice popping animation on Android.
react-native: "latest"
react "15.4.1"
When i am resizing on ios it work fine,
but when i use on android it doesn't change its style
Am I doing something wrong? Keep getting false on the onPress
function.
Using the button with redux:
<RadioForm style = {{ alignSelf: 'flex-start', marginTop: 12 }}
radio_props = {[{label: 'Show password', value: this.props.showPassword }]}
buttonSize = { 12 }
labelStyle = {{ fontSize: 13, color: '#535353', paddingLeft: 6}}
buttonColor = { '#E52C51' }
initial = { this.props.showPassword }
onPress = { this.onShowPasswordToggle.bind(this) }
/>
onShowPasswordToggle(toggleState: boolean) {
this.props.showPasswordToggeled(toggleState)
}
Can you also add ripple effects like in android radio button?
You mispeled radio_props in your library, it's spelled radip_props.
RadioButtonInput
would not be aligned with RadioButtonLabel
in vertical direction. Caused by radioLabel: 20
style.
Hi, your example(type2 and 3) is only applicable for 1 group of radio buttons which sets the index using this.setState on onClick. How can i set the selected index without setting it in this.setState
I am using this module. How to place a radio button with dynamic data showing in a listView. I placed the radio button in listView, it shows only radio buttons but not shows the data in an array.
Here is my code:
listRow(list, sectionID:number, rowID:number){
var attributes=[];
list.options.map((list)=>{
attributes.push(
<View style={styles.listOfAttributesView}>
<View style={styles.dataRowAttributesView}>
<Text style={{fontSize:15, color:'black'}}>{list}</Text>
</View>
</View>
)
})
return(
<View>
<RadioForm
radio_props={attributes}
initial={0}
buttonColor={'black'}
buttonSize={10}
onPress={(value) => {this.setState({value:this.state.value})}}/>
</View>
)
}
Here is my screen shot:
Please give me any suggestion. Thanks
It's been 2 weeks, any updates?
Hi , can you make this compatible with RN 0.26?
Hello,
I have 3 radio button in from male.female and other. after submitting from when user select edit from option, i went select button form state. state is contain value 0,1,2.
How can i resolved ? please give suggestions.
Thanks,
when click on same button twice its UI changes how to fix it.
Can you make the radio button more customizable like able to change the width of the button, inner color, outer color?
Hi there.
First off, thanks for sharing this lib.
I'm having an issue with the label: the only way i can make it shown is by setting:
<RadioForm formHorizontal={true} animation={true} >
When I eliminate or set false
the formHorizontal
field, the label doesn't show.
As per the title, is it possible to have the feature to specify the color for the button when it is selected and when it is not? Current the colours will be the same regardless if it is selected or not.
Hey,
I have run into a problem with vertical alignment of radio buttons with different label text length. See image below:
I would like the radio buttons to all be aligned and start at the red line - how is this possible? I tried with some styling on different objects but nothing seemed to work..
Thanks in advance!
how to mention the space between button and the label and i also need to know how to place the button right side of label
When i click through the RadioForm
it has a strange behaviour. Only every second click gets active.
When clicking the same radio twice, it works.
Looks like the created radios are not connected correctly?
react-native-simple-radio-button@^2.5.0-alpha.1:
version "2.6.0"
<RadioForm
radio_props={radioAnswers}
initial={10}
buttonColor={'#444'}
onPress={(value) => this.setState({ answer: value })}
style={BasicStyles.radios}
/>
about label style
Is there a way we can resize the button size?? I tried with height and width but it just messes up the component. Please help.
Hi, Thanks for a great plugin.
My question is if I want to change the shape of radio button say, square, How can this be implemented?
"react": "16.0.0-alpha.12",
"react-native": "0.46.4",
"react-native-simple-radio-button": "^2.6.0",
<RadioForm
radio_props={this.state.prices}
formHorizontal={false}
labelHorizontal={true}
initial={0}
buttonColor={'#d82647'}
animation={true}
onPress={(value) => {this.updateCart(value)}}
style={{alignItems: 'flex-start'}}
/>
I want to put a image between radio button and label. How can I do ?
How do I set the defaults? Nothing is chosen
I can't figure out how you get the value/label of the chosen item so as to respond to it. Could you provide an example? I don't know what state to call to get the results.
Thanks for the module.
this.props.navigation.setParams
to set any value.setParams
Remove radio buttons and it works fine with set navigation params.
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.