Untitled

import React from 'react';
import {
  StyleSheet,
  View,
  Text,
  TouchableOpacity,
  BackHandler,
  Image,
  ScrollView,
  ActivityIndicator,
  FlatList,
} from 'react-native';
import AsyncStorage from '@react-native-community/async-storage';
import {
  Container,
  Header,
  CardItem,
  Left,
  Body,
  Thumbnail,
} from 'native-base';
import { withNavigation } from 'react-navigation';
import Axios from 'axios';

class Home extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      isLoading: false,
      id: '',
      card_member:'',
      member_code: '',
      referral_code: '',
      name: 'Bob',
      place: '',
      date_of_birth: '',
      religion: '',
      address:'',
      phone_number: '081284232952',
      phone_home: '',
      phone_office: '',
      image: '',
      email: '',
      password: '',
      token: '',
      data : [],
      renders: []

    };
  }

  ComponentWillMount() {
    BackHandler.addEventListener('hardwareBackPress', () => {
      if (!this.onMainScreen()) {
        this.goBack();
        return true;
      }
      return false;
    });
  }


  async componentDidMount(){
 await AsyncStorage.getItem('token')
  console.log(headers);
        // api profile
        const url = 'http://192.168.56.1/vzuu/public/api/members'
        headers = {
          // 'Content-Type' : 'application/json',
          'Authorization': 'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImp0aSI6ImQwMGRlM2QwNjlkMjQ1YmM0NDZhOTIwZDQ4YTM4OTlmYzE4NWY0MWRiMWIyN2M5YTg4MzcyYTk3N2Y1Y2IxMGM1MTY0NTA3MmRmOWI0ZDc3In0.eyJhdWQiOiI1IiwianRpIjoiZDAwZGUzZDA2OWQyNDViYzQ0NmE5MjBkNDhhMzg5OWZjMTg1ZjQxZGIxYjI3YzlhODgzNzJhOTc3ZjVjYjEwYzUxNjQ1MDcyZGY5YjRkNzciLCJpYXQiOjE1Nzk4MzcxMjcsIm5iZiI6MTU3OTgzNzEyNywiZXhwIjoxNjExNDU5NTI3LCJzdWIiOiI1Iiwic2NvcGVzIjpbXX0.RmSj4UX1HvVQiku7wkTCvbS910eYm1lNWelY9H5ib-NTWGTBvSkP0Ev7Av6m_u-uvdjP8PzuNfpL6Yo8qPYX83S8fw5oyXDb96d0S2FmIunZMzFXjbCdDoWKKipucMjTtrLGOfyAvnRjkstnwcDRgobmdEuX5E-Lzm27MZvriPLZiBvMG50QgwSzvldpzx9MRKz_Pkb_Fx53f2wKRCvFo5Xz1eTDXjSk_M-syiB2RLwuQ1ID3EmubhOC67NfCGd9fFWb4z5Sn5vXBttxvgMP7AmjGrn2Up_vbsyLLu-bYmlOMpZCLfBig3ipD_txBgA8Lm5aDfb7FHb-A1UFagvTChj0DyLg-4NzGe8oqCqNqBagt8a98dAe5iA5s5PDt_Eydk39ieElErpW8lAvrVsyhVvAh6LD3TFbdX2saHZxSy99RoVJLMFNpZKfAdxCGa235lB5NrNL_Qix-32KeGCGy7Tz2UhQWdQaDMBGXJaSJV48MNEMgNCSFlXMVb-r8oh6pDDfp8BTuofXGmg-31moJcpZFu8RO4GYgOvlbH3mib3YsOsjNsCMwKmVuaTEWDGbIWh2SemMUofODHfG0THimaCAopBMKCB2rs4MG3I-E6dbRdc6xZUKAox-xWZnH1YzqKSh8x8Lp8iB1PIWhOtAL9CO1IkCOKLL1hhs124kVM4'
        }
         fetch(url, headers, {method:'GET'})
          .then(data=>data.json())
          .then(res=> {
            AsyncStorage.setItem('token', res.success.token)
              console.log(res);
            //  dari selesai fetching api profile
            setTimeout(()=>{this.setState({loading:false})},1000)
            this.setState({
              data: res.results.members,
              renders: res.results.members.data,
            })
            console.log(this.state.renders);
          })
          .catch(err=>console.warn({err}))
      }

  render() {
    return (
      <Container>
        <View>
          <Header style={{ backgroundColor: '#E91E63' }} />
          {this.state.isLoading
          ? <ActivityIndicator color='#E91E63' size='large' />
          :
          <ScrollView>

            <View style={{ flex: 1, alignItems: 'center' }}>
              <Text style={{ fontSize: 16 }}>{this.state.curTime}</Text>
            </View>
            <CardItem>
            <View style={{ marginHorizontal: 10 }}></View>
            <FlatList
            data={this.state.renders}
                            renderItem={({ item }) => (
                              <View style={{flex: 1}}>
                              <Left>
                                {/* <Thumbnail
                                  style={{ width: 80, height: 80 }}
                                  source={{uri : this.state.image}}
                                /> */}
                                {/* <Body> */}
                                  <Text style={styles.text}>{item.name}</Text>
                                  {/* <Text style={styles.text}>{item.phone_number}</Text> */}
                                  {/* <Text>Jumlah Point</Text> */}
                                {/* </Body> */}
                              </Left>
                              </View>
                            )}
                            keyExtractor={item => item.id}
                        />
            </CardItem>
            <View
              style={{
                flexDirection: 'row',
                flexWrap: 'wrap',
                marginHorizontal: 50,
                marginTop: 50,
              }}></View>
            <View
              style={{
                flexDirection: 'row',
                flexWrap: 'wrap',
                marginHorizontal: 18,
                marginTop: 18,
              }}>
              <View
                style={{
                  justifyContent: 'space-between',
                  flexDirection: 'row',
                  width: '100%',
                  marginBottom: 18,
                }}>
                <View>
                  <TouchableOpacity onPress={() => this.props.navigation.navigate('treatment')}>
                    <View
                      style={{
                        width: 100,
                        height: 100,
                        borderWidth: 1,
                        borderColor: '#EFEFEF',
                        borderRadius: 18,
                      }}>
                      <Image
                        source={require('../asset/images/color/service.png')}
                        style={{ height: 80, width: 100, flex: 1 }}
                      />
                    </View>
                    <Text
                      style={{
                        fontSize: 12,
                        fontWeight: 'bold',
                        textAlign: 'center',
                        color: '#E91E63',
                      }}>
                      Treatment
                    </Text>
                  </TouchableOpacity>
                </View>
                <View>
                  <TouchableOpacity onPress={() => this.props.navigation.navigate('booking')}>
                    <View
                      style={{
                        width: 100,
                        height: 100,
                        borderWidth: 1,
                        borderColor: '#EFEFEF',
                        borderRadius: 18,
                      }}>
                      <Image
                        source={require('../asset/images/color/booking.png')}
                        style={{ height: 80, width: 100, flex: 1 }}
                      />
                    </View>
                    <Text
                      style={{
                        fontSize: 12,
                        fontWeight: 'bold',
                        textAlign: 'center',
                        color: '#E91E63',
                      }}>
                      Booking
                    </Text>
                  </TouchableOpacity>
                </View>
                <View>
                  <TouchableOpacity onPress={() => this.props.navigation.navigate('promotion')}>
                    <View
                      style={{
                        width: 100,
                        height: 100,
                        borderWidth: 1,
                        borderColor: '#EFEFEF',
                        borderRadius: 18,
                      }}>
                      <Image
                        source={require('../asset/images/color/promo.png')}
                        style={{ height: 80, width: 100, flex: 1 }}
                      />
                    </View>
                    <Text
                      style={{
                        fontSize: 12,
                        fontWeight: 'bold',
                        textAlign: 'center',
                        color: '#E91E63',
                      }}>
                      Promotion
                    </Text>
                  </TouchableOpacity>
                </View>
              </View>
            </View>

            <View
              style={{
                flexDirection: 'row',
                flexWrap: 'wrap',
                marginHorizontal: 18,
                marginTop: 18,
              }}>
              <View
                style={{
                  justifyContent: 'space-between',
                  flexDirection: 'row',
                  width: '100%',
                  marginBottom: 18,
                }}>
                <View>
                  <TouchableOpacity onPress={() => this.props.navigation.navigate('point')}>
                    <View
                      style={{
                        width: 100,
                        height: 100,
                        borderWidth: 1,
                        borderColor: '#EFEFEF',
                        borderRadius: 18,
                      }}>
                      <Image
                        source={require('../asset/images/color/point.png')}
                        style={{ height: 80, width: 100, flex: 1 }}
                      />
                    </View>
                    <Text
                      style={{
                        fontSize: 12,
                        fontWeight: 'bold',
                        textAlign: 'center',
                        color: '#E91E63',
                      }}>
                      Point
                    </Text>
                  </TouchableOpacity>
                </View>
                <View>
                  <TouchableOpacity>
                    <View
                      style={{
                        width: 100,
                        height: 100,
                        borderWidth: 1,
                        borderColor: '#EFEFEF',
                        borderRadius: 18,
                      }}>
                      <Image
                        source={require('../asset/images/color/spin.png')}
                        style={{ height: 80, width: 100, flex: 1 }}
                      />
                    </View>
                    <Text
                      style={{
                        fontSize: 12,
                        fontWeight: 'bold',
                        textAlign: 'center',
                        color: '#E91E63',
                      }}>
                      Spin
                    </Text>
                  </TouchableOpacity>
                </View>
                <View>
                  <TouchableOpacity onPress={() => this.props.navigation.navigate('contact')}>
                    <View
                      style={{
                        width: 100,
                        height: 100,
                        borderWidth: 1,
                        borderColor: '#EFEFEF',
                        borderRadius: 18,
                      }}>
                      <Image
                        source={require('../asset/images/color/contact.png')}
                        style={{ height: 80, width: 100, flex: 1 }}
                      />
                    </View>
                    <Text
                      style={{
                        fontSize: 12,
                        fontWeight: 'bold',
                        textAlign: 'center',
                        color: '#E91E63',
                      }}>
                      Contact
                    </Text>
                  </TouchableOpacity>
                </View>
              </View>
            </View>

          </ScrollView>
     }
        </View>
      </Container>
    );
  }
}


export default withNavigation(Home);
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: { fontSize: 18, fontWeight:'bold', color: '#E91E63', alignItems: 'center', justifyContent: 'center' }
});