API tools faq
paste
Advertisement
enkf

Untitled

enkf
Jan 22nd, 2020
136
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.06 KB | None | 0 0
raw download clone embed print report
  1. import React from 'react';
  2. import {
  3. StyleSheet,
  4. View,
  5. Text,
  6. TouchableOpacity,
  7. BackHandler,
  8. Image,
  9. ScrollView,
  10. ActivityIndicator,
  11. FlatList,
  12. } from 'react-native';
  13. import AsyncStorage from '@react-native-community/async-storage';
  14. import {
  15. Container,
  16. Header,
  17. CardItem,
  18. Left,
  19. Body,
  20. Thumbnail,
  21. } from 'native-base';
  22. import { withNavigation } from 'react-navigation';
  23. import Axios from 'axios';
  24.  
  25. class Home extends React.Component {
  26.  
  27. constructor(props) {
  28. super(props);
  29. this.state = {
  30. isLoading: false,
  31. id: '',
  32. card_member:'',
  33. member_code: '',
  34. referral_code: '',
  35. name: '',
  36. place: '',
  37. date_of_birth: '',
  38. religion: '',
  39. address:'',
  40. phone_number: '',
  41. phone_home: '',
  42. phone_office: '',
  43. image: '',
  44. email: '',
  45. password: '',
  46. token: '',
  47. data : [],
  48. renders: []
  49.  
  50. };
  51. }
  52.  
  53. ComponentWillMount() {
  54. BackHandler.addEventListener('hardwareBackPress', () => {
  55. if (!this.onMainScreen()) {
  56. this.goBack();
  57. return true;
  58. }
  59. return false;
  60. });
  61. }
  62.  
  63.  
  64. async componentDidMount(){
  65. const token = await AsyncStorage.getItem('token')
  66. console.log(this.state.renders);
  67. // api profile
  68. const url = 'http://192.168.56.1/vzuu/public/api/members'
  69. headers = {
  70. 'Accept' : 'application/json',
  71. 'Content-Type' : 'application/json',
  72. 'Authorization': 'Bearer ' + token
  73. }
  74. fetch(url, headers, {method:'GET'})
  75.  
  76. .then(data=>data.json())
  77. .then(res=> {
  78. console.log(res);
  79. // dari selesai fetching api profile
  80.  
  81. setTimeout(()=>{this.setState({loading:false})},1000)
  82. this.setState({
  83. data: res.results.members,
  84. renders: res.results.members.data,
  85. })
  86. console.log(this.state.renders);
  87. })
  88. .catch(err=>console.warn({err}))
  89. }
  90.  
  91. render() {
  92. return (
  93. <Container>
  94. <View>
  95. <Header style={{ backgroundColor: '#E91E63' }} />
  96. {this.state.isLoading
  97. ? <ActivityIndicator color='#E91E63' size='large' />
  98. :
  99. <ScrollView>
  100.  
  101. <View style={{ flex: 1, alignItems: 'center' }}>
  102. <Text style={{ fontSize: 16 }}>{this.state.curTime}</Text>
  103. </View>
  104. <CardItem>
  105. <View style={{ marginHorizontal: 10 }}></View>
  106. <FlatList
  107. data={this.state.data}
  108. renderItem={({ item }) => (
  109. <View style={{flex: 1}}>
  110. <Left>
  111. {/* <Thumbnail
  112. style={{ width: 80, height: 80 }}
  113. source={{uri : this.state.image}}
  114. /> */}
  115. {/* <Body> */}
  116. <Text style={styles.text}>{item.name}</Text>
  117. {/* <Text style={styles.text}>{item.phone_number}</Text> */}
  118. {/* <Text>Jumlah Point</Text> */}
  119. {/* </Body> */}
  120. </Left>
  121. </View>
  122. )}
  123. // keyExtractor={item => item.name}
  124. />
  125.  
  126. </CardItem>
  127. <View
  128. style={{
  129. flexDirection: 'row',
  130. flexWrap: 'wrap',
  131. marginHorizontal: 50,
  132. marginTop: 50,
  133. }}></View>
  134. <View
  135. style={{
  136. flexDirection: 'row',
  137. flexWrap: 'wrap',
  138. marginHorizontal: 18,
  139. marginTop: 18,
  140. }}>
  141. <View
  142. style={{
  143. justifyContent: 'space-between',
  144. flexDirection: 'row',
  145. width: '100%',
  146. marginBottom: 18,
  147. }}>
  148. <View>
  149. <TouchableOpacity onPress={() => this.props.navigation.navigate('treatment')}>
  150. <View
  151. style={{
  152. width: 100,
  153. height: 100,
  154. borderWidth: 1,
  155. borderColor: '#EFEFEF',
  156. borderRadius: 18,
  157. }}>
  158. <Image
  159. source={require('../asset/images/color/service.png')}
  160. style={{ height: 80, width: 100, flex: 1 }}
  161. />
  162. </View>
  163. <Text
  164. style={{
  165. fontSize: 12,
  166. fontWeight: 'bold',
  167. textAlign: 'center',
  168. color: '#E91E63',
  169. }}>
  170. Treatment
  171. </Text>
  172. </TouchableOpacity>
  173. </View>
  174. <View>
  175. <TouchableOpacity onPress={() => this.props.navigation.navigate('booking')}>
  176. <View
  177. style={{
  178. width: 100,
  179. height: 100,
  180. borderWidth: 1,
  181. borderColor: '#EFEFEF',
  182. borderRadius: 18,
  183. }}>
  184. <Image
  185. source={require('../asset/images/color/booking.png')}
  186. style={{ height: 80, width: 100, flex: 1 }}
  187. />
  188. </View>
  189. <Text
  190. style={{
  191. fontSize: 12,
  192. fontWeight: 'bold',
  193. textAlign: 'center',
  194. color: '#E91E63',
  195. }}>
  196. Booking
  197. </Text>
  198. </TouchableOpacity>
  199. </View>
  200. <View>
  201. <TouchableOpacity onPress={() => this.props.navigation.navigate('promotion')}>
  202. <View
  203. style={{
  204. width: 100,
  205. height: 100,
  206. borderWidth: 1,
  207. borderColor: '#EFEFEF',
  208. borderRadius: 18,
  209. }}>
  210. <Image
  211. source={require('../asset/images/color/promo.png')}
  212. style={{ height: 80, width: 100, flex: 1 }}
  213. />
  214. </View>
  215. <Text
  216. style={{
  217. fontSize: 12,
  218. fontWeight: 'bold',
  219. textAlign: 'center',
  220. color: '#E91E63',
  221. }}>
  222. Promotion
  223. </Text>
  224. </TouchableOpacity>
  225. </View>
  226. </View>
  227. </View>
  228.  
  229. <View
  230. style={{
  231. flexDirection: 'row',
  232. flexWrap: 'wrap',
  233. marginHorizontal: 18,
  234. marginTop: 18,
  235. }}>
  236. <View
  237. style={{
  238. justifyContent: 'space-between',
  239. flexDirection: 'row',
  240. width: '100%',
  241. marginBottom: 18,
  242. }}>
  243. <View>
  244. <TouchableOpacity onPress={() => this.props.navigation.navigate('point')}>
  245. <View
  246. style={{
  247. width: 100,
  248. height: 100,
  249. borderWidth: 1,
  250. borderColor: '#EFEFEF',
  251. borderRadius: 18,
  252. }}>
  253. <Image
  254. source={require('../asset/images/color/point.png')}
  255. style={{ height: 80, width: 100, flex: 1 }}
  256. />
  257. </View>
  258. <Text
  259. style={{
  260. fontSize: 12,
  261. fontWeight: 'bold',
  262. textAlign: 'center',
  263. color: '#E91E63',
  264. }}>
  265. Point
  266. </Text>
  267. </TouchableOpacity>
  268. </View>
  269. <View>
  270. <TouchableOpacity>
  271. <View
  272. style={{
  273. width: 100,
  274. height: 100,
  275. borderWidth: 1,
  276. borderColor: '#EFEFEF',
  277. borderRadius: 18,
  278. }}>
  279. <Image
  280. source={require('../asset/images/color/spin.png')}
  281. style={{ height: 80, width: 100, flex: 1 }}
  282. />
  283. </View>
  284. <Text
  285. style={{
  286. fontSize: 12,
  287. fontWeight: 'bold',
  288. textAlign: 'center',
  289. color: '#E91E63',
  290. }}>
  291. Spin
  292. </Text>
  293. </TouchableOpacity>
  294. </View>
  295. <View>
  296. <TouchableOpacity onPress={() => this.props.navigation.navigate('contact')}>
  297. <View
  298. style={{
  299. width: 100,
  300. height: 100,
  301. borderWidth: 1,
  302. borderColor: '#EFEFEF',
  303. borderRadius: 18,
  304. }}>
  305. <Image
  306. source={require('../asset/images/color/contact.png')}
  307. style={{ height: 80, width: 100, flex: 1 }}
  308. />
  309. </View>
  310. <Text
  311. style={{
  312. fontSize: 12,
  313. fontWeight: 'bold',
  314. textAlign: 'center',
  315. color: '#E91E63',
  316. }}>
  317. Contact
  318. </Text>
  319. </TouchableOpacity>
  320. </View>
  321. </View>
  322. </View>
  323.  
  324. </ScrollView>
  325. }
  326. </View>
  327. </Container>
  328. );
  329. }
  330. }
  331.  
  332.  
  333. export default withNavigation(Home);
  334. const styles = StyleSheet.create({
  335. container: {
  336. flex: 1,
  337. justifyContent: 'center',
  338. alignItems: 'center',
  339. },
  340. text: { fontSize: 18, fontWeight:'bold', color: '#E91E63', alignItems: 'center', justifyContent: 'center' }
  341. });
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!