[React Native] 라디오 버튼 구현하기(react-native-radio-buttons-group)

react-native-radio-buttons-group로 라디오 버튼 구현하기

📍 Installation

npm i react-native-radio-buttons-group --save
# or
yarn add react-native-radio-buttons-group

 

---

📍 사용법

App.js 예시

import React, { useState } from 'react';
import RadioGroup from 'react-native-radio-buttons-group';

export default function App() {

    const [radioButtons, setRadioButtons] = useState([
        {
            id: '1', // acts as primary key, should be unique and non-empty string
            label: 'Option 1',
            value: 'option1'
        },
        {
            id: '2',
            label: 'Option 2',
            value: 'option2'
        }
    ]);

    function onPressRadioButton(radioButtonsArray) {
        setRadioButtons(radioButtonsArray);
    }

    return (
        <RadioGroup 
            radioButtons={radioButtons} 
            onPress={onPressRadioButton} 
        />
    );

}

 

---

실제 사용 예시

import RadioGroup from 'react-native-radio-buttons-group';
import React, { useState } from 'react';

const radioButtonData = [
    { id: 1, label: '권정열', value: 'Kwon' },
    { id: 2, label: '차은우', value: 'Cha' },
    { id: 3, label: '송혜교', value: 'Song' }
];

export default function App() {
    
    const [radioButtons, setRadioButtons] = useState(radioButtonData);
    
    function onPressRadioButton(radioButtonsArray) {
        setRadioButtons(radioButtonsArray);
        const selectedRadioButton = radioButtons.filter(item => item.selected === true);
        console.log(selectedRadioButton.map(item => item.value).toString());
    }

    return(
        <RadioGroup 
            layout='row'
            radioButtons={radioButtons.map(rb => ({ ...rb, size: 16, labelStyle: {color: 'blue'} }))} 
            onPress={onPressRadioButton} 
        />
    )
}

 

---

Horizontal 사용법

<RadioGroup 
    radioButtons={radioButtons} 
    onPress={onPressRadioButton} 
    layout='row'
/>

 

---

Props

 

 

---

참고 자료 : https://www.npmjs.com/package/react-native-radio-buttons-group