API tools faq
paste
Advertisement
enkf

Untitled

enkf
Jan 22nd, 2020
127
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.05 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. ['Unnamed Member']
  49. ],
  50. renders: []
  51.  
  52. };
  53. }
  54.  
  55. ComponentWillMount() {
  56. BackHandler.addEventListener('hardwareBackPress', () => {
  57. if (!this.onMainScreen()) {
  58. this.goBack();
  59. return true;
  60. }
  61. return false;
  62. });
  63. }
  64.  
  65.  
  66. async componentDidMount(){
  67. const token = await AsyncStorage.getItem('token')
  68. console.log(this.state.data);
  69. // api profile
  70. const url = 'http://192.168.56.1/vzuu/public/api/members'
  71. headers = {
  72. 'Content-Type' : 'application/json',
  73. 'Authorization': 'Bearer ' + token
  74. }
  75. fetch(url, headers, {method:'GET'})
  76. .then(data=>data.json())
  77. .then(res=> {
  78. console.log(res.results);
  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 data={this.state.renders}
  107. renderItem={({ item }) => (
  108. <View style={{flex: 1}}>
  109. <Left>
  110. {/* <Thumbnail
  111. style={{ width: 80, height: 80 }}
  112. source={{uri : this.state.image}}
  113. /> */}
  114. {/* <Body> */}
  115. <Text style={styles.text}>{item.name}</Text>
  116. {/* <Text style={styles.text}>{item.phone_number}</Text> */}
  117. {/* <Text>Jumlah Point</Text> */}
  118. {/* </Body> */}
  119. </Left>
  120. </View>
  121. )}
  122. // keyExtractor={item => item.name}
  123. />
  124.  
  125. </CardItem>
  126. <View
  127. style={{
  128. flexDirection: 'row',
  129. flexWrap: 'wrap',
  130. marginHorizontal: 50,
  131. marginTop: 50,
  132. }}></View>
  133. <View
  134. style={{
  135. flexDirection: 'row',
  136. flexWrap: 'wrap',
  137. marginHorizontal: 18,
  138. marginTop: 18,
  139. }}>
  140. <View
  141. style={{
  142. justifyContent: 'space-between',
  143. flexDirection: 'row',
  144. width: '100%',
  145. marginBottom: 18,
  146. }}>
  147. <View>
  148. <TouchableOpacity onPress={() => this.props.navigation.navigate('treatment')}>
  149. <View
  150. style={{
  151. width: 100,
  152. height: 100,
  153. borderWidth: 1,
  154. borderColor: '#EFEFEF',
  155. borderRadius: 18,
  156. }}>
  157. <Image
  158. source={require('../asset/images/color/service.png')}
  159. style={{ height: 80, width: 100, flex: 1 }}
  160. />
  161. </View>
  162. <Text
  163. style={{
  164. fontSize: 12,
  165. fontWeight: 'bold',
  166. textAlign: 'center',
  167. color: '#E91E63',
  168. }}>
  169. Treatment
  170. </Text>
  171. </TouchableOpacity>
  172. </View>
  173. <View>
  174. <TouchableOpacity onPress={() => this.props.navigation.navigate('booking')}>
  175. <View
  176. style={{
  177. width: 100,
  178. height: 100,
  179. borderWidth: 1,
  180. borderColor: '#EFEFEF',
  181. borderRadius: 18,
  182. }}>
  183. <Image
  184. source={require('../asset/images/color/booking.png')}
  185. style={{ height: 80, width: 100, flex: 1 }}
  186. />
  187. </View>
  188. <Text
  189. style={{
  190. fontSize: 12,
  191. fontWeight: 'bold',
  192. textAlign: 'center',
  193. color: '#E91E63',
  194. }}>
  195. Booking
  196. </Text>
  197. </TouchableOpacity>
  198. </View>
  199. <View>
  200. <TouchableOpacity onPress={() => this.props.navigation.navigate('promotion')}>
  201. <View
  202. style={{
  203. width: 100,
  204. height: 100,
  205. borderWidth: 1,
  206. borderColor: '#EFEFEF',
  207. borderRadius: 18,
  208. }}>
  209. <Image
  210. source={require('../asset/images/color/promo.png')}
  211. style={{ height: 80, width: 100, flex: 1 }}
  212. />
  213. </View>
  214. <Text
  215. style={{
  216. fontSize: 12,
  217. fontWeight: 'bold',
  218. textAlign: 'center',
  219. color: '#E91E63',
  220. }}>
  221. Promotion
  222. </Text>
  223. </TouchableOpacity>
  224. </View>
  225. </View>
  226. </View>
  227.  
  228. <View
  229. style={{
  230. flexDirection: 'row',
  231. flexWrap: 'wrap',
  232. marginHorizontal: 18,
  233. marginTop: 18,
  234. }}>
  235. <View
  236. style={{
  237. justifyContent: 'space-between',
  238. flexDirection: 'row',
  239. width: '100%',
  240. marginBottom: 18,
  241. }}>
  242. <View>
  243. <TouchableOpacity onPress={() => this.props.navigation.navigate('point')}>
  244. <View
  245. style={{
  246. width: 100,
  247. height: 100,
  248. borderWidth: 1,
  249. borderColor: '#EFEFEF',
  250. borderRadius: 18,
  251. }}>
  252. <Image
  253. source={require('../asset/images/color/point.png')}
  254. style={{ height: 80, width: 100, flex: 1 }}
  255. />
  256. </View>
  257. <Text
  258. style={{
  259. fontSize: 12,
  260. fontWeight: 'bold',
  261. textAlign: 'center',
  262. color: '#E91E63',
  263. }}>
  264. Point
  265. </Text>
  266. </TouchableOpacity>
  267. </View>
  268. <View>
  269. <TouchableOpacity>
  270. <View
  271. style={{
  272. width: 100,
  273. height: 100,
  274. borderWidth: 1,
  275. borderColor: '#EFEFEF',
  276. borderRadius: 18,
  277. }}>
  278. <Image
  279. source={require('../asset/images/color/spin.png')}
  280. style={{ height: 80, width: 100, flex: 1 }}
  281. />
  282. </View>
  283. <Text
  284. style={{
  285. fontSize: 12,
  286. fontWeight: 'bold',
  287. textAlign: 'center',
  288. color: '#E91E63',
  289. }}>
  290. Spin
  291. </Text>
  292. </TouchableOpacity>
  293. </View>
  294. <View>
  295. <TouchableOpacity onPress={() => this.props.navigation.navigate('contact')}>
  296. <View
  297. style={{
  298. width: 100,
  299. height: 100,
  300. borderWidth: 1,
  301. borderColor: '#EFEFEF',
  302. borderRadius: 18,
  303. }}>
  304. <Image
  305. source={require('../asset/images/color/contact.png')}
  306. style={{ height: 80, width: 100, flex: 1 }}
  307. />
  308. </View>
  309. <Text
  310. style={{
  311. fontSize: 12,
  312. fontWeight: 'bold',
  313. textAlign: 'center',
  314. color: '#E91E63',
  315. }}>
  316. Contact
  317. </Text>
  318. </TouchableOpacity>
  319. </View>
  320. </View>
  321. </View>
  322.  
  323. </ScrollView>
  324. }
  325. </View>
  326. </Container>
  327. );
  328. }
  329. }
  330.  
  331.  
  332. export default withNavigation(Home);
  333. const styles = StyleSheet.create({
  334. container: {
  335. flex: 1,
  336. justifyContent: 'center',
  337. alignItems: 'center',
  338. },
  339. text: { fontSize: 18, fontWeight:'bold', color: '#E91E63', alignItems: 'center', justifyContent: 'center' }
  340. });
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!