update

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, TouchableOpacity } from 'react-native'
 import { connect } from 'react-redux'
 // Add Actions - replace 'Your' with whatever your reducer is called :)
 // import YourActions from '../Redux/YourRedux'
@@ -14,19 +14,31 @@ 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 +46,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>
           )}