Untitled

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  TextInput,
  TouchableHighlight,
  Alert,
  Image,
  ListView,
  TouchableOpacity
} from 'react-native';

import  { Container, Header, Content, Form, Item, Input,
  Label, Button, Text, Icon, Toast, Card, CardItem, Body,
  Right, Left, Title, Footer, FooterTab
} from 'native-base';


export default class Search extends Component {

  constructor(props) {
    super(props);
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      dataSource: ds.cloneWithRows([
         {image: "https://bootdey.com/img/Content/avatar/avatar1.png"},
         {image: "https://bootdey.com/img/Content/avatar/avatar6.png"},
         {image: "https://bootdey.com/img/Content/avatar/avatar2.png"},
         {image: "https://bootdey.com/img/Content/avatar/avatar3.png"},
         {image: "https://bootdey.com/img/Content/avatar/avatar4.png"},
      ]),
    };
  }

  eventClickLister = (viewId) => {
   Alert.alert("Alert", "Item selected");
  }

  openDrawer(){
    this.props.navigation.openDrawer();
  }

  render() {
    return (
      <Container>
        <Header style={{backgroundColor:'#092948'}}>
          <Left style={{flex: 1}}>
            <Button transparent onPress={() => this.openDrawer()}>
              <Icon name='menu' />
            </Button>
          </Left>
          <Body style={{flex: 1}}>
            <Title>   Pencarian</Title>
          </Body>
          <Right style={{flex: 1}}/>
        </Header>

        <View>
          <Form>
            <Item last regular full style={{backgroundColor:'#fff', elevation:2}}>
              <Input placeholder={'Pencarian...'}/>
            </Item>
          </Form>
        </View>

        <Content padder>
          <ListView enableEmptySections={true}
            dataSource={this.state.dataSource}
            renderRow={(service) => {
              return (
                <View>
                  <TouchableOpacity onPress={() => this.props.navigation.navigate('Detail')}>
                    <View style={styles.box}>
                      <Image style={styles.image} source={{uri: service.image}} />
                      <View style={styles.boxContent}>
                        <Text style={styles.title}>John Cold / 160002</Text>
                        <Text style={styles.description}>Lorem ipsum dolor sit amet, elit consectetur</Text>
                      </View>
                    </View>
                  </TouchableOpacity>
                </View>
              )
            }}
          />
        </Content>
      </Container>
    );
  }
}

const styles = StyleSheet.create({
  image: {
    width: 100,
    height:100,
  },
  box: {
    padding:20,
    marginTop:5,
    marginBottom:5,
    borderRadius:5,
    backgroundColor: 'white',
    flexDirection: 'row',
    elevation:3
  },
  boxContent: {
    flex:1,
    flexDirection: 'column',
    alignItems: 'flex-start',
    marginLeft:10,
  },
  description:{
    fontSize:15,
    color: "#646464",
  },
  title:{
    fontSize:18,
    color:"#151515",
  }
});