app.js

import React, {Component} from 'react';
import { Provider } from 'react-redux';
import { StyleSheet } from 'react-native';

import store from './store';
import VenueList from './src/app/components/VenueList';


export default class App extends Component {

  render() {
    return (
      <Provider store={store}>
        <VenueList/>
      </Provider>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  }
});

index.js

import { combineReducers } from 'redux';
import venueReducer from './venueReducer';

export default combineReducers({
    venues: venueReducer
});

store.js

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';

import rootReducer from './src/app/reducers/index';

const middleware = [thunk];
  
  const store = createStore(rootReducer, applyMiddleware(...middleware));

export default store;

types.js

export const FETCH_VENUES = 'FETCH_VENUES';

venueAction.js

import { FETCH_VENUES } from './types';
import axios from 'axios';

export const fetchVenues = () => dispatch => {
    axios.get(`https://cpbook.propstory.com/api/broker/1/projects`)
    .then( venues => 
        dispatch({
            type: FETCH_VENUES,
            payload: venues
        })
    )
    .catch( error => {
        console.log(error);
    });
};

VenueList.js

import React, { Component } from 'react';
import { View, Text, Image, StyleSheet, TouchableOpacity, ScrollView } from 'react-native';
import { connect } from 'react-redux';
import { fetchVenues } from '../actions/venueAction';

class VenueList extends Component {
    constructor(props) {
        super(props)
        this.state = { active: true }
    }

    componentDidMount (){
        this.props.fetchVenues();
    }

    onPressRight = () => {
        this.setState({
          active: false
        })
    }

    onPressLeft = () => {
        this.setState({
            active: true
        })
    }

    render() {
    
        return (
            <ScrollView style={styles.container}>
                <Image
                style={styles.img}
                source={{ uri: this.props.venues.data ? this.props.venues.data[0].image : null }}
                />
                <View style={styles.details}>
                    <View>
                        <Text style={styles.info}>Builder Name:</Text>
                        <Text style={styles.content}>{this.props.venues.data ? this.props.venues.data[0].builder_name : ""}</Text>
                    </View>
                    <View style={{marginLeft: 70}}>
                        <Text style={styles.info}>City: </Text>
                        <Text style={styles.content}>{this.props.venues.data ? this.props.venues.data[0].city : ""}</Text>  
                    </View>   
                </View>
                <View style={styles.location}>
                    <Text style={styles.info}>Location: </Text>
                    <Text style={styles.content}>{this.props.venues.data ? this.props.venues.data[0].location : ""}</Text>
                </View>

                <View style={styles.card}>
                    <TouchableOpacity style={styles.leftTab} onPress={this.onPressLeft}>
                        <Text style={styles.title}>{this.props.venues.data ? this.props.venues.data[0].floorplans[0].title : ""}</Text>
                    </TouchableOpacity>
                    <TouchableOpacity style={styles.rightTab} onPress={this.onPressRight}>
                        <Text style={styles.title}>{this.props.venues.data ? this.props.venues.data[0].floorplans[1].title : ""}</Text>
                    </TouchableOpacity>
                </View>

                <View style={styles.floorplan}>
                    {
                        this.state.active ? <Image style={styles.floorimg} 
                        source={{ uri: this.props.venues.data ? this.props.venues.data[0].floorplans[0].image : null }}
                        /> :  <Image style={styles.floorimg}
                        source={{ uri: this.props.venues.data ? this.props.venues.data[0].floorplans[1].image : null }}
                        />
                    }
                    {
                        this.state.active ? <Text style={styles.carpet}>Carpet Area: {this.props.venues.data && this.props.venues.data[0].floorplans[0].carpet} sq ft</Text>
                        : <Text style={styles.carpet}>Carpet Area: {this.props.venues.data && this.props.venues.data[0].floorplans[1].carpet} sq ft</Text>
                    }
                </View>

            </ScrollView>
        );
    }
}  

const styles = StyleSheet.create({
    container: {
       flex: 1,
       paddingLeft: 15,
       paddingRight: 15
    },
    img: {
        height: 200,
        marginTop: 20,
        alignSelf: 'stretch'
    },
    details: {
        marginTop: 20,
        paddingLeft: 10,
        paddingRight: 10,
        flexDirection: 'row',
    },
    info: {
        fontSize: 18,
        fontWeight: 'bold',
        color: 'black'
    },
    content: {
        fontSize: 22,
        fontWeight: 'bold'
    },
    location: {
        marginTop: 20,
        paddingLeft: 10,
        paddingRight: 10
    },
    card: {
        marginTop: 20,
        paddingLeft: 10,
        paddingRight: 10,
        height: 50,
        borderWidth: 1.5,
        borderColor: '#d6d7da',
        flexDirection: 'row'
    },
    title: {
        fontSize: 20,
        fontWeight: 'bold',
        color: "black",
        padding: 5
    },
    leftTab: {
        alignItems: 'center'
    },
    rightTab: {
        marginLeft: 60,
        alignItems: 'center',
         
    },
    floorplan: {
        marginTop: 20,
        marginBottom: 25,
        height: 200,
        alignSelf: 'stretch'
    },
    floorimg: {
        paddingLeft: 10,
        paddingRight: 10,
        borderWidth: 1.5,
        height: 150,
        width: '100%'
    },
    carpet: {
        marginTop: 10,
        marginBottom: 35,
        fontSize: 20,
        fontWeight: 'bold',
        color: 'black'
    }


});

const mapStateToProps = state => ({
    venues: state.venues.items
})

export default connect (mapStateToProps, { fetchVenues })(VenueList);

venueReducer.js

import { FETCH_VENUES } from '../actions/types';

const initialState = {
    items: []
}

export default function (state = initialState, action) {
    switch (action.type) {
        case FETCH_VENUES:
            return {
                ...state,
                items: action.payload
            };
        default:
            return state;
    }
}