destination.js

import React, { Component } from 'react'
import { View, Text, ScrollView, Image } from 'react-native'
import { connect } from 'react-redux'
import { fetchDest } from '../actions'

class Destinations extends Component {
    componentDidMount(){
        this.props.dispatch(fetchDest())
    }

    render(){
        return (
            <View style={{ flex: 1 }}>
                <Text style={{ 
                    marginLeft: 10, marginTop: 10, fontSize: 18 }}>Destinations</Text>
                {
                    this.props.destinations.length > 0 &&
                    !this.props.isFetching && (
                        <ScrollView 
                            showsHorizontalScrollIndicator={false}
                            horizontal={true} >
                            {
                                this.props.destinations.map((data, index) => (
                                    <Image 
                                        key={index}
                                        style={{ 
                                            width: 100, 
                                            height: 100, 
                                            margin: 10,
                                            borderRadius: 4,
                                            resizeMode: 'contain' }}
                                        source={{ uri: data.image }} />
                                ))
                            }
                        </ScrollView>
                    )
                }
            </View>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        destinations: state.destinations.items,
        isFetching: state.destinations.isFetching
    }
}

export default connect(mapStateToProps)(Destinations)