Description
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/"
]
}
}