LandingPage.js

import React, { Component } from 'react';
import {View,Text,Image,TouchableOpacity,ScrollView,Modal} from 'react-native'
import {Colors,Metrics} from '../../Constants'
import Icon from 'react-native-vector-icons/FontAwesome'
import LandingScreenCard from '../../Components/Cards/LandingScreenCard'
import Button from '../../Components/MaterialComponents/Button'
import ModalScreen from '../../Components/ModalScreen'
import {Actions} from 'react-native-router-flux'
import SearchScreen from '../SearchScreen'

let homeImage = require('../../../src/images/homes.png')


const Options = [
    {
        index : 0,
        name : 'PG/HOSTEL'
    },
    {
        index : 1,
        name : 'RENTAL'
    },
    {
        index : 2,
        name : 'FLATMATES'
    }

]

class LandingPage extends Component {
    
    constructor(){
        super();
        this.state = {
            activePillIndex : 1,
            showModal : false
        }
    }

    render() {
        return (
            <View style={{
                flex : 1
            }}>
                <View style={{
                    //height : Metrics.FULL_HEIGHT * 0.3,
                    backgroundColor : Colors.GOOGLE_RED,
                    paddingTop : 25
                }}>
                    <View style={{
                        //backgroundColor : 'white',
                        paddingVertical : 10,
                        paddingHorizontal : 10,
                        flexDirection : 'row',
                        alignItems : 'center'
                    }}>
                        <View style={{
                            flex : 1
                        }}>
                            <Text style={{
                                fontSize : 18,
                                fontWeight : '600',
                                color : 'white'
                            }}>
                                My Nest
                            </Text>
                        </View>

                        <View style={{
                            //backgroundColor : 'green',
                            padding : 5,
                            flexDirection : 'row',
                            justifyContent : 'center',
                            alignItems : 'center'
                        }}>
                            <Text style={{
                                paddingHorizontal : 5,
                                color : 'white',
                                fontWeight : '600',
                                fontSize : 12
                            }}>Bangalore</Text>
                            <Icon name='map-marker'
                            size = {24}
                            color = 'white'
                            />
                        </View>

                        
                        
                    </View>

                    <View>
                            <Text style={{
                                textAlign : 'center',
                                color : 'white',
                                fontWeight : '600',
                                fontSize : 16,
                                paddingVertical : 15
                            }}>
                                Find a home with out broker
                            </Text>
                    </View>

                    <View style={{
                        flexDirection :'row',
                        marginHorizontal : 10,
                        borderRadius : 16,
                        borderWidth : 1,
                        borderColor : 'rgba(1,1,1,0.15)',
                        backgroundColor : 'rgba(1,1,1,0.15)'
                    }}>
                        {
                            Options.map((type,ind)=>{
                                return(
                                    <TouchableOpacity
                                    onPress = {()=>{
                                        this.setState({
                                            activePillIndex : type.index
                                        })
                                    }}
                                    key = {ind}
                                    style={{
                                        backgroundColor : this.state.activePillIndex === type.index ? 'white' : 'rgba(1,1,1,0)',
                                        borderRadius : 20,
                                        borderWidth : 1,
                                        borderColor : this.state.activePillIndex === type.index ? 'white' : 'rgba(1,1,1,0)',
                                        flex : 1,
                                        justifyContent : 'center',
                                        alignItems :'center',
                                        paddingVertical : 8
                                    }}>
                                        <Text style={{
                                            fontSize : 13,
                                            fontWeight : this.state.activePillIndex === type.index ? '600' : '300',
                                            color : this.state.activePillIndex === type.index ? Colors.GOOGLE_RED : 'black'
                                        }}>
                                            {type.name}
                                        </Text>
                                    </TouchableOpacity>
                                )
                            })
                        }
                        
                    </View>


                    <TouchableOpacity
                    onPress = {()=>{
                        this.setState({
                            showModal : true
                        })
                    }}
                    style={{
                        marginVertical : 15,
                        backgroundColor : 'white',
                        marginHorizontal : Metrics.FULL_WIDTH * 0.05,
                        paddingVertical : 14,
                        borderRadius : 5,
                        paddingHorizontal : 10,
                        flexDirection : 'row',
                        alignItems :'center'
                    }}>
                        <Icon name='search' color='rgba(1,1,1,0.3)'
                        size = {15}
                        />
                        <Text style={{
                            color : 'rgba(1,1,1,0.3)',
                            paddingLeft : 10
                        }}>Search by locality or landmark</Text>
                    </TouchableOpacity>
                </View>
                
                
                <ScrollView>
                <LandingScreenCard>
                    <View style={{
                        //backgroundColor :'red',
                        justifyContent : 'center',
                        alignItems : 'center',
                        flexDirection : 'row'
                    }}>

                        <View style={{
                            width : Metrics.FULL_WIDTH * 0.5,
                            justifyContent : 'center',
                            alignItems :'center',
                            paddingHorizontal : 20
                        }}>
                            <Text style={{
                                fontWeight : '500',
                                fontSize : 13
                            }}>
                                Want to sell or rent your property ?
                            </Text>
                        </View>

                    
                        <View style={{
                            flex : 1,
                            alignItems : 'flex-end'
                        }}>
                            <Image style={{width : 90,height : 90}}
                            source = {homeImage}
                            />
                        </View>
                    </View>
                    
                    <View style={{
                        marginHorizontal : Metrics.FULL_WIDTH * 0.02,
                        marginVertical : 10
                    }}>
                        <Button
                            onPress = {()=>{Actions.addProperty()}}
                            backgroundColor = '#D81B60'
                            textColor = 'white'
                            text = 'Post a free property ad'
                        />
                    </View>
                    
                </LandingScreenCard>

                <LandingScreenCard>
                    <View style={{
                        paddingVertical : 10,
                        paddingHorizontal : 10,
                        flexDirection : 'row'
                    }}>
                        <View style={{
                            flex : 1
                        }}>
                            <Text>
                                Need Assistance ?
                                {'\n'}
                                We are just a call away! (1234567890)
                            </Text>
                        </View>

                        <View style={{
                            //backgroundColor : 'red',
                            width : 40,
                            height : 40,
                            alignItems : 'center',
                            justifyContent : 'center',
                            borderWidth : 1,
                            borderColor : 'rgba(1,1,1,0.05)',
                            borderRadius : 20
                        }}>
                            <Icon name='phone'
                            size = {20}
                            color = {Colors.NEST_GREEN}
                            />
                        </View>

                    </View>
                </LandingScreenCard>
                </ScrollView>

                <Modal
                animationType="slide"
                transparent={false}
                visible={this.state.showModal}
                onRequestClose={() => {alert("Modal has been closed.")}}
                >
                    <ModalScreen dismiss = {()=>
                        {
                            this.setState({
                            showModal : false
                            })
                            }
                        }>
                            <SearchScreen dismiss={()=>{
                                this.setState({
                                    showModal : false
                                },
                                Actions.listings()
                                )}}/>
                    </ModalScreen>
                </Modal>
                
            </View>
        );
    }
}

export default LandingPage;