I am creating react native app. on app category page i am fetching data and from live url in json form and post it into product page.
fetching data code:-
handlePressProduct(id) {
var url='http://www.furnitureinfashion.net/menu_category_listing.php?cat_id=';
fetch(url+id, {
method: 'GET'
}).then((response) => { return response.json() } )
.then((responseJson) => {
console.log(responseJson);
Actions.product({data:responseJson})
})
}
on product page i am getting data like this:-
{this.props.data.map((dataImage,Index1)=>
<View key={Index1}>
{dataImage['ProductId'] != undefined && (
<View style={productStyle.homeimg1}>
<TouchableOpacity onPress={this.handlePressProduct.bind(this,dataImage['ProductId'])}>
<Image source={{uri: uri+dataImage['Image']}} style={{width: 130, height: 130}} />
<Text style={productStyle.title}> {dataImage['ProductName']}</Text>
<Text style={productStyle.shopbutton}>View Details</Text>
</TouchableOpacity>
{dataImage['Options'] != '' &&(
<Text style={productStyle.cartbutton} >Select Option</Text>
)}
{dataImage['Options'] == '' &&(
<Text style={productStyle.cartbutton} >Add to cart</Text>
)}
<Text> RRP{dataImage['RRPPrice']}</Text>
<Text> Our Price{dataImage['OurPrice']}</Text>
<Text style={productStyle.buymorebutton} >Buy & Save More Today</Text>
<Text style={productStyle.shiptext} >Free Shipping</Text>
</View>
)}
</View>
)}
in array product data is too large so, i want to add pagination on product page. but i don't know how to do?
Related
here is the code to the card I need to make clickable as I need to navigate to a new screen and pass parameters to it upon clicking on the card:
function ItemV({ title, url,verificationId,AttReq}) { //for verification items
return (
<TouchableOpacity
onPress={() => navigation.navigate('VerificationRequestDetails',
{
item:AttReq,
img : url ,
name : title,
verificationId:verificationId
,})}
style={[
styles.item,
{ backgroundColor:'#ffffff' },
]}
>
<Card title="Verification Request">
<View style={styles.item}>
<Image source={{ uri: url }} style={styles.image} />
<Text style={styles.title}>{title}</Text>
</View>
<Text style={styles.paragraph}>You are required to verify this information</Text>
</Card>
</TouchableOpacity>
);
}
I am trying to implement the modal component in this app and for some reasons, I cant make it work. I have done it in another app and even though everything looks as it should in this one, it still doesn't work, it just doesn't toggle!
Here is my code (i call toogleModal() here ):
<TouchableOpacity
activeOpacity={1}
style={styles.slideInnerContainer}
//onPress={() => { alert(`You've clicked '${rest_name}'`); }}
onPress={() => this.toggleModal(rest_name)}
>
<View style={styles.shadow} />
<View style={[styles.imageContainer, even ? styles.imageContainerEven : {}]}>
{this.image}
<View style={[styles.radiusMask, even ? styles.radiusMaskEven : {}]} />
</View>
<View style={[styles.textContainer, even ? styles.textContainerEven : {}]}>
<View style={{ flexDirection: 'row' }}>
{uppercaseTitle}
{ratings}
</View>
<Text
style={[styles.subtitle, even ? styles.subtitleEven : {}]}
numberOfLines={2}
>
{rest_location}
</Text>
</View>
</TouchableOpacity>
Now here is the toggleModal() which should set the state and then call the onPressItem() :
toggleModal = (item) => {
this.setState({ isModalVisible: !this.state.isModalVisible });
this.onPressItem(item);
};
and onPressItem() :
onPressItem = (item) => {
return (
<ThemeProvider theme={theme}>
<Modal animationIn="rubberBand" animationOut={"bounceOut"}
isVisible={this.state.isModalVisible}
onBackdropPress={() => this.setState({ isModalVisible: false })}
>
<View style={{ flex: 1 }}>
{item}
</View>
<View style={{ flex: 1 }}>
<Button title="Hide modal" onPress={this.toggleModal} />
</View>
</Modal>
</ThemeProvider>
)
};
Now, remember this code is taken from another app where modal is working perfectly!
Most probably your issue with click option is connected with incorrect import TouchableOpacity from correct module. Check if you are importing from react-native:
import { TouchableOpacity } from 'react-native';
change this line
onPress={() => this.toggleModal(rest_name)}
to this:
onPress={() => {this.toggleModal(rest_name)}}
you only need to put the function call in brackets
I'm trying to fetch data from API, but I'm only able to fetch the highest level ones. When I'm trying to access ones nested under categories, I get an error: undefined is not an object (evaluating 'this.state.data.order.name' ).
From what I've read it might be an issue with state but I'm new to react-native and I am not sure how to fix it.
This is the API structure
render(){
const { data } = this.state;
return(
<ScrollView style={styles.containerxd}>
<TouchableOpacity style={styles.textStyle}>
<Image
source={require('./images/burger.png')}
style={styles.ImageIconStyle} />
</TouchableOpacity>
<View style={styles.white}>
<View style={{flex:1, alignItems:'center', justifyContent:'center'}}>
<View style={styles.tabHeader}><Text style={styles.textHeader}>Scientific name</Text></View>
<View style={styles.tabContent}><Text style={styles.textContent}>{this.state.data.scientific_name}</Text></View>
<View style={styles.tabHeader}><Text style={styles.textHeader}>Common name</Text></View>
<View style={styles.tabContent}><Text style={styles.textContent}>{this.state.data.common_name}</Text></View>
<View style={styles.tabHeader}><Text style={styles.textHeader}>Moisture use</Text></View>
<View style={styles.tabContent}><Text style={styles.textContent}>{this.state.data.order.name}</Text></View>
Scientific name and common name show up just fine, but every data level lower renders error.
You need to validate your data.When order is undefined, doing order.name will break your app. change
<View style={styles.tabContent}><Text style={styles.textContent}>{this.state.data.order.name}</Text></View>
to
const { data } = this.state;
const name = data && data.order && data.order.name || '';
// rest of the code here
<View style={styles.tabContent}><Text style={styles.textContent}>{name}</Text></View>
NOTE
Always validate your data. Don't assume that you'll always get the right data. When working with objects always validate them, as doing data.name, can break your app, if data is null or undefined. for example, given the following object.
const animal = {};
doing
// throws an error, Cannot read property 'toLowerCase' of undefined
console.log(animal.name.toLowerCase())
to prevent that from happening, we need to check if the propery exists, like the following.
// checks if the name property exists console name, else assign a console log 'Lion'
console.log(animal.name && animal.name.toLowerCase() || 'Lion')
Second option
add a loader, display Loading... text when fetching data from api, once the request finish set loader to false and display your data.
fetchData = async () => {
const res = await fetch(...)
...
this.setState({ isLoading: false, data: response.data });
}
render() {
return (
<ScrollView style={styles.containerxd}>
<TouchableOpacity style={styles.textStyle}>
<Image
source={require('./images/burger.png')}
style={styles.ImageIconStyle}
/>
</TouchableOpacity>
{this.state.isLoading ? (
<Text>Loading...</Text>
) : (
<View style={styles.white}>
<View
style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center'
}}
>
<View style={styles.tabHeader}>
<Text style={styles.textHeader}>Scientific name</Text>
</View>
<View style={styles.tabContent}>
<Text style={styles.textContent}>
{this.state.data.scientific_name}
</Text>
</View>
<View style={styles.tabHeader}>
<Text style={styles.textHeader}>Common name</Text>
</View>
<View style={styles.tabContent}>
<Text style={styles.textContent}>
{this.state.data.common_name}
</Text>
</View>
<View style={styles.tabHeader}>
<Text style={styles.textHeader}>Moisture use</Text>
</View>
<View style={styles.tabContent}>
<Text style={styles.textContent}>
{this.state.data.order.name}
</Text>
</View>
</View>
</View>
)}
</ScrollView>
);
}
hey guys im getting error when sending data to another screen using flat list.
getting type error
TYPE ERROR
AND UNDEFINED THIS IS NOT AN OBJECT HOW DO I SOLVE IT...
array of items
Recommended : [
{"Rimage":require("./assets/image/pulses1.jpg"),
"name":"Corn-NK6240","name2":"Syngenta","Price":"INR 30/KG"},
{"Rimage":require("./assets/image/pulse2.jpg"),
"name":"Corn-NK6240","name2":"Syngenta","Price":"INR 30/KG"},
{"Rimage":require("./assets/image/pulse2.jpg"),
"name":"Corn-NK6240","name2":"Syngenta","Price":"INR 30/KG"},
{"Rimage":require("./assets/image/turmeric.jpg"),
"name":"Cabbage-NK6240","name2":"Syngenta","Price":"INR 30/KG"},
{"Rimage":require("./assets/image/pulses1.jpg"),
"name":"Corn-NK56240","name2":"Syngenta","Price":"INR 80/KG"},
],
and this Main Class That Have Flat list
class Mainclass extends Component {
render() {
return (
<FlatList
data={data}
numColumns={2}
keyExtractor={_keyExtractor}
<FlatList data={this.state.Recommended}
contentContainerStyle={{ flexDirection: 'row',justifyContent:'space-between'
}}
renderItem={({item,key}) =>
<TouchableOpacity onPress={()=>navigate('Product', { ListViewClickItemHolder: item })} >
<View style={{flexDirection:'row'}}>
<View style={{flexDirection:'column',alignItems:'center',padding:3,width:(width-200)/2}}>
<View style={{padding:3,borderWidth:1,borderColor:'#dfdfe0'}}>
<Image style={{height:90,width:90}} source={item.Rimage} /></View>
<Text style={{fontFamily:'Montserrat',fontSize:width/30,}} numberOfLines={1}>{item.name}</Text>
<Text style={{fontFamily:'Montserrat',fontSize:width/30}} numberOfLines={1}>{item.name2}</Text>
<Text style={{color:'#4e9dda',fontFamily:'Montserrat',fontSize:width/30}}>{item.Price}</Text>
</View>
</View>
</TouchableOpacity>
}/>
/>
);
}
}
screen that i need to receive data
<Text style={{fontSize:width / 14,fontFamily:'CRC55',color:'black',}}> {this.props.navigation.state.getParam.ListViewClickItemHolder}</Text>
I am creating mobile app in react-native. I am fetching data from url and post to the product page using Actions.product(responseJson);
code to fetch data on home page:-
handlePressProduct(id) {
var url =
"http://www.furnitureinfashion.net/menu_category_listing.php?cat_id=";
fetch(url + id, {
method: "GET"
})
.then(response => {
return response.json();
})
.then(responseJson => {
Actions.product({ data: responseJson });
});
}
on prodcut page i am getting data like this:-
<View style={productStyle.products}>
{this.props.data.map(dataImage => (
<TouchableOpacity
onPress={this.handlePressProduct.bind(
this,
dataImage["cPath"]
)}
>
<View
key={dataImage["CategoryId"]}
style={productStyle.homeimg1}
>
<Image
source={{ uri: uri + dataImage["Image"] }}
style={{ width: 130, height: 130 }}
/>
<Text style={productStyle.title}>
{" "}
{dataImage["Name"]}
</Text>
<Text style={productStyle.shopbutton}>
SHOP NOW
</Text>
</View>
</TouchableOpacity>
))}
</View>
data i am fetching is too large. i want to add pagination in it. how can i add pagination ?