Add activityIndicator prop support

Button.js

@@ -28,6 +28,7 @@ class Button extends Component {
     allowFontScaling: PropTypes.bool,
     isLoading: PropTypes.bool,
     isDisabled: PropTypes.bool,
+    activityIndicator: PropTypes.object,
     activityIndicatorColor: PropTypes.string,
     delayLongPress: PropTypes.number,
     delayPressIn: PropTypes.number,
@@ -70,6 +71,10 @@ class Button extends Component {
 
   _renderInnerText() {
     if (this.props.isLoading) {
+      if (this.props.activityIndicator) {
+        return this.props.activityIndicator;
+      }
+
       return (
         <ActivityIndicator
           animating={true}

Example/button/Example.js

@@ -86,6 +86,15 @@ class Example extends React.Component {
           }}>
           Hello
         </Button>
+        <Button
+          isLoading={true}
+          style={styles.buttonStyle9}
+          onPress={() => {
+            console.log('world!')
+          }}
+          activityIndicator={<Text>Custom activity indicator</Text>}>
+          Hello
+        </Button>
         <Button
           disabledStyle={styles.buttonStyle8}
           isDisabled={true}
@@ -172,6 +181,12 @@ const styles = StyleSheet.create({
     fontWeight: '500',
     color: '#333',
   },
+  buttonStyle9: {
+    borderColor: '#d291bc',
+    backgroundColor: 'white',
+    borderRadius: 0,
+    borderWidth: 3,
+  },
   customViewStyle: {
     width: 120,
     height: 40,

README.md

@@ -71,6 +71,7 @@ your own styles to your child elements as you see fit. Multiple children are all
 | ``isLoading`` | ``bool`` | Renders an inactive state dimmed button with a spinner if ``true``. |
 | ``isDisabled`` | ``bool`` | Renders an inactive state dimmed button if ``true``. |
 | ``activeOpacity`` | ``Number`` | The button onpressing transparency (Usually with a point value between 0 and 1). |
+| ``activityIndicator`` | ``React.Node`` | Activity indicator to use when ``isLoading`` is true. |
 | ``activityIndicatorColor`` | ``string`` | Sets the button of the ``ActivityIndicatorIOS`` or ``ProgressBarAndroid`` in the loading state. |
 | ``background`` | ``TouchableNativeFeedback.propTypes.background`` | **Android only**. The background prop of ``TouchableNativeFeedback``. |
 Check the included example for more options.

__tests__/Button.test.js

@@ -1,6 +1,6 @@
 /* global test */
 
-import { View } from 'react-native'
+import { Text, View } from 'react-native'
 import React from 'react'
 import Button from '../Button'
 import renderer from 'react-test-renderer'
@@ -33,6 +33,15 @@ describe('Button', () => {
     const tree = component.toJSON()
     expect(tree).toMatchSnapshot()
   })
+  test('Renders custom activity indicator', () => {
+    const component = renderer.create(
+      <Button isLoading={true} activityIndicator={<Text>Loading</Text>}>
+        Custom loader button
+      </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

@@ -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]}
@@ -52,6 +54,37 @@ exports[`Button Renders 1`] = `
 </View>
 `;
 
+exports[`Button Renders custom activity indicator 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,
+      },
+    ]
+  }
+>
+  <Text
+    accessible={true}
+    allowFontScaling={true}
+    ellipsizeMode="tail"
+  >
+    Loading
+  </Text>
+</View>
+`;
+
 exports[`Button Renders disabled 1`] = `
 <View
   style={
@@ -135,8 +168,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 +205,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 +259,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]}

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.0.0",
     "react-native": "^0.50.0",
-    "react-test-renderer": "^15.4.0",
+    "react-test-renderer": "16.0.0",
     "whatwg-fetch": "^1.0.0"
   }
 }

yarn.lock

@@ -1414,7 +1414,7 @@ [email protected]:
   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,14 @@ 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.npmjs.org/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102"
+  integrity sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==
+  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"
@@ -4080,12 +4088,13 @@ 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"
+[email protected]:
+  version "16.0.0"
+  resolved "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.0.0.tgz#9fe7b8308f2f71f29fc356d4102086f131c9cb15"
+  integrity sha1-n+e4MI8vcfKfw1bUECCG8THJyxU=
   dependencies:
-    fbjs "^0.8.9"
-    object-assign "^4.1.0"
+    fbjs "^0.8.16"
+    object-assign "^4.1.1"
 
 react-timer-mixin@^0.13.2:
   version "0.13.3"
@@ -4098,15 +4107,15 @@ 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"
+[email protected]:
+  version "16.0.0"
+  resolved "https://registry.npmjs.org/react/-/react-16.0.0.tgz#ce7df8f1941b036f02b2cca9dbd0cb1f0e855e2d"
+  integrity sha1-zn348ZQbA28Cssyp29DLHw6FXi0=
   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"