import React, { Component } from 'react';
import { Text, View, StyleSheet, TouchableOpacity, Button } from 'react-native';
import { Constants } from 'expo';

export default class App extends Component {
  state = {
    isDisabled: true,
  }
  onPressBox=()=>{
    this.setState({
      isDisabled: !this.state.isDisabled,
    })
  }
  render() {
    const { isDisabled } = this.state
    return (
      <View style={styles.container}>
        <Text>
          Example of bug in TouchableOpacity.
          The green box is disabled initially.
          If you press "toggle `disabled`" is it supposed become fully opaque.
          It will not change opacity until you tap it.
        </Text>
        <View style={styles.column}>
          <View style={styles.row}>
            <TouchableOpacity
              style={isDisabled?styles.disabled:styles.enabled} 
              disabled={isDisabled}>
              <View style={styles.box}>
                <Text>{isDisabled ? "Disabled" : "Enabled"}</Text>
              </View>
            </TouchableOpacity>
            <Button title="toggle `disabled`" onPress={this.onPressBox} />
          </View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: 'white',
  },
  enabled: {
    opacity: 1,
  },
  disabled: {
    opacity: 0.3,
  },
  row: {
    flexDirection: 'row',
  },
  column: {
    flexDirection: 'column',
  },
  box: {
    width: 100,
    height: 100,
    backgroundColor: 'green',
  },
});