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

Question

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.

Where you want to show button? – Jatin Bhuva Jan 18 '23 at 10:21 — Jatin Bhuva, Jan 18 '23 at 10:21
@JatinBhuva I want to show the button after flat list. – Milindi Senevirathne Jan 18 '23 at 10:24 — Milindi Senevirathne, Jan 18 '23 at 10:24

score 1 · Accepted Answer · answered Jan 18 '23 at 10:29

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.

Let me know it works or not. – Jatin Bhuva Jan 18 '23 at 10:29 — Jatin Bhuva, Jan 18 '23 at 10:29

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

1 Answers1