Skip to content

Commit 65bccf6

Browse files
williamniemiecwilliamniemiec
committed
Init
0 parents  commit 65bccf6

File tree

18 files changed

+383
-0
lines changed

18 files changed

+383
-0
lines changed

‎.github/workflows/macos.yml

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
name: MacOS
2+
3+
on:
4+
push:
5+
branches: [ master ]
6+
pull_request:
7+
branches: [ master ]
8+
9+
jobs:
10+
build:
11+
12+
runs-on: macos-latest
13+
14+
steps:
15+
- uses: actions/checkout@v2
16+
- name: Use Node.js
17+
uses: actions/setup-node@v2
18+
- run: npm install

‎.github/workflows/ubuntu.yml

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
name: Ubuntu
2+
3+
on:
4+
push:
5+
branches: [ master ]
6+
pull_request:
7+
branches: [ master ]
8+
9+
jobs:
10+
build:
11+
12+
runs-on: ubuntu-latest
13+
14+
steps:
15+
- uses: actions/checkout@v2
16+
- name: Use Node.js
17+
uses: actions/setup-node@v2
18+
- run: npm install

‎.github/workflows/windows.yml

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
name: Windows
2+
3+
on:
4+
push:
5+
branches: [ master ]
6+
pull_request:
7+
branches: [ master ]
8+
9+
jobs:
10+
build:
11+
12+
runs-on: windows-latest
13+
14+
steps:
15+
- uses: actions/checkout@v2
16+
- name: Use Node.js
17+
uses: actions/setup-node@v2
18+
- run: npm install

‎.gitignore

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
lerna-debug.log*
8+
.pnpm-debug.log*
9+
10+
# Diagnostic reports (https://nodejs.org/api/report.html)
11+
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
12+
13+
# Runtime data
14+
pids
15+
*.pid
16+
*.seed
17+
*.pid.lock
18+
19+
# Directory for instrumented libs generated by jscoverage/JSCover
20+
lib-cov
21+
22+
# Coverage directory used by tools like istanbul
23+
coverage
24+
*.lcov
25+
26+
# nyc test coverage
27+
.nyc_output
28+
29+
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
30+
.grunt
31+
32+
# Bower dependency directory (https://bower.io/)
33+
bower_components
34+
35+
# node-waf configuration
36+
.lock-wscript
37+
38+
# Compiled binary addons (https://nodejs.org/api/addons.html)
39+
build/Release
40+
41+
# Dependency directories
42+
node_modules/
43+
jspm_packages/
44+
45+
# Snowpack dependency directory (https://snowpack.dev/)
46+
web_modules/
47+
48+
# TypeScript cache
49+
*.tsbuildinfo
50+
51+
# Optional npm cache directory
52+
.npm
53+
54+
# Optional eslint cache
55+
.eslintcache
56+
57+
# Microbundle cache
58+
.rpt2_cache/
59+
.rts2_cache_cjs/
60+
.rts2_cache_es/
61+
.rts2_cache_umd/
62+
63+
# Optional REPL history
64+
.node_repl_history
65+
66+
# Output of 'npm pack'
67+
*.tgz
68+
69+
# Yarn Integrity file
70+
.yarn-integrity
71+
72+
# dotenv environment variables file
73+
.env
74+
.env.test
75+
.env.production
76+
77+
# parcel-bundler cache (https://parceljs.org/)
78+
.cache
79+
.parcel-cache
80+
81+
# Next.js build output
82+
.next
83+
out
84+
85+
# Nuxt.js build / generate output
86+
.nuxt
87+
dist
88+
89+
# Gatsby files
90+
.cache/
91+
# Comment in the public line in if your project uses Gatsby and not Next.js
92+
# https://nextjs.org/blog/next-9-1#public-directory-support
93+
# public
94+
95+
# vuepress build output
96+
.vuepress/dist
97+
98+
# Serverless directories
99+
.serverless/
100+
101+
# FuseBox cache
102+
.fusebox/
103+
104+
# DynamoDB Local files
105+
.dynamodb/
106+
107+
# TernJS port file
108+
.tern-port
109+
110+
# Stores VSCode versions used for testing VSCode extensions
111+
.vscode-test
112+
113+
# yarn v2
114+
.yarn/cache
115+
.yarn/unplugged
116+
.yarn/build-state.yml
117+
.yarn/install-state.gz
118+
.pnp.*

