Skip to content

Commit dacc54d

Browse files
committed
docs: readme
1 parent d75fa5e commit dacc54d

File tree

2 files changed

+14
-10
lines changed

2 files changed

+14
-10
lines changed

README.md

+9-6
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,12 @@ A simple search bar component for React Native.
2929

3030
[![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/)
3131

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`
3434
- 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.
3538

3639
## Getting Started
3740

@@ -61,11 +64,11 @@ Inside your component's render method, use ReactNativeInputSearchBar:
6164

6265
```javascript
6366
import ReactNativeInputSearchBar from 'react-native-input-search-bar'
64-
import React, { useState } from 'react'
67+
import { useState } from 'react'
6568

6669
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)
6972

7073
const onSubmitSearch = (val: string) => {
7174
setQuery(val)
@@ -82,7 +85,7 @@ const SearchBar = () => {
8285
buttonTextStyle={{}}
8386
searchToolContainerStyle={{ height: 40 }}
8487
inputContainerStyle={{
85-
backgroundColor: theme.colors.white,
88+
backgroundColor: '#ffffff',
8689
borderWidth: 0.3,
8790
borderRadius: 20
8891
}}

package.json

+5-4
Original file line numberDiff line numberDiff line change
@@ -34,10 +34,11 @@
3434
"url": "https://github.com/funnyzak/react-native-input-search-bar/issues"
3535
},
3636
"homepage": "https://github.com/funnyzak/react-native-input-search-bar",
37+
"dependencies": {},
3738
"peerDependencies": {
38-
"react": "*",
39-
"react-native": "*",
40-
"react-native-svg": "13.6.0"
39+
"react-native-svg": "13.6.0",
40+
"react": ">=16.8.0",
41+
"react-native": ">0.60.0"
4142
},
4243
"devDependencies": {
4344
"@types/react": "^18",
@@ -58,4 +59,4 @@
5859
"branch": "main",
5960
"releaseDraft": true
6061
}
61-
}
62+
}

0 commit comments

Comments
 (0)