RadioButton.md

RadioButton

RadioButton component that uses RadioButton component from react-native-paper alongside Text component to render radio button with text with the same style on both Android and iOS.

Images

Android

iOS

Usage

import React from 'react';
import { View } from 'react-native';
import { RadioButton } from '@eslam-elmeniawy/react-native-common-components';

const MyComponent = () => {
  const [checked, setChecked] = React.useState(false);

  const onPress = () => setChecked(!checked);

  return (
    <View>
      <RadioButton text="Click Me" checked={checked} onPress={onPress} />
    </View>
  );
};

Props

text

Type: string

The text to display beside the radio button.

checked

Type: boolean

Default value: false

Determines whether the radio button is checked.

onPress

Type: () => void

Callback that is called when the user press the radio button.

disabled

Type: boolean

Default value: false

Determines whether radio button is disabled.

checkedColor

Type: string

Custom color for checked radio button.

If not passed a default value from react-native-paper theme is used equivalent to theme.colors.primary.

uncheckedColor

Type: string

Custom color for unchecked radio button.

textProps

Type: Text props

The props to add to the Text component used to render radio button text.

contentAlign

Type: FlexAlignType

Aligns children in the cross direction.

...View props