UNPKG

react-native-paper

Version:
125 lines 3.71 kB
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