sramezani / radio-buttons-react-native Goto Github PK
View Code? Open in Web Editor NEWAnimated radio buttons component for react native
License: MIT License
Animated radio buttons component for react native
License: MIT License
I just can change borderColor of the circle, is possible to change the background of the circle?
Thanks <3
After upgrading the SDK 44 to SDK 47, the previously selected radio button is not getting disabled when I am selecting another button. Find my code below:
<RadioButtonRN
data={data}
initial = {flag}
value={Gender}
selectedBtn={(data) => setGender(data.label)}
icon={
}
animationTypes={['shake']}
activeColor="#FFFAFA"
textStyle={styles.textstyle}
boxStyle={styles.boxstyle}
style={styles.options}
/>
Is anyone else facing this issue?
is there any way to make selected radio button to remain selected while navigating from screen to screen. for example I have 2 screens HomeScreen and OptionsScreen and some radio buttons on OptionsScreen, after selecting some options from the radio buttons if I move to HomeScreen and come back to the OptionsScreen again, it removes my previous selections. Is there any way to overcome this issue?
Two Line label with different stlyles... like
This a heading
this is subheading
The component could be accessible to readers
if the user doesn't have that font loaded (which I don't).
Can you please remove the font from the style sheet?
Thanks
I want to uncheck the radio button when new questions appear.
Currently when I change the question by pressing next button the new question appear with already selected option.
I made a module declaration for this library to get it working in typescript. Here it is for anyone else that has this issue, feel free to open a PR and include this in the package, but it works in my project just manually declaring this in a type file:
declare module 'radio-buttons-react-native' {
import * as React from 'react';
import { StyleProp, TextStyle, ViewStyle } from 'react-native';
export type animationTypes = 'zoomIn' | 'pulse' | 'shake' | 'rotate';
export interface RadioButtonProps<ItemType> {
/** Defaults to [] */
data: ItemType[];
selectedBtn?: (value: ItemType) => void;
icon?: React.ReactNode;
/** Defaults to true */
box?: boolean;
/** Defaults to -1 */
initial: number | null;
/** Defaults to [] */
animationTypes?: animationTypes[];
/** Defaults to 500 */
duration?: number;
/** Defaults to {} */
style?: StyleProp<ViewStyle>;
/** Defaults to {} */
boxStyle?: StyleProp<ViewStyle>;
/** Defaults to {} */
textStyle?: StyleProps<TextStyle>;
/** Defaults to 18 */
circleSize?: number;
/** Defaults to '#03a9f4' */
activeColor?: string;
/** Defaults to '#e2e2e2' */
deactiveColor?: string;
/** Defaults to '#e1f5fe33' */
boxActiveBgColor?: string;
/** Defaults to '#fff' */
boxDeactiveBgColor?: string;
/** Defaults to '#383838' */
textColor?: string;
}
export default class RadioButtonRN<T> extends React.Component<
RadioButtonProps<T>,
unknown
> {}
}
Hey, I think it would be better to update current code:
<View style={[styles.centerProductBox]}> <Text style={[{ color: textColor }, textStyle]}> {item.label} </Text>
With the following:
<View style={[styles.centerProductBox]}> <Text style={[{ color: textColor }, textStyle]}> {item} </Text>
This way the library user will have a better experience using it and will not have to transform his data to a label object if they are using a different name.
how to use this radio buttons in flatlist
How to push 2 radio button together in 1 line
I got this error when installing this library:
./node_modules/radio-buttons-react-native/RadioButtonRN.js 101:20
Module parse failed: Unexpected token (101:20)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| }
|
fadeInAnimation = () => {
| // this.fadeAnim.setValue(0)
| Animated.timing(this.state.fadeAnim, {
I know that in this way the idea for the radio button is lost, but is it possible to make to select two buttons at once ?
Hi,
I got an error, "Failed to compile" when I run the example code. I am new to React Native and the error location is not in the example code. So I wonder if this is module problem.
Failed to compile
C:/ReactNative/TestApp/node_modules/radio-buttons-react-native/RadioButtonRN.js 101:20
Module parse failed: Unexpected token (101:20)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| }
|
fadeInAnimation = () => {
| // this.fadeAnim.setValue(0)
| Animated.timing(this.state.fadeAnim, {
This error occurred during the build time and cannot be dismissed.
Setting initial prop causes re-render. I believe this is because although default props are set to -1, the active index is also set to -1 in the constructor.
Is this package support expo?
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.