So I have typical json result from Google maps api
"html_attributions" : [],
"next_page_token" : "CqQCFgEAAL2fPrvHrkhgi11wNUC40-FEYJ93rH1Bo9FRkqxMfMlvqaEQv6hgiLoJXmeFBFMA6Uw-kcECgRXs_VzE6QVNPMRTrh402Z9Rn1dUVC_2B3WwopG_KNcftFARDQZD0K-a7swHAb_jftghftWtzrTqa8GTKMKuLCHS6ZJooPXOGpndn1h2yYO7bIF4GiPE80HgaLrgZDAJ-bf71LXhWmvmPtPiU0UGZeH1Zp4945yS5PHK1WVCMPoIR2XVqv9d9k08ZKqQPtnNOS1YsvdZOaY1Jy76eFIhCMFr1yhR0GyBmtVs6_wf9yEdi-SXSjqiciD77bk9pKf2p4b8C_9jhY3SJvB9wgLGUbDS0Y3gFG63EHcMKva4FVHFiov-7_abNk3i3RIQGSQOIFfRj3zZaSVngR8PcRoUa9z0FhpaicLUkREG-VRpE_wUZhE",
"results" : [
{
"icon" : "https://maps.gstatic.com/mapfiles/place_api/icons/v1/png_71/generic_recreational-71.png",
"name" : "Park Leśny Zdroje",
"photos" : [
{
"height" : 3024,
"html_attributions" : [
"\u003ca href=\"https://maps.google.com/maps/contrib/103847965103971799822\"\u003eKSD\u003c/a\u003e"
],
"photo_reference" : "CmRaAAAAHvmblqXHuIBST9cZZI3yLtIuay_of90rDBUOoBQ64Luh7U_bVFTK5jhliXE9pFhRWMZjw4yHJXOFbxKQYBmEJwvBLNXkQGZrr5CvjlPT0HBHKququkGzjA8JJvbIdVC4EhCX_9SFH1F88ezn0N9XUaEfGhQpUDqAXZzLaSn0rrIIdMFwjCz6yA",
"width" : 4032
}
],
},
]
And i cannot somehow access photo_reference from array photos.
{parks.results.map((element,index)=>
<View key={index} style={AppStyle.mapCard}>
<View style={AppStyle.mapCardImg}>
//Tried this
<Text>{element.photos.map(item => item.photo_reference)}</Text>
//and this
<Text> {element.photos.photo_reference} </Text>
</View>
<View style={AppStyle.mapCardDescription}>
<Text>{element.name}</Text>
<Text>
({element.rating})
</Text>
</View>
</View>
</View>
)}
I know it's array in array and i need to iterate through it but it doesnt work.
This way: {element.photos.map(item => item.photo_reference)} i have undefined is not an object(evaluating element.photos.map)
This way {element.photos.photo_reference} undefined is not an object
Whats the solution in react Native?
Google Maps Api is not always returning every property of single Place. Error was that some places doesn't have photos so there's no array in json. The same about rating and others.
Adding conditions to check if variable exists solves problem.
element.photos && element.photos.map(item => item.photo_reference)
Related
I would like to implement a dynamic carousel view of screens (similar to Swiper). I was thinking of creating a View with conditional rendering that would display a screen by selectedId corresponding to each screen, but that would cause a re-render on every screen, unless I have a state for each one of them.
Is there any better solution to make a carousel view of screens without using navigation and keep the data on the screen saved?
I have used react-native-progress-steps for this solution. I have modified the config file a little and wrote a dummy data template for it.
Dummy data:
const reviewData = [
{
id: "1",
serviceID: 0,
},
{
id: "2",
serviceID: 1,
},
{
id: "3",
serviceID: 2,
},
];
render (disregard colors):
<View style={styles.container}>
<ProgressSteps
activeStepIconColor={defaultColors.white}
completedProgressBarColor={settings.colors.primary}
progressBarColor={defaultColors.light}
activeStepIconBorderColor={settings.colors.primary}
completedStepIconColor={settings.colors.primary}
disabledStepIconColor={defaultColors.light}
activeStepNumColor={defaultColors.dark}
disabledStepNumColor={defaultColors.mediumLight}
>
{reviewData.map((item, index) => (
<ProgressStep
nextBtnStyle={styles.nextButtonStyle}
previousBtnStyle={
index === 0
? styles.disabledButton
: styles.prevButtonStyle
}
nextBtnTextStyle={styles.nextButtonTextStyle}
previousBtnTextStyle={styles.prevButtonTextStyle}
previousBtnText={`Назад`}
nextBtnText={`Дальше`}
finishBtnText={`Завершить`}
previousBtnDisabled={index === 0 ? true : false}
>
<View style={{ alignItems: "left" }}>
<AppText>
{item.serviceID},{index}
</AppText>
</View>
</ProgressStep>
))}
</ProgressSteps>
</View>
I am satisfied with the solution, but if you have any other solutions, please let me know :)
i saved images to MongoDb with multer to path /uploads in my local static folder.
the object that i get from the data base when i get images look like :
Array [
Object {
"_id": "5fc4581a1b858e93a65136e7",
"desc": "19",
"image": "uploads/a2.jpg",
},
Object {
"_id": "5fc4584a873e544138a10a33",
"desc": "19",
"image": "uploads/a2.jpg",
},
]
now i want to show the array with desc and image so i defined a flat list and try to do:
<FlatList
numColumns={numColumns}
data={s}
renderItem={({ item, index }) => (
console.log("http://localhost:8080/" + item.image),
(
<View style={styles.imagecontainer}>
<Text>{item.desc}</Text>
{Object.keys(s).length === 0 ? null : (
<Image style={styles.image} source=
{require(`../../server/${item.image}`)} />/////////here is the problem
)}
</View>
)
)}
keyExtractor={(item, index) => index.toString()}
/>
now I understand that require should get only static string and not variables,
the question is how can I handle this to show the images and desc dynamically based on the array?
I read a lot of it on the internet but Dont find the answer for this...
I need somehow to convert the objects that I get and replace the image prop that gave me "uploads/a2.jpg" to {require(../../server/**here to put the image for each object**) but I Dont find a way to do that.
I faced the same issue, the only way I found it was to save images' IDs returned by the require() function.
console.log(require("image path"));
// return a number for example 5
I am simply trying to do a venues list.
Here is the result of console.log(this.state.venues):
Array [
Object {
"key": "5b0ac89e***",
"venuename": "Venue1",
},
Object {
"key": "557d70asd****",
"venuename": "Venue2",
},
Object {
"key": "58f316ccsa****",
"venuename": "Venue3",
},
]
I am creating this data by pulling it from fq-api like this:
for (var i=0; i < 5; i++) {
this.state.venues.push({
venuename: response.data.response.groups[0].items[i].venue.name,
key: response.data.response.groups[0].items[i].venue.id
});
}
And here is my JSX:
<View style={styles.list}>
<FlatList data={[this.state.venues]}
renderItem={({item}) => <Text style={styles.item}>{item.venuename}</Text>}
keyExtractor={(item, index) => item.key} />
</View>
I am receiving Each child in a list should have a unique "key" prop Error. Everything seems ok to me, I don't understand why it fails. I don't know what is this "key prop", I have it from fetch and tried to use it but I can't proceed.
Thanks for your help.
Your error is in your data prop.
You're putting a bi-dimensional array to the data prop, so the keyExtractor will try to extract: [].key (undefined) instead item.key...
I think you're also rendering only one item on the list because of the bidimensional array, I'm correct?
How to get data from SQLite database and pass this data to Picker Component with values and labels?
The question is so general, so I will answer generally. To get data from SQLite you can install this package on your react native project:
https://www.npmjs.com/package/react-native-sqlite-storage
Then you can use this pass your data in item section of this nice component:
https://www.npmjs.com/package/react-native-picker-select
Just follow the instructions for installing and configurations.
To passing the data to the picker it is enough to put your data in the state and convert to to the proper way. To convert you can use following code and put it in the place that you retire the data:
var myMatrix=[];
yourRetriveData.map(function (item, ) {
// console.log ("item [yourRetriveData.map]", item);
obj= {
"label": item.X,
"value": item.Y,
};
myMatrix.push(obj);
});
that.setState({dataForPicker: myMatrix });
Instead of X and Y you can put your proper felids. Then in the picker you need this:
{!this.state.dataForPicker ?
<ActivityIndicator size="small" color="#fff" />:<RNPickerSelect
placeholder={{
label: this.state.label,
value: this.state.value,
}}
items={this.state.data}
onValueChange={(value, index) => {
this._handleItemPicked(value, index)
}}
placeholderTextColor={"#FFF"}
placeholderTextColor={'rgba(255,255,255,1)'}
value={this.props.value}
style={{ ...pickerSelectStyles }}
hideIcon={true}
/>}
I hope I could help.
I'm new in react native and I'm having trouble with displaying all the json data in a listview with multiple arrays. I need to save the data using asyncStorage. The json data is from MQTT. Is it possible to use multiple map iterator inside return in react native?
here is my code for displaying the JSon in my listview:
<ListView
enableEmptySections={true}
dataSource{this.state.ds.cloneWithRows
(this.props.quotes)}
renderRow={this.renderRow.bind(this)}
/>
here is my render row:
renderRow(rowData) {
return (
<TouchableOpacity>
<View style={styles.row}>
<Text style={styles.description}>
{rowData.id}
</Text>
<Text style={styles.description}>
{rowData.a}
</Text>
</View>
</TouchableOpacity>
)
}
And here is my JSON Data:
{
"sample":[
{
"id": 1,
"Sam1":[
{
"a": 1,
"b": 2,
"arr": [
{
"b": 1,
"c": 2,
}
]
},
]
}
]
}
I have 3 arrays how can I display the 2nd and third array in my listview?
Thanks for answering :)
cheers,
You can just map over those sub arrays. Here's an example using your JSON. It might make more sense if you provided more realistic JSON, but here goes.
rowData.Sam1.map(sam => {
<Text>{sam.a}</Text>
sam.arr.map(a => {
<Text>{a.b}</Text>
}
}