Pass function in react native prop - react-native

Question

I currently have a screen that lists items with star ratings on them.
This is created due to the following JSX being returned by a _renderItem function for a FlatList component. :
<TouchableOpacity
delayPressIn={70}
activeOpacity={0.8}
onPress={() => {
navigate("WellbeingBreakdown", {
id: info.item.id,
});
}}
>
<RkCard rkType="horizontal" style={styles.card}>
<Image
rkCardImg
source={info.item.icon}
/>
<View rkCardContent>
<RkText rkType="small">{info.item.title}{' '}<Ionicons name="ios-information-circle-outline" size={18} color="gray"/></RkText>
<View style={{flexDirection: 'row', paddingVertical: 10}}>
<Rating
type='custom'
onFinishRating={this.ratingCompleted}
imageSize={20}
ratingColor={RkTheme.current.colors.primary}
ratingImage={STAR_IMAGE}
style={{paddingVertical: 8}}
startingValue={2} /*I want to change this to be dynamic */
/>
<RkButton
rkType="rounded small"
style={{backgroundColor: RkTheme.current.colors.primary, marginLeft: 15}}
onPress={() => navigate("DynamicActivityAssessor", {
id: info.item.title
})
}
>Assess</RkButton>
</View>
</View>
</RkCard>
</TouchableOpacity>
What i would like to do, is dynamically fetch data (from an API) and pass the user's ratings for each item into the startingValue prop of the Rating component.
The API if called returns an array. So accessing response[0] gives you an object similar to this (values depending on if its an activity or diet rating etc):
{
"ActivityTotalScore": null,
"DietTotalScore": 1,
},
So i thought a function roughly like so would work, but i can't figure out how to pass it to that prop. Note - info.item.id is the title of the rendered item in question. So it is equal to 'Activity' or 'Weight' etc
getScore(info){
fetch(`${server_url}data/Wellbeing?where=type%3D`+info.item.id, {
method: "GET", // or 'PUT' // data can be `string` or {object}!
headers: {
"Content-Type": "application/json"
}
})
.then(res => res.json())
.catch(error => console.error("Error:", error))
.then(response => {
return response[0][info.item.id+'TotalScore'] ;
}
)
}

Answer 1

The simple way is to create a new Component that representents your card. It could be
// In AssessCard.js
import React from 'react';
// Others imports
export default class AssessCard extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
rating: 0,
item: props.item
};
}
componentDidMount() {
this._loadRating();
}
_loadRating() {
fetch(`${server_url}data/Wellbeing?where=type%3D`+info.item.id, {
method: "GET", // or 'PUT' // data can be `string` or {object}!
headers: {
"Content-Type": "application/json"
}
})
.then(res => res.json())
.catch(error => console.error("Error:", error))
.then(response => {
this.setState({ rating: response[0][info.item.id+'TotalScore'] }); // HERE WE'RE SAVING THE RATING
}
)
}
render() {
const { rating, item } = this.state;
return (
<TouchableOpacity
delayPressIn={70}
activeOpacity={0.8}
onPress={() => {
navigate("WellbeingBreakdown", {
id: item.id,
});
}}
>
<RkCard rkType="horizontal" style={styles.card}>
<Image
rkCardImg
source={item.icon}
/>
<View rkCardContent>
<RkText rkType="small">{item.title}{' '}<Ionicons name="ios-information-circle-outline" size={18} color="gray"/></RkText>
<View style={{flexDirection: 'row', paddingVertical: 10}}>
<Rating
type='custom'
onFinishRating={this.ratingCompleted}
imageSize={20}
ratingColor={RkTheme.current.colors.primary}
ratingImage={STAR_IMAGE}
style={{paddingVertical: 8}}
startingValue={rating} // HERE WE USE RATING PROP OF THIS COMPONENT
/>
<RkButton
rkType="rounded small"
style={{backgroundColor: RkTheme.current.colors.primary, marginLeft: 15}}
onPress={() => navigate("DynamicActivityAssessor", {
id: item.title
})
}
>Assess</RkButton>
</View>
</View>
</RkCard>
</TouchableOpacity>
);
}
}
//in file contening your _renderItem function
import AssessCard from './somewhere/AssessCard';
/* CODE */
_renderItem (info) => {
return <AssessCard item={info.item} />
}