Skip to content

Commit b2b7023

Browse files
bartgryszkobartgryszko
committed
Initial commit
0 parents  commit b2b7023

Some content is hidden

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

50 files changed

+2982
-0
lines changed

‎.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+
# Xcode
6+
#
7+
build/
8+
*.pbxuser
9+
!default.pbxuser
10+
*.mode1v3
11+
!default.mode1v3
12+
*.mode2v3
13+
!default.mode2v3
14+
*.perspectivev3
15+
!default.perspectivev3
16+
xcuserdata
17+
*.xccheckout
18+
*.moved-aside
19+
DerivedData
20+
*.hmap
21+
*.ipa
22+
*.xcuserstate
23+
project.xcworkspace
24+
25+
# Android/IntelliJ
26+
#
27+
build/
28+
.idea
29+
.gradle
30+
local.properties
31+
*.iml
32+
33+
# node.js
34+
#
35+
node_modules/
36+
npm-debug.log
37+
38+
# BUCK
39+
buck-out/
40+
\.buckd/
41+
android/app/libs
42+
*.keystore

‎LICENSE‎

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

‎README.md‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
# react-native-circular-slider :radio_button:
2+
3+
React Native component for creating circle slider.
4+
5+
## Example app – inspired by Apple's Bedtime :alarm_clock:
6+
(It's just an example what you can achieve – with this package you can create any circular slider)
7+
8+
![image](screenshot.gif)
9+
10+
## Installation
11+
12+
1. Install library and react-native-svg
13+
14+
```
15+
npm i --save react-native-circular-slider react-native-svg
16+
```
17+
2. Link native code for SVG
18+
19+
```
20+
react-native link react-native-svg
21+
```
22+
23+
## Usage
24+
25+
Import Circle Slider
26+
27+
```js
28+
import { CircularSlider } from 'react-native-circular-slider';
29+
```
30+
31+
Use as follows:
32+
33+
```jsx
34+
<CircularSlider
35+
startAngle={this.state.startAngle}
36+
angleLength={this.state.angleLength}
37+
onUpdate={({ startAngle, angleLength }) => this.setState({ startAngle, angleLength })}
38+
segments={5}
39+
strokeWidth={40}
40+
radius={145}
41+
gradientColorFrom="#ff9800"
42+
gradientColorTo="#ffcf00"
43+
showClockFace
44+
clockFaceColor="#9d9d9d"
45+
bgCircleColor="#171717"
46+
stopIcon={<G><Path .../></G>}
47+
startIcon={<G><Path .../></G>}
48+
/>
49+
```
50+
51+
52+
## Configuration
53+
54+
You can configure the passing by following props:
55+
56+
- **startAngle** – angle where the slider starts (from 0 to 2π)
57+
- **angleLength** - length of the slider (from 0 to 2π)
58+
- **onUpdate({ startAngle, angleLength })** - when slider is moved, onUpdate(data) is triggered, where data is an object of new values of startAngle and angleLength.
59+
- **segments (optional)** - SVG doesn't support canonical gradients, so it's imitated by using multiple linear gradients across the slider. In most cases 5 should be fine.
60+
- **strokeWidth (optional)** - width of slider
61+
- **radius (optional)** - size of the slider
62+
- **gradientColorFrom (optional)** - initial gradient color
63+
- **gradientColorTo (optional)** - final gradient color
64+
- **showClockFace (optional)** - if component should render clock face
65+
- **bgCircleColor (optional)** - color of the circle under the slider (pathway for a slider)
66+
- **stopIcon (optional)** - SVG Path for a stop icon (see the example)
67+
- **startIcon (optional)** - SVG Path for a start icon (see the example)
68+
69+
70+
## Working example app
71+
72+
You can find working example in the `example` directory of this repository. You can run it by:
73+
74+
```sh
75+
git clone https://github.com/bgryszko/react-native-circular-slider.git
76+
cd react-native-circular-slider/example/Bedtime
77+
npm install
78+
open ios/Bedtime.xcodeproj
79+
```
80+
XCode will open. Click Run button and that's it.
81+
82+
83+
## License
84+
85+
MIT

‎example/Bedtime/.babelrc‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"presets": ["react-native"]
3+
}

‎example/Bedtime/.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/Bedtime/.flowconfig‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
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 unexpected extra "@providesModule"
9+
.*/node_modules/.*/node_modules/fbjs/.*
10+
11+
; Ignore duplicate module providers
12+
; For RN Apps installed via npm, "Libraries" folder is inside
13+
; "node_modules/react-native" but in the source repo it is in the root
14+
.*/Libraries/react-native/React.js
15+
.*/Libraries/react-native/ReactNative.js
16+
17+
[include]
18+
19+
[libs]
20+
node_modules/react-native/Libraries/react-native/react-native-interface.js
21+
node_modules/react-native/flow
22+
flow/
23+
24+
[options]
25+
module.system=haste
26+
27+
experimental.strict_type_args=true
28+
29+
munge_underscores=true
30+
31+
module.name_mapper='^image![a-zA-Z0-9$_-]+$' -> 'GlobalImageStub'
32+
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\)$' -> 'RelativeImageStub'
33+
34+
suppress_type=$FlowIssue
35+
suppress_type=$FlowFixMe
36+
suppress_type=$FixMe
37+
38+
suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(3[0-5]\\|[1-2][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
39+
suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(3[0-5]\\|1[0-9]\\|[1-2][0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
40+
suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
41+
42+
unsafe.enable_getters_and_setters=true
43+
44+
[version]
45+
^0.35.0

‎example/Bedtime/.gitattributes‎

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

‎example/Bedtime/.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+
# Xcode
6+
#
7+
build/
8+
*.pbxuser
9+
!default.pbxuser
10+
*.mode1v3
11+
!default.mode1v3
12+
*.mode2v3
13+
!default.mode2v3
14+
*.perspectivev3
15+
!default.perspectivev3
16+
xcuserdata
17+
*.xccheckout
18+
*.moved-aside
19+
DerivedData
20+
*.hmap
21+
*.ipa
22+
*.xcuserstate
23+
project.xcworkspace
24+
25+
# Android/IntelliJ
26+
#
27+
build/
28+
.idea
29+
.gradle
30+
local.properties
31+
*.iml
32+
33+
# node.js
34+
#
35+
node_modules/
36+
npm-debug.log
37+
38+
# BUCK
39+
buck-out/
40+
\.buckd/
41+
android/app/libs
42+
*.keystore

‎example/Bedtime/.watchmanconfig‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{}

‎example/Bedtime/__tests__/index.android.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import 'react-native';
2+
import React from 'react';
3+
import Index from '../index.android.js';
4+
5+
// Note: test renderer must be required after react-native.
6+
import renderer from 'react-test-renderer';
7+
8+
it('renders correctly', () => {
9+
const tree = renderer.create(
10+
<Index />
11+
);
12+
});

0 commit comments

Comments
 (0)