button.js

import React from 'react'
import {
  View,
  TouchableOpacity,
  Text,
  StyleSheet,
  ActivityIndicator,
} from 'react-native'
import LinearGradient from 'react-native-linear-gradient'
import PropTypes from 'prop-types'


const ViewComponent = ({
  gradient,
  btnStyle,
  withGradient,
  disableBgColors,
  disabled,
  children,
}) => (
  <React.Fragment>
    {withGradient && (
      <LinearGradient
        colors={disabled ? disableBgColors : gradient.colors}
        start={gradient.start}
        end={gradient.end}
        style={[
          { borderRadius: 4, elevation: 3 },
          btnStyle && btnStyle,
        ]}
      >
        {children}
      </LinearGradient>
    )}
    {withGradient || (
      <View
        style={[
          styles.button,
          btnStyle && btnStyle,
          disabled && { backgroundColor: disableBgColors },
        ]}
      >
        {children}
      </View>
    )}
  </React.Fragment>
)


export const Button = ({
  children,
  titleStyle,
  title,
  onPress,
  loading,
  disabled,
  disableTitleColor,
  ...props,
}) => (
  <ViewComponent
    {...props}
    disabled={disabled}
  >
    <TouchableOpacity
      onPress={onPress}
      style={styles.inner}
      disabled={disabled}
    >
      {loading && (
        <ActivityIndicator
          size={'small'}
          color={'#fff'}
          style={styles.indicator}
        />
      )}
      <Text
        style={[
          titleStyle && titleStyle,
          disabled && { color: disableTitleColor }
        ]}
      >
        {title}
      </Text>
    </TouchableOpacity>
  </ViewComponent>
)

const styles = StyleSheet.create({
  button: {
    elevation: 3,
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 4,
  },
  inner: {
    paddingHorizontal: 55,
    paddingVertical: 8,
    flexDirection: 'row',
  },
  indicator: {
    marginRight: 15,
  },
})

Button.propTypes = {
  gradient: PropTypes.shape({
    colors: PropTypes.arrayOf(PropTypes.string),
    start: PropTypes.shape({ x: PropTypes.number, y: PropTypes.number }),
    end: PropTypes.shape({ x: PropTypes.number, y: PropTypes.number }),
  }),
  withGradient: PropTypes.bool,
  disabled: PropTypes.bool,
  disableBgColors: PropTypes.oneOfType([
    PropTypes.arrayOf(PropTypes.string),
    PropTypes.string,
  ]),
  disableTitleColor: PropTypes.string,
  loading: PropTypes.bool,
  title: PropTypes.string.isRequired,
  btnStyle: View.propTypes.style,
  titleStyle: Text.propTypes.style,
}

Button.defaultProps = {
  gradient: {
    colors: ['#e94633', '#ed7933', '#f6b833'],
    start: { x: 0.0, y: 0 },
    end: { x: 1.0, y: 0 },
  },
  withGradient: false,
  disabled: false,
  disableBgColors: '#eee',
  disableTitleColor: '#000',
  loading: false,
}