[[oktatas:telefon:react_native|< React Native]]

====== React Native - Rádiógomb ======

  * **Szerző:** Sallai András
  * Copyright (c) 2025, Sallai András
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: https://szit.hu

===== Telepítés =====

  * https://www.npmjs.com/package/react-native-radio-buttons-group (2025)


  npm install react-native-radio-buttons-group

===== Példa =====

<code javascript>
import React, { useMemo, useState } from 'react';
import RadioGroup from 'react-native-radio-buttons-group';

export default function App() {

    const radioButtons = useMemo(() => ([
        {
            id: '1',
            label: 'Lehetőség 1',
            value: 'option1'
        },
        {
            id: '2',
            label: 'Lehetőség 2',
            value: 'option2'
        },
        {
            id: '3',
            label: 'Lehetőség 3',
            value: 'option3'
        }
    ]), []);

    const [selectedId, setSelectedId] = useState();

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


</code>

Egy lehetséges teljes kód:

<code javascript App.js>
import { StatusBar } from 'expo-status-bar';
import { useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { RadioGroup } from 'react-native-radio-buttons-group';

export default function App() {
  const [selectedId, setSelectedId] = useState(null);
  const radioButtons = [
    {
      id: '1',
      label: 'Option 1',
      value: 'option1',
    },
    {
      id: '2',
      label: 'Option 2',
      value: 'option2',
    },
    {
      id: '3',
      label: 'Option 3',
      value: 'option3',
    },
  ]
  return (
    <View style={styles.container}>
      <Text>Rádiógomb</Text>
      <View>
        <Text>{selectedId}</Text>
      </View>

      <RadioGroup
        radioButtons={radioButtons}
        onPress={setSelectedId}
        selectedId={selectedId}
      />

      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});
</code>

===== Lásd még =====

  * https://callstack.github.io/react-native-paper/ (2025)