add radio buttons with custom text

Question

I have a component with icons and some text.

const criteriaList = [
  'New',
  'Freunde',
];

export const FilterCriteriaList: React.FunctionComponent = () => {
  //const [checked, setChecked] = React.useState('first');
  return (
    <View style={styles.container}>
      <View style={styles.horizontalLine} />
      {criteriaList.map((item: string) => (
        <View key={item}>
          <View style={styles.criteriaRow}>
            <TouchableOpacity
              style={styles.iconContainer}
              onPress={() => console.log('dhjksds')}>
              <Icon
                style={styles.icon}
                name="circle-thin"
                color="#31C283"
                size={moderateScale(20)}
              />
            </TouchableOpacity>
            {/* <RadioButton
        value="first"
        //status={ checked === 'first' ? 'checked' : 'unchecked' }
        onPress={() => setChecked('first')}
      /> */}
            <Text style={styles.text}>{item}</Text>
          </View>
          <View style={styles.horizontalLine} />
        </View>
      ))}
    </View>
  );
};

The TouchableOpacity doesn't work properly and nothing happens when I click on the icon. Also, the touchable opacity covers a lot more area than just the icon. Changing the height isn't feasible either since it ruins the design.

So, I am trying to use radio buttons from

import { RadioButton } from 'react-native-paper';

I commented out the TouchableOpacity and tried using Radiobuttons for testing but it gives me an error regarding unrecognisable material ui..The app crashes before I can even read the full error.

How exactly can I use radio buttons here? My component should look like it looks right now.

add radio buttons with custom text

0 Answers0