Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

How to view a component in onPress of React-Native-Paper Chip component

I want to show a Add button when I click Chip’s onPress. The component I want to display is onPressChip() function. This is my code.

const Item = ({title}) => (
  <View>
    <Chip onPress={() => onPressChip()} style={{margin: 'auto'}}>
      {title}
    </Chip>
  </View>
);

const onPressChip = () => {
  <View style={{flexDirection: 'row-reverse', marginTop: 10}}>
    <Button
      disabled={false}
      icon={'plus'}
      mode="contained"
      onPress={() => onClickAddButton()}
      color={'#0AB155'}
      style={{left: 0, marginTop: 5}}>
      {'Add'}
    </Button>
  </View>;
};


const GradingList = ({DATA}) => {
  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={DATA}
        horizontal={true}
        renderItem={({item}) => <Item title={item.name} />}
        keyExtractor={item => item.id}
      />
    </SafeAreaView>
  );
};

export default GradingList;

But it does not work. Please help.

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

>Solution :

Take one boolean state variable based on that you can manage the view or hide button:

const[isButtonVisible,setIsButtonVisible]=useState(false)
const Item = ({title}) => (
  <View>
    <Chip onPress={() => setIsButtonVisible(!isButtonVisible)} style={{margin: 'auto'}}>
      {title}
    </Chip>
  </View>
);

const onPressChip = () => {
 return( <View style={{flexDirection: 'row-reverse', marginTop: 10}}>
    <Button
      disabled={false}
      icon={'plus'}
      mode="contained"
      onPress={() => onClickAddButton()}
      color={'#0AB155'}
      style={{left: 0, marginTop: 5}}>
      {'Add'}
    </Button>
  </View>)
};


const GradingList = ({DATA}) => {
  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={DATA}
        horizontal={true}
        renderItem={({item}) => <Item title={item.name} />}
        keyExtractor={item => item.id}
      />
      {isButtonVisible&&onPressChip()}
    </SafeAreaView>
  );
};

export default GradingList;

This will add a button after all flatlist data is shown.

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading