RadioButton Component

A customizable and animated radio button component for React Native applications with built-in label support and smooth touch interactions.

Features

🎯 Single Selection - Perfect for mutually exclusive options
🎨 Highly Customizable - Full control over colors, sizes, and styling
📝 Label Support - Built-in text label with custom styling options
🎪 Smooth Animations - Bounce effects and responsive interactions
🔧 Flexible State - Controlled and uncontrolled modes
♿ Accessibility Ready - Screen reader support and proper semantics

Installation

💻Bash

npm install rn-base-component
# or
yarn add rn-base-component

Basic Usage

⚛️TSX

import React from 'react'
import { RadioButton } from 'rn-base-component'

export default function App() {
  return (
     console.log('Selected:', isActive)}
    />
  )
}

Radio Button Group

⚛️TSX

import React, { useState } from 'react'
import { View } from 'react-native'
import { RadioButton } from 'rn-base-component'

export default function RadioGroup() {
  const [selectedOption, setSelectedOption] = useState('option1')

  const options = [
    { id: 'option1', label: 'Option 1' },
    { id: 'option2', label: 'Option 2' },
    { id: 'option3', label: 'Option 3' },
  ]

  return (
    
      {options.map(option => (
         setSelectedOption(option.id)}
          style={styles.radioButton}
        />
      ))}
    
  )
}

const styles = StyleSheet.create({
  radioButton: {
    marginBottom: 12,
  },
})

Advanced Usage

Custom Styling

⚛️TSX

 console.log(isActive)}
/>

With Icons

⚛️TSX


  }
  customInactiveIcon={
    
  }
  onPressButton={isActive => console.log(isActive)}
/>

Disabled State

⚛️TSX

 console.log(isActive)}
/>

API Reference

RadioButtonProps

Prop	Type	Default	Description
`isActive`	`boolean`	`false`	Current active state
`onPressButton`	`(isActive: boolean) => void`	Required	Callback when button is pressed
`label`	`string`	`undefined`	Text label for the radio button
`size`	`number`	`20`	Size of the radio button
`activeColor`	`string`	`theme.primaryColor`	Color when active
`inactiveColor`	`string`	`theme.borderColor`	Color when inactive
`disabledColor`	`string`	`theme.disabledColor`	Color when disabled
`borderWidth`	`number`	`2`	Border width of the radio button
`animationDuration`	`number`	`200`	Animation duration in milliseconds
`customActiveIcon`	`React.ReactNode`	`undefined`	Custom icon when active
`customInactiveIcon`	`React.ReactNode`	`undefined`	Custom icon when inactive
`textStyle`	`StyleProp<TextStyle>`	`undefined`	Style for the label text
`style`	`StyleProp<ViewStyle>`	`undefined`	Style for the container
`disabled`	`boolean`	`false`	Disable the radio button
`testID`	`string`	`undefined`	Test identifier for testing

Animation

The radio button includes smooth scaling and color transition animations that can be customized with the animationDuration prop.

Form Integration

Settings Form

⚛️TSX

import React, { useState } from 'react'
import { View, Text } from 'react-native'
import { RadioButton, Button } from 'rn-base-component'

export default function SettingsForm() {
  const [theme, setTheme] = useState('light')
  const [language, setLanguage] = useState('en')

  const themeOptions = [
    { id: 'light', label: 'Light Theme' },
    { id: 'dark', label: 'Dark Theme' },
    { id: 'auto', label: 'Auto (System)' },
  ]

  const languageOptions = [
    { id: 'en', label: 'English' },
    { id: 'es', label: 'Spanish' },
    { id: 'fr', label: 'French' },
  ]

  const handleSave = () => {
    console.log('Settings saved:', { theme, language })
  }

  return (
    
      Theme
      {themeOptions.map(option => (
         setTheme(option.id)}
          style={styles.radioButton}
        />
      ))}

      Language
      {languageOptions.map(option => (
         setLanguage(option.id)}
          style={styles.radioButton}
        />
      ))}

      
    
  )
}

const styles = StyleSheet.create({
  container: {
    padding: 20,
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    marginTop: 20,
    marginBottom: 12,
  },
  radioButton: {
    marginBottom: 12,
  },
  saveButton: {
    marginTop: 24,
  },
})

Survey Form

⚛️TSX

import React, { useState } from 'react'
import { ScrollView, Text } from 'react-native'
import { RadioButton } from 'rn-base-component'

export default function SurveyForm() {
  const [satisfaction, setSatisfaction] = useState('')

  const satisfactionLevels = [
    { id: 'very-satisfied', label: '😄 Very Satisfied' },
    { id: 'satisfied', label: '🙂 Satisfied' },
    { id: 'neutral', label: '😐 Neutral' },
    { id: 'dissatisfied', label: '🙁 Dissatisfied' },
    { id: 'very-dissatisfied', label: '😞 Very Dissatisfied' },
  ]

  return (
    
      
        How satisfied are you with our service?
      
      
      {satisfactionLevels.map(level => (
         setSatisfaction(level.id)}
          style={styles.option}
          textStyle={styles.optionText}
        />
      ))}
    
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
  question: {
    fontSize: 18,
    fontWeight: '600',
    marginBottom: 20,
    color: '#333',
  },
  option: {
    marginBottom: 16,
    paddingVertical: 8,
  },
  optionText: {
    fontSize: 16,
    marginLeft: 8,
  },
})

Best Practices

Mutually Exclusive Options - Use radio buttons for single-selection scenarios
Clear Labels - Use descriptive, concise labels for each option
Consistent Styling - Maintain consistent size and colors across groups
Group Management - Ensure only one option is selected per group
Accessibility - Provide proper accessibility labels and states
Touch Target - Maintain adequate touch target size (minimum 44px)
Visual Feedback - Use animations to provide clear state feedback

Multiple Selection

For multiple selection scenarios, use the Checkbox component instead of RadioButton.

Performance

For large lists of radio buttons, consider using FlatList with proper optimization techniques.