'Handle different onPress functions TypeScript
I am developing a mobile app using React Native with Expo CLI and TypeScript.
I have a screen in my app that contains two cards and two buttons inside those cards. To develop the cards, I did a reusable component so that I don't repeat code.
The code for this reusable component is this:
export function AccountCards(props: any = {}) {
const { header, content, text, style, handler } = props;
return (
<Card
mode="elevated"
elevation={5}
style={[styles.cardPoints, styles.cards, style]}
>
<Card.Content>
<Title style={styles.cardTitle}>{header}</Title>
<Paragraph style={styles.cardText}>{content}</Paragraph>
</Card.Content>
<Card.Actions>
<Button
mode="contained"
style={styles.cardBtn}
onPress={handler}
labelStyle={{ color: colors.buttonTextColor }}
>
{text}
</Button>
</Card.Actions>
</Card>
);
}
This component is used in a screen then. The code is:
export function AccountScreen() {
return (
<View style={styles.container}>
<Text style={styles.text}>Olá, Utilizador</Text>
<AccountCards
header={strings.screens.accountScreen.cardPoints.title}
content={strings.screens.accountScreen.cardPoints.content}
text={strings.screens.accountScreen.cardPoints.pointsButton}
style={{
marginBottom: 30,
}}
handler={PointsScreen}
/>
<AccountCards
header={strings.screens.accountScreen.cardHistory.title}
content={strings.screens.accountScreen.cardHistory.content}
text={strings.screens.accountScreen.cardHistory.historyButton}
/>
<Button mode="contained" style={styles.editBtn}>
{strings.screens.accountScreen.editProfileButton}
</Button>
</View>
);
}
This code doesn't seems to work, I guess I didn't pass the onPress prop correctly.
I also tried to pass it as an arrow function but it doesn't work either.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
