add outlets

view/Outlets.js

@@ -107,7 +107,7 @@ class Outlets extends React.Component {
                 }
                 dataOutlets[i]['full_address'] = address;
 
-                console.log("INI YAA: " + JSON.stringify(dataOutlets));
+                // console.log("INI YAA: " + JSON.stringify(dataOutlets));
             }
 
             this.setState({
@@ -143,7 +143,7 @@ class Outlets extends React.Component {
                 }
             }
 
-            console.log("ISI DATANYA : " + JSON.stringify(data_city))
+            // console.log("ISI DATANYA : " + JSON.stringify(data_city))
 
             this.setState({
                 data_outlet: data_city
@@ -173,9 +173,9 @@ class Outlets extends React.Component {
                 data_name: outletName
             })
 
-            console.log("INI ADALAH RESPON :  + " + JSON.stringify(res))
+            // console.log("INI ADALAH RESPON :  + " + JSON.stringify(res))
 
-            console.log("INI DATANYA NAME : " + outletName)
+            // console.log("INI DATANYA NAME : " + outletName)
         }).catch(error => {
             const { navigation } = this.props
             let response = error.response.data
@@ -226,50 +226,52 @@ class Outlets extends React.Component {
     RenderItem = ({ item }) => {
         return (
 
-            <View style={{ flexDirection: 'row', flex: 6 }}>
+            <View style={{ flexDirection: 'row', flex: 1,marginRight:10,marginLeft:10,marginBottom:10}}>
+                <View style={styles.content_list}>
                     <View style={styles.list_addrees}>
-                    <Text style={{ fontFamily: 'Gotham-Black', color: '#ccb46c', fontSize: 18, margin: 5 }}>{item.name}</Text>
-                    <Text style={{ fontFamily: 'Gotham-Light', color: '#b1b1b2', fontSize: 12, margin: 5 }}>{item.full_address}</Text>
-                    <Text style={{ fontFamily: 'Gotham-Light', margin: 5, color: '#aeaead' }}>
+                        <Text style={{ fontFamily: 'Gotham-Black', color: '#ccb46c', fontSize: 18,margin:1 }}>{item.name}</Text>
+                        <Text style={{ flexWrap: 'wrap', fontFamily: 'Gotham-Light', color: '#b1b1b2' }}>{item.full_address}</Text>
+                        <Text style={{ fontFamily: 'Gotham-Light', color: '#aeaead' }}>
                             {item.distance} KM
                     </Text>
                     </View>
-                <View style={{flex:4,flexDirection:'row'}}>
-                    <View style={{ flex: 2, top: 20 }}>
+                    <View style={{ flex: 2, flexDirection: 'row' }}>
+                        <View style={{margin:5}}>
                             <TouchableOpacity onPress={() => { Linking.openURL('tel:' + item.phone) }}>
                                 <Icon
                                     name='ios-call'
                                     type='ionicon'
                                     color='grey'
-                                size={30}
+                                    size={38}
                                 />
                             </TouchableOpacity>
                         </View>
-                    <View style={{ flex: 2, top: 20 }}>
+                        <View style={{margin:5}}>
                             <TouchableOpacity onPress={() => Linking.openURL('https://www.google.com/maps/dir/?api=1&destination=' + item.lat + ' ' + item.long)}>
                                 <Icon
                                     name='ios-navigate'
                                     type='ionicon'
                                     color='grey'
-                                size={30}
+                                    size={38}
                                 />
                             </TouchableOpacity>
                         </View>
                     </View>
                 </View>
+            </View>
         );
     }
     render() {
 
         return (
             <View style={styles.container}>
-                <Spinner
+                {/* <Spinner
                     visible={this.state.spinner}
                     textContent={'Loading...'}
                     textStyle={styles.spinnerTextStyle}
-                />
+                /> */}
                 <View style={{ flex: 1 }}>
-                    <MapView style={{ flex: 1 }}
+                    <MapView style={{ flex: 1 ,marginRight:10,marginLeft:10}}
                         region={{
                             latitude: this.state.my_lat,
                             longitude: this.state.my_long,
@@ -292,18 +294,23 @@ class Outlets extends React.Component {
 
                     </MapView>
                 </View>
-                <View style={{ height: 50, flexDirection: 'row' }}>
+                <View style={{height:50,flexDirection:'row'}}>
                 <View style={{ flex: 1 }}></View>
-                    <View style={{ flex: 1 }}>
+                <View style={{flex:1}}>
                 <RNPickerSelect
-                            placeholder={{ label: 'Select Area', value: null }}
+                        placeholder={{ label: 'Select Area', value: null}}
                         onValueChange={(label) => this.filterData(label)}
                         items={this.state.data_outlet}
                     />
                 </View>
-
                 </View>
                
+                {/* <View style={{ height:50, flex: 1, flexDirection: 'row' }}>
+                   
+                    <View style={{flex:1}}>
+                   
+                    </View>
+                </View> */}
                 <View style={styles.body}>
                     <FlatList
                         data={_.orderBy(this.state.dataOutlets, ['distance'], ['asc'])}
@@ -325,6 +332,7 @@ const styles = StyleSheet.create({
     container: {
         flex: 1,
         backgroundColor: 'white',
+
     },
     header: {
 
@@ -336,13 +344,16 @@ const styles = StyleSheet.create({
     },
     list_addrees: {
         flex: 6,
-        margin: 20,
     },
 
     searchbar: {
         flex: 1,
         justifyContent: 'center',
         margin: 10,
+    },
+    content_list:{
+        flex:1,
+        flexDirection:'row',
     }
 })