render a scrollview after a condition in react native

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 http://ift.tt/2p3Bpwi. Also, if delete the if condition, i always get the blank spaces between items .. any suggestion