facebookarchive / react-360

Create amazing 360 and VR content using React
https://facebook.github.io/react-360
Other
8.73k stars 1.22k forks source link

Input Handling not registering unicode input #658

Open zmax92 opened 5 years ago

zmax92 commented 5 years ago

I have added onInput on View per instructions in documentation

render (){
  return (
    <View onInput={e => {
      const event = e.nativeEvent;
      const inputEvent = event.inputEvent;
      console.log('inputEvent', inputEvent);
      console.log('event', event);
      this.setState({
        text: String.fromCharCode(inputEvent.button)
      });
    }}><Text>{ this.state.text }</Text>
    </View>
  )
}

after looking thru console log I have found that the input is not registering keys that are Unicode characters, characters from other languages other then English alphabet. I have added font that supports Unicode characters but it didn't work. How would I register eventlistener from keyboard, and that way bypass this shortcoming?

andrewimm commented 5 years ago

The keyboard input handler just sends the keyCode, which is the keyboard's button, not an ascii code: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode

Input handlers are customizable. You can create your own keyboard input handler that passes the information you need from the original keydown / keyup event. I would model it after the existing keyboard input handler: https://github.com/facebook/react-360/blob/master/React360/js/Controls/InputChannels/KeyboardInputChannel.js#L35-L51

zmax92 commented 5 years ago

I'm sorry, I'm quite new to react customization... Do I copy just lines 35-51, and where do I call them? or do I copy whole KeyboardInputChannel.js, then where do I attach it to fire on input handler?