Breaking News: Grepper is joining You.com. Read the official announcement!

radio button react native

YOU.com answered on September 11, 2023 Popularity 9/10 Helpfulness 4/10

answer radio button react native

radio button react native

Comment

import React, { useState } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';

const RadioButton = ({ options }) => {
  const [selectedOption, setSelectedOption] = useState(null);

  const handleOptionSelect = (option) => {
    setSelectedOption(option);
  };

  return (
    <View>
      {options.map((option) => (
        <TouchableOpacity
          key={option}
          onPress={() => handleOptionSelect(option)}
          style={{ flexDirection: 'row', alignItems: 'center' }}
        >
          <View
            style={{
              height: 24,
              width: 24,
              borderRadius: 12,
              borderWidth: 2,
              borderColor: selectedOption === option ? 'blue' : 'gray',
              alignItems: 'center',
              justifyContent: 'center',
            }}
          >
            {selectedOption === option && (
              <View
                style={{
                  height: 12,
                  width: 12,
                  borderRadius: 6,
                  backgroundColor: 'blue',
                }}
              />
            )}
          </View>
          <Text style={{ marginLeft: 10 }}>{option}</Text>
        </TouchableOpacity>
      ))}
    </View>
  );
};

// Usage
const App = () => {
  const options = ['Option 1', 'Option 2', 'Option 3'];
  
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <RadioButton options={options} />
    </View>
  );
};

export default App;

Popularity 9/10 Helpfulness 4/10 Language javascript

Source: Grepper

Link to this answer
Share Copy Link

Contributed on Sep 11 2023

YOU.com

0 Answers Avg Quality 2/10

radio button react native

Contents

More Related Answers

radio button react native

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.