listSearch

App/Containers/ListSearchScreen.js

+import React, { Component } from 'react'
+import { ScrollView, Text, FlatList, View, StatusBar, Image } from 'react-native'
+import { connect } from 'react-redux'
+// Add Actions - replace 'Your' with whatever your reducer is called :)
+// import YourActions from '../Redux/YourRedux'
+
+// Styles
+import styles from './Styles/ListSearchScreenStyle'
+import BaseHeader from '../Components/BaseHeader'
+import { Images } from '../Themes'
+import BaseText from '../Components/BaseText'
+
+class ListSearchScreen extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      thumbnail: false
+    }
+  }
+  render() {
+    return (
+      <View style={{ flex: 1 }}>
+        <StatusBar backgroundColor={'transparent'} translucent={true} barStyle={'light-content'} />
+        <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 }} />
+            </View>
+            <View style={{ flexDirection: 'row' }}>
+              <BaseText type={"bold"} text={'Filter'} style={{ fontSize: 14, color: '#fff', marginRight: 20, textAlign: 'center' }} />
+              <Image source={Images.icon_filter} style={{ width: 20, height: 20, alignSelf: 'center' }} resizeMode={"contain"} />
+            </View>
+          </View>
+          {!this.state.thumbnail && (
+            <View style={{ flex: 1, backgroundColor: '#fff', borderTopLeftRadius: 30, borderTopRightRadius: 30, width: '100%' }}>
+
+            </View>
+          )}
+
+        </View>
+      </View>
+    )
+  }
+}
+
+const mapStateToProps = (state) => {
+  return {
+  }
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(ListSearchScreen)

App/Containers/ProfileScreen.js

 import React, { Component } from 'react'
-import { ScrollView, Text, KeyboardAvoidingView, Image, View, BackHandler, Alert } from 'react-native'
+import { ScrollView, Text, KeyboardAvoidingView, Image, View, BackHandler, Alert, StatusBar } from 'react-native'
 import { connect } from 'react-redux'
 // Add Actions - replace 'Your' with whatever your reducer is called :)
 // import YourActions from '../Redux/YourRedux'
@@ -37,6 +37,7 @@ class ProfileScreen extends Component {
   render() {
     return (
       <View style={{ flex: 1, backgroundColor: '#fff' }}>
+        <StatusBar backgroundColor={'transparent'} translucent={true} barStyle={'light-content'}/>
         <BaseHeader leftText={'Data Diri'} />
         <View style={{ backgroundColor: '#4cc9f0', borderBottomLeftRadius: 80, borderBottomRightRadius: 80, width: '100%', alignSelf: 'center' }}>
           <View style={{ justifyContent: 'center', flexDirection: 'row', marginBottom: 20 }}>

App/Containers/Styles/ListSearchScreenStyle.js

+import { StyleSheet } from 'react-native'
+import { ApplicationStyles } from '../../Themes/'
+
+export default StyleSheet.create({
+  ...ApplicationStyles.screen
+})

App/Navigation/AppNavigation.js

 import { createAppContainer } from 'react-navigation'
+import ListSearchScreen from '../Containers/ListSearchScreen'
 import RincianProfilScreen from '../Containers/RincianProfilScreen'
 import AboutAppScreen from '../Containers/AboutAppScreen'
 import TermAndPrivacyScreen from '../Containers/TermAndPrivacyScreen'
@@ -22,6 +23,7 @@ import HomeNavigation from './HomeNavigation'
 
 // Manifest of possible screens
 const PrimaryNav = createStackNavigator({
+  ListSearchScreen: { screen: ListSearchScreen },
   RincianProfilScreen: { screen: RincianProfilScreen },
   AboutAppScreen: { screen: AboutAppScreen },
   TermAndPrivacyScreen: { screen: TermAndPrivacyScreen },

App/Themes/Images.js

@@ -15,6 +15,11 @@ const images = {
   icon_daftaralamat: require('../Images/Icons/icon_daftaralamat.png'),
   icon_katasandi: require('../Images/Icons/icon_katasandi.png'),
   icon_keluar: require('../Images/Icons/icon_keluar.png'),
+  icon_listoff: require('../Images/Icons/icon_listoff.png'),
+  icon_liston: require('../Images/Icons/icon_liston.png'),
+  icon_thumbnailoff: require('../Images/Icons/icon_thumbnailoff.png'),
+  icon_thumbnailon: require('../Images/Icons/icon_thumbnailon.png'),
+  icon_filter: require('../Images/Icons/icon_filter.png'),
   closeBlack: require('../Images/Icons/icon_close_black.png'),
   categoryAksesoris: require('../Images/categoryAksesoris.png'),
   categoryCelana: require('../Images/categoryCelana.png'),