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.
CodePudding user response:
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.