Skip to content

Commit 668221e

Browse files
aJIEwaJIEw
committed
add TagGroup and example
1 parent 67d3c2a commit 668221e

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

73 files changed

+18414
-1
lines changed

‎.gitignore

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
# Logs
2+
logs
3+
*.log
4+
5+
# Runtime data
6+
pids
7+
*.pid
8+
*.seed
9+
10+
# Directory for instrumented libs generated by jscoverage/JSCover
11+
lib-cov
12+
13+
# Coverage directory used by tools like istanbul
14+
coverage
15+
16+
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
17+
.grunt
18+
19+
# node-waf configuration
20+
.lock-wscript
21+
22+
# Compiled binary addons (http://nodejs.org/api/addons.html)
23+
build/Release
24+
25+
# Visual Studio Code
26+
jsconfig.json
27+
.classpath
28+
.project
29+
.settings/
30+
.vscode

‎.npmignore

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
assets/
2+
example/
3+
.eslintrc.json
4+
.gitignore
5+
yarn-error.log

‎README.md

Lines changed: 95 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,96 @@
1-
# react-native-tag-group
1+
## react-native-tag-group
2+
3+
[![](https://img.shields.io/npm/v/react-native-tag-group)](https://www.npmjs.com/package/react-native-tag-group) [![](https://img.shields.io/npm/l/react-native-tag-group)](https://github.com/aJIEw/react-native-tag-group/blob/master/LICENSE)
4+
25
A simple Tag component that supports both single and multiple selection.
6+
7+
<a href="https://raw.githubusercontent.com/aJIEw/react-native-tag-group/blob/master/assets/screenshot_ios.png" target="_blank"><img src='https://github.com/aJIEw/react-native-tag-group/blob/master/assets/screenshot_ios.png' width='30%'/></a><a href="https://raw.githubusercontent.com/aJIEw/react-native-tag-group/blob/master/assets/screenshot_android.png" target="_blank"><img src='https://github.com/aJIEw/react-native-tag-group/blob/master/assets/screenshot_android.png' width='30%'/></a>
8+
9+
## Get Started
10+
11+
### Installation
12+
13+
```sh
14+
$ npm i react-native-tag-group --save
15+
```
16+
17+
### TagGroup Usage
18+
19+
```react
20+
import TagGroup from 'react-native-tag-group';
21+
22+
// ...
23+
24+
render() {
25+
return (
26+
<TagGroup
27+
ref={ref => this.tagGroup = ref}
28+
source={['One', 'Two', 'Three']}
29+
onSelectedTagChange={(selected) => { this.setState({selected}); }}
30+
/>
31+
);
32+
}
33+
```
34+
35+
### TagGroup Props
36+
37+
| Props | Type | Description |
38+
| :------------------ | :---------------- | ------------------------------------------------------------ |
39+
| style | View style | container's style |
40+
| source | array | source array, usually a string array. |
41+
| singleChoiceMode | bool | only allow select one Tag at one time. Default `false`. |
42+
| onSelectedTagChange | function | callback after Tag(s) pressed, the parameter is a string array[], or (`stringValue`, `selectedIndex`) when set `singleChoiceMode` to true. |
43+
| tintColor | string | set the border color and background color when Tag is selected. |
44+
| tagStyle/activeTagStyle | View style | set the Tag's style before and after selected. |
45+
| textStyle/activeTextStyle | Text style | set the Tag's text style before and after selected. |
46+
| touchableOpacity | bool | use TouchableOpacity instead of TouchableWithoutFeedback. |
47+
48+
### Methods
49+
50+
#### select(index)
51+
52+
Select Tag at the index, this WON'T invoke `onSelectedTagChange` callback.
53+
54+
#### unselect(index)
55+
56+
Unselect Tag at the index, this WON'T invoke `onSelectedTagChange` callback.
57+
58+
#### getSelectedIndex()
59+
60+
Get the index array of the selected Tag(s), return -1 if no Tag is selected.
61+
62+
### Tag Usage
63+
64+
`Tag` can also be used as a simple button, for example:
65+
66+
```react
67+
import {Tag} from 'react-native-tag-group';
68+
69+
// ...
70+
71+
<Tag
72+
text={'Button Text'}
73+
tagStyle={styles.buttonContainer}
74+
textStyle={styles.buttonText}
75+
onPress={this.onTagPress}
76+
touchableOpacity
77+
/>
78+
79+
// ...
80+
81+
onTagPress = () => {
82+
console.log('Hello world!')
83+
}
84+
```
85+
86+
### Tag Props
87+
88+
| Props | Type | Description |
89+
| :------------------ | :---------------- | ------------------------------------------------------------ |
90+
| tintColor | string | Tag's border color, you can also cusotomize it with `tagStyle` prop. |
91+
| tagStyle | View style | Tag style. |
92+
| textStyle | Text style | Tag's text style. |
93+
| onPress | function | callback function when Tag is pressed. |
94+
| touchableOpacity | bool | use TouchableOpacity instead of TouchableWithoutFeedback. |
95+
96+
For more information please check the [example](https://github.com/aJIEw/react-native-tag-group/tree/master/example).

‎assets/screenshot_android.png

56 KB
Loading

‎assets/screenshot_ios.png

22.6 KB
Loading

‎example/.buckconfig

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
2+
[android]
3+
target = Google Inc.:Google APIs:23
4+
5+
[maven_repositories]
6+
central = https://repo1.maven.org/maven2

‎example/.eslintrc.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
module.exports = {
2+
root: true,
3+
extends: '@react-native-community',
4+
};

‎example/.flowconfig

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
[ignore]
2+
; We fork some components by platform
3+
.*/*[.]android.js
4+
5+
; Ignore "BUCK" generated dirs
6+
<PROJECT_ROOT>/\.buckd/
7+
8+
; Ignore polyfills
9+
node_modules/react-native/Libraries/polyfills/.*
10+
11+
; These should not be required directly
12+
; require from fbjs/lib instead: require('fbjs/lib/warning')
13+
node_modules/warning/.*
14+
15+
; Flow doesn't support platforms
16+
.*/Libraries/Utilities/LoadingView.js
17+
18+
[untyped]
19+
.*/node_modules/@react-native-community/cli/.*/.*
20+
21+
[include]
22+
23+
[libs]
24+
node_modules/react-native/interface.js
25+
node_modules/react-native/flow/
26+
27+
[options]
28+
emoji=true
29+
30+
esproposal.optional_chaining=enable
31+
esproposal.nullish_coalescing=enable
32+
33+
module.file_ext=.js
34+
module.file_ext=.json
35+
module.file_ext=.ios.js
36+
37+
munge_underscores=true
38+
39+
module.name_mapper='^react-native/\(.*\)$' -> '<PROJECT_ROOT>/node_modules/react-native/\1'
40+
module.name_mapper='^@?[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> '<PROJECT_ROOT>/node_modules/react-native/Libraries/Image/RelativeImageStub'
41+
42+
suppress_type=$FlowIssue
43+
suppress_type=$FlowFixMe
44+
suppress_type=$FlowFixMeProps
45+
suppress_type=$FlowFixMeState
46+
47+
suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native\\(_ios\\)?_\\(oss\\|fb\\)[a-z,_]*\\)?)\\)
48+
suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native\\(_ios\\)?_\\(oss\\|fb\\)[a-z,_]*\\)?)\\)?:? #[0-9]+
49+
suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
50+
51+
[lints]
52+
sketchy-null-number=warn
53+
sketchy-null-mixed=warn
54+
sketchy-number=warn
55+
untyped-type-import=warn
56+
nonstrict-import=warn
57+
deprecated-type=warn
58+
unsafe-getters-setters=warn
59+
inexact-spread=warn
60+
unnecessary-invariant=warn
61+
signature-verification-failure=warn
62+
deprecated-utility=error
63+
64+
[strict]
65+
deprecated-type
66+
nonstrict-import
67+
sketchy-null
68+
unclear-type
69+
unsafe-getters-setters
70+
untyped-import
71+
untyped-type-import
72+
73+
[version]
74+
^0.113.0

‎example/.gitattributes

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
*.pbxproj -text

0 commit comments

Comments
 (0)