Skip to content

Commit f5705f3

Browse files
hannigandhannigand
authoredDec 15, 2017
Development (#13)
* Fix/proptypes (#2) * Added gitignore file, changed PropTypes package * Fixing images on the UIStepper * Adding wraps * Adding wraps * Updated README * Added displayValue prop to display the value between [-] and [+] buttons * Updating prop table * Added ability to override tint color on external images * Updated README adding a screenshot * External image used for examples * Bumped up version * Docs update * Updating docs * Updated docs * Horizontal stepper added * Bumped up Node version * Added npmignore, and an example project * Updating example * Update Docs * Updating Docs * Fixing Measurements (#7) * Merge Vertical Stepper (#5) * Added gitignore file, changed PropTypes package * Fixing images on the UIStepper * Adding wraps * Adding wraps * Updated README * Added displayValue prop to display the value between [-] and [+] buttons * Updating prop table * Added ability to override tint color on external images * Updated README adding a screenshot * External image used for examples * Bumped up version * Docs update * Updating docs * Updated docs * Horizontal stepper added * Bumped up Node version * Added npmignore, and an example project * Updating example * Update Docs * Updating Docs * Upgraded react-native-ui-stepper to 1.2.0 * Fixed height and width measurements * Updated docs * Feature/font family (#12) * Added support for fontFamily * Add fontFamily support * Add fontFamily support * Remove logs * Bump up version
1 parent 9375662 commit f5705f3

File tree

11 files changed

+291
-164
lines changed

11 files changed

+291
-164
lines changed
 

‎README.md

+30-29
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,11 @@ A react-native component which mirrors the functionality of [UIStepper](https://
1212
**You can now configure your react-native-ui-stepper to be vertical**
1313

1414
## Installation
15+
1516
`npm i react-native-ui-stepper`
1617

1718
## Usage
19+
1820
```javascript
1921
import UIStepper from 'react-native-ui-stepper';
2022
...
@@ -36,37 +38,36 @@ You can now use custom images, from your local file system or from the Internet.
3638

3739
![Demo example](http://g.recordit.co/ipvGlYfRpa.gif "Demo example")
3840

39-
40-
4141
## Props
4242

43-
| Name | Type | Description | Default |
44-
|---------------------|----------|--------------------------------------------------------------------------------------------------------------|-------------|
45-
| `initialValue` | Number | Start value | 0 |
46-
| `minimumValue` | Number | Minimum value | 0 |
47-
| `maximumValue` | Number | Maximum value | 100 |
48-
| `steps` | Number | Increment value | 1 |
49-
| `displayValue` | Boolean | Displays the stepper value between the increment and decrement button | false |
50-
| `incrementImage` | String or Number | Override the default increment image | require('./assets/increment.png') |
51-
| `decrementImage` | String or Number | Override the default decrement image | require('./assets/decrement.png') |
52-
| `wraps` | Boolean | When set to true, incrementing beyond the `maximumValue` will set the value to `minimumValue` and vice versa | false |
53-
| `tintColor` | String | Changes the color of all the non-transparent pixels to the tintColor. | #0076FF |
54-
| `overrideTintColor` | Boolean | When using an external image, set whether you want the tintColor to be applied to non-transparent pixels. | false |
55-
| `backgroundColor` | String | Background color | transparent |
56-
| `vertical` | Boolean | Display a vertical UI Stepper. You **must** specify a height and a width. | false |
57-
| `displayDecrementFirst` | Boolean | Display the decrement button above the increment button, only works when `vertical` is `true` | false |
58-
| `width` | Number | Width | 94 |
59-
| `height` | Number | Height | 29 |
60-
| `textColor` | String | The desired text colour which will be used when `displayValue` is set to `true` | #0076FF |
61-
| `fontSize` | Number | The font size used on the value displayed when `displayValue` is set to `true` | 15 |
62-
| `borderColor` | String | Color used for the border | #0076FF |
63-
| `borderWidth` | Number | Width of the border | 1 |
64-
| `borderRadius` | Number | Radius of the border | 4 |
65-
| `onValueChange` | Function | Executed when the value changes. The value is passed as a parameter | null |
66-
| `onIncrement` | Function | Executed when the User clicks the increment (+) button. The value is passed as a parameter | null |
67-
| `onDecrement` | Function | Executed when the User clicks the decrement (+) button. The value is passed as a parameter | null |
68-
| `onMinimumReached` | Function | Executed when the `minimumValue` is reached. The value is passed as a parameter | null |
69-
| `onMaximumReached` | Function | Executed when the `maximumValue` is reached. The value is passed as a parameter | null |
43+
| Name | Type | Description | Default |
44+
| ----------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------ | --------------------------------- |
45+
| `initialValue` | Number | Start value | 0 |
46+
| `minimumValue` | Number | Minimum value | 0 |
47+
| `maximumValue` | Number | Maximum value | 100 |
48+
| `steps` | Number | Increment value | 1 |
49+
| `displayValue` | Boolean | Displays the stepper value between the increment and decrement button | false |
50+
| `incrementImage` | String or Number | Override the default increment image | require('./assets/increment.png') |
51+
| `decrementImage` | String or Number | Override the default decrement image | require('./assets/decrement.png') |
52+
| `wraps` | Boolean | When set to true, incrementing beyond the `maximumValue` will set the value to `minimumValue` and vice versa | false |
53+
| `tintColor` | String | Changes the color of all the non-transparent pixels to the tintColor. | #0076FF |
54+
| `overrideTintColor` | Boolean | When using an external image, set whether you want the tintColor to be applied to non-transparent pixels. | false |
55+
| `backgroundColor` | String | Background color | transparent |
56+
| `vertical` | Boolean | Display a vertical UI Stepper. You **must** specify a height and a width. | false |
57+
| `displayDecrementFirst` | Boolean | Display the decrement button above the increment button, only works when `vertical` is `true` | false |
58+
| `width` | Number | Width | 94 |
59+
| `height` | Number | Height | 29 |
60+
| `textColor` | String | The desired text colour which will be used when `displayValue` is set to `true` | #0076FF |
61+
| `fontFamily` | String | The font family used on the value displayed when `displayValue` is set to `true` | System |
62+
| `fontSize` | Number | The font size used on the value displayed when `displayValue` is set to `true` | 15 |
63+
| `borderColor` | String | Color used for the border | #0076FF |
64+
| `borderWidth` | Number | Width of the border | 1 |
65+
| `borderRadius` | Number | Radius of the border | 4 |
66+
| `onValueChange` | Function | Executed when the value changes. The value is passed as a parameter | null |
67+
| `onIncrement` | Function | Executed when the User clicks the increment (+) button. The value is passed as a parameter | null |
68+
| `onDecrement` | Function | Executed when the User clicks the decrement (+) button. The value is passed as a parameter | null |
69+
| `onMinimumReached` | Function | Executed when the `minimumValue` is reached. The value is passed as a parameter | null |
70+
| `onMaximumReached` | Function | Executed when the `maximumValue` is reached. The value is passed as a parameter | null |
7071

7172
## Run Example
7273

‎UIStepper.js

+5-2
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ class UIStepper extends Component {
4747
overrideTintColor: PropTypes.bool,
4848
vertical: PropTypes.bool,
4949
displayDecrementFirst: PropTypes.bool,
50+
fontFamily: PropTypes.string
5051
};
5152
static defaultProps = {
5253
initialValue: 0,
@@ -76,6 +77,7 @@ class UIStepper extends Component {
7677
overrideTintColor: false,
7778
vertical: false,
7879
displayDecrementFirst: false,
80+
fontFamily: 'System'
7981
};
8082
constructor(props) {
8183
super(props);
@@ -162,7 +164,7 @@ class UIStepper extends Component {
162164
} = this.props;
163165
if (min <= value && max >= value) {
164166
this.setState({
165-
value,
167+
value
166168
});
167169
if (onValueChange) {
168170
onValueChange(value);
@@ -234,6 +236,7 @@ class UIStepper extends Component {
234236
fontSize,
235237
vertical,
236238
displayDecrementFirst,
239+
fontFamily
237240
} = this.props;
238241
return (
239242
<View
@@ -271,7 +274,7 @@ class UIStepper extends Component {
271274
</TouchableOpacity>
272275
{displayValue && (
273276
<View style={styles.valueContainer}>
274-
<Text style={{ color: textColor, fontSize }}>
277+
<Text style={{ color: textColor, fontSize, fontFamily }}>
275278
{this.state.value}
276279
</Text>
277280
</View>

‎example/android/app/src/main/assets/fonts/Bungee-Regular.ttf

124 KB
Binary file not shown.

‎example/assets/fonts/Bungee-Regular.ttf

124 KB
Binary file not shown.

‎example/index.android.js

+8-39
Original file line numberDiff line numberDiff line change
@@ -5,49 +5,18 @@
55
*/
66

77
import React, { Component } from 'react';
8-
import {
9-
AppRegistry,
10-
StyleSheet,
11-
Text,
12-
View
13-
} from 'react-native';
8+
import { AppRegistry } from 'react-native';
9+
import { StackNavigator } from 'react-navigation';
10+
import MainPage from './pages/MainPage';
11+
12+
const Navigation = StackNavigator({
13+
Main: { screen: MainPage }
14+
});
1415

1516
export default class example extends Component {
1617
render() {
17-
return (
18-
<View style={styles.container}>
19-
<Text style={styles.welcome}>
20-
Welcome to React Native!
21-
</Text>
22-
<Text style={styles.instructions}>
23-
To get started, edit index.android.js
24-
</Text>
25-
<Text style={styles.instructions}>
26-
Double tap R on your keyboard to reload,{'\n'}
27-
Shake or press menu button for dev menu
28-
</Text>
29-
</View>
30-
);
18+
return <Navigation />;
3119
}
3220
}
3321

34-
const styles = StyleSheet.create({
35-
container: {
36-
flex: 1,
37-
justifyContent: 'center',
38-
alignItems: 'center',
39-
backgroundColor: '#F5FCFF',
40-
},
41-
welcome: {
42-
fontSize: 20,
43-
textAlign: 'center',
44-
margin: 10,
45-
},
46-
instructions: {
47-
textAlign: 'center',
48-
color: '#333333',
49-
marginBottom: 5,
50-
},
51-
});
52-
5322
AppRegistry.registerComponent('example', () => example);

‎example/ios/example.xcodeproj/project.pbxproj

+14-2
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55
};
66
objectVersion = 46;
77
objects = {
8-
98
/* Begin PBXBuildFile section */
109
00C302E51ABCBA2D00DB3ED1 /* libRCTActionSheet.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302AC1ABCB8CE00DB3ED1 /* libRCTActionSheet.a */; };
1110
00C302E71ABCBA2D00DB3ED1 /* libRCTGeolocation.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302BA1ABCB90400DB3ED1 /* libRCTGeolocation.a */; };
@@ -37,6 +36,7 @@
3736
5E9157361DD0AC6A00FF2AA8 /* libRCTAnimation.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 5E9157331DD0AC6500FF2AA8 /* libRCTAnimation.a */; };
3837
832341BD1AAA6AB300B99B32 /* libRCTText.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 832341B51AAA6A8300B99B32 /* libRCTText.a */; };
3938
ADBDB9381DFEBF1600ED6528 /* libRCTBlob.a in Frameworks */ = {isa = PBXBuildFile; fileRef = ADBDB9271DFEBF0700ED6528 /* libRCTBlob.a */; };
39+
02DAA8232A124CB1AE7B6C4B /* Bungee-Regular.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 65C721201F2948DE9E54B0CE /* Bungee-Regular.ttf */; };
4040
/* End PBXBuildFile section */
4141

4242
/* Begin PBXContainerItemProxy section */
@@ -264,6 +264,7 @@
264264
78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTLinking.xcodeproj; path = "../node_modules/react-native/Libraries/LinkingIOS/RCTLinking.xcodeproj"; sourceTree = "<group>"; };
265265
832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTText.xcodeproj; path = "../node_modules/react-native/Libraries/Text/RCTText.xcodeproj"; sourceTree = "<group>"; };
266266
ADBDB91F1DFEBF0600ED6528 /* RCTBlob.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTBlob.xcodeproj; path = "../node_modules/react-native/Libraries/Blob/RCTBlob.xcodeproj"; sourceTree = "<group>"; };
267+
65C721201F2948DE9E54B0CE /* Bungee-Regular.ttf */ = {isa = PBXFileReference; name = "Bungee-Regular.ttf"; path = "../assets/fonts/Bungee-Regular.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
267268
/* End PBXFileReference section */
268269

269270
/* Begin PBXFrameworksBuildPhase section */
@@ -480,6 +481,7 @@
480481
832341AE1AAA6A7D00B99B32 /* Libraries */,
481482
00E356EF1AD99517003FC87E /* exampleTests */,
482483
83CBBA001A601CBA00E9B192 /* Products */,
484+
1951144F0D0049268CDAE124 /* Resources */,
483485
);
484486
indentWidth = 2;
485487
sourceTree = "<group>";
@@ -505,6 +507,15 @@
505507
name = Products;
506508
sourceTree = "<group>";
507509
};
510+
1951144F0D0049268CDAE124 /* Resources */ = {
511+
isa = "PBXGroup";
512+
children = (
513+
65C721201F2948DE9E54B0CE /* Bungee-Regular.ttf */,
514+
);
515+
name = Resources;
516+
sourceTree = "<group>";
517+
path = "";
518+
};
508519
/* End PBXGroup section */
509520

510521
/* Begin PBXNativeTarget section */
@@ -586,7 +597,7 @@
586597
83CBB9F71A601CBA00E9B192 /* Project object */ = {
587598
isa = PBXProject;
588599
attributes = {
589-
LastUpgradeCheck = 0610;
600+
LastUpgradeCheck = 610;
590601
ORGANIZATIONNAME = Facebook;
591602
TargetAttributes = {
592603
00E356ED1AD99517003FC87E = {
@@ -874,6 +885,7 @@
874885
files = (
875886
13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */,
876887
13B07FBD1A68108700A75B9A /* LaunchScreen.xib in Resources */,
888+
02DAA8232A124CB1AE7B6C4B /* Bungee-Regular.ttf in Resources */,
877889
);
878890
runOnlyForDeploymentPostprocessing = 0;
879891
};

‎example/ios/example/Images.xcassets/AppIcon.appiconset/Contents.json

+10
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,15 @@
11
{
22
"images" : [
3+
{
4+
"idiom" : "iphone",
5+
"size" : "20x20",
6+
"scale" : "2x"
7+
},
8+
{
9+
"idiom" : "iphone",
10+
"size" : "20x20",
11+
"scale" : "3x"
12+
},
313
{
414
"idiom" : "iphone",
515
"size" : "29x29",

‎example/ios/example/Info.plist

+5-2
Original file line numberDiff line numberDiff line change
@@ -39,9 +39,8 @@
3939
<key>UIViewControllerBasedStatusBarAppearance</key>
4040
<false/>
4141
<key>NSLocationWhenInUseUsageDescription</key>
42-
<string></string>
42+
<string/>
4343
<key>NSAppTransportSecurity</key>
44-
<!--See http://ste.vn/2015/06/10/configuring-app-transport-security-ios-9-osx-10-11/ -->
4544
<dict>
4645
<key>NSExceptionDomains</key>
4746
<dict>
@@ -52,5 +51,9 @@
5251
</dict>
5352
</dict>
5453
</dict>
54+
<key>UIAppFonts</key>
55+
<array>
56+
<string>Bungee-Regular.ttf</string>
57+
</array>
5558
</dict>
5659
</plist>

‎example/package.json

+26-23
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,28 @@
11
{
2-
"name": "example",
3-
"version": "0.0.1",
4-
"private": true,
5-
"scripts": {
6-
"start": "node node_modules/react-native/local-cli/cli.js start",
7-
"test": "jest"
8-
},
9-
"dependencies": {
10-
"react": "16.0.0-alpha.12",
11-
"react-native": "0.48.4",
12-
"react-native-markdown": "^0.1.1",
13-
"react-native-ui-stepper": "1.2.0",
14-
"react-navigation": "^1.0.0-beta.13"
15-
},
16-
"devDependencies": {
17-
"babel-jest": "21.2.0",
18-
"babel-preset-react-native": "4.0.0",
19-
"jest": "21.2.1",
20-
"react-test-renderer": "16.0.0-alpha.12"
21-
},
22-
"jest": {
23-
"preset": "react-native"
24-
}
2+
"name": "example",
3+
"version": "0.0.1",
4+
"private": true,
5+
"scripts": {
6+
"start": "node node_modules/react-native/local-cli/cli.js start",
7+
"test": "jest"
8+
},
9+
"dependencies": {
10+
"react": "16.0.0-alpha.12",
11+
"react-native": "0.48.4",
12+
"react-native-markdown": "^0.1.1",
13+
"react-native-ui-stepper": "1.2.0",
14+
"react-navigation": "^1.0.0-beta.13"
15+
},
16+
"devDependencies": {
17+
"babel-jest": "21.2.0",
18+
"babel-preset-react-native": "4.0.0",
19+
"jest": "21.2.1",
20+
"react-test-renderer": "16.0.0-alpha.12"
21+
},
22+
"jest": {
23+
"preset": "react-native"
24+
},
25+
"rnpm": {
26+
"assets": ["./assets/fonts"]
27+
}
2528
}

0 commit comments

Comments
 (0)