onInput for React 360/React Vr does not function

Question

I am creating a a bare bones react 360 app in order to get familiar with input handling from a variety of sources. Here is the web page for the documentation Input Handling React 360. After reading the page, I can't get the input to work at all and its unclear as to why. Here is my code:

import React from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} from 'react-360';

export default class ExampleVR extends React.Component {
  render() {
    return (
  <View style={styles.panel}>
    <View style={styles.greetingBox}>

    ***********Why is this not doing anything?**************

      <View onInput={e => {
          const inputEvent = e.nativeEvent.inputEvent;
          console.log(inputEvent);
        }}>
          { /* ... */ }
      </View>

      ****************************
      <Text style={styles.greeting}>
        Welcome to React 360
      </Text>
    </View>
  </View>
);
}
};

The above code does nothing and honestly I'm not sure what it would do if it did work. From the documentation, I would think that it would console.log an input object for me to see. That's what I gathered from a previous react vr question I saw. What I don't get is how is this triggered? I'm clicking on it, pressing the key pad on my laptop and nothing. There's not too much information to go on. Has anyone encountered something like this before?

score 0 · Accepted Answer · answered Jan 09 '19 at 19:35

I think I figured out my own question for future reference. In the above code, <View onInput={....}> is 'invisible' when I run the application with npm start. What I did was remove the surrounding views included with the example and then added some stylesheet css stylings to it. Here is that code:

export default class ExampleVR extends React.Component {


render() {
    return (
        <View style={styles.input} onInput={e => {
            const inputEvent = e.nativeEvent.inputEvent;
            console.log(inputEvent);
          }}>
            { /* ... */ }
        </View>
    );
  }
};

const styles = StyleSheet.create({
  input: {
    width: 1000,
    height: 600,
    backgroundColor: 'rgba(255, 255, 255, 0.4)',
    justifyContent: 'center',
    alignItems: 'center',
  },
}

This works as I would expect. When I click on the present pad or a key press, the input object is printed as expected.

onInput for React 360/React Vr does not function

1 Answers1