diff --git a/README.md b/README.md index d337628..c5ad2d0 100644 --- a/README.md +++ b/README.md @@ -93,7 +93,9 @@ import { | iconSize | number | 25 | set the icon size | | iconColor | color | #000 | set the icon color | | onChangeText | function | function | set your own logic for changing text | +| value | string | undefined | set the value for search box's text input | | searchBoxText | string | What are you looking for? | set the search box's text | +| searchBoxTextStyle | style | default | set your own style for text input's style | | searchBoxOnPress | function | function | set your own logic when tapping the search box itself | | searchBoxWidth | number | 95% | change the search box's width | | searchBoxBorderRadius | number | 8 | change the search box's border radius | diff --git a/example/App.js b/example/App.js index 3a75353..616b183 100644 --- a/example/App.js +++ b/example/App.js @@ -1,16 +1,20 @@ import React from "react"; import { View, StatusBar } from "react-native"; -import { - HeaderSearchBar, - HeaderClassicSearchBar -} from "react-native-header-search-bar"; +import { SafeAreaProvider } from "react-native-safe-area-context"; +// import { +// HeaderSearchBar, +// HeaderClassicSearchBar +// } from "react-native-header-search-bar"; +import HeaderClassicSearchBar from "./lib/src/HeaderClassicSearchBar/HeaderClassicSearchBar"; const App = () => { return ( - - - console.log(text)} /> - + + + + console.log(text)} /> + + ); }; diff --git a/example/package.json b/example/package.json index 1921a91..ebfadb6 100644 --- a/example/package.json +++ b/example/package.json @@ -3,7 +3,7 @@ "version": "0.0.1", "private": true, "scripts": { - "android": "react-native run-android", + "android": "adb reverse tcp:8081 tcp:8081 && npx jetify && 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 && react-native start --reset-cache", "ios": "react-native run-ios", "start": "react-native start", "test": "jest", @@ -15,7 +15,7 @@ "react-native": "0.61.2", "react-native-androw": "0.0.33", "react-native-dynamic-vector-icons": "^0.2.1", - "react-native-header-search-bar": "0.1.3", + "react-native-header-search-bar": "0.1.7", "react-native-material-ripple": "^0.9.1", "react-native-safe-area-context": "^0.6.1", "react-native-vector-icons": "^6.6.0" diff --git a/lib/src/components/SearchBox/SearchBox.js b/lib/src/components/SearchBox/SearchBox.js index 1bc46a2..0aa9f14 100644 --- a/lib/src/components/SearchBox/SearchBox.js +++ b/lib/src/components/SearchBox/SearchBox.js @@ -6,6 +6,7 @@ import styles, { searchBoxContainer } from "./SearchBox.style"; const SearchBox = props => { const { + value, onFocus, iconName, iconType, @@ -17,6 +18,7 @@ const SearchBox = props => { searchBoxWidth, searchBoxOnPress, disableTextInput, + searchBoxTextStyle, searchBoxBorderRadius, searchBoxBackgroundColor } = props; @@ -26,10 +28,11 @@ const SearchBox = props => { return {searchBoxText}; return ( ); }; diff --git a/lib/src/components/SearchBox/SearchBox.style.js b/lib/src/components/SearchBox/SearchBox.style.js index fe0125f..360b60c 100644 --- a/lib/src/components/SearchBox/SearchBox.style.js +++ b/lib/src/components/SearchBox/SearchBox.style.js @@ -8,7 +8,9 @@ export function searchBoxContainer( return { left: 8, padding: 6, + alignItems: "center", width: searchBoxWidth, + justifyContent: "center", height: isAndroid ? 30 : null, borderRadius: searchBoxBorderRadius, backgroundColor: searchBoxBackgroundColor @@ -23,7 +25,9 @@ export default { searchBoxTextStyle: { left: 3, width: "85%", - fontSize: 12, - color: "black" + fontSize: 13, + color: "#000", + height: isAndroid ? 50 : null, + backgroundColor: "transparent" } };