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>
Related
I make check box list on Model Pop up by using react native multiple select checkbox list listed but it take full screen height i am not able to fix this issue please Any body help me
below is my Model Pop up Code
[![<Modal
animationType="slide"
transparent={true}
visible={this.state.modalVisible}
onRequestClose={() => {
Alert.alert("Modal has been closed.");
}}
>
<View style={styles.ModalcenteredView}>
<View style={styles.ModalView}>
<View style={{height:'30%'}}>
<SelectMultiple
items={this.state.ParticipantCheckBox}
// renderLabel={renderLabel}
selectedItems={this.state.selectedFamilyMembers}
onSelectionsChange={this.SelectFamilyMembers} />
</View>
<View style={{flex:1, flexDirection:'row', flex:1,height:'1%'}}>
<TouchableHighlight style={{height:'5%'},\[styles.ModalCloseButton\] }
onPress={() => {
this.HideShowFamilyMemberModel(false);
}}
>
<Text style={styles.ModalCloseButtonTextStyle}>Close</Text>
</TouchableHighlight>
<TouchableHighlight style={{height:'5%'},\[styles.ModalSaveButton\] }
onPress={() => {
this.SaveFamilyMemberModel(false);
}}
>
<Text style={styles.ModalSaveButtonTextStyle}>Save</Text>
</TouchableHighlight>
</View>
</View>
</View>
</Modal>][1]][1]
You can make your modal like this
<Modal>
//this is parent view
<View>
//set this vide at the center of parent view and set height 40% or 30%
<View>
<ScrollView>
…
...
</ScrollView>
</View>
</View>
</Modal>
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 have this below code, The alert shows following message:
{"item":{"isPositive":"false", "balance":"-500","currency":"AUD"}}
If I do alert on "ob" I get undefined. My problem is that the Text doesn't display anything:
_renderItemView(item) {
const ob = item
//alert(JSON.stringify(ob))
alert(JSON.stringify(item))
return(<>
<View style={styles.rowContainer}>
<View style={styles.iconContainer}></View>
<View style={styles.descriptionContainer}>
<Text style={styles.subText}>{item.date}asasas</Text>
{/* <Text style={styles.transactionDescText}>{item.description}</Text>
<Text style={styles.subText}>{item.descFrom}</Text> */}
</View>
<View style={styles.balanceContainer}>
{/* <Text style={styles.balance}>{item.currency}</Text>
<Text style={styles.balanceSubText}>{item.balance}</Text> */}
</View>
</View>
</>)
}
I was using renderItem={(item, index) => _renderItemView(item) to render
I needed an extra brace like this
renderItem={({item, index}) =>
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>
);
}
I'm trying to create custom button. For this, I wrapped my existed view into TouchableHighlight (write me please another way, if it's not suitable here)
<TouchableHighlight onPress={this.freeTimeTapped} underlayColor="white">
<LabelsView data={this.freeTimeData}
containerStyle={{ backgroundColor: '#3A65FF' }} />
</TouchableHighlight>
This code throws an error touchable child must either be native, described here, for example. So, I added
setNativeProps = (nativeProps) => {
this._root.setNativeProps(nativeProps);
}
error disappeared, but now I receive an error
React Native Error: undefined is not an object (evaluating
'_this._root.setNativeProps')
after touch. What am I doing wrong?
More code about LabelsView:
export default class LabelsView extends Component {
// Make TouchableHighlight wrapper work
setNativeProps = (nativeProps) => {
this._root.setNativeProps(nativeProps);
}
render() {
return (
<View style={[styles.container, this.props.containerStyle]}>
<View style={styles.leftContainer}>
<Text style={[styles.nameText, styles.textColor]}> {this.props.data.leftText} </Text>
</View>
<View style={styles.rightContainer}>
<Text style={[styles.durationText, styles.textColor]}> {this.props.data.rightTopText + ' hrs'} </Text>
<Text style={[styles.rangeText, styles.textColor]}> {this.props.data.rightBottomText} </Text>
</View>
</View>
);
}
}
I created the same sitaution as yours and found that the only thing you are doing wrong is you are wrapping a class inside the TouchableHighlight . If you want to wrap it in any touchable component then react native needs the native child, So to resolves this change your code as follows:-
<LabelsView freeTimeTapped={this.freeTimeTapped} data={this.freeTimeData}
containerStyle={{ backgroundColor: '#3A65FF' }} />
and your LabelsView class as follows:-
render() {
return (
<TouchableHighlight onPress={this.props.freeTimeTapped} underlayColor="white">
<View style={[styles.container, this.props.containerStyle]}>
<View style={styles.leftContainer}>
<Text style={[styles.nameText, styles.textColor]}> {this.props.data.leftText} </Text>
</View>
<View style={styles.rightContainer}>
<Text style={[styles.durationText, styles.textColor]}> {this.props.data.rightTopText + ' hrs'} </Text>
<Text style={[styles.rangeText, styles.textColor]}> {this.props.data.rightBottomText} </Text>
</View>
</View>
</TouchableHighlight>
);
}
If you still hava any problem then let me know :)
In case you want to have it in parent, just fix your code to this:
export default class LabelsView extends Component {
// Make TouchableHighlight wrapper work
setNativeProps = (nativeProps) => {
this._root.setNativeProps(nativeProps);
}
render() {
return (
<View ref={component => this._root = component} style={[styles.container, this.props.containerStyle]}>
<View style={styles.leftContainer}>
<Text style={[styles.nameText, styles.textColor]}> {this.props.data.leftText} </Text>
</View>
<View style={styles.rightContainer}>
<Text style={[styles.durationText, styles.textColor]}> {this.props.data.rightTopText + ' hrs'} </Text>
<Text style={[styles.rangeText, styles.textColor]}> {this.props.data.rightBottomText} </Text>
</View>
</View>
);
}
}
You missed ref={component => this._root = component}