1

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!

Kevin Bui
  • 524
  • 3
  • 10

0 Answers0