@@ -29,9 +29,12 @@ A simple search bar component for React Native.
29
29
30
30
[ ![ NPM] ( https://nodei.co/npm/react-native-input-search-bar.png?downloads=true&downloadRank=true&stars=true )] ( https://nodei.co/npm/react-native-input-search-bar/ )
31
31
32
- - 1.Run ` npm i react-native-input-search-bar --save `
33
- - or ` yarn add react-native-input-search-bar `
32
+ - 1.Run ` npm i react-native-svg react-native- input-search-bar --save `
33
+ - or ` yarn add react-native-svg react-native- input-search-bar `
34
34
- 2.` import ReactNativeInputSearchBar from 'react-native-input-search-bar' `
35
+ - 3 . Run ` npx pod-install ` if you are using iOS, and ` react-native link ` if you are using Android. (this step is for ` react-native-svg ` )
36
+
37
+ ** Notes:** You need to install ` react-native-svg ` first, because this component depends on it to render the search icon.
35
38
36
39
## Getting Started
37
40
@@ -61,11 +64,11 @@ Inside your component's render method, use ReactNativeInputSearchBar:
61
64
62
65
``` javascript
63
66
import ReactNativeInputSearchBar from ' react-native-input-search-bar'
64
- import React , { useState } from ' react'
67
+ import { useState } from ' react'
65
68
66
69
const SearchBar = () => {
67
- const [query , setQuery ] = useState < string > defQuery
68
- const [activeSearch , setActiveSearch ] = useState < boolean > false
70
+ const [query , setQuery ] = useState< string> ( ' ' )
71
+ const [activeSearch , setActiveSearch ] = useState< boolean> ( false )
69
72
70
73
const onSubmitSearch = (val : string ) => {
71
74
setQuery (val)
@@ -82,7 +85,7 @@ const SearchBar = () => {
82
85
buttonTextStyle= {{}}
83
86
searchToolContainerStyle= {{ height: 40 }}
84
87
inputContainerStyle= {{
85
- backgroundColor: theme . colors . white ,
88
+ backgroundColor: ' #ffffff ' ,
86
89
borderWidth: 0.3 ,
87
90
borderRadius: 20
88
91
}}
0 commit comments