OnPress Prop of TouchableOpacity Causes Style Issues

[thaddavis]

COMPONENT

import React, { Component } from 'react';
import { Text, TouchableHighlight, View } from 'react-native';

import styles from './KeyboardButtonStyles';

class KeyboardButton extends Component {
state = {
focused: false,
pressed: false
};

constructor(props) {
super(props);
}

wait = (delay, ...args) =>
new Promise(resolve => setTimeout(resolve, delay, ...args));

onBlur = () => {
this.setState({
focused: false
});
};
onFocus = () => {
this.setState({
focused: true
});
};

onPress = () => {
// this.props.onPressKey(this.props.keyboardKeyObject);
};

render() {
let keyboardButtonStyle = styles.keyboardButton;
let keyboardButtonTextStyle = styles.buttonText;

if (this.state.focused) {
  console.log('focused ***');
  keyboardButtonStyle = styles.keyboardButtonFocused;
  keyboardButtonTextStyle = styles.buttonTextFocused;
}
// if (this.state.pressed) {
//   console.log('pressed ***');
//   keyboardButtonStyle = styles.keyboardButtonPressed;
// }

console.log(keyboardButtonStyle);
console.log(keyboardButtonTextStyle);

return (
  <TouchableHighlight
    style={keyboardButtonStyle}
    activeOpacity={1.0}
    onPress={this.onPress}
    onBlur={this.onBlur}
    onFocus={this.onFocus}
  >
    <Text style={keyboardButtonTextStyle}>
      {this.props.keyboardKeyObject.displayValue}
    </Text>
  </TouchableHighlight>
);

}
}

export default KeyboardButton;

STYLES

import { StyleSheet, Platform } from 'react-native';
import {
widthPercentageToDP,
heightPercentageToDP
} from '../../../../helpers/dp';

let keyboardButton = {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'rgba(255,255,255,0.7)',
borderWidth: 0.5
};

const styles = StyleSheet.create({
buttonText: {
color: 'rgba(0,0,0,0.9)',
fontSize: heightPercentageToDP(3)
},
buttonTextFocused: {
color: 'rgba(0,0,0,1.0)',
fontSize: heightPercentageToDP(4)
},
keyboardButton: {
...keyboardButton
},
keyboardButtonPressed: {
...keyboardButton,
borderRadius: 2,
// borderWidth: 1,
// borderColor: 'black',
backgroundColor: 'rgba(255,255,255,0.5)'
},
keyboardButtonFocused: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
borderWidth: 0.5,
backgroundColor: 'rgba(255,255,255,1.0)'
}
});

export default styles;

VERSION INFO

{
"name": "OceanviewTV",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest",
"ios": "NODE_PATH=../ node node_modules/react-native/local-cli/cli.js run-ios --scheme OceanviewTV-tvOS --simulator "Apple TV"",
"android": "NODE_PATH=../ node node_modules/react-native/local-cli/cli.js run-android",
"sync-android-time": "adb shell su root date $(date +%m%d%H%M%Y.%S)",
"android-debug": "npm run android && adb reverse tcp:8081 tcp:8081",
"adb-log": "adb logcat *:S ReactNative:V ReactNativeJS:V"
},
"dependencies": {
"@react-native-community/async-storage": "^1.3.4",
"@rematch/core": "^1.1.0",
"ajv": "^6.10.0",
"ajv-errors": "^1.0.1",
"axios": "^0.18.0",
"lodash": "^4.17.11",
"lodash.get": "^4.4.2",
"moment": "^2.24.0",
"prop-types": "^15.7.2",
"react": "16.8.3",
"react-moment": "^0.8.4",
"react-native": "0.59.4",
"react-native-fast-image": "^5.2.0",
"react-native-keychain": "^3.1.1",
"react-native-splash-screen": "^3.2.0",
"react-native-video": "^4.4.1",
"react-redux": "^6.0.1",
"react-router-native": "^5.0.0",
"redux": "^4.0.1"
},
"devDependencies": {
"@babel/core": "^7.4.0",
"@babel/runtime": "^7.4.2",
"babel-jest": "^24.6.0",
"jest": "^24.6.0",
"metro-react-native-babel-preset": "^0.53.1",
"react-test-renderer": "16.8.3"
},
"jest": {
"preset": "react-native"
},
"rnpm": {
"assets": [
"./assets/fonts/"
]
}
}

[matt-oakes]

Hello 👋 Thanks for submitting this issue. To help us triage your issue, can you please resubmit this issue using the template provided.