FlatList renderItem is firing, console.logs are visible, but text is not. What happened to the text? - react-native

Question

I have a harcoded a JSON object just to make sure that the items inside the FlatList will be rendered properly. I can read all of the console.logs I wrote inside, but none of the Text is appearing. Any ideas why?
here is the code:
import {
View,
FlatList,
Text,
TouchableWithoutFeedback,
AsyncStorage,
ScrollView,
Picker
} from 'react-native'
import { NavigationActions } from 'react-navigation';
import { Header, Card, CardSection, Button, Input } from '../common';
import Config from '../Config';
export default class CustomStore extends Component {
constructor(props) {
super(props);
this.state = {
stores: [],
forceRedraw: false
};
}
static defaultProps = {
//stores:[{"place": "youngja", "id": "1"},{"place": "tasty", "id": "2"}]
};
componentWillMount() {
const newJSON = {"gym":{"id":"1", "day": "Sunday"}, "restaurant":{"id": "2", "day": "Monday"}};
const JSArr = Object.values(newJSON);
//console.log(JSArr);
this.setState({
stores: JSArr
});
}
deleteEntry() {
console.log('this is working')
}
renderListOfStores() {
return <FlatList
data={this.state.stores}
renderItem={ (item) => {
console.log('here is your thing',item);
this.singleStore(item)}
}
keyExtractor={(item) => item.id}
/>;
}
singleStore(item) {
return <View>
{console.log('inside the singleStore method')}
<Card>
<Text>hello{console.log('this is inside the text tag')}{item.day}</Text>
<Button
onPress={() => this.deleteEntry()}
>
<Text>Press this to delete this entry</Text>
</Button>
</Card>
</View>;
}
render() {
return(
<ScrollView>
<Header headerText="Custom Store Screen"/>
<Text>This should be a list of stores</Text>
{this.renderListOfStores()}
<Text>This is the end of the list</Text>
</ScrollView>
)
}
}
As you can see, I've put console.logs inside the renderListOfStores method to verify that it's being fired. I have another console.log inside the singleStore method..this console log is also visible..as is the last console log inside the tag. No idea why I'm able to read console.logs, but none of the text

Answer 1

you need to put return before this.singleStore() inside your renderItem props.