Places.js

import React from 'react';
import { Text, View, Image, StyleSheet, Dimensions } from 'react-native';
import { WebBrowser } from 'expo';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import Carousel from 'react-native-snap-carousel';
import { Container, Content, CardItem, Button, Right } from 'native-base';
import { getPlaces } from '../actions/getPlaces';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 15,
    backgroundColor: '#fff',
  },
});

class Places extends React.Component {
  static navigationOptions = {
    title: 'Places',
  };

  componentWillMount() {
    this.props.actions.getPlaces();
  }

  renderItem = ({ item }) => (
    <Container>
      <Content>
        <CardItem cardBody>
          <Image source={{ uri: item.imgUrl }} style={{ width: 400, height: 400 }} />
        </CardItem>
        <CardItem>
          <Text>{item.name}</Text>
        </CardItem>
        <CardItem>
          <Text>{item.descriptionShort}</Text>
        </CardItem>
      </Content>
    </Container>
  )

  render() {
    console.log(this.props);
    return (
      <Carousel
        ref={(c) => { this.carousel = c; }}
        data={this.props.places}
        renderItem={this.renderItem}
        layout="default"
        sliderWidth={Dimensions.get('window').width}
        itemWidth={Dimensions.get('window').width * 0.8}
      />
    );
  }
}

function mapStateToProps(state) {
  const { places, errors } = state;
  return {
    places,
    errors,
  };
}


function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators({
      getPlaces,
    }, dispatch),
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(Places);