A Generic React Native component that allows for a button with an ActivityIndicator when the attached loading prop is true

ButtonWithActivityIndicator.js

import React from 'react';
import { View, Text, ActivityIndicator, TouchableOpacity } from 'react-native';

export default class ButtonWithActivityIndicator extends React.Component {
  render() {
    const { buttonStyle, textStyle, label, onPress, activityIndicatorSize, activityIndicatorColor, loading } = this.props;
    return (
      <TouchableOpacity style={buttonStyle} onPress={() => {
        if (!loading) {
          return onPress();
        }
      }}>
        <View style={{flexDirection: 'row'}}>
          <View style={{flex: 1}}></View>
          <Text style={textStyle}>{label}</Text>
          <View style={{flex: 1, flexDirection: 'row', justifyContent: 'flex-end'}}>
            <ActivityIndicator size={activityIndicatorSize} animating={loading} color={activityIndicatorColor || '#ffffff'} />
          </View>
        </View>
      </TouchableOpacity>
    )
  }
}

Sample use case:

 <ButtonWithActivityIndicator
                  buttonStyle={{
                    width: window.width * .8,
                    justifyContent: 'center',
                    alignItems: 'center',
                    padding: 10,
                    marginTop: 20,
                    marginBottom: window.height * 0.03,
                    backgroundColor: 'rgb(243, 138, 0)'
                  }}
                  textStyle={{
                    color: '#ffffff',
                    fontFamily: 'Corporative Sans',
                    fontSize: 16,
                    fontWeight: '700'
                  }}
                  label="save"
                  activityIndicatorSize="small"
                  onPress={this.save}
                  loading={this.state.loading} />