diff --git a/index.vr.js b/index.vr.js index 840e6c8..4fb0aca 100644 --- a/index.vr.js +++ b/index.vr.js @@ -1,34 +1,61 @@ -import React from 'react'; -import { - AppRegistry, - asset, - Pano, - Text, - View, -} from 'react-vr'; +import React from "react"; +import { AppRegistry, asset, Pano, Text, View } from "react-vr"; +import text from "./text"; + +const textSplit = text.split(" "); export default class VRTextReader extends React.Component { + + constructor() { + super(); + + this.timer = this.timer.bind(this); + this.state = { + currentCount: 0 + } + } + componentDidMount() { + var intervalId = setInterval(this.timer, 200); + // store intervalId in the state so it can be accessed later: + this.setState({ intervalId: intervalId }); + } + + componentWillUnmount() { + // use intervalId from the state to clear the interval + clearInterval(this.state.intervalId); + } + + timer() { + // setState method is used to update the state + + if (this.state.currentCount === textSplit.length) { + clearInterval(this.state.intervalId); + } + else { + this.setState({ currentCount: this.state.currentCount + 1 }); + } + } + render() { return ( - - hello + textAlign: "center", + textAlignVertical: "center", + transform: [{ translate: [0, 0, -3] }] + }} + > + {textSplit[this.state.currentCount]} ); } -}; +} -AppRegistry.registerComponent('VRTextReader', () => VRTextReader); +AppRegistry.registerComponent("VRTextReader", () => VRTextReader); diff --git a/text.js b/text.js new file mode 100644 index 0000000..ead72f6 --- /dev/null +++ b/text.js @@ -0,0 +1,2 @@ +const text = `Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps to outline the visual elements of a document or presentation, eg typography, font, or layout. Lorem ipsum is mostly a part of a Latin text by the classical author and philosopher Cicero. Its words and letters have been changed by addition or removal, so to deliberately render its content nonsensical; it's not genuine, correct, or comprehensible Latin anymore. While lorem ipsum's still resembles classical Latin, it actually has no meaning whatsoever. As Cicero's text doesn't contain the letters K, W, or Z, alien to latin, these, and others are often inserted randomly to mimic the typographic appearence of European languages, as are digraphs not to be found in the original.`; +export default text;