Menu
I want to display cards with news from a JSON file. Getting the JSON works fine, but I want to add a onPress event, so I can click the card and navigate to the article.
My card view:
<Card>
<CardItem button onPress={this._OnButtonPress(news.id)}>
<Left>
<Body>
<Text style={styles.cardText}>{news.title}</Text>
</Body>
</Left>
</CardItem>
<CardItem>
<Left>
<Icon style={styles.icon} name="chatbubbles" />
<Text>{news.comments} comments</Text>
</Left>
<Right>
<Text>{news.published}</Text>
</Right>
</CardItem>
</Card>
I am trying to pass a variable to the onButtonPress() function
_OnButtonPress(newsID) {
Alert.alert(newsID.toString());
}
To test the onPress event, all I did is alert the parameter.
I don't see anything wrong, but still I got this error
Does anyone know how I can fix this and what Im doing wrong here. Thanks in advance.
Update
My updated class:
import React, { Component } from "react";
import {
Image,
ListView,
StyleSheet,
Text,
View,
Alert
} from 'react-native';
import {
Container,
Header,
Left,
Right,
Button,
Card,
CardItem,
Icon,
Body,
Content,
Logo
} from 'native-base';
import styles from "./styles";
const logo = require("../../../img/f1today.png");
var REQUEST_URL = 'http://v2.first-place.nl/test/news.json';
class News extends Component {
constructor(props) {
super(props);
this._OnButtonPress = this._OnButtonPress.bind(this);
this.state = {
dataSource: new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2,
}),
loaded: false,
};
}
_OnButtonPress(newsID) {
Alert.alert(newsID.toString());
}
componentDidMount() {
this.fetchData();
}
fetchData() {
fetch(REQUEST_URL)
.then((response) => response.json())
.then((responseData) => {
this.setState({
dataSource: this.state.dataSource.cloneWithRows(responseData.articles),
loaded: true,
});
})
.done();
}
render() {
if (!this.state.loaded) {
return this.renderLoadingView();
}
return (
<Container style={styles.container}>
<Header
style={{ backgroundColor: "#fff" }}
androidStatusBarColor="#f05423"
iosBarStyle="light-content">
<Left>
<Button
transparent
onPress={() => this.props.navigation.navigate("DrawerOpen")}
>
<Icon name="ios-menu" style={{color: 'black'}} />
</Button>
</Left>
<Body>
<Image source={logo} style={styles.headerLogo} />
</Body>
<Right />
</Header>
<Content padder>
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderNews}
style={styles.listView}
/>
</Content>
</Container>
);
}
renderLoadingView() {
return (
<View style={styles.loading}>
<Text>
Loading news...
</Text>
</View>
);
}
renderNews(news) {
return (
<Card>
<CardItem button onPress={()=> this._OnButtonPress(news.id)}>
<Left>
<Body>
<Text style={styles.cardText}>{news.title}</Text>
</Body>
</Left>
</CardItem>
<CardItem>
<Left>
<Icon style={styles.icon} name="chatbubbles" />
<Text>{news.comments} comments</Text>
</Left>
<Right>
<Text>{news.published}</Text>
</Right>
</CardItem>
</Card>
);
}
}
export default News;
419
React & React Native. NativeBase is an accessible, utility-first component library that helps you build consistent UI across Android, iOS and Web.
NativeBase is an open-source UI library that makes it easy to build universal design systems. NativeBase was built for react native and is supported in Expo, Web, and React Native CLI initiated apps. NativeBase has UI components like Button, Image, Alert, Progress, Spinner, Card, and more built into it.
Touchables The "Touchable" components provide the capability to capture tapping gestures, and can display feedback when a gesture is recognized. These components do not provide any default styling, however, so you will need to do a bit of work to get them looking nicely in your app.
You should wrap your CardItem with TouchableOpacity or any other Touchable item. And give onPress function to that Touchable item.
<TouchableOpacity onPress={() => //your function}
<CardItem>
</CardItem>
</TouchableOpacity>
Note: Make sure you use the <TouchableOpacity> component associated with the react-native package rather than the react-native-gesture-handler package. Visual Studio Code editor may auto-import from react-native-gesture-handler which does not work in this particular use case.
Correct Package:
import { TouchableOpacity } from 'react-native';
Incorrect Package:
import { TouchableOpacity } from 'react-native-gesture-handler';
For me i left the button={true} prop off, when i added it works. See example below.
<CardItem
button={true}
onPress={() => {this.cardSelected(item.name)}}
style={{paddingTop:0,paddingBottom:0,paddingLeft:0,paddingRight:0}}>
<Image source={item.img} style={{flex:1,resizeMode: 'cover',height: 175}} />
<Text style={styles.cardheading}>{item.name}</Text>
<Image source={cardline} style={styles.cardline}/>
<Text style={styles.cardtext}> {item.text}</Text>
</CardItem>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
