custom radio buttons not working in react native

Question

i am creating custom radio btns. my code is as follows:

 const [isAvailable, setIsAvailable] = useState([
{id: 0, value: true, title: 'Always available', selected: true},
{id: 1, value: false, title: 'Never available', selected: false},
{
  id: 2,
  value: false,
  title: 'Availabe for specific hours',
  selected: false,
},
 ]);

Now, my radio component is being called by a series of assets, but the basic idea is that when i call the radio component, the respective view is shown. The radio btns are called as follows:

{isAvailable.map(option => (
      <Row
        key={option.id}
        rightComponent={'radio'}
        title={option.title}
        onPress={() => onPress(option)}
        isSwitched={option.selected}
      />
    ))}

And my OnPress function looks like this:

const onPress = option => {
setIsAvailable(
  isAvailable.map(isAvailableOption => {
    isAvailableOption.id === option.id
      ? {...isAvailableOption, selected: true}
      : {...isAvailableOption, selected: false};
  }),
);

};

Now, my Row component looks like this:

rightComponent === 'radio' ? (
          <TouchableOpacity
            style={styles.radioBtn}
            onPress={onPress}
            key={key}>
            {isSwitched === true ? (
              <>
                <Ionicons
                  name={'radio-button-on-outline'}
                  style={{...styles.rightIcon, ...rightIconColor}}
                />
              </>
            ) : (
              <>
                <Ionicons
                  name={'ellipse-outline'}
                  style={{...styles.rightIcon, ...rightIconColor}}
                />
              </>
            )}
          </TouchableOpacity>
        ) : ({...})

But, whenever I click any icon, it doesn't work, please tell me where am I going wrong here?

can you share an expo snack? will hceck there – Gaurav Roy Dec 15 '22 at 07:18 — Gaurav Roy, Dec 15 '22 at 07:18

score 1 · Answer 1 · answered Dec 15 '22 at 07:47

1

Firstly you should use custom radio button because of this problems and you should use

//flexDirection:'row' in <View> <TouchableOpacity style={{//Your style}}/></View>`insted of Row. Like:` 
<View style={{flexDirection:'row"}}>
 <View>
{isAvailable.map(option => (
     <TouchableOpacity onPress={() => onPress(option)} style={{option.isSwitched ? style:style}} >
       <Text>optin.title </Text>
    </TouchableOpacity>
    ))}
</View>

answered Dec 15 '22 at 07:47

Muhammet Yusuf Piroglu

168
8

but i am making reusable components, so i have to make it like this – Adeena Lathiya Dec 15 '22 at 09:41
can u try this : – Muhammet Yusuf Piroglu Dec 16 '22 at 09:19

score 1 · Answer 2 · answered Dec 16 '22 at 09:21

can u try this :

{isSwitched === true ? (
         <TouchableOpacity
        style={styles.radioBtn}
        onPress={onPress}
        key={key}>
            <Ionicons
              name={'radio-button-on-outline'}
              style={{...styles.rightIcon, ...rightIconColor}}
            />
            </TouchableOpacity>
        ) : (
            <TouchableOpacity
        style={styles.radioBtn}
        onPress={onPress}
        key={key}>
            <Ionicons
              name={'ellipse-outline'}
              style={{...styles.rightIcon, ...rightIconColor}}
            />
           </TouchableOpacity>
        )}

thanks for sharing, but my issue is resolved, i just had to put my TouchableOpacity component inside a View — Adeena Lathiya, Dec 16 '22 at 10:25

score 0 · Accepted Answer · answered Dec 15 '22 at 10:57

0

Nothing was wrong, I just had to put my TouchableOpacity inside a View

answered Dec 15 '22 at 10:57

Adeena Lathiya

165
1
11

custom radio buttons not working in react native

3 Answers3