Cannot read property 0 of undefined - arrays

Question

I have tried desperately to resolve this issue but still befuddled. Getting "Cannot read property 0 of undefined" error trying to pass array gallery[] which has photos as the first (0) index.
I have verified that the array gallery does exist and in the correct format when I console.log it. However, I am not sure why 2 console statements are returned with the first one being undefined and the second one being correct.
Please see code snippets and screen capture below for details. I will appreciate your help as I am completely lost. This is the only aspect delaying completing my app dev. Thanks
<Text style={styles.sectionHeader}> Photo Galery</Text>
<View >
{console.log(gallery)}
{
<TouchableOpacity >
<Image
source={gallery[0].photos}
style={styles.navImageStyle}
/>
</TouchableOpacity>
}
Here's the screenshot with correct gallery object defined. I have tried all kinds of ways to reference it in my image tag (even using source={{uri: gallery[0].photos}} but no luck.
When I revise the image tag with source={gallery}, no images displayed at all even though I know that syntax is incomplete. See image below.
--- More detail below per request -----
The gallery array is from a local data array (placesData) that is imported by code below. The code then imports gallery as a prop in a modal window (SiteDetails) upon button press
import React, { Component } from 'react';
import { View, FlatList } from 'react-native';
import { ListItem, } from 'native-base';
import { placesData } from '../../data/placesData';
import Places from '../../data/Places';
import SiteDetails from '../SiteDetails';
export default class NavPlaces extends Component {
constructor(props) {
super(props);
this.state = {
setModalVisible: false,
modalArticleData: {},
error: null
};
}
_handleItemDataOnPress = articleData => {
this.setState({
setModalVisible: true,
modalArticleData: articleData
});
};
_handleModalClose = () => {
this.setState({
setModalVisible: false,
modalArticleData: {}
});
};
render() {
return (
<View>
<FlatList
data={placesData}
renderItem={({ item }) => (
<ListItem style={{ marginLeft: 5,}}>
<Places onPress={this._handleItemDataOnPress} data={item} />
</ListItem>
)}
horizontal={true}
keyExtractor={item => item.id}
/>
<SiteDetails
showModal={this.state.setModalVisible}
articleData={this.state.modalArticleData}
onClose={this._handleModalClose}
/>
</View>
);
}
}
SiteDetails
import React, { Component } from "react";
import Icon from "react-native-vector-icons/FontAwesome";
import {
FlatList,
Dimensions,
Modal,
ScrollView,
Share,
TouchableOpacity, Image, Text, View,
} from "react-native";
import {
Grid, Row, Col,
Header,
ListItem,
Content,
Container,
Body,
Left,
Right,
Title,
} from "native-base";
// import PlacePhoto from '../data/PlacePhoto';
// import NavGallery from "./Tabs/NavGallery";
// import {placesData} from '../data/placesData'
const webViewHeight = Dimensions.get("window").height - 56;
const deviceHeight = Dimensions.get('window').height;
const deviceWidth = Dimensions.get('window').width;
export default class SiteDetails extends Component {
constructor(props) {
super(props);
this.data = props.data;
}
_handleClose = () => {
return this.props.onClose();
};
_handleShare = (clickedLink, clickedTitle) => {
// const { link,title } = this.props.data;
message = `${clickedTitle}\n\nRead more #\n${clickedLink.toString()}\n\nshared via MSU mobile`;
return Share.share(
{ clickedTitle, message, url: message },
{ dialogTitle: `Share ${clickedTitle}` }
);
};
render() {
const { showModal, articleData } = this.props;
const { image, title, subTitle, description,location, phone, credit, gallery } = articleData;
// if (image !== undefined) {
return (
<Modal
onRequestClose={this._handleClose}
visible={showModal}
transparent
animationType="slide"
>
<Container
style={{ margin: 0, marginBottom: 0, backgroundColor: "#ffffff" }}
>
<Content contentContainerStyle={{ height: webViewHeight }}>
<Header
style={{ backgroundColor: "#1b4383" }}
iosBarStyle="light-content"
>
<Left>
<TouchableOpacity onPress={() => this._handleClose()}>
<Icon
name="close"
style={{ fontSize: 25, color: "#f47937", paddingHorizontal: 10, }}
/>
</TouchableOpacity>
</Left>
<Body>
<Title
children={title}
style={{ color: "#ffffff" }}
/>
</Body>
<Right>
<TouchableOpacity
// onPress={() =>
// this._handleShare(articleData.link, articleData.title)
// }
>
<Icon
name="share-alt"
style={{ fontSize: 30, color: "#f47937", paddingHorizontal: 10, }}
/>
</TouchableOpacity>
</Right>
</Header>
<ScrollView>
<Image
source={image}
style={styles.drawerCover}
/>
<View style={{backgroundColor: 'black', }}>
<Text style={styles.titleText}>{title}</Text>
<View style={{ height: 16 }}/>
<Text style={styles.subTitleText}>{subTitle}</Text>
<View style={{ height: 16 }}/>
<Grid>
<Row>
<Col style={{ flexDirection: 'row'}}>
<Icon
name='map-o'
style={styles.iconStyle}
/>
<Text style={styles.subText}>location:</Text>
</Col>
<Col>
<Text style={styles.subText}>{location}</Text>
</Col>
</Row>
<View style={{ height: 16 }}/>
<Row>
<Col style={{ flexDirection: 'row'}}>
<Icon
name='phone'
style={styles.iconStyle}
/>
<Text style={styles.subText}>tel:</Text>
</Col>
<Col>
<Text style={styles.subText}>{phone}</Text>
</Col>
</Row>
<View style={{ height: 16 }}/>
<Row>
<Col style={{ flexDirection: 'row'}}>
<Icon
name='globe'
style={styles.iconStyle}
/>
<Text style={styles.subText}>Website:</Text>
</Col>
<Col>
<Text style={styles.subText}></Text>
</Col>
</Row>
<View style={{ height: 16 }}/>
<Row>
<Col style={{ flexDirection: 'row'}}>
<Icon
name='pencil'
// name='creative-commons'
style={styles.iconStyle}
/>
<Text style={styles.subText}>Credit:</Text>
</Col>
<View style={{ height: 16 }}/>
<Col>
<Text style={styles.subText}>{credit}</Text>
</Col>
</Row>
</Grid>
</View>
<Text style={styles.sectionHeader}> Photo Galery</Text>
<View >
{console.log(gallery)}
{
<TouchableOpacity >
<Image
source={gallery}
style={styles.navImageStyle}
/>
</TouchableOpacity>
}
<Text style={styles.sectionHeader}> Description </Text>
<Text style={styles.bodyText}> {description} </Text>
</View>
</ScrollView>
</Content>
</Container>
</Modal>
);
// } else {
// return null;
// }
}
}
placesData array:
export const placesData =
[
{
id: 'a',
image: require('../../assets/img/places/museum/slave/slavePic.jpg'),
title: 'Slave Trade Museum',
subTitle: 'One of many rare gems of history and education',
location: 'Badagry, Lagos',
phone: '',
credit: 'The Freeman Institute',
gallery:[
{
key: 'v1',
photos: [
require('../../assets/img/places/museum/slave/abolitionCannon.jpg'),
require('../../assets/img/places/museum/slave/holdingCell.jpg'),
require('../../assets/img/places/museum/slave/slaveMarket.jpg'),
require('../../assets/img/places/museum/slave/slaveNoReturn.jpg'),
require('../../assets/img/places/museum/slave/bibleAtBadagry.jpg'),
require('../../assets/img/places/museum/slave/bridge.jpg'),
]
}
],
description: 'Excerpts from Freeman Institute',
},
{
id: 'b',
image: require('../../assets/img/places/parks/yankari.png'),
title: 'Parks and WildLife',
subTitle: 'Visit to this wildlife park will rejuvenate your mind and spirit',
location: 'Jos, Lagos, Calabar, Abuja, etc',
phone: '',
credit: 'The Freeman Institute',
gallery:[
{
id: 'v2',
photos: [
require('../../assets/img/places/parks/ikogosi.png'),
require('../../assets/img/places/parks/abujaPark.png'),
require('../../assets/img/places/parks/raindeer.png'),
require('../../assets/img/places/parks/kainji.png'),
require('../../assets/img/places/parks/elephant.png'),
require('../../assets/img/places/parks/owuH2OFalls.png'),
]
}
],
description: 'Excerpts from online wiki',
},
{
id: 'c',
image: require('../../assets/img/places/resorts/badagry.png'),
title: 'Resorts and Beaches',
subTitle: 'Simply exquisite vacation sites, peaceful and beautiful beaches. Go on horseback riding or whatever suits you.',
location: 'Lagos, Calabar, Abuja, etc',
phone: '',
credit: 'Online wiki',
gallery:[
{
id: 'v3',
photos: [
require('../../assets/img/places/resorts/funtopiaPark.png'),
require('../../assets/img/places/resorts/barBeach.png'),
require('../../assets/img/places/resorts/obudu.png'),
require('../../assets/img/places/resorts/funtopiaPark.png'),
require('../../assets/img/places/resorts/whisperingPalms.png'),
require('../../assets/img/places/resorts/tinapa.png'),
]
}
],
description: 'Excerpts from online wiki',
},
{
id: 'd',
image: require('../../assets/img/places/museum/museumBeni.png'),
title: 'National Musuems',
subTitle: 'Incredible museums of history and education with variety to enrich the minds.',
location: 'Lagos, Jos, Kaduna, Enugu, Benin, etc',
phone: '',
credit: 'Ministry of Tourism',
gallery:[
{
id: 'v4',
photos: [
require('../../assets/img/places/museum/museumLagos.jpg'),
require('../../assets/img/places/museum/museumWar.jpg'),
require('../../assets/img/places/museum/museumKaduna.jpg'),
require('../../assets/img/places/museum/museumOwo.jpg'),
require('../../assets/img/places/museum/museumColonia.jpg'),
require('../../assets/img/places/museum/museumOwo.jpg'),
]
}
],
description: 'Excerpts from online wiki',
},
]
// export const placesData =
// [
// {
// id: 'a',
// image: require('../../assets/img/places/museum/slave/slavePic.jpg'),
// title: 'Slave Trade Museum',
// subTitle: 'One of many rare gems of history and education',
// location: 'Badagry, Lagos',
// phone: '',
// credit: 'The Freeman Institute',
// photos:{
// key: 'a1',
// pic1: require('../../assets/img/places/museum/slave/abolitionCannon.jpg'),
// pic2: require('../../assets/img/places/museum/slave/holdingCell.jpg'),
// pic3: require('../../assets/img/places/museum/slave/slaveMarket.jpg'),
// pic4: require('../../assets/img/places/museum/slave/slaveNoReturn.jpg'),
// pic5: require('../../assets/img/places/museum/slave/bibleAtBadagry.jpg'),
// pic6: require('../../assets/img/places/museum/slave/bridge.jpg'),
// },
// description: 'Excerpts from Freeman Institute',
// },
// {
// id: 'b',
// image: require('../../assets/img/places/parks/yankari.png'),
// title: 'Parks and WildLife',
// subTitle: 'Visit to this wildlife park will rejuvenate your mind and spirit',
// location: 'Jos, Lagos, Calabar, Abuja, etc',
// phone: '',
// credit: 'The Freeman Institute',
// photos:{
// key: 'b1',
// pic1: require('../../assets/img/places/parks/ikogosi.png'),
// pic2: require('../../assets/img/places/parks/abujaPark.png'),
// pic3: require('../../assets/img/places/parks/raindeer.png'),
// pic4: require('../../assets/img/places/parks/kainji.png'),
// pic5: require('../../assets/img/places/parks/elephant.png'),
// pic6: require('../../assets/img/places/parks/owuH2OFalls.png'),
// },
// description: 'Excerpts from online wiki',
// },
// {
// id: 'c',
// image: require('../../assets/img/places/resorts/badagry.png'),
// title: 'Resorts and Beaches',
// subTitle: 'Simply exquisite vacation sites, peaceful and beautiful beaches. Go on horseback riding or whatever suits you.',
// location: 'Lagos, Calabar, Abuja, etc',
// phone: '',
// credit: 'Online wiki',
// photos:{
// key: 'c1',
// pic1: require('../../assets/img/places/resorts/funtopiaPark.png'),
// pic2: require('../../assets/img/places/resorts/barBeach.png'),
// pic3: require('../../assets/img/places/resorts/obudu.png'),
// pic4: require('../../assets/img/places/resorts/funtopiaPark.png'),
// pic5: require('../../assets/img/places/resorts/whisperingPalms.png'),
// pic6: require('../../assets/img/places/resorts/tinapa.png'),
// },
// description: 'Excerpts from online wiki',
// },
// {
// id: 'd',
// image: require('../../assets/img/places/museum/museumBeni.png'),
// title: 'National Musuems',
// subTitle: 'Incredible museums of history and education with variety to enrich the minds.',
// location: 'Lagos, Jos, Kaduna, Enugu, Benin, etc',
// phone: '',
// credit: 'Ministry of ?',
// photos:{
// key: 'd1',
// pic1: require('../../assets/img/places/museum/museumLagos.jpg'),
// pic2: require('../../assets/img/places/museum/museumWar.jpg'),
// pic3: require('../../assets/img/places/museum/museumKaduna.jpg'),
// pic4: require('../../assets/img/places/museum/museumOwo.jpg'),
// pic5: require('../../assets/img/places/museum/museumColonia.jpg'),
// pic6: require('../../assets/img/places/museum/museumOwo.jpg'),
// },
// description: 'Excerpts from online wiki',
// },
// ]