How to implement radio button in React Native

Question

I am converting React code to React Native. So I need to implement radio buttons.

Answer 1

Here is my solution for radio button using functional components.

Note - I have used images for checked & unchecked radio icon

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

const Radio = () => {
  const [checked, setChecked] = useState(0);
  var gender = ['Male', 'Female'];
  return (
    
      
        {gender.map((gender, key) => {
          return (
            
              {checked == key ? (
                
                  
                  {gender}
                
              ) : (
                 {
                    setChecked(key);
                  }}
                  style={styles.btn}>
                  
                  {gender}
                
              )}
            
          );
        })}
      
      {/* {gender[checked]} */}
    
  );
};

const styles = StyleSheet.create({
  radio: {
    flexDirection: 'row',
  },
  img: {
    height: 20,
    width: 20,
    marginHorizontal: 5,
  },
  btn: {
    flexDirection: 'row',
    alignItems: 'center',
  },
});

export default Radio;