Untitled

import React, { Component } from 'react';
import { View, ScrollView, ImageBackground, StyleSheet, Linking } from 'react-native';
import { List, ListItem, Text, Left, Right, Body, Button } from 'native-base';
import CustomIcon from '../components/CustomIcon.js';
import NavigationService from '../components/NavigationService.js';
import RF from 'react-native-responsive-fontsize';
import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-native-responsive-screen';
import { Consumer } from '../context';
import Intro from '../pages/Intro';
import I18n from '../locales';
import SvgUri from 'react-native-svg-uri';
var ls = require('react-native-local-storage');

export default class Home extends Component {

    constructor(props) {
        super(props);
        this.state = {
            timePassed: false,
            default_intro_status: null
        }
    }

    async componentDidMount() {
        let intro_status = await ls.get('intro_status');
        if (intro_status === null) {
            this.setState({ default_intro_status: 0 });
            setTimeout(() => {
                this.setTimePassed();
            }, 4000);
        } else {
            this.setState({ default_intro_status: intro_status });
        }
    }

    setTimePassed = async () => {
        ls.save('intro_status', 1);
        let intro_status = await ls.get('intro_status');
        this.setState({ timePassed: true, default_intro_status: intro_status });
    }

    render() {
        if (this.state.default_intro_status === 0) {
            return <Intro />;
        }
        return (
            <View style={styles.container}>
                <ImageBackground source={require('../assets/home.png')} style={styles.imageBackground}>
                    <View style={{ flex: 0.8 }}>
                        <CustomIcon name='logo' size={80} style={styles.headerLogoStyle} />
                        <Text style={styles.headerTextStyle}>Your key to the city</Text>
                    </View>
                    <View style={{ flex: 2 }}>
                        <ScrollView style={styles.listViewStyle}>
                            <List style={styles.listStyle}>
                                <ListItem style={styles.listItemStyle} onPress={() => NavigationService.navigate('GoBakuCard')} icon noBorder>
                                    <Left style={styles.leftStyle}>
                                        <CustomIcon name='gobakucard' size={15} style={styles.iconStyle} />
                                    </Left>
                                    <Body>
                                        <Text style={styles.textStyle}>{I18n.t('gobakucardText')}</Text>
                                    </Body>
                                    <Right style={styles.rightStyle}>
                                    </Right>
                                </ListItem>
                                <Consumer>
                                    {value => {
                                        const { items } = value;
                                        return (
                                            <React.Fragment>
                                                {items.filter(m => m.hide_from_mobile === false).map(m =>
                                                    (m.template === 'basic-page') ? (<ListItem key={m.id} style={styles.listItemStyle} onPress={() => NavigationService.navigate('Transport', { url: m.url, page_type: m.title, type: 'imageView', title: m.title })} icon noBorder>
                                                        <Left style={styles.leftStyle}>
                                                            {(m.icon !== '') ? (<SvgUri
                                                                width="20"
                                                                height="20"
                                                                source={{ uri: m.icon }}
                                                            />) : (<View></View>)}
                                                        </Left>
                                                        <Body>
                                                            <Text style={styles.textStyle}>{m.title}</Text>
                                                        </Body>
                                                        <Right style={styles.rightStyle}>
                                                        </Right>
                                                    </ListItem>) : (<ListItem key={m.id} style={styles.listItemStyle} onPress={() => NavigationService.navigate('Page', { url: m.url, page_type: m.title, type: 'imageView', title: m.title })} icon noBorder>
                                                        <Left style={styles.leftStyle}>
                                                            {(m.icon !== '') ? (<SvgUri
                                                                width="20"
                                                                height="20"
                                                                source={{ uri: m.icon }}
                                                            />) : (<View></View>)}
                                                        </Left>
                                                        <Body>
                                                            <Text style={styles.textStyle}>{m.title}</Text>
                                                        </Body>
                                                        <Right style={styles.rightStyle}>
                                                        </Right>
                                                    </ListItem>)
                                                )}
                                            </React.Fragment>
                                        );
                                    }
                                    }
                                </Consumer>
                                <ListItem onPress={() => { Linking.openURL('https://ne.gobakucard.com/en/buy-now/') }} style={styles.listItemStyle} icon noBorder>
                                    <Left style={styles.leftStyle}>
                                        <CustomIcon name='buynow' size={15} style={styles.iconStyle} />
                                    </Left>
                                    <Body>
                                        <Text style={styles.textStyle}>{I18n.t('buynowText')}</Text>
                                    </Body>
                                    <Right style={styles.rightStyle}>
                                    </Right>
                                </ListItem>
                            </List>
                        </ScrollView>
                    </View>
                    <View style={styles.socialViewStyle}>
                        <Button transparent>
                            <CustomIcon name='instagram' size={50} style={styles.iconStyle} />
                        </Button>
                        <Button transparent>
                            <CustomIcon name='facebook' size={50} style={styles.iconStyle} />
                        </Button>
                        <Button transparent>
                            <CustomIcon name='youtube' size={50} style={styles.iconStyle} />
                        </Button>
                    </View>
                </ImageBackground>
            </View>
        );
    }

}
const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    imageBackground: {
        width: '100%',
        height: '100%'
    },
    headerLogoStyle: {
        color: '#fff',
        paddingLeft: 20,
        paddingTop: 20
    },
    headerTextStyle: {
        color: '#fff',
        paddingLeft: 20,
        marginTop: -25,
        paddingBottom: 20
    },
    listViewStyle: {
        flexGrow: 1
    },
    listStyle: {

    },
    listItemStyle: {
        flex: 1,
        backgroundColor: 'green',
        paddingRight: 'auto',
        paddingLeft: 'auto',
    },
    iconStyle: {
        color: '#fff'
    },
    textStyle: {
        color: '#fff',
        fontSize: RF(2)
    },
    socialViewStyle: {
        flexDirection: 'row',
        padding: 20,
        marginLeft: 'auto',
        marginRight: 'auto'
    },
    leftStyle: {
        paddingLeft: wp('30%')
    },
    rightStyle: {
        paddingRight: wp('30%')
    }
});