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>