react-native-paper
Version:
Material design for React Native
125 lines • 3.71 kB
TypeScript
import * as React from 'react';
import { ColorValue, GestureResponderEvent, PressableAndroidRippleConfig, StyleProp, TextStyle, ViewStyle } from 'react-native';
import type { ThemeProp, MD3TypescaleKey } from '../../types';
export type Props = {
/**
* Value of the radio button.
*/
value: string;
/**
* Label to be displayed on the item.
*/
label: string;
/**
* Whether radio is disabled.
*/
disabled?: boolean;
/**
* Type of background drawabale to display the feedback (Android).
* https://reactnative.dev/docs/pressable#rippleconfig
*/
background?: PressableAndroidRippleConfig;
/**
* Function to execute on press.
*/
onPress?: (e: GestureResponderEvent) => void;
/**
* Function to execute on long press.
*/
onLongPress?: (e: GestureResponderEvent) => void;
/**
* Accessibility label for the touchable. This is read by the screen reader when the user taps the touchable.
*/
accessibilityLabel?: string;
/**
* Custom color for unchecked radio.
*/
uncheckedColor?: string;
/**
* Custom color for radio.
*/
color?: string;
/**
* Color of the ripple effect.
*/
rippleColor?: ColorValue;
/**
* Status of radio button.
*/
status?: 'checked' | 'unchecked';
/**
* Additional styles for container View.
*/
style?: StyleProp<ViewStyle>;
/**
* Style that is passed to Label element.
*/
labelStyle?: StyleProp<TextStyle>;
/**
* @supported Available in v5.x with theme version 3
*
* Label text variant defines appropriate text styles for type role and its size.
* Available variants:
*
* Display: `displayLarge`, `displayMedium`, `displaySmall`
*
* Headline: `headlineLarge`, `headlineMedium`, `headlineSmall`
*
* Title: `titleLarge`, `titleMedium`, `titleSmall`
*
* Label: `labelLarge`, `labelMedium`, `labelSmall`
*
* Body: `bodyLarge`, `bodyMedium`, `bodySmall`
*/
labelVariant?: keyof typeof MD3TypescaleKey;
/**
* Specifies the largest possible scale a label font can reach.
*/
labelMaxFontSizeMultiplier?: number;
/**
* @optional
*/
theme?: ThemeProp;
/**
* testID to be used on tests.
*/
testID?: string;
/**
* Whether `<RadioButton.Android />` or `<RadioButton.IOS />` should be used.
* Left undefined `<RadioButton />` will be used.
*/
mode?: 'android' | 'ios';
/**
* Radio button control position.
*/
position?: 'leading' | 'trailing';
};
/**
* RadioButton.Item allows you to press the whole row (item) instead of only the RadioButton.
*
* ## Usage
* ```js
* import * as React from 'react';
* import { RadioButton } from 'react-native-paper';
*
* const MyComponent = () => {
* const [value, setValue] = React.useState('first');
*
* return (
* <RadioButton.Group onValueChange={value => setValue(value)} value={value}>
* <RadioButton.Item label="First item" value="first" />
* <RadioButton.Item label="Second item" value="second" />
* </RadioButton.Group>
* );
* };
*
* export default MyComponent;
*```
*/
declare const RadioButtonItem: {
({ value, label, style, labelStyle, onPress, onLongPress, disabled, color, uncheckedColor, rippleColor, status, theme: themeOverrides, background, accessibilityLabel, testID, mode, position, labelVariant, labelMaxFontSizeMultiplier, }: Props): React.JSX.Element;
displayName: string;
};
export default RadioButtonItem;
export { RadioButtonItem };
//# sourceMappingURL=RadioButtonItem.d.ts.map