‎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) 2021 William Niemiec
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: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
![](https://github.com/wniemiec-components-reactnative/action-button/blob/master/docs/img/logo/logo.jpg)
2+
3+
<h1 align='center'>Action button</h1>
4+
<p align='center'>Simple button.</p>
5+
<p align="center">
6+
<a href="https://github.com/wniemiec-components-reactnative/action-button/actions/workflows/windows.yml"><img src="https://github.com/wniemiec-components-reactnative/action-button/actions/workflows/windows.yml/badge.svg" alt=""></a>
7+
<a href="https://github.com/wniemiec-components-reactnative/action-button/actions/workflows/macos.yml"><img src="https://github.com/wniemiec-components-reactnative/action-button/actions/workflows/macos.yml/badge.svg" alt=""></a>
8+
<a href="https://github.com/wniemiec-components-reactnative/action-button/actions/workflows/ubuntu.yml"><img src="https://github.com/wniemiec-components-reactnative/action-button/actions/workflows/ubuntu.yml/badge.svg" alt=""></a>
9+
<a href="https://reactnative.dev/"><img src="https://img.shields.io/badge/React Native-0.60+-D0008F.svg" alt="React Native compatibility"></a>
10+
<a href="https://github.com/wniemiec-components-reactnative/action-button/releases"><img src="https://img.shields.io/github/v/release/wniemiec-components-reactnative/action-button" alt="Release"></a>
11+
<a href="https://github.com/wniemiec-components-reactnative/action-button/blob/master/LICENSE"><img src="https://img.shields.io/github/license/wniemiec-components-reactnative/action-button" alt="License"></a>
12+
</p>
13+
<hr />
14+
15+
## ❇ Introduction
16+
React Native component that allows you to press a button to perform a certain action, in addition to allowing the programmer to choose the button style according to your preference.
17+
18+
## 🖼 Gallery
19+
20+
<div style="display: flex; flex-direction: row; justify-content: center; align-items: center; flex-wrap: wrap"
21+
<img height=400 src="https://raw.githubusercontent.com/wniemiec-components-reactnative/action-button/master/docs/img/screens/img1.png" alt="image 1" />
22+
23+
<img height=400 src="https://raw.githubusercontent.com/wniemiec-components-reactnative/action-button/master/docs/img/screens/img2.png" alt="image 2" />
24+
25+
<img height=400 src="https://raw.githubusercontent.com/wniemiec-components-reactnative/action-button/master/docs/img/screens/img3.png" alt="image 3" />
26+
27+
<img height=400 src="https://raw.githubusercontent.com/wniemiec-components-reactnative/action-button/master/docs/img/screens/img4.png" alt="image 4" />
28+
29+
<img height=400 src="https://raw.githubusercontent.com/wniemiec-components-reactnative/action-button/master/docs/img/screens/img5.png" alt="image 5" />
30+
31+
<img height=400 src="https://raw.githubusercontent.com/wniemiec-components-reactnative/action-button/master/docs/img/screens/img6.png" alt="image 6" />
32+
33+
<img height=400 src="https://raw.githubusercontent.com/wniemiec-components-reactnative/action-button/master/docs/img/screens/img7.png" alt="image 7" />
34+
</div>
35+
36+
## ❓ How to use
37+
1. Install the component
38+
```
39+
$ npm install --save @wniemiec-component-reactnative/action-button
40+
```
41+
42+
2. Import the component
43+
```
44+
import ActionButton from '@wniemiec-component-reactnative/action-button';
45+
```
46+
47+
3. Use it
48+
```
49+
[...]
50+
51+
import React from 'react';
52+
53+
[...]
54+
55+
<ActionButton
56+
title="Action Button"
57+
onPress={() => alert('Hey! You clicked on me!')}
58+
/>
59+
[...]
60+
```
61+
62+
## 📖 Documentation
63+
| Property |Type|Description|Default|
64+
|----------------|-------------------------------|-----------------------------|--------|
65+
|title |`string`|Button label | - |
66+
|onPress |`function(void): void`|Function that is called when the button is pressed| - |
67+
|bgColor |`string`|Background color (in hexadecimal) |`"#233287"`|
68+
|fgColor |`string`|Foreground color (in hexadecimal) |`"#FFFFFF"`|
69+
|full |`boolean`|Indicates whether the width should be 100% |`false`|
70+
71+
## 🚩 Changelog
72+
Details about each version are documented in the [releases section](https://github.com/wniemiec-components-reactnative/action-button/releases).
73+
74+
## 🤝 Contribute!
75+
See the documentation on how you can contribute to the project [here](https://github.com/wniemiec-components-reactnative/action-button/blob/master/CONTRIBUTING.md).
76+
77+
## 📁 Files
78+
79+
### /
80+
| Name |Type|Description|
81+
|----------------|-------------------------------|-----------------------------|
82+
|docs |`Directory`|Documentation files|
83+
|src |`Directory`| Source files|

‎docs/img/screens/img1.png

28.6 KB
Loading

‎docs/img/screens/img2.png

27.2 KB
Loading

‎docs/img/screens/img3.png

39.1 KB
Loading

‎docs/img/screens/img4.png

28.1 KB
Loading

‎docs/img/screens/img5.png

26.7 KB
Loading

‎docs/img/screens/img6.png

29.2 KB
Loading

‎docs/img/screens/img7.png

27.8 KB
Loading

‎index.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import ActionButton from './src/ActionButton';
2+
3+
export default ActionButton;

‎package-lock.json

Lines changed: 5 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"name": "@wniemiec-component-reactnative/action-button",
3+
"version": "1.0.0",
4+
"description": "Simple button.",
5+
"main": "index.js",
6+
"repository": {
7+
"type": "git",
8+
"url": "git+https://github.com/wniemiec-components-reactnative/action-button.git"
9+
},
10+
"keywords": [
11+
"wniemiec",
12+
"component",
13+
"reactnative",
14+
"action-button",
15+
"action",
16+
"button"
17+
],
18+
"author": "William Niemiec <[email protected]> (https://www.linkedin.com/in/williamniemiec)",
19+
"license": "MIT",
20+
"bugs": {
21+
"url": "https://github.com/wniemiec-components-reactnative/action-button/issues"
22+
},
23+
"homepage": "https://github.com/wniemiec-components-reactnative/action-button#readme"
24+
}

‎src/ActionButton/index.js

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
/**
2+
* Copyright (c) William Niemiec.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*
7+
* @flow
8+
* @format
9+
*/
10+
11+
import React from 'react';
12+
import { TouchableOpacity, Text } from 'react-native';
13+
import styles from './styles';
14+
15+
/**
16+
* Simple button.
17+
*
18+
* @param {string} title: Button label
19+
* @param {function(void): void} onPress: Function that is called when the
20+
* button is pressed
21+
* @param {string} [bgColor='#233287'] Background color (in hexadecimal)
22+
* @param {string} [fgColor='#FFFFFF'] Foreground color (in hexadecimal)
23+
* @param {boolean} [full=false] Indicates whether the width should be 100%
24+
*/
25+
export default function ActionButton({
26+
title,
27+
onPress,
28+
bgColor='#233287',
29+
fgColor='#FFFFFF',
30+
full=true
31+
}) {
32+
return (
33+
<TouchableOpacity style={buildButtonStyle(bgColor, full)} onPress={onPress}>
34+
<Text style={buildButtonTextStyle(fgColor)}>
35+
{title}
36+
</Text>
37+
</TouchableOpacity>
38+
);
39+
}
40+
41+
function buildButtonStyle(bgColor, full) {
42+
return [
43+
styles.btn,
44+
{ backgroundColor: bgColor },
45+
full ? { width: '100%' } : null
46+
];
47+
}
48+
49+
function buildButtonTextStyle(fgColor) {
50+
return [
51+
styles.title,
52+
{ color: fgColor }
53+
];
54+
}

‎src/ActionButton/styles.js

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { StyleSheet } from 'react-native';
2+
3+
export default StyleSheet.create({
4+
container: {
5+
flex: 1,
6+
justifyContent: 'space-around',
7+
alignItems: 'center'
8+
},
9+
title: {
10+
fontSize: 18,
11+
fontWeight: 'bold'
12+
},
13+
btn: {
14+
justifyContent: 'center',
15+
alignItems: 'center',
16+
backgroundColor: '#e5810c',
17+
borderRadius: 10,
18+
height: 40,
19+
paddingHorizontal: 10,
20+
}
21+
});

0 commit comments

Comments
 (0)