I am new in react native, i'm trying to create a gamepad on android (play game on pc by using phone). I have 6 buttons: left, right, up, down, shoot and jump.
When I touch a button, it will send current key to nodejs on my computer vie socket.io
It works. But problem is: when I hold Left button then press shoot button, it can not shoot. How I handle multiple button down and up separately?
Here is my code:
import React, { Component } from 'react';
import {
View,
StyleSheet,
Text,
StatusBar,
TextInput,
} from 'react-native';
import io from 'socket.io-client';
class GameController extends Component {
state = {
settingModalVisible: false,
socketIo: io.connect('http://192.168.0.105:3000')
};
render() {
return (
<View style={styles.container}>
<StatusBar hidden />
<View style={styles.row}>
<Text>Setting</Text>
<TextInput style={{ height: 40, borderColor: 'gray', borderWidth: 1 }} />
</View>
<View style={styles.row}>
<View
onTouchStart={(e) => {
this.state.socketIo.emit('buttonDown', 'a');
return true;
}}
onTouchEnd={(e) => {
this.state.socketIo.emit('buttonUp', 'a');
return true;
}}
style={styles.button}
>
<Text>Left</Text>
</View>
<View
onTouchStart={(e) => {
this.state.socketIo.emit('buttonDown', 'd');
return true;
}}
onTouchEnd={(e) => {
this.state.socketIo.emit('buttonUp', 'd');
return true;
}}
style={styles.button}
>
<Text>Right</Text>
</View>
<View
onTouchStart={(e) => {
this.state.socketIo.emit('buttonDown', 'w');
return true;
}}
onTouchEnd={(e) => {
this.state.socketIo.emit('buttonUp', 'w');
return true;
}}
style={styles.button}
>
<Text>Up</Text>
</View>
<View
onTouchStart={(e) => {
this.state.socketIo.emit('buttonDown', 's');
return true;
}}
onTouchEnd={(e) => {
this.state.socketIo.emit('buttonUp', 's');
return true;
}}
style={styles.button}
>
<Text>Down</Text>
</View>
<View
onTouchStart={(e) => {
this.state.socketIo.emit('buttonDown', 'j');
return true;
}}
onTouchEnd={(e) => {
this.state.socketIo.emit('buttonUp', 'j');
return true;
}}
style={styles.button}
>
<Text>Shoot</Text>
</View>
<View
onTouchStart={(e) => {
this.state.socketIo.emit('buttonDown', 'k');
return true;
}}
onTouchEnd={(e) => {
this.state.socketIo.emit('buttonUp', 'k');
return true;
}}
style={styles.button}
>
<Text>Jump</Text>
</View>
</View>
</View>
);
}
}
Thanks in advance!