API tools faq
paste
Advertisement
isuru93

Untitled

isuru93
Apr 4th, 2017
71
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.99 KB | None | 0 0
raw download clone embed print report
  1. import React, { Component } from 'react';
  2. import {
  3. AppRegistry,
  4. StyleSheet,
  5. Text,
  6. View,
  7. ListView,
  8. Image,
  9. ActivityIndicator,
  10. TouchableHighlight,
  11. Platform,
  12. dismissKeyboard,
  13. Dimensions,
  14. TouchableOpacity,
  15. ScrollView
  16. } from 'react-native';
  17. import {Navigation} from 'react-native-navigation';
  18. import LoadMore from './LoadMore';
  19. import Header from './Header';
  20. import { Bubbles, DoubleBounce, Bars, Pulse } from 'react-native-loader';
  21. const background = require('../../../img/OTP-bg.png');
  22. import { Card , COLOR, TYPO} from 'react-native-material-design';
  23. import { Container, Content, Button, Icon } from 'native-base';
  24. import {TextInputMask} from 'react-native-masked-text';
  25. const HomeSlider = require('../../../img/slider_02.png');
  26.  
  27. const affroadbleRates = require('../../../img/a_03.png');
  28. const logoPng = require('../../../img/sdad_03.png');
  29.  
  30. const ac_rooms = require('../../../img/a_19.png');
  31. const breakfast = require('../../../img/a_07.png');
  32. const freewifi = require('../../../img/a_22.png');
  33. const tv = require('../../../img/a_16.png');
  34. const linen = require('../../../img/a_13.png');
  35. const wshroom = require('../../../img/a_10.png');
  36.  
  37.  
  38. const { width, he0ight } = Dimensions.get("window");
  39.  
  40.  
  41.  
  42. var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
  43. export default class HomeGadget extends Component {
  44. constructor(props) {
  45. super(props);
  46.  
  47. this.onPressRow = this.onPressRow.bind(this)
  48. this.renderRow = this.renderRow.bind(this)
  49.  
  50.  
  51. }
  52. componentWillMount() {
  53.        this.setState({
  54. Top_destinations: ds.cloneWithRows([]),
  55. featured_property: ds.cloneWithRows([]),
  56. hot_deals: ds.cloneWithRows([]),
  57. Property_Type : ds.cloneWithRows([]),
  58. isLoading : false,
  59.        });
  60.  
  61. }
  62.  
  63. componentDidMount() {
  64. this.DestinationsAsync(this.props.DesURL);
  65.  
  66. }
  67.  
  68. onPressRow = (rowData) => {
  69. this.props.navigator.push({
  70. title: rowData.name,
  71. screen: "yohobed.Search_Component",
  72. passProps: {
  73. lat : rowData.latitude,
  74. lon : rowData.longitude,
  75. id : rowData.id,
  76. city : rowData.name,
  77.  
  78. },
  79. navigatorStyle: {
  80. navBarTextColor: '#fff', // change the text color of the title (remembered across pushes)
  81. navBarBackgroundColor: '#00b0bf', // change the background color of the nav bar (remembered across pushes)
  82. navBarButtonColor: '#fff',
  83. },
  84.  
  85. });
  86.  
  87. }
  88.  
  89. onPressRow2 = (rowData) => {
  90. this.props.navigator.push({
  91.  
  92. screen: "yohobed.Single_Property",
  93. passProps: {
  94. image : rowData.thumbnail_url,
  95. City : rowData.city,
  96. id : rowData.id,
  97. name : rowData.name,
  98. price : rowData.min_price_LKR
  99. },
  100. navigatorStyle: {
  101. navBarTextColor: '#fff', // change the text color of the title (remembered across pushes)
  102. navBarBackgroundColor: '#00b0bf', // change the background color of the nav bar (remembered across pushes)
  103. navBarButtonColor: '#fff',
  104. },
  105.  
  106. });
  107.  
  108. }
  109.  
  110. onPressRow3 = (rowData) => {
  111. this.props.navigator.push({
  112. title: rowData.city_name,
  113. screen: "yohobed.Tiles",
  114. passProps: {
  115. image : rowData.thumbnail,
  116. name : rowData.name,
  117. id : rowData.id,
  118. title : rowData.title,
  119.  
  120.  
  121. },
  122.  
  123. });
  124.  
  125. }
  126.  
  127.  
  128. onPressRow4 = (rowData) => {
  129. this.props.navigator.push({
  130. title: rowData.name,
  131. screen: "yohobed.Search_Component",
  132. passProps: {
  133. Type : rowData.name,
  134.  
  135. },
  136. navigatorStyle: {
  137. navBarTextColor: '#fff',
  138. navBarBackgroundColor: '#00b0bf',
  139. navBarButtonColor: '#fff',
  140. },
  141.  
  142. });
  143.  
  144. }
  145.  
  146.  
  147. async DestinationsAsync(url) {
  148.  
  149. let response = await fetch(url);
  150. let body = await response.json();
  151.  
  152. this.setState({
  153. Top_destinations: this.state.Top_destinations.cloneWithRows(body.top_destinations),
  154. featured_property: this.state.featured_property.cloneWithRows(body.featured_property),
  155. Property_Type: this.state.Property_Type.cloneWithRows(body.featued_property_types),
  156. //hot_deals: this.state.hot_deals.cloneWithRows(jsonData.hot_deals),
  157. isLoading : true,
  158. });
  159.  
  160. }
  161.  
  162.  
  163. renderLoadingView() {
  164. return (
  165. <View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
  166.  
  167. <Bars size={20} color="#00b0bf"/>
  168.  
  169. </View>
  170. );
  171. }
  172.  
  173. renderPropertyType(rowData: {}, sectionID: number, rowID: number){
  174. return (
  175. <View>
  176. <TouchableOpacity underlayColor={'#eaeaea'} onPress ={() => this.onPressRow4(rowData)} style={styles.touchableViewOpacity}>
  177. <Card style={{width:200, shadowColor:"#ccc", shadowOffset:{width:1, height:1}, shadowOpacity:0.8}}>
  178. <Card.Media
  179. image={<Image source={{uri:'https://www.yohobed.com/images/propertytype/'+rowData.thumbnail}} style={styles.touchableImage}/>}
  180. overlay
  181. >
  182. </Card.Media>
  183. <Card.Body>
  184. <View>
  185. <Text style={{fontSize:12, fontFamily: 'Lato-Regular', color:'#666'}}>{rowData.name}</Text>
  186. </View>
  187.  
  188. </Card.Body>
  189. </Card>
  190. </TouchableOpacity>
  191.  
  192. </View>
  193. );
  194. }
  195.  
  196. renderRow(rowData: {}, sectionID: number, rowID: number){
  197. return (
  198. <View>
  199. <TouchableOpacity underlayColor={'#eaeaea'} onPress ={() => this.onPressRow(rowData)} style={styles.touchableViewOpacity}>
  200. <Card style={{width:200, shadowColor:"#ccc", shadowOffset:{width:1, height:1}, shadowOpacity:0.8}}>
  201. <Card.Media
  202. image={<Image source={{uri:'https://www.yohobed.com/images/cities/'+rowData.thumbnail_url}} style={styles.touchableImage}/>}
  203. overlay
  204. >
  205. </Card.Media>
  206. <Card.Body>
  207. <View>
  208. <Text style={{fontSize:12, fontFamily: 'Lato-Regular', color:'#666'}}>{rowData.name}</Text>
  209. </View>
  210.  
  211. </Card.Body>
  212. </Card>
  213. </TouchableOpacity>
  214.  
  215. </View>
  216. );
  217. }
  218.  
  219. renderProperty(rowData: {}, sectionID: number, rowID: number){
  220. return (
  221. <TouchableOpacity style={styles.touchableViewOpacity} underlayColor={'#eaeaea'} onPress ={() => this.onPressRow2(rowData)}>
  222. <Card style={{width:200, shadowColor:"#ccc", shadowOffset:{width:1, height:1}, shadowOpacity:0.8}}>
  223. <Card.Media
  224. image={<Image source={{uri:'https://www.yohobed.com/images/property/thumbnail/'+rowData.thumbnail_url}} style={styles.touchableImage}/>}
  225.  
  226. >
  227. <View style={{position:'absolute', bottom:0, left:0,backgroundColor:'#00b0bf'}}>
  228. <Text style={{color:'#fff', fontSize:11, width:100, fontFamily: 'Lato-Regular', paddingLeft:10, paddingTop:3}}>Starting</Text>
  229. <TextInputMask
  230. style={{color:'#fff', fontSize:12, width:100, fontFamily: 'Lato-Regular', padding:10}}
  231. value={rowData.min_price_LKR}
  232. editable ={false}
  233. type={'money'}
  234. options={{
  235. precision: 0,
  236. unit : 'LKR ',
  237. delimiter: ','
  238. }}
  239. />
  240. </View>
  241.  
  242.  
  243. </Card.Media>
  244.  
  245. <Card.Body>
  246.  
  247. <View>
  248.  
  249. <View style={{}}>
  250. <Text style={{color:'#666', fontSize:12, fontSize:12, fontFamily: 'Lato-Regular'}}>{rowData.name}</Text>
  251. </View>
  252.  
  253. </View>
  254. <Text style={{color:'#666', fontSize:12, fontSize:12, fontFamily: 'Lato-Light', marginTop:5}}>{rowData.city}</Text>
  255. </Card.Body>
  256. </Card>
  257. </TouchableOpacity>
  258.  
  259.  
  260. );
  261. }
  262.  
  263. renderdeals(rowData: {}, sectionID: number, rowID: number){
  264. return (
  265. <TouchableHighlight style={styles.touchableViewOpacity} underlayColor={'#eaeaea'} onPress ={() => this.onPressRow3(rowData)}>
  266. <View style={styles.touchableViewWrapr}>
  267. <Image
  268. source={{uri:'https://www.yohobed.com/images/cities/'+rowData.thumbnail_url}} resizeMode="cover" style={styles.touchableImage}/>
  269. <View style={styles.bottomContainer}>
  270. <Text style={styles.touchableTxt}>{rowData.id}</Text>
  271. <Text style={styles.touchableTxt}>{rowData.name}</Text>
  272. <Text style={styles.touchableTxt}>{rowData.title}</Text>
  273. </View>
  274. </View>
  275. </TouchableHighlight>
  276.  
  277.  
  278. );
  279. }
  280.  
  281.  
  282.  
  283.  
  284.  
  285. render(){
  286.  
  287. if(!this.state.isLoading){
  288. return this.renderLoadingView();
  289. }
  290.  
  291. return (
  292. <View style={{flex:1}}>
  293. <ScrollView>
  294. <View style={styles.mainImageWrpr}>
  295. <Image source={HomeSlider} style={styles.topImage}>
  296. </Image>
  297. <View style={styles.logoCenter}>
  298. <Image source={logoPng} style={styles.logoImage}>
  299. </Image>
  300. </View>
  301. <View style={styles.motoCenter}>
  302. <Image source={affroadbleRates} style={styles.motoImage}>
  303. </Image>
  304. </View>
  305. </View>
  306. <View style={styles.amenintiesWrpr}>
  307. <Text style={styles.amentiesMainText}>FEATURES IN ALL ROOMS</Text>
  308. <View style={{width:100, height:2, backgroundColor:'#fff', position:'absolute', left:10, top:16, opacity:0.8}}></View>
  309. <View style={{width:100, height:2, backgroundColor:'#fff', position:'absolute', right:10, top:16, opacity:0.8}}></View>
  310. <View style={styles.amentiesIconWrpr}>
  311. <View style={{width:35, justifyContent:'center', alignItems:'center', marginRight:15, marginTop:4}}>
  312. <Image source={ac_rooms} style={{width:22, resizeMode:'contain', height:18}}>
  313. </Image>
  314. <Text style={{textAlign:'center', fontFamily:'Lato-Bold', color:'#fff', fontSize:11, marginTop:2}}>AC {"\n"}Rooms</Text>
  315. </View>
  316.  
  317. <View style={{width:50, justifyContent:'center', alignItems:'center', marginRight:15, marginTop:-8}}>
  318. <Image source={breakfast} style={{width:12, resizeMode:'contain', height:20}}>
  319. </Image>
  320. <Text style={{textAlign:'center', fontFamily:'Lato-Bold', color:'#fff', fontSize:11, marginTop:2}}>Breakfast</Text>
  321. </View>
  322.  
  323. <View style={{width:35, justifyContent:'center', alignItems:'center', marginRight:15}}>
  324. <Image source={freewifi} style={{width:16, resizeMode:'contain', height:20}}>
  325. </Image>
  326. <Text style={{textAlign:'center', fontFamily:'Lato-Bold', color:'#fff', fontSize:11}}>Free {"\n"}Wi-Fi</Text>
  327. </View>
  328.  
  329. <View style={{width:35, justifyContent:'center', alignItems:'center', marginRight:15, marginTop:-10}}>
  330. <Image source={tv} style={{width:19, resizeMode:'contain', height:20}}>
  331. </Image>
  332. <Text style={{textAlign:'center', fontFamily:'Lato-Bold', color:'#fff', fontSize:11}}>TV</Text>
  333. </View>
  334.  
  335. <View style={{width:50, justifyContent:'center', alignItems:'center', marginRight:15, marginTop:6}}>
  336. <Image source={linen} style={{width:22, resizeMode:'contain', height:16}}>
  337. </Image>
  338. <Text style={{textAlign:'center', fontFamily:'Lato-Bold', color:'#fff', fontSize:11, marginTop:2}}>Spotless {"\n"}Linen</Text>
  339. </View>
  340.  
  341. <View style={{width:60, justifyContent:'center', alignItems:'center'}}>
  342. <Image source={wshroom} style={{width:13, resizeMode:'contain', height:18}}>
  343. </Image>
  344. <Text style={{textAlign:'center', fontFamily:'Lato-Bold', color:'#fff', fontSize:11, marginTop:2}}>Clean {"\n"}Washrooms</Text>
  345. </View>
  346.  
  347.  
  348. </View>
  349. </View>
  350. <Text style={styles.MainTextWrprMain}>Top Destinations</Text>
  351. <ListView
  352. dataSource={this.state.Top_destinations}
  353. renderRow={(rowData) => this.renderRow(rowData)}
  354. style={styles.container}
  355. navigator={this.props.navigator}
  356. horizontal = {true}
  357. />
  358. <Text style={styles.MainTextWrpr}>Featured Properties</Text>
  359. <ListView
  360. dataSource={this.state.featured_property}
  361. renderRow={(rowData) => this.renderProperty(rowData)}
  362. style={styles.container}
  363. navigator={this.props.navigator}
  364. horizontal = {true}
  365. />
  366. {/*<Text style={styles.MainTextWrpr}>Property Types</Text>
  367. <ListView
  368. dataSource={this.state.Property_Type}
  369. renderRow={(rowData) => this.renderPropertyType(rowData)}
  370. style={styles.container}
  371. navigator={this.props.navigator}
  372. horizontal = {true}
  373. />*/}
  374. </ScrollView>
  375. </View>
  376.  
  377. );
  378. }
  379. }
  380.  
  381. const styles = StyleSheet.create({
  382. container: {
  383. backgroundColor: '#fff',
  384. paddingLeft:10,
  385. paddingRight:10
  386. },
  387. amentiesIconWrpr:{
  388. justifyContent:'center',
  389. alignItems:'center',
  390. flexDirection:'row',
  391. position:'relative'
  392. },
  393. amentiesMainText:{
  394. fontFamily:'Lato-Bold',
  395. color:'#fff',
  396. textAlign:'center',
  397. fontSize:11,
  398. marginBottom:5
  399. },
  400.  
  401. amenintiesWrpr:{
  402. backgroundColor:'#00b0bf',
  403. opacity:0.8,
  404. padding:10
  405. },
  406. topImage:{
  407. height:134,
  408. resizeMode:'contain',
  409. width:width
  410. },
  411. logoCenter:{
  412. position: 'absolute',
  413. top: 0,
  414. left: 0,
  415. right: 0,
  416. justifyContent: 'center',
  417. alignItems: 'center',
  418. },
  419. motoCenter:{
  420. position: 'absolute',
  421. top: 50,
  422. left: 0,
  423. right: 0,
  424. justifyContent: 'center',
  425. alignItems: 'center',
  426. },
  427. logoImage:{
  428. width:80,
  429. resizeMode:'contain'
  430. },
  431. motoImage:{
  432. width:180,
  433. resizeMode:'contain'
  434. },
  435. mainImageWrpr:{
  436. position:'relative',
  437. },
  438. homeWrpr:{
  439. paddingLeft:10,
  440. paddingRight:10,
  441. paddingTop:15,
  442. backgroundColor: '#fff',
  443. },
  444. bottomContainerMain:{
  445. flexDirection:'row'
  446. },
  447. textInnerWrpr:{
  448.  
  449. },
  450. bottomContainer:{
  451. padding:10
  452. },
  453. MainTextWrprMain:{
  454. color:'#666',
  455. backgroundColor:'#fff',
  456. paddingLeft:20,
  457. paddingTop:20,
  458. fontFamily: 'Lato-Regular',
  459. fontSize:17
  460. },
  461. MainTextWrpr:{
  462. color:'#666',
  463. backgroundColor:'#fff',
  464. paddingLeft:20,
  465. fontFamily: 'Lato-Regular',
  466. fontSize:17,
  467. paddingTop:15
  468. },
  469. thumb: {
  470. backgroundColor: '#ffffff',
  471. marginBottom: 5,
  472. elevation: 1,
  473.  
  474. },
  475. img: {
  476. height: 300
  477. },
  478. txt: {
  479. margin: 10,
  480. fontSize: 12,
  481. textAlign: 'left'
  482. },
  483. touchableViewOpacity:{
  484. backgroundColor:'#FFFFFF',
  485. marginTop:10,
  486. marginBottom:10,
  487. flexDirection:'row'
  488. },
  489. touchableViewWrapr:{
  490. width:200
  491. },
  492. touchableViewWraprMain:{
  493. width:200,
  494. },
  495. touchableImage:{
  496. width: null,
  497. height:150
  498. },
  499. touchableTxt:{
  500. width:width,
  501. backgroundColor:'transparent',
  502. color:'#666',
  503. fontSize:12
  504. }
  505.  
  506. });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!