render a scrollview after a condition in react native - if-statement

Question

i need to display a scrollview in react native application, after a condition using if. In fact, i have a list of items in firebase that contain text and title but sometimes they may contain images also. I need to display that list of text and titles in the exact same order and also the images if there is any. here the code i used
_renderScrollViewContent() {
const data = this.state.items
if (data.image) {
return (
<View>
{data.map((item, i) =>
<View key={i}>
<Image source={require('path')}/>
<Text>{item.image}</Text>
<Text>{item.title}</Text>
<Text>{item.text} </Text>
</View>
)}
</View>
);
}
else
{
return (
<View>
{data.map((item, i) =>
<View key={i} style={styles.row}>
<Text>{item.image}</Text>
<Text>{item.title}</Text>
<Text>{item.text} </Text>
</View>
)}
</View>
);
}
}
render() {
const headerHeight = this.state.scrollY.interpolate({
inputRange: [0, HEADER_SCROLL_DISTANCE],
outputRange: [HEADER_MAX_HEIGHT, HEADER_MIN_HEIGHT],
extrapolate: 'clamp',
});
const imageOpacity = this.state.scrollY.interpolate({
inputRange: [0, HEADER_SCROLL_DISTANCE / 2, HEADER_SCROLL_DISTANCE],
outputRange: [1, 1, 0],
extrapolate: 'clamp',
});
const imageTranslate = this.state.scrollY.interpolate({
inputRange: [0, HEADER_SCROLL_DISTANCE],
outputRange: [0, -50],
extrapolate: 'clamp',
});
return (
<View style={styles.fill}>
<ScrollView
style={styles.fill}
scrollEventThrottle={16}
onScroll={Animated.event(
[{nativeEvent: {contentOffset: {y: this.state.scrollY}}}]
)}
>
{this._renderScrollViewContent()}
</ScrollView>
);
}
I Now it seems that it's not even checking for the condition (data.image) and it seems that it always goes directly to the else condition and displays only the text.
PS: i'm using this tutorial to make a scrollable header and it's working perfectly fine in displaying text but not images inside them https://medium.com/appandflow/react-native-scrollview-animated-header-10a18cb9469e.
Also, if delete the if condition, i always get the blank spaces between items .. any suggestion

Answer 1

so that's the code that finally worked for me ..i hope it will help someone else in the future
_renderScrollViewContent() {
var productList = [];
this.state.items.forEach(function (item) {
if (!item.image) {
productList.push(
<View key={item.key}>
<Text>{item.title}</Text>
<Text>{item.text}</Text>
<Text>{item.image}</Text>
</View>
);
}
else {
productList.push(
<View key={item.key}>
<Text>{item.title}</Text>
<Text>{item.text}</Text>
<Text>{item.image}</Text>
<Image source={require('path')}>
<View>
<Text>{item.legend}</Text>
</View>
</Image>
</View>
);
}
}.bind(this));
return (
<View>
{productList }
</View>
);
}