Feat#61 custom loading indicator

Button.js

@@ -27,6 +27,7 @@ const Button = React.createClass({
     isLoading: PropTypes.bool,
     isDisabled: PropTypes.bool,
     activityIndicatorColor: PropTypes.string,
+    activityIndicatorWithText: PropTypes.bool,
     delayLongPress: PropTypes.number,
     delayPressIn: PropTypes.number,
     delayPressOut: PropTypes.number,
@@ -41,8 +42,18 @@ const Button = React.createClass({
     isAndroid: (Platform.OS === 'android'),
   },
 
+  shouldComponentUpdate: function (nextProps, nextState) {
+    if (!isEqual(nextProps, this.props)) {
+      return true;
+    }
+    return false;
+  },
+
   _renderChildren: function() {
     let childElements = [];
+    if (this.props.isLoading && this.props.activityIndicatorWithText) {
+      childElements.push(this._renderActivityIndicator());
+    }
     React.Children.forEach(this.props.children, (item) => {
       if (typeof item === 'string' || typeof item === 'number') {
         const element = (
@@ -61,23 +72,20 @@ const Button = React.createClass({
     return (childElements);
   },
 
-  shouldComponentUpdate: function (nextProps, nextState) {
-    if (!isEqual(nextProps, this.props)) {
-      return true;
-    }
-    return false;
+  _renderActivityIndicator: function () {
+    return (
+      <ActivityIndicator
+        animating={true}
+        size='small'
+        style={styles.spinner}
+        color={this.props.activityIndicatorColor || 'black'}
+      />
+    )
   },
 
   _renderInnerText: function () {
-    if (this.props.isLoading) {
-      return (
-        <ActivityIndicator
-          animating={true}
-          size='small'
-          style={styles.spinner}
-          color={this.props.activityIndicatorColor || 'black'}
-        />
-      );
+    if (this.props.isLoading && !this.props.activityIndicatorWithText) {
+      return this._renderActivityIndicator();
     }
     return this._renderChildren();
   },
@@ -136,13 +144,14 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   textButton: {
-    flex: 1,
     fontSize: 18,
     textAlign: 'center',
     backgroundColor: 'transparent',
   },
   spinner: {
     alignSelf: 'center',
+    marginRight: 6,
+    marginLeft: 6
   },
   opacity: {
     opacity: 0.5,

Example/button/Example.js

@@ -86,6 +86,15 @@ class Example extends React.Component {
           }}>
           Hello
         </Button>
+        <Button
+          isLoading={true}
+          activityIndicatorWithText={true}
+          style={styles.buttonStyle7} textStyle={styles.textStyle6}
+          onPress={() => {
+            console.log('world!')
+          }}>
+          Hello
+        </Button>
         <Button
           disabledStyle={styles.buttonStyle8}
           isDisabled={true}

__tests__/Button.test.js

@@ -33,6 +33,15 @@ describe('Button', () => {
     const tree = component.toJSON()
     expect(tree).toMatchSnapshot()
   })
+  test('Renders loading with text', () => {
+    const component = renderer.create(
+      <Button isLoading={true} activityIndicatorWithText={true}>
+        Loading button with text
+      </Button>
+    )
+    const tree = component.toJSON()
+    expect(tree).toMatchSnapshot()
+  })
   test('Renders with a inner View', () => {
     const component = renderer.create(
       <Button>

__tests__/__snapshots__/Button.test.js.snap

@@ -34,7 +34,6 @@ exports[`Button Renders 1`] = `
       Array [
         Object {
           "backgroundColor": "transparent",
-          "flex": 1,
           "fontSize": 18,
           "textAlign": "center"
         },
@@ -74,7 +73,6 @@ exports[`Button Renders disabled 1`] = `
       Array [
         Object {
           "backgroundColor": "transparent",
-          "flex": 1,
           "fontSize": 18,
           "textAlign": "center"
         },
@@ -113,12 +111,65 @@ exports[`Button Renders loading 1`] = `
     size="small"
     style={
       Object {
-        "alignSelf": "center"
+        "alignSelf": "center",
+        "marginLeft": 6,
+        "marginRight": 6
       }
     } />
 </View>
 `;
 
+exports[`Button Renders loading with text 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "alignSelf": "stretch",
+        "borderRadius": 8,
+        "borderWidth": 1,
+        "flexDirection": "row",
+        "height": 44,
+        "justifyContent": "center",
+        "marginBottom": 10
+      },
+      undefined,
+      Object {
+        "opacity": 0.5
+      }
+    ]
+  }>
+  <ActivityIndicator
+    animating={true}
+    color="black"
+    hidesWhenStopped={true}
+    size="small"
+    style={
+      Object {
+        "alignSelf": "center",
+        "marginLeft": 6,
+        "marginRight": 6
+      }
+    } />
+  <Text
+    accessible={true}
+    allowFontScaling={true}
+    ellipsizeMode="tail"
+    style={
+      Array [
+        Object {
+          "backgroundColor": "transparent",
+          "fontSize": 18,
+          "textAlign": "center"
+        },
+        undefined
+      ]
+    }>
+    Loading button with text
+  </Text>
+</View>
+`;
+
 exports[`Button Renders with a inner View 1`] = `
 <View
   accessibilityComponentType={undefined}
@@ -187,7 +238,6 @@ exports[`Button Should contain children 1`] = `
       Array [
         Object {
           "backgroundColor": "transparent",
-          "flex": 1,
           "fontSize": 18,
           "textAlign": "center"
         },
@@ -235,7 +285,6 @@ exports[`Button Should react to the onPress event 1`] = `
       Array [
         Object {
           "backgroundColor": "transparent",
-          "flex": 1,
           "fontSize": 18,
           "textAlign": "center"
         },

package.json

@@ -49,9 +49,9 @@
     "eslint-plugin-react-native": "^1.1.0-beta",
     "jest": "^15.1.1",
     "jest-react-native": "^15.0.0",
-    "react": "^15.3.2",
-    "react-native": "^0.34.0",
-    "react-test-renderer": "^15.3.2",
+    "react": "15.3.2",
+    "react-native": "0.34.0",
+    "react-test-renderer": "15.3.2",
     "whatwg-fetch": "^1.0.0"
   }
 }