FlatList in React Native does not display any content - reactjs

Question

I just learned that there is a flatList in React Native. I have a list of services, when the user tap on each service, they are redirected to the address where those services are available. I am trying to display these addresses in FlatList. The screen shot of the list of services is below:
when the user taps on Test service, I want to show the address in the form of FlatList. I am not sure, but whatever I am displaying inside flatList is not showing on the page. Below is my entire code including flatlist:
/**
* Sample React Native App
* https://github.com/facebook/react-native
* #flow
*/
import React, { Component } from 'react';
import { Text, View, StyleSheet, Image, ScrollView, TouchableOpacity, Linking, Button, FlatList } from 'react-native';
import { connect } from 'react-redux';
import { getTheme } from 'react-native-material-kit';
import EvilIcon from 'react-native-vector-icons/EvilIcons';
import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
import SimpleIcon from 'react-native-vector-icons/SimpleLineIcons';
import * as actions from '../actions';
import getDirections from 'react-native-google-maps-directions'
const theme = getTheme();
const styles = StyleSheet.create({
card: {
marginTop: 10,
paddingBottom: 20,
marginBottom: 20,
borderColor: 'lightgrey',
borderWidth: 0.5,
},
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#4F6D7A',
height: 500,
alignSelf:'center',
width:500,
position: 'relative',
marginTop: 5,
top: 10
},
title1: {
top: 10,
left: 80,
fontSize: 24,
},
title2: {
top: 35,
left: 82,
fontSize: 18,
},
image: {
flex: 0,
height: 100,
width: 333,
backgroundColor: 'transparent',
justifyContent: 'center',
alignItems: 'center',
},
closeIcon: {
position: 'absolute',
top: 5,
left: 295,
color: 'black'
},
icon: {
position: 'absolute',
top: 15,
left: 0
},
textArea: {
flexDirection: 'row',
paddingLeft: 20,
paddingTop: 10,
width: 260,
},
textIcons: {
color: '#26a69a',
},
actionArea: {
paddingTop: 10,
flexDirection: 'row',
justifyContent: 'space-around',
alignItems: 'center',
},
title:{
justifyContent: 'center',
paddingTop: 10,
alignItems: 'center',
alignSelf: 'center',
fontWeight: 'bold',
fontSize: 22,
color: 'black'
},
SerContent:{
fontWeight: 'bold',
fontSize: 16,
paddingTop: 10,
alignSelf: 'center',
color: 'black'
},
underLineText: {
fontSize: 17,
textDecorationLine: 'underline',
color: 'black',
fontWeight: 'bold',
alignSelf: 'center'
},
dir:{
flexDirection:'row',
paddingTop: 30,
alignSelf: 'center',
} ,
dirAddr:{
flexDirection:'column',
paddingTop: 30,
alignSelf: 'center'
},
Address1:{
alignSelf: 'center',
marginRight: 20,
fontSize: 17,
fontWeight: 'bold',
color: 'black'
},
fullAddress:{
marginRight: 20,
fontWeight: 'bold',
color: 'black'
},
toolbar:{
flexDirection:'row' , //Step 1
},
toolbarTitle:{
width: 10,
top: 0,
left: 0,
bottom: 0,
right: 0,
flex:1 //Step 3
},
buttonShape:{
margin: 40,
width:160,
marginLeft: 80,
backgroundColor:'#00BCD4',
},
producetBox:{
margin:10,
fontWeight:'bold',
color:'#000',
alignSelf:'center'
},
price:{
padding:5,
margin:10,
borderColor:'orange',
borderBottomWidth: StyleSheet.hairlineWidth,
}
});
class ServiceDetail extends Component {
handleClick = (link) => {
Linking.canOpenURL(link).then(suppported => {
if (supported) {
Linking.openURL(link);
} else {
console.log('Don\'t know how to open URI: ' + link);
}
});
};
constructor(props) {
super(props);
this.state = {
latitude: null,
longitude: null,
error: null,
};
}
componentDidMount()
{
navigator.geolocation.getCurrentPosition(
(position) => {
this.setState({
latitude: position.coords.latitude,
longitude: position.coords.longitude,
error: null,
});
},
(error) => this.setState({ error: error.message }),
{ enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 },
);
}
render() {
var online="";
var destUrl = 'https://www.google.com/maps/dir/Current+Location/' + this.props.services.destAddr1 ;
var destUrl1 ='https://www.google.com/maps/dir/Current+Location/' + this.props.services.destAddr2 ;
var Online= this.props.services.onlineURL;
return (
<View>
<View style={styles.toolbar}>
<Image
resizeMode='contain'
style={styles.toolbarTitle}
source={require('../Resources/AcrLogoWithDesc.jpg')} />
</View>
<View>
<Text style={styles.title}>{this.props.services.ser}</Text>
<Text style={styles.SerContent} >Service is available in the following locations:</Text>
</View>
<View>
<FlatList
data={this.props.services}
renderItem={({item})=>
<View>
<Text>{item.ser}</Text>
</View>
}
/>
</View>
<View style={styles.buttonShape}>
<Button onPress={() => this.props.noneSelected()} title = 'Close'/>
</View>
</View>
);
}
}
const mapStateToProps = state => {
return {
services: state.serviceSelected
};
};
export default connect(mapStateToProps, actions)(ServiceDetail);
I can see the content of {this.props.services.ser}, but I cannot see the content of <Text>{item.services.ser}</Text> which is inside the flatList. below is the screen shot of the service details when the user taps on Test service:
Item.services.serv content is not appearing on my second screen shot. Below is my JSON and the screen shot of resulting screen file":
[
{
"id":0,
"ser": "Test Service",
"Location": "TestLoc",
"Phone1":"(999)-999-5050",
"SecondLoc": "TestLoc2",
"email":"test#test.com",
"sourceLat":"33.977806",
"sourceLong":"-117.373261",
"destLatL1":"33.613355",
"destLongL1":"-114.596569",
"destLatL2":"33.761693",
"destLongL2":"-116.971169",
"destAddr1": "Test Address, Test Drive",
"destAddr2": "Test Address2, Test Drive2",
"onlineURL":"",
"Phone2": "(900)-900-3333"
},
]
[1]: https://i.stack.imgur.com/xiZMp.png
Any help will be highly appreciated. I tried below things for the flatList
<View>
<FlatList
data={this.props.services}
keyExtractor={(item, index) => item.services.id}
renderItem={({item})=>
<View>
<Text>{item.ser}</Text>
</View>
}
/>
</View>
This is another way that I tried:
<View>
<FlatList
style={{}}
data={this.props.services}
keyExtractor={(item, index) => item.key}
renderItem={(rowData) =>this.RenderFeedCard(rowData)}
/>
</View>

Answer 1

I assume that the JSON that you provide is for this.props.services. So the call inside renderItem={({item})=> {item.services.ser} should be {item.ser} instead.
The reason why is because Flatlist 'data' takes an array (eg: this.props.services) and 'renderItem' will take each item (this.props.services[0]) of the array and do something about it. So you only have to write {item.ser} in order to get the string.

Answer 2

renderItem={({item})=>(
<View>
<Text>{item.ser}</Text>
</View>
)}