Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- 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>
- </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>
- </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>
- </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>
- </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
- },
- listItemStyle: {
- flex: 1,
- 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: {
- backgroundColor: 'red',
- paddingRight: wp('30%')
- }
- });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement