update header

App/Components/BaseHeader.js

 import React, { Component } from 'react'
 import PropTypes from 'prop-types';
-import { View, Text, NativeModules, Platform, TouchableOpacity, Image } from 'react-native'
+import { View, Text, NativeModules, Platform, TouchableOpacity, Image, TextInput } from 'react-native'
 import styles from './Styles/BaseHeaderStyle'
 import { Images } from '../Themes';
 import BaseText from './BaseText';
+import BaseInput from './BaseInput';
+import Ionicons from 'react-native-vector-icons/Ionicons'
+import FontAwesome from 'react-native-vector-icons/FontAwesome'
 const { StatusBarManager } = NativeModules;
 
 const STATUSBAR_HEIGHT = Platform.OS === 'ios' ? 20: StatusBarManager.HEIGHT;
@@ -13,27 +16,47 @@ export default class BaseHeader extends Component {
     leftText: PropTypes.string,
     rightText: PropTypes.string,
     onBackPress: PropTypes.func,
-    onNextPress: PropTypes.func
+    onNextPress: PropTypes.func,
+    placeholder: PropTypes.string,
+    typeSearch: PropTypes.bool
   }
   
   // Defaults for props
   static defaultProps = {
     leftText: 'Title Screen',
-    rightText: ''
+    rightText: '',
+    typeSearch: false
   }
 
   render () {
     return (
-      <View style={{alignItems: 'center', width: '100%', paddingBottom: 10, paddingHorizontal: 20, height: STATUSBAR_HEIGHT + 60, paddingTop: 50, flexDirection: 'row', justifyContent: this.props.rightText == ''? 'flex-start' : 'space-between', backgroundColor:'#4cc9f0'}}>
-        <View style={{flexDirection: 'row', alignItems: 'center'}}>
-          <TouchableOpacity onPress={this.props.onBackPress} style={{marginBottom: -3}}>
-            <Image source={Images.icon_backwhite} style={{width: 20, height: 15}} />
-          </TouchableOpacity>
-          <BaseText text={this.props.leftText} type={'bold'} style={{ marginLeft: 10, color: 'white', fontSize: 16}}/>
-        </View>
-        {this.props.rightText != '' && <TouchableOpacity onPress={this.props.onNextPress} style={{alignItems: 'center'}}>
-          <BaseText text={this.props.rightText} type={'bold'} style={{ fontSize: 16, color: 'white', textDecorationLine: 'underline',}}/>
-        </TouchableOpacity>}
+      <View>
+        {!this.props.typeSearch && <View style={{alignItems: 'center', width: '100%', paddingBottom: 10, paddingHorizontal: 20, height: STATUSBAR_HEIGHT + 60, paddingTop: 50, flexDirection: 'row', justifyContent: this.props.rightText == ''? 'flex-start' : 'space-between', backgroundColor:'#4cc9f0'}}>
+          <View style={{flexDirection: 'row', alignItems: 'center'}}>
+            <TouchableOpacity onPress={this.props.onBackPress} style={{marginBottom: -3}}>
+              <Image source={Images.icon_backwhite} style={{width: 20, height: 15}} />
+            </TouchableOpacity>
+            <BaseText text={this.props.leftText} type={'bold'} style={{ marginLeft: 10, color: 'white', fontSize: 16}}/>
+          </View>
+          {this.props.rightText != '' && <TouchableOpacity onPress={this.props.onNextPress} style={{alignItems: 'center'}}>
+            <BaseText text={this.props.rightText} type={'bold'} style={{ fontSize: 16, color: 'white', textDecorationLine: 'underline',}}/>
+          </TouchableOpacity>}
+        </View>}
+        {this.props.typeSearch && <View style={{alignItems: 'center', width: '100%', paddingBottom: 10, paddingHorizontal: 20, height: STATUSBAR_HEIGHT + 60, paddingTop: 50, flexDirection: 'row', justifyContent: 'space-between', backgroundColor:'#4cc9f0'}}>
+            <TouchableOpacity onPress={this.props.onBackPress} style={{marginBottom: -3}}>
+              <Image source={Images.icon_backwhite} style={{width: 20, height: 15}} />
+            </TouchableOpacity>
+            <View style={{backgroundColor:'white', width: '90%', borderRadius: 18, paddingVertical: 10, paddingHorizontal: 15, flexDirection: 'row', justifyContent:'space-between'}}>
+              <Ionicons name={'ios-search'} size={20} color={"rgba(75, 75, 75, 0.6)"}/>
+              <View style={{width: '80%'}}>
+                <TextInput
+                  placeholder={this.props.placeholder}
+                  style={{color: 'black', width: '100%', padding: 0, fontFamily: 'Nunito-Bold'}}
+                />
+              </View>
+              <FontAwesome name={'times-circle'} size={20} color={"rgba(75, 75, 75, 0.4)"}/>
+            </View>
+        </View>}
       </View>
     )
   }

App/Redux/AuthRedux.js

+import { createReducer, createActions } from 'reduxsauce'
+import Immutable from 'seamless-immutable'
+
+/* ------------- Types and Action Creators ------------- */
+
+const { Types, Creators } = createActions({
+  authRequest: ['data'],
+  authSuccess: ['payload'],
+  authFailure: null
+})
+
+export const AuthTypes = Types
+export default Creators
+
+/* ------------- Initial State ------------- */
+
+export const INITIAL_STATE = Immutable({
+  data: null,
+  fetching: null,
+  payload: null,
+  error: null
+})
+
+/* ------------- Selectors ------------- */
+
+export const AuthSelectors = {
+  getData: state => state.data
+}
+
+/* ------------- Reducers ------------- */
+
+// request the data from an api
+export const request = (state, { data }) =>
+  state.merge({ fetching: true, data, payload: null })
+
+// successful api lookup
+export const success = (state, action) => {
+  const { payload } = action
+  return state.merge({ fetching: false, error: null, payload })
+}
+
+// Something went wrong somewhere.
+export const failure = state =>
+  state.merge({ fetching: false, error: true, payload: null })
+
+/* ------------- Hookup Reducers To Types ------------- */
+
+export const reducer = createReducer(INITIAL_STATE, {
+  [Types.AUTH_REQUEST]: request,
+  [Types.AUTH_SUCCESS]: success,
+  [Types.AUTH_FAILURE]: failure
+})

App/Redux/index.js

@@ -8,7 +8,8 @@ import ReduxPersist from '../Config/ReduxPersist'
 export const reducers = combineReducers({
   nav: require('./NavigationRedux').reducer,
   github: require('./GithubRedux').reducer,
-  search: require('./SearchRedux').reducer
+  search: require('./SearchRedux').reducer,
+  auth: require('./AuthRedux').reducer,
 })
 
 export default () => {

App/Sagas/AuthSagas.js

+/* ***********************************************************
+* A short word on how to use this automagically generated file.
+* We're often asked in the Infinite Red Slack channel how to connect
+* to a to a third party api, so we thought we'd demonstrate - but
+* you should know you can use sagas for other flow control too.
+*
+* Other points:
+*  - You'll need to add this saga to sagas/index.js
+*  - This template uses the api declared in sagas/index.js, so
+*    you'll need to define a constant in that file.
+*************************************************************/
+
+import { call, put } from 'redux-saga/effects'
+import AuthActions from '../Redux/AuthRedux'
+// import { AuthSelectors } from '../Redux/AuthRedux'
+
+export function * getAuth (api, action) {
+  const { data } = action
+  // get current data from Store
+  // const currentData = yield select(AuthSelectors.getData)
+  // make the call to the api
+  const response = yield call(api.getauth, data)
+
+  // success?
+  if (response.ok) {
+    // You might need to change the response here - do this with a 'transform',
+    // located in ../Transforms/. Otherwise, just pass the data back from the api.
+    yield put(AuthActions.authSuccess(response.data))
+  } else {
+    yield put(AuthActions.authFailure())
+  }
+}

README.md

@@ -7,11 +7,11 @@
 
 **Create Screen:** npx ignite-cli g screen 'Nama Screen' or ignite generate screen 'Nama Screen'
 
-**Create Component** npx ignite-cli g component 'Nama Component' or ignite generate screen 'Nama Component'
+**Create Component** npx ignite-cli g component 'Nama Component' or ignite generate component 'Nama Component'
 
-**Create Redux** npx ignite-cli g redux 'Nama Redux' or ignite generate screen 'Nama Redux'
+**Create Redux** npx ignite-cli g redux 'Nama Redux' or ignite generate redux 'Nama Redux'
 
-**Create Sagas** npx ignite-cli g saga 'Nama Sagas' or ignite generate screen 'Nama Sagas'
+**Create Sagas** npx ignite-cli g saga 'Nama Sagas' or ignite generate saga 'Nama Sagas'
 
 **Nama Screen tidak perlu pakai tambahan 'Screen', sudah auto generate**
 **Berlaku juga untuk component,redux,sagas**

android/app/build.gradle

@@ -90,14 +90,14 @@ apply from: "../../node_modules/react-native/react.gradle"
  * Upload all the APKs to the Play Store and people will download
  * the correct one based on the CPU architecture of their device.
  */
-def enableSeparateBuildPerCPUArchitecture = false
-// def enableSeparateBuildPerCPUArchitecture = true
+// def enableSeparateBuildPerCPUArchitecture = false
+def enableSeparateBuildPerCPUArchitecture = true
 
 /**
  * Run Proguard to shrink the Java bytecode in release builds.
  */
-def enableProguardInReleaseBuilds = false
-// def enableProguardInReleaseBuilds = true
+// def enableProguardInReleaseBuilds = false
+def enableProguardInReleaseBuilds = true
 /**
  * The preferred build flavor of JavaScriptCore.
  *
@@ -140,18 +140,18 @@ android {
             reset()
             enable enableSeparateBuildPerCPUArchitecture
             universalApk false  // If true, also generate a universal APK
-            include "armeabi-v7a", "x86", "arm64-v8a", "x86_64"
+            include "armeabi-v7a", "x86"
             // , "arm64-v8a", "x86_64"
         }
     }
     signingConfigs {
         release {
-            // if (project.hasProperty('MYAPP_UPLOAD_STORE_FILE')) {
+            if (project.hasProperty('MYAPP_UPLOAD_STORE_FILE')) {
                 storeFile file(MYAPP_UPLOAD_STORE_FILE)
                 storePassword MYAPP_UPLOAD_STORE_PASSWORD
                 keyAlias MYAPP_UPLOAD_KEY_ALIAS
                 keyPassword MYAPP_UPLOAD_KEY_PASSWORD
-            // }
+            }
         }
     }
     buildTypes {
@@ -171,7 +171,7 @@ android {
         variant.outputs.each { output ->
             // For each separate APK per architecture, set a unique version code as described here:
             // https://developer.android.com/studio/build/configure-apk-splits.html , "arm64-v8a": 3, "x86_64": 4
-            def versionCodes = ["armeabi-v7a": 1, "x86": 2, "arm64-v8a": 3, "x86_64": 4]
+            def versionCodes = ["armeabi-v7a": 1, "x86": 2]
             def abi = output.getFilter(OutputFile.ABI)
             if (abi != null) {  // null for the universal-debug, universal-release variants
                 output.versionCodeOverride =

package.json

@@ -14,6 +14,7 @@
     "test:watch": "jest --watch",
     "updateSnapshot": "jest --updateSnapshot",
     "coverage": "jest --coverage && open coverage/lcov-report/index.html || xdg-open coverage/lcov-report/index.html",
+    "bundle:": "react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res",
     "android:build": "cd android && ./gradlew assembleRelease",
     "android:install": "cd android && ./gradlew assembleRelease && ./gradlew installRelease",
     "android:hockeyapp": "cd android && ./gradlew assembleRelease && puck -submit=auto app/build/outputs/apk/app-release.apk",
@@ -86,6 +87,7 @@
     "ignite-standard": "1.0.0",
     "ignite-vector-icons": "1.1.1",
     "jest": "^24.9.0",
+    "jetifier": "^1.6.6",
     "metro-react-native-babel-preset": "^0.57.0",
     "react-test-renderer": "16.9.0",
     "reactotron-react-native": "^4.0.2",

yarn.lock

@@ -8343,7 +8343,7 @@ jest@^24.9.0:
     import-local "^2.0.0"
     jest-cli "^24.9.0"
 
-jetifier@^1.6.2:
+jetifier@^1.6.2, jetifier@^1.6.6:
   version "1.6.6"
   resolved "https://registry.yarnpkg.com/jetifier/-/jetifier-1.6.6.tgz#fec8bff76121444c12dc38d2dad6767c421dab68"
   integrity sha512-JNAkmPeB/GS2tCRqUzRPsTOHpGDah7xP18vGJfIjZC+W2sxEHbxgJxetIjIqhjQ3yYbYNEELkM/spKLtwoOSUQ==