diff --git a/Button.js b/Button.js
index 3cdb551..76d2458 100644
--- a/Button.js
+++ b/Button.js
@@ -1,6 +1,6 @@
-'use strict';
+"use strict";
-import React, { Component } from 'react';
+import React, { Component } from "react";
import {
View,
TouchableOpacity,
@@ -9,9 +9,9 @@ import {
ActivityIndicator,
TouchableNativeFeedback,
Platform
-} from 'react-native';
-import PropTypes from 'prop-types';
-import isEqual from 'lodash.isequal';
+} from "react-native";
+import PropTypes from "prop-types";
+import isEqual from "lodash.isequal";
class Button extends Component {
static propTypes = {
@@ -24,6 +24,11 @@ class Button extends Component {
]),
testID: PropTypes.string,
accessibilityLabel: PropTypes.string,
+ accessibilityTraits: PropTypes.oneOfType([
+ PropTypes.string,
+ PropTypes.array
+ ]),
+ accessibilityComponentType: PropTypes.string,
activeOpacity: PropTypes.number,
allowFontScaling: PropTypes.bool,
isLoading: PropTypes.bool,
@@ -36,20 +41,23 @@ class Button extends Component {
onLongPress: PropTypes.func,
onPressIn: PropTypes.func,
onPressOut: PropTypes.func,
- background: (TouchableNativeFeedback.propTypes) ? TouchableNativeFeedback.propTypes.background : PropTypes.any,
- }
+ background: TouchableNativeFeedback.propTypes
+ ? TouchableNativeFeedback.propTypes.background
+ : PropTypes.any
+ };
- static isAndroid = (Platform.OS === 'android')
+ static isAndroid = Platform.OS === "android";
_renderChildren() {
let childElements = [];
- React.Children.forEach(this.props.children, (item) => {
- if (typeof item === 'string' || typeof item === 'number') {
+ React.Children.forEach(this.props.children, item => {
+ if (typeof item === "string" || typeof item === "number") {
const element = (
+ key={item}
+ >
{item}
);
@@ -58,7 +66,7 @@ class Button extends Component {
childElements.push(item);
}
});
- return (childElements);
+ return childElements;
}
shouldComponentUpdate(nextProps, nextState) {
@@ -68,14 +76,18 @@ class Button extends Component {
return false;
}
+ setNativeProps = nativeProps => {
+ this._root.setNativeProps({ style: { ...nativeProps } });
+ };
+
_renderInnerText() {
if (this.props.isLoading) {
return (
);
}
@@ -85,7 +97,14 @@ class Button extends Component {
render() {
if (this.props.isDisabled === true || this.props.isLoading === true) {
return (
-
+ (this._root = component)}
+ style={[
+ styles.button,
+ this.props.style,
+ this.props.disabledStyle || styles.opacity
+ ]}
+ >
{this._renderInnerText()}
);
@@ -94,6 +113,8 @@ class Button extends Component {
let touchableProps = {
testID: this.props.testID,
accessibilityLabel: this.props.accessibilityLabel,
+ accessibilityTraits: this.props.accessibilityTraits,
+ accessibilityComponentType: this.props.accessibilityComponentType,
onPress: this.props.onPress,
onPressIn: this.props.onPressIn,
onPressOut: this.props.onPressOut,
@@ -101,23 +122,31 @@ class Button extends Component {
activeOpacity: this.props.activeOpacity,
delayLongPress: this.props.delayLongPress,
delayPressIn: this.props.delayPressIn,
- delayPressOut: this.props.delayPressOut,
+ delayPressOut: this.props.delayPressOut
};
if (Button.isAndroid) {
touchableProps = Object.assign(touchableProps, {
- background: this.props.background || TouchableNativeFeedback.SelectableBackground()
+ background:
+ this.props.background ||
+ TouchableNativeFeedback.SelectableBackground()
});
return (
-
+ (this._root = component)}
+ style={[styles.button, this.props.style]}
+ >
{this._renderInnerText()}
- )
+ );
} else {
return (
-
+ (this._root = component)}
+ style={[styles.button, this.props.style]}
+ >
{this._renderInnerText()}
);
@@ -128,26 +157,26 @@ class Button extends Component {
const styles = StyleSheet.create({
button: {
height: 44,
- flexDirection: 'row',
- alignItems: 'center',
+ flexDirection: "row",
+ alignItems: "center",
borderWidth: 1,
borderRadius: 8,
marginBottom: 10,
- alignSelf: 'stretch',
- justifyContent: 'center',
+ alignSelf: "stretch",
+ justifyContent: "center"
},
textButton: {
flex: 1,
fontSize: 18,
- textAlign: 'center',
- backgroundColor: 'transparent',
+ textAlign: "center",
+ backgroundColor: "transparent"
},
spinner: {
- alignSelf: 'center',
+ alignSelf: "center"
},
opacity: {
- opacity: 0.5,
- },
+ opacity: 0.5
+ }
});
module.exports = Button;
diff --git a/__tests__/__snapshots__/Button.test.js.snap b/__tests__/__snapshots__/Button.test.js.snap
index 4a730d4..dcad0da 100644
--- a/__tests__/__snapshots__/Button.test.js.snap
+++ b/__tests__/__snapshots__/Button.test.js.snap
@@ -6,8 +6,10 @@ exports[`Button Renders 1`] = `
accessibilityLabel={undefined}
accessibilityTraits={undefined}
accessible={true}
+ collapsable={undefined}
hitSlop={undefined}
isTVSelectable={true}
+ nativeID={undefined}
onLayout={undefined}
onResponderGrant={[Function]}
onResponderMove={[Function]}
@@ -135,8 +137,10 @@ exports[`Button Renders with a inner View 1`] = `
accessibilityLabel={undefined}
accessibilityTraits={undefined}
accessible={true}
+ collapsable={undefined}
hitSlop={undefined}
isTVSelectable={true}
+ nativeID={undefined}
onLayout={undefined}
onResponderGrant={[Function]}
onResponderMove={[Function]}
@@ -170,8 +174,10 @@ exports[`Button Should contain children 1`] = `
accessibilityLabel={undefined}
accessibilityTraits={undefined}
accessible={true}
+ collapsable={undefined}
hitSlop={undefined}
isTVSelectable={true}
+ nativeID={undefined}
onLayout={undefined}
onResponderGrant={[Function]}
onResponderMove={[Function]}
@@ -222,8 +228,10 @@ exports[`Button Should react to the onPress event 1`] = `
accessibilityLabel={undefined}
accessibilityTraits={undefined}
accessible={true}
+ collapsable={undefined}
hitSlop={undefined}
isTVSelectable={true}
+ nativeID={undefined}
onLayout={undefined}
onResponderGrant={[Function]}
onResponderMove={[Function]}
diff --git a/package.json b/package.json
index a94948d..c4e78b2 100644
--- a/package.json
+++ b/package.json
@@ -50,9 +50,9 @@
"eslint-plugin-react-native": "^1.1.0-beta",
"jest": "^20.0.0",
"jest-react-native": "^18.0.0",
- "react": "^15.4.0",
+ "react": "16.4.1",
"react-native": "^0.50.0",
- "react-test-renderer": "^15.4.0",
+ "react-test-renderer": "16.4.1",
"whatwg-fetch": "^1.0.0"
}
}
diff --git a/yarn.lock b/yarn.lock
index 31425c2..f051e7b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1414,7 +1414,7 @@ crc@3.3.0:
version "3.3.0"
resolved "https://registry.yarnpkg.com/crc/-/crc-3.3.0.tgz#fa622e1bc388bf257309082d6b65200ce67090ba"
-create-react-class@^15.5.2, create-react-class@^15.6.0:
+create-react-class@^15.5.2:
version "15.6.3"
resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.6.3.tgz#2d73237fb3f970ae6ebe011a9e66f46dbca80036"
dependencies:
@@ -3949,6 +3949,13 @@ prop-types@^15.5.10, prop-types@^15.5.8:
loose-envify "^1.3.1"
object-assign "^4.1.1"
+prop-types@^15.6.0:
+ version "15.6.2"
+ resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102"
+ dependencies:
+ loose-envify "^1.3.1"
+ object-assign "^4.1.1"
+
prr@~1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/prr/-/prr-1.0.1.tgz#d3fc114ba06995a45ec6893f484ceb1d78f5f476"
@@ -4016,6 +4023,10 @@ react-devtools-core@^2.5.0:
shell-quote "^1.6.1"
ws "^2.0.3"
+react-is@^16.4.1:
+ version "16.4.1"
+ resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.4.1.tgz#d624c4650d2c65dbd52c72622bbf389435d9776e"
+
react-native@^0.50.0:
version "0.50.4"
resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.50.4.tgz#194f5da4939087b3acee712a503475f4942dca7e"
@@ -4080,12 +4091,14 @@ react-proxy@^1.1.7:
lodash "^4.6.1"
react-deep-force-update "^1.0.0"
-react-test-renderer@^15.4.0:
- version "15.6.2"
- resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-15.6.2.tgz#d0333434fc2c438092696ca770da5ed48037efa8"
+react-test-renderer@16.4.1:
+ version "16.4.1"
+ resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.4.1.tgz#f2fb30c2c7b517db6e5b10ed20bb6b0a7ccd8d70"
dependencies:
- fbjs "^0.8.9"
- object-assign "^4.1.0"
+ fbjs "^0.8.16"
+ object-assign "^4.1.1"
+ prop-types "^15.6.0"
+ react-is "^16.4.1"
react-timer-mixin@^0.13.2:
version "0.13.3"
@@ -4098,15 +4111,14 @@ react-transform-hmr@^1.0.4:
global "^4.3.0"
react-proxy "^1.1.7"
-react@^15.4.0:
- version "15.6.2"
- resolved "https://registry.yarnpkg.com/react/-/react-15.6.2.tgz#dba0434ab439cfe82f108f0f511663908179aa72"
+react@16.4.1:
+ version "16.4.1"
+ resolved "https://registry.yarnpkg.com/react/-/react-16.4.1.tgz#de51ba5764b5dbcd1f9079037b862bd26b82fe32"
dependencies:
- create-react-class "^15.6.0"
- fbjs "^0.8.9"
+ fbjs "^0.8.16"
loose-envify "^1.1.0"
- object-assign "^4.1.0"
- prop-types "^15.5.10"
+ object-assign "^4.1.1"
+ prop-types "^15.6.0"
read-pkg-up@^1.0.1:
version "1.0.1"