Skip to content

Commit 1e100be

Browse files
gurbelagurbela
committed
Initial commit
0 parents  commit 1e100be

13 files changed

+432
-0
lines changed

‎.eslintrc.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = {
2+
root: true,
3+
extends: '@react-native-community',
4+
parser: '@typescript-eslint/parser',
5+
plugins: ['@typescript-eslint'],
6+
};

‎.gitignore‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
# OSX
2+
#
3+
.DS_Store
4+
5+
# node.js
6+
#
7+
node_modules/
8+
npm-debug.log
9+
yarn-error.log
10+
11+
# Xcode
12+
#
13+
build/
14+
*.pbxuser
15+
!default.pbxuser
16+
*.mode1v3
17+
!default.mode1v3
18+
*.mode2v3
19+
!default.mode2v3
20+
*.perspectivev3
21+
!default.perspectivev3
22+
xcuserdata
23+
*.xccheckout
24+
*.moved-aside
25+
DerivedData
26+
*.hmap
27+
*.ipa
28+
*.xcuserstate
29+
project.xcworkspace
30+
31+
# Android/IntelliJ
32+
#
33+
build/
34+
.idea
35+
.gradle
36+
local.properties
37+
*.iml
38+
39+
# BUCK
40+
buck-out/
41+
\.buckd/
42+
*.keystore

‎.prettierrc.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = {
2+
bracketSpacing: false,
3+
jsxBracketSameLine: true,
4+
singleQuote: true,
5+
trailingComma: 'all',
6+
};

‎LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2020 Levan Gurbeleishvili
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
# react-native-actionsheet-cstm
2+
3+
## Getting started
4+
5+
`$ npm install react-native-actionsheet-cstm --save`
6+
7+
## Demo
8+
9+
<p align="center">
10+
<img src="https://github.com/gurbela/react-native-actionsheet-cstm/blob/master/image/Simulator Screen Shot - iPhone1.png"
11+
height="380" width="200"
12+
/>
13+
<img src="https://github.com/gurbela/react-native-actionsheet-cstm/blob/master/image/Screenshot_1.png"
14+
height="380" width="200"
15+
/>
16+
<img src="https://github.com/gurbela/react-native-actionsheet-cstm/blob/master/image/Simulator Screen Shot - iPhone2.png"
17+
height="380" width="200"
18+
/>
19+
<img src="https://github.com/gurbela/react-native-actionsheet-cstm/blob/master/image/Screenshot_2.png"
20+
height="380" width="200"
21+
/>
22+
</p>
23+
24+
## A basic Setup
25+
26+
```javascript
27+
import React, {useState} from 'react';
28+
import {SafeAreaView, Text, ScrollView, TouchableOpacity} from 'react-native';
29+
30+
import {ActionSheet} from 'react-native-actionsheet-cstm';
31+
32+
const App = () => {
33+
const [showActionSheed, setShowActionSheet] = useState < boolean > false;
34+
35+
const onShowActionSheet = () => {
36+
setShowActionSheet(true);
37+
};
38+
const onCloseActionSheet = () => {
39+
setShowActionSheet(false);
40+
};
41+
42+
return (
43+
<SafeAreaView style={{flex: 1}}>
44+
<Text style={{textAlign: 'center'}}>Components</Text>
45+
<ScrollView style={{flex: 1, marginTop: 50}}>
46+
<TouchableOpacity
47+
style={{
48+
flex: 1,
49+
height: 40,
50+
justifyContent: 'center',
51+
alignItems: 'center',
52+
backgroundColor: '#3880ff',
53+
}}
54+
onPress={onShowActionSheet}>
55+
<Text style={{color: '#fff'}}>Show Action Sheet</Text>
56+
</TouchableOpacity>
57+
58+
<ActionSheet
59+
visible={showActionSheed}
60+
onClose={onCloseActionSheet}
61+
actionItems={[
62+
{
63+
text: 'Save',
64+
onPress: () => {
65+
console.log('Save');
66+
},
67+
},
68+
{
69+
text: 'Update',
70+
onPress: () => {
71+
console.log('Update');
72+
},
73+
},
74+
{
75+
text: 'Delete',
76+
textStyle: [{color: 'red'}],
77+
onPress: () => {
78+
console.log('Delete');
79+
},
80+
},
81+
]}
82+
/>
83+
</ScrollView>
84+
</SafeAreaView>
85+
);
86+
};
87+
88+
export default App;
89+
```
90+
91+
## Options
92+
93+
## ActionSheetProps
94+
95+
| Name | Type | Default | Description |
96+
| -------------------- | -------------------- | -------------------- | ---------------------------------------------------------------------------------------------------------- |
97+
| visible | boolean | false | Show the Action sheet |
98+
| onClose | function | null | Trigger a function asking to close the Action sheet. |
99+
| actionItems | Array<ActionItem> | null | (array of ActionItem) - a list of button |
100+
| onShow? | function | null | The onShow prop allows passing a function that will be called once the Action sheet has been shown. |
101+
| onDismiss? | function | null | The onDismiss prop allows passing a function that will be called once the Action sheet has been dismissed. |
102+
| backdropStyle? | StyleProp<ViewStyle> | null | Back drop style |
103+
| containerStyle? | StyleProp<ViewStyle> | null | Container style |
104+
| titleContainerStyle? | StyleProp<ViewStyle> | null | Container title style |
105+
| title? | string | 'Action Sheet Title' | Action sheet title |
106+
| titleTextStyle? | StyleProp<ViewStyle> | null | Action sheet title style |
107+
| cancelButtonStyle? | StyleProp<ViewStyle> | null | Action sheet cancel button style |
108+
| cancelText? | string | 'Cancel' | Action sheet cancel button title |
109+
| cancelTextStyle? | StyleProp<ViewStyle> | null | Action sheet cancel button text style |
110+
| hiddeCancel | boolean | false | Hidde the Action sheet Cancel button |
111+
112+
## ActionItem
113+
114+
| Name | Type | Default | Description |
115+
| ---------- | -------------------- | ------- | ------------- |
116+
| text | string | null | button title |
117+
| onPress | function | null | button action |
118+
| textStyle? | StyleProp<ViewStyle> | null | button style |

‎image/Screenshot_1.png‎

57 KB
Loading

‎image/Screenshot_2.png‎

48.5 KB
Loading

‎image/Simulator Screen Shot - iPhone1.png‎

62.9 KB
Loading

‎image/Simulator Screen Shot - iPhone2.png‎

58.7 KB
Loading

‎package.json‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
{
2+
"name": "react-native-actionsheet-cstm",
3+
"version": "0.0.1",
4+
"description": "Custom ActionSheet for React Native",
5+
"main": "/src/index.tsx",
6+
"scripts": {
7+
"test": "echo \"Error: no test specified\" && exit 1"
8+
},
9+
"repository": {
10+
"type": "git",
11+
"url": "git+https://github.com/gurbela/react-native-actionsheet-cstm.git",
12+
"baseUrl": "https://github.com/gurbela/react-native-actionsheet-cstm"
13+
},
14+
"keywords": [
15+
"react-native",
16+
"action-sheet",
17+
"action-sheet-custom",
18+
"react-native-actionsheet-custom",
19+
"react-native-actionsheet-cstm"
20+
],
21+
"author": "Levan Gurbeleishvili <gurbela@gmail.com>",
22+
"license": "MIT",
23+
"bugs": {
24+
"url": "https://github.com/gurbela/react-native-actionsheet-cstm/issues"
25+
},
26+
"homepage": "https://github.com/gurbela/react-native-actionsheet-cstm",
27+
"readmeFilename": "README.md",
28+
"peerDependencies": {
29+
"react": "^16.8.1",
30+
"react-native": ">=0.59.0-rc.0 <1.0.x"
31+
},
32+
"devDependencies": {
33+
"@babel/core": "^7.6.2",
34+
"@babel/runtime": "^7.6.2",
35+
"@react-native-community/eslint-config": "^0.0.5",
36+
"@types/jest": "^24.0.24",
37+
"@types/react-native": "^0.60.25",
38+
"@types/react-test-renderer": "16.9.1",
39+
"@typescript-eslint/eslint-plugin": "^2.12.0",
40+
"@typescript-eslint/parser": "^2.12.0",
41+
"babel-jest": "^24.9.0",
42+
"eslint": "^6.5.1",
43+
"jest": "^24.9.0",
44+
"metro-react-native-babel-preset": "^0.56.0",
45+
"react": "^16.8.3",
46+
"react-native": "^0.61.5",
47+
"react-test-renderer": "16.9.0",
48+
"typescript": "^3.7.3"
49+
}
50+
}

0 commit comments

Comments
 (0)