Advertisement
Guest User

Untitled

a guest
Jun 25th, 2019
74
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.93 KB | None | 0 0
  1. import React, { Component } from 'react';
  2. import { View, ScrollView, ImageBackground, StyleSheet, Linking } from 'react-native';
  3. import { List, ListItem, Text, Left, Right, Body, Button } from 'native-base';
  4. import CustomIcon from '../components/CustomIcon.js';
  5. import NavigationService from '../components/NavigationService.js';
  6. import RF from 'react-native-responsive-fontsize';
  7. import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-native-responsive-screen';
  8. import { Consumer } from '../context';
  9. import Intro from '../pages/Intro';
  10. import I18n from '../locales';
  11. import SvgUri from 'react-native-svg-uri';
  12. var ls = require('react-native-local-storage');
  13.  
  14. export default class Home extends Component {
  15.  
  16. constructor(props) {
  17. super(props);
  18. this.state = {
  19. timePassed: false,
  20. default_intro_status: null
  21. }
  22. }
  23.  
  24. async componentDidMount() {
  25. let intro_status = await ls.get('intro_status');
  26. if (intro_status === null) {
  27. this.setState({ default_intro_status: 0 });
  28. setTimeout(() => {
  29. this.setTimePassed();
  30. }, 4000);
  31. } else {
  32. this.setState({ default_intro_status: intro_status });
  33. }
  34. }
  35.  
  36. setTimePassed = async () => {
  37. ls.save('intro_status', 1);
  38. let intro_status = await ls.get('intro_status');
  39. this.setState({ timePassed: true, default_intro_status: intro_status });
  40. }
  41.  
  42. render() {
  43. if (this.state.default_intro_status === 0) {
  44. return <Intro />;
  45. }
  46. return (
  47. <View style={styles.container}>
  48. <ImageBackground source={require('../assets/home.png')} style={styles.imageBackground}>
  49. <View style={{ flex: 0.8 }}>
  50. <CustomIcon name='logo' size={80} style={styles.headerLogoStyle} />
  51. <Text style={styles.headerTextStyle}>Your key to the city</Text>
  52. </View>
  53. <View style={{ flex: 2 }}>
  54. <ScrollView style={styles.listViewStyle}>
  55. <List style={styles.listStyle}>
  56. <ListItem style={styles.listItemStyle} onPress={() => NavigationService.navigate('GoBakuCard')} icon noBorder>
  57. <Left style={styles.leftStyle}>
  58. <CustomIcon name='gobakucard' size={15} style={styles.iconStyle} />
  59. </Left>
  60. <Body>
  61. <Text style={styles.textStyle}>{I18n.t('gobakucardText')}</Text>
  62. </Body>
  63. </ListItem>
  64. <Consumer>
  65. {value => {
  66. const { items } = value;
  67. return (
  68. <React.Fragment>
  69. {items.filter(m => m.hide_from_mobile === false).map(m =>
  70. (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>
  71. <Left style={styles.leftStyle}>
  72. {(m.icon !== '') ? (<SvgUri
  73. width="20"
  74. height="20"
  75. source={{ uri: m.icon }}
  76. />) : (<View></View>)}
  77. </Left>
  78. <Body>
  79. <Text style={styles.textStyle}>{m.title}</Text>
  80. </Body>
  81. </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>
  82. <Left style={styles.leftStyle}>
  83. {(m.icon !== '') ? (<SvgUri
  84. width="20"
  85. height="20"
  86. source={{ uri: m.icon }}
  87. />) : (<View></View>)}
  88. </Left>
  89. <Body>
  90. <Text style={styles.textStyle}>{m.title}</Text>
  91. </Body>
  92. </ListItem>)
  93. )}
  94. </React.Fragment>
  95. );
  96. }
  97. }
  98. </Consumer>
  99. <ListItem onPress={() => { Linking.openURL('https://ne.gobakucard.com/en/buy-now/') }} style={styles.listItemStyle} icon noBorder>
  100. <Left style={styles.leftStyle}>
  101. <CustomIcon name='buynow' size={15} style={styles.iconStyle} />
  102. </Left>
  103. <Body>
  104. <Text style={styles.textStyle}>{I18n.t('buynowText')}</Text>
  105. </Body>
  106. </ListItem>
  107. </List>
  108. </ScrollView>
  109. </View>
  110. <View style={styles.socialViewStyle}>
  111. <Button transparent>
  112. <CustomIcon name='instagram' size={50} style={styles.iconStyle} />
  113. </Button>
  114. <Button transparent>
  115. <CustomIcon name='facebook' size={50} style={styles.iconStyle} />
  116. </Button>
  117. <Button transparent>
  118. <CustomIcon name='youtube' size={50} style={styles.iconStyle} />
  119. </Button>
  120. </View>
  121. </ImageBackground>
  122. </View>
  123. );
  124. }
  125.  
  126. }
  127. const styles = StyleSheet.create({
  128. container: {
  129. flex: 1
  130. },
  131. imageBackground: {
  132. width: '100%',
  133. height: '100%'
  134. },
  135. headerLogoStyle: {
  136. color: '#fff',
  137. paddingLeft: 20,
  138. paddingTop: 20
  139. },
  140. headerTextStyle: {
  141. color: '#fff',
  142. paddingLeft: 20,
  143. marginTop: -25,
  144. paddingBottom: 20
  145. },
  146. listViewStyle: {
  147. flexGrow: 1
  148. },
  149. listItemStyle: {
  150. flex: 1,
  151. paddingRight: 'auto',
  152. paddingLeft: 'auto',
  153. },
  154. iconStyle: {
  155. color: '#fff'
  156. },
  157. textStyle: {
  158. color: '#fff',
  159. fontSize: RF(2)
  160. },
  161. socialViewStyle: {
  162. flexDirection: 'row',
  163. padding: 20,
  164. marginLeft: 'auto',
  165. marginRight: 'auto'
  166. },
  167. leftStyle: {
  168. paddingLeft: wp('30%')
  169. },
  170. rightStyle: {
  171. backgroundColor: 'red',
  172. paddingRight: wp('30%')
  173. }
  174. });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement