Untitled

import React from 'react';
import {
  StyleSheet,
  View,
  Text,
  TextInput,
  TouchableOpacity,
  BackHandler,
  Image,
  ScrollView
} from 'react-native';
import {
  Container,
  Header,
  Card,
  CardItem,
  Button,
  Left,
  Right,
  Body,
  Thumbnail,
  Icon,
} from 'native-base';

class Home extends React.Component {
  constructor(props) {
    super(props);
    this.state = {


    };
  }


  static navigationOptions = {
    title: 'Home',
    headerStyle: {
      backgroundColor: '#E91E63',
    },
    headerTitleStyle: {
      fontWeight: 'bold',
    },
  };


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

  render() {
    return (
      <Container>
        <View>
          <Header style={{ backgroundColor: '#E91E63' }} />
          <ScrollView>
            <View style={{ flex: 1, alignItems: 'center' }}>
              <Text style={{ fontSize: 16 }}>{this.state.curTime}</Text>
            </View>
            <CardItem>
              <View style={{ marginHorizontal: 10 }}></View>
              <Left>
                <Thumbnail
                  style={{ width: 80, height: 80 }}
                  source={require('../asset/images/man-user.png')}
                />
                <Body>
                  <Text>Nama</Text>
                  <Text note>Telp</Text>
                  <Text>Jumlah Point</Text>
                </Body>
              </Left>
            </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>
                    <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>
                    <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>
                    <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>
                    <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 Home;
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});