import React, { View, StyleSheet, TouchableNativeFeedback, Platform } from 'react-native'
import Button from 'apsl-react-native-button'

export default class Example extends React.Component {
  render () {
    return (
      <View style={styles.container}>
        <Button
          background={(Platform.OS === 'android') ? TouchableNativeFeedback.Ripple('#f39c12', true) : undefined}
          style={styles.buttonStyle} textStyle={styles.textStyle}
          onPress={() => {
            console.log('world!')
          }}>
          Hello
        </Button>
        <Button
          style={styles.buttonStyle1} textStyle={styles.textStyle}
          onPress={() => {
            console.log('world!')
          }}>
          Hello
        </Button>
        <Button
          style={styles.buttonStyle2} textStyle={styles.textStyle}
          onPress={() => {
            console.log('world!')
          }}>
          Hello
        </Button>
        <Button
          style={styles.buttonStyle3} textStyle={styles.textStyle}
          onPress={() => {
            console.log('world!')
          }}>
          Hello
        </Button>
        <Button
          style={styles.buttonStyle4} textStyle={styles.textStyle}
          onPress={() => {
            console.log('world!')
          }}>
          Hello
        </Button>
        <Button
          style={styles.buttonStyle5} textStyle={styles.textStyle}
          onPress={() => {
            console.log('world!')
          }}>
          Hello
        </Button>
        <Button
          style={styles.buttonStyle6} textStyle={styles.textStyle}
          onPress={() => {
            console.log('world!')
          }}>
          Hello
        </Button>
        <Button
          style={styles.buttonStyle7} textStyle={styles.textStyle6}
          onPress={() => {
            console.log('world!')
          }}>
          Hello
        </Button>
        <Button
          isLoading={true}
          style={styles.buttonStyle7} textStyle={styles.textStyle6}
          onPress={() => {
            console.log('world!')
          }}>
          Hello
        </Button>
        <Button disabledStyle={styles.buttonStyle8} isDisabled={true} textStyle={styles.textStyle8}>
          Disabled
        </Button>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    marginLeft: 20,
    marginRight: 20,
  },
  textStyle: {
    color: 'white'
  },
  textStyle6: {
    color: '#8e44ad',
    fontFamily: 'Avenir',
    fontWeight: 'bold'
  },
  buttonStyle: {
    borderColor: '#f39c12',
    backgroundColor: '#f1c40f'
  },
  buttonStyle1: {
    borderColor: '#d35400',
    backgroundColor: '#e98b39'
  },
  buttonStyle2: {
    borderColor: '#c0392b',
    backgroundColor: '#e74c3c'
  },
  buttonStyle3: {
    borderColor: '#16a085',
    backgroundColor: '#1abc9c'
  },
  buttonStyle4: {
    borderColor: '#27ae60',
    backgroundColor: '#2ecc71'
  },
  buttonStyle5: {
    borderColor: '#2980b9',
    backgroundColor: '#3498db'
  },
  buttonStyle6: {
    borderColor: '#8e44ad',
    backgroundColor: '#9b59b6'
  },
  buttonStyle7: {
    borderColor: '#8e44ad',
    backgroundColor: 'white',
    borderRadius: 0,
    borderWidth: 3,
  },
  buttonStyle8: {
    backgroundColor: 'white',
    borderColor: '#333',
    borderWidth: 2,
    borderRadius: 22,
  },
  textStyle8: {
    fontFamily: 'Avenir Next',
    fontWeight: '500',
    color: '#333',
  }
})

@@ -199,16 +199,180 @@
 er () %7B%0A
+    var onPressProps;%0A    if(this.state.isOnPressing) %7B%0A      onPressProps = styles.buttonStylePressing%0A    %7D else %7B%0A      onPressProps = styles.buttonStyle1%0A    %7D%0A
     retu
@@ -376,16 +376,16 @@
 eturn (%0A
-
       %3CV
@@ -736,33 +736,37 @@
 utton%0A          
-s
+textS
 tyle=%7Bstyles.but
@@ -766,49 +766,76 @@
 les.
-buttonStyle1%7D textStyle=%7Bstyles.textStyle
+textStyle%7D%0A          style=%7BonPressProps%7D%0A          activeOpacity=%7B1
 %7D%0A  
@@ -842,35 +842,55 @@
         
-o
+isO
 nPress
-=%7B() =%3E %7B%0A  
+ing=%7Bthis.state.isOnPressing%7D%0A
         
@@ -895,41 +895,88 @@
     
-c
 on
-sole.log('world!')%0A          %7D
+PressIn=%7B() =%3E this.onPressIn()%7D%0A          onPressOut=%7B() =%3E this.onPressOut()
 %7D%3E%0A 
@@ -2838,24 +2838,105 @@
 'bold'%0A  %7D,%0A
+  buttonStylePressing: %7B%0A    borderColor: 'red',%0A    backgroundColor: 'red'%0A  %7D,%0A
   buttonStyl

Update Example.js