listSearch

App/Components/BaseText.js

@@ -10,7 +10,8 @@ export default class BaseText extends Component {
     text: PropTypes.string.isRequired,
     ellipsizeMode: PropTypes.string,
     onPress: PropTypes.func,
-    style: PropTypes.object
+    style: PropTypes.object,
+    numberOfLines: PropTypes.number,
   };
   // // Defaults for props
   static defaultProps = {
@@ -19,7 +20,7 @@ export default class BaseText extends Component {
 
   render() {
     return (
-      <Text onPress={this.props.onPress} ellipsizeMode={this.props.ellipsizeMode} style={[this.props.style, {fontFamily: this.props.type == "regular"? "Nunito-Regular" : this.props.type == "black"? "Nunito-Black": this.props.type == "italic"? "Nunito-Italic" : this.props.type == "light"? "Nunito-Light" : "Nunito-Bold"}]}>
+      <Text onPress={this.props.onPress} numberOfLines={this.props.numberOfLines} ellipsizeMode={this.props.ellipsizeMode} style={[this.props.style, {fontFamily: this.props.type == "regular"? "Nunito-Regular" : this.props.type == "black"? "Nunito-Black": this.props.type == "italic"? "Nunito-Italic" : this.props.type == "light"? "Nunito-Light" : "Nunito-Bold"}]}>
         {this.props.text}
       </Text>
     );

App/Containers/ListSearchScreen.js

 import React, { Component } from 'react'
-import { ScrollView, Text, FlatList, View, StatusBar, Image } from 'react-native'
+import { ScrollView, Text, View, StatusBar, Image, ListView, FlatList } from 'react-native'
 import { connect } from 'react-redux'
 // Add Actions - replace 'Your' with whatever your reducer is called :)
 // import YourActions from '../Redux/YourRedux'
@@ -9,24 +9,37 @@ import styles from './Styles/ListSearchScreenStyle'
 import BaseHeader from '../Components/BaseHeader'
 import { Images } from '../Themes'
 import BaseText from '../Components/BaseText'
+import { TouchableOpacity } from 'react-native-gesture-handler'
 
 class ListSearchScreen extends Component {
   constructor(props) {
     super(props)
     this.state = {
-      thumbnail: false
+      thumbnail: false,
+      dummyList: [
+        { nama: '88Rising x Guess Hooded Sweatshirt', harga: 'Rp. 2.400.000', color: 'rgba(210, 231, 243, 0.5)' },
+        { nama: 'Compass x Pot Meets Pop', harga: 'Rp. 3.700.000', color: 'rgba(158, 212, 185, 0.44)' },
+        { nama: 'Compass x Pot Meets Pop', harga: 'Rp. 3.700.000', color: 'rgba(158, 212, 185, 0.44)' },
+        { nama: '88Rising x Guess Hooded Sweatshirt', harga: 'Rp. 2.400.000', color: 'rgba(210, 231, 243, 0.5)' },
+        { nama: '88Rising x Guess Hooded Sweatshirt', harga: 'Rp. 2.400.000', color: 'rgba(210, 231, 243, 0.5)' },
+        { nama: 'Compass x Pot Meets Pop', harga: 'Rp. 3.700.000', color: 'rgba(158, 212, 185, 0.44)' },
+      ]
     }
   }
   render() {
     return (
       <View style={{ flex: 1 }}>
         <StatusBar backgroundColor={'transparent'} translucent={true} barStyle={'light-content'} />
-        <BaseHeader typeSearch={true}/>
+        <BaseHeader typeSearch={true} />
         <View style={{ backgroundColor: '#4cc9f0', flex: 1 }}>
           <View style={{ justifyContent: 'space-between', flexDirection: 'row', paddingHorizontal: 30, paddingVertical: 20 }}>
             <View style={{ flexDirection: 'row' }}>
-              <Image source={!this.state.thumbnail ? Images.icon_listoff : Images.icon_liston} style={{ width: 20, height: 20 }} />
-              <Image source={!this.state.thumbnail ? Images.icon_thumbnailon : Images.icon_thumbnailoff} style={{ width: 20, height: 20, marginLeft: 20 }} />
+              <TouchableOpacity onPress={() => this.setState({ thumbnail: true })} activeOpacity={this.state.thumbnail ? 1 : 0}>
+                <Image source={!this.state.thumbnail ? Images.icon_listoff : Images.icon_liston} style={{ width: 20, height: 20 }} />
+              </TouchableOpacity>
+              <TouchableOpacity onPress={() => this.setState({ thumbnail: false })} activeOpacity={this.state.thumbnail ? 0 : 1}>
+                <Image source={!this.state.thumbnail ? Images.icon_thumbnailon : Images.icon_thumbnailoff} style={{ width: 20, height: 20, marginLeft: 20 }} />
+              </TouchableOpacity>
             </View>
             <View style={{ flexDirection: 'row' }}>
               <BaseText type={"bold"} text={'Filter'} style={{ fontSize: 14, color: '#fff', marginRight: 20, textAlign: 'center' }} />
@@ -34,8 +47,43 @@ class ListSearchScreen extends Component {
             </View>
           </View>
           {!this.state.thumbnail && (
-            <View style={{ flex: 1, backgroundColor: '#fff', borderTopLeftRadius: 30, borderTopRightRadius: 30, width: '100%' }}>
-
+            <View style={{ flex: 1, backgroundColor: '#fff', borderTopLeftRadius: 30, borderTopRightRadius: 30, width: '100%', padding: 20 }}>
+              <FlatList
+                showsVerticalScrollIndicator={false}
+                data={this.state.dummyList}
+                renderItem={({ item }) => (
+                  <View style={{ flex: 1, flexDirection: 'column', margin: 10, backgroundColor: item.color, borderRadius: 15 }}>
+                    <View style={{ width: 148, height: 270, justifyContent: 'flex-end', padding: 20 }}>
+                      <BaseText type={"regular"} text={item.nama} style={{ fontSize: 14, color: 'black', textAlign: 'left', }} ellipsizeMode={"tail"} numberOfLines={2} />
+                      <BaseText type={"regular"} text={item.harga} style={{ fontSize: 10, color: 'black', textAlign: 'left', marginTop: 5 }} />
+                    </View>
+                  </View>
+                )}
+                //Setting the number of column
+                numColumns={2}
+                keyExtractor={(item, index) => index.toString()}
+              />
+            </View>
+          )}
+          {this.state.thumbnail && (
+            <View style={{ flex: 1, backgroundColor: '#fff', borderTopLeftRadius: 30, borderTopRightRadius: 30, width: '100%', padding: 20 }}>
+              <FlatList
+              
+                showsVerticalScrollIndicator={false}
+                data={this.state.dummyList}
+                renderItem={({ item, index }) => (
+                  <View style={{ flex: 1, flexDirection: 'row', marginTop:index == 0? 0: 10, borderRadius: 15 }}>
+                    <View style={{ width: '40%', backgroundColor: item.color, borderTopLeftRadius: 15, borderBottomLeftRadius: 15 }}/>
+                    <View style={{ width: '60%', height: 140, justifyContent: 'flex-start', padding: 20 }}>
+                      <BaseText type={"regular"} text={item.nama} style={{ fontSize: 12, color: 'black', textAlign: 'left', }} ellipsizeMode={"tail"} numberOfLines={2} />
+                      <BaseText type={"bold"} text={item.harga} style={{ fontSize: 14, color: 'black', textAlign: 'left', marginTop: 5 }} />
+                    </View>
+                  </View>
+                )}
+                //Setting the number of column
+                numColumns={1}
+                keyExtractor={(item, index) => index.toString()}
+              />
             </View>
           )}