API tools faq
paste
Advertisement
enkf

Untitled

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