I am developing a VR application using ViroReact, https://viromedia.com/viroreact. But I am having problem with using SkyBox (Cubemap) VR scene. Everything is working fine when I used Viro360Image view.
This is my VR scene using Viro360Image view
export default class HotelRoomVRScene extends Component {
constructor() {
super();
this.state = {} // Set initial state here
}
render() {
return (
<ViroScene>
<Viro360Image source={require('./res/hotel-room.jpg')} />
</ViroScene>
)
}
}
module.exports = HotelRoomVRScene;
The above scene is working fine. I can view the VR experience in the VR headset as well. But when I changed it to the Skybox version as below. It stopped working.
export default class HotelRoomVRScene extends Component {
constructor() {
super();
this.state = {} // Set initial state here
}
render() {
return (
<ViroScene>
<ViroSkybox source={{nx: require('./res/px.jpg'),
px: require('./res/px.jpg'),
ny: require('./res/px.jpg'),
py: require('./res/px.jpg'),
nz: require('./res/px.jpg'),
pz: require('./res/px.jpg')}} />
</ViroScene>
)
}
}
module.exports = HotelRoomVRScene;
The above code is throwing the following error.
So why is the Skybox version not working?
On your render method:
render() {
return (
<ViroScene>
<ViroSkybox source={{nx: require('./res/px.jpg'),
px: require('./res/px.jpg'),
ny: require('./res/px.jpg'),
py: require('./res/px.jpg'),
nz: require('./res/px.jpg'),
pz: require('./res/px.jpg')}} />
</ViroScene>
)
}
you have a typo for the skybox, its instead of
referring to: https://docs.viromedia.com/docs/viroskybox1
and also you are exporting the same class two times, one in:
export default class HotelRoomVRScene extends Component {
the other one in :
module.exports = HotelRoomVRScene;
I suggest you remove the latter one.
Related
I'm currently refactoring a FreeCodeCamp repo as way to learn mobx. What I'm trying to do is calculate this.store.studentCount as you can see in the StudentModal Component. Take a look here:
This is my /client/src/components/students/Modal.js
#observer
#inject('StudentModal')
export default class StudentModal extends Component {
store = new this.props.StudentModal()
renderStudentCount() {
let message
if (this.store.studentCount > 1) {
message = `${this.store.studentCount} students`
} else {
message = `${this.store.studentCount} student`
}
return <div id="student-count">{message}</div>
}
render() {
return (
<div className="AddStudentForm">
<div className="class-table-button-container">
<Button
onClick={this.open}
>
Add Student
</Button>
{this.renderStudentCount()}
</div>
.....
)
}
}
Taking a look at my models for the Modal component you can see I need to fetch a service to get the length of this but for whatever reason I cannot set the studentCount to a new value.
This is my /client/src/models/students/Modal.js
import { observable, action } from 'mobx'
import StudentsService from '../../services/StudentsService'
export default class StudentModal {
#observable open = true
#observable studentCount = 0
#action
fetchStudents() {
StudentsService.fetchStudents().then(response => {
const studentCount = response.body
this.studentCount = studentCount.length
})
}
}
You can take a look at the full source code here: https://github.com/imcodingideas/classroom-mode/tree/mobx-migration which I should remind you that this is open-source.
Am I doing this correctly? Do you have any feedback for me?
There seem to be some minor things:
Identical class names
This might lead to problems since, both your store and react component are called StudentModal
decorator order
as #Joseph suggested swap the order around your class:
#inject("StudentModal")
#observer
export default class StudentModal
State management
store = new this.props.StudentModal()
On creation of every StudentModal you seem to create a new state store. Normally te store is instantiated once (unless you really want seperate stores per modal) inside your entry point and then used later on:
import { render } from "react-dom";
import { Provider } from "mobx-react";
var stores = { StudentModal: new StudanModalStore() }
render(
<Provider {...stores}>
<StudentModal />
</Provider>,
rootEl,
);
#observer
#inject('StudentModal')
export default class StudentModal extends Component {
//used getter instead of setting once
// no longer use `new` but directly reference instance of the store.
get store (): StudentModalStore { return this.props.StudentModalas; }
}
above code is in typescript.
I am using react-native-video-controls component (https://www.npmjs.com/package/react-native-video-controls) which is based off react-native-video(https://www.npmjs.com/package/react-native-video) and I am trying to play the next video in a sequence and have that video seek to 0 (so it plays from the beginning). But I am getting the error: "Undefined is not a function (evaluating 'this.refs.myVideo.seek(0)') React-Native"
Here is my code:
import Video from 'react-native-video';
import VideoPlayer from 'react-native-video-controls';
export default class Player extends Component {
constructor(props){
this.state = {
playlist: [require(file1.mp4),require(file2.mp4)]
}
}
playNext() {
this.refs.myVideo.seek(0);
let playlist = this.state.playlist;
playlist.shift();
this.setState({playlist,})
}
render() {
return (
<View>
<VideoPlayer
ref='myVideo'
muted={false}
seekColor={ 'red' }
source={this.state.playlist[0]}
navigator={ this.props.navigator }
style={styles.player}
onEnd={()=>this.playNext()}
/>
</View>
);
}
}
what am I doing wrong
Edit: this is for android btw
First of all, the ref should look like: ref={this.myVideo}
When you are using VideoPlayer Video methods are deeper, so you should write: this.myVideo.player.ref.seek(0) (VideoPlayer is a container for Video)
I am trying this component react-native-calendar
It always gives error null is not an object (evaluating this.state.date)
I tried initializing state variable named state and assign it date value but error still exists.
var Calendar = require('react-native-calendar-component');
export default class proj extends Component {
constructor(props) {
super(props);
this.state = {
date: new Date()
};
}
render() {
return (
<Calendar
date={this.state.date}
onPrevButtonPress={() => this.handlePrevButtonPress()}
onNextButtonPress={() => this.handleNextButtonPress()}
onDateSelect={(date) => this.handleDateSelect(date)} />
);
}
}
You are importing the calendar component wrongly.
Try this instead:
import Calendar from 'react-native-calendar-component';
How can I access variable bvar in the code below? Also, when would I declare variables as:
a) state
b) between constructor() and render()
c) inside render() - my understanding is that I'd set them here if a variable can change and I'd like to set it each time a component renders. So if I know something is not changing at all, it'd be a const and where would I set it?
import React, {Component} from 'react';
export default class App extends Component {
constructor(props) {
super();
// Set the initial grid in
this.state = {
value: 4,
xsquares: 10,
ysquares: 10
};
var bvar = "cat";
}
render() {
var avar = [
"Hydrogen",
"Helium",
"Lithium",
"BerylÂlium"
];
let cvar = "dog";
return (
// Add your component markup and other subcomponent references here.
<div>
<h1>Hello, World! {this.state.value}</h1>
<h2>{this.state.xsquares}</h2>
<h3>{avar[0]}</h3>
<h4>{this.bvar}</h4>
<h3>{cvar}</h3>
</div>
);
}
}
All variables display apart from bvar.
bvar declared inside your constructor is not accessible inside render() method. It is out of scope. As answered by Caleb, you would need to use instance variable: this.bvar = "cat"
When would I declare variables as:
a) state
Use state if changes in data should affect the view (e.g. store user location in state so that current temperature can be established and rendered based on this location). Also, state can be used in the logic found in other methods of your component (e.g. fetch background image based on user's current location).
b) between constructor() and render()
Variables declared inside other methods of your component are often used to temporarily store data coming, for example, from the state, props, input fields etc. These variables are only accessible within those methods, e.g.
constructor() {
...
}
onInputText() {
var accountNumber = this.refs.inputField.value;
this.props.handleInputText(accountNumber);
}
render() {
...
}
c) inside render()
Variables are often declared inside render() to temporarily store data held in state or props. These variables are only accessible inside render(), e.g.
class WelcomeScreen extends React.Component {
render() {
var userName = this.props.userName;
return (
<div>
Hello, { userName }!
</div>
);
}
}
To define bvar within the constructor you would need to declare it as
this.bvar = "cat"
import React, {Component} from 'react';
export default class App extends Component {
constructor(props) {
super();
// Set the initial grid in
this.state = {
value: 4,
xsquares: 10,
ysquares: 10
};
this.bvar = "cat";
}
render() {
var avar = [
"Hydrogen",
"Helium",
"Lithium",
"BerylÂlium"
];
let cvar = "dog";
return (
// Add your component markup and other subcomponent references here.
<div>
<h1>Hello, World! {this.state.value}</h1>
<h2>{this.state.xsquares}</h2>
<h3>{avar[0]}</h3>
<h4>{this.bvar}</h4>
<h3>{cvar}</h3>
</div>
);
}
}
hai i am trying to move the view up when keyboard as shown using react-native,I followed the #sherlock's comment in (How to auto-slide the window out from behind keyboard when TextInput has focus? i got an error like this
I don't know how to resolve this error, can any one help me how to resolve this, any help much appreciated.
There's a great discussion about this in the react-native github issues
https://github.com/facebook/react-native/issues/3195#issuecomment-147427391
I'd start there, but here are a couple more links you may find useful, one of which is mentioned already in the article you referenced...
[React Tips] Responding to the keyboard with React Native
Andr3wHur5t/react-native-keyboard-spacer
In my library "react-native-form-generator" (https://github.com/MichaelCereda/react-native-form-generator) i did the following.
I created a Keyboard Aware scroll view (partially modified from https://github.com/facebook/react-native/issues/3195#issuecomment-146518331)
the following it's just an excerpt
export class KeyboardAwareScrollView extends React.Component {
constructor (props) {
super(props)
this.state = {
keyboardSpace: 0,
}
this.updateKeyboardSpace = this.updateKeyboardSpace.bind(this)
this.resetKeyboardSpace = this.resetKeyboardSpace.bind(this)
}
updateKeyboardSpace (frames) {
let coordinatesHeight = frames.endCoordinates.height;
const keyboardSpace = (this.props.viewIsInsideTabBar) ? coordinatesHeight - 49 : coordinatesHeight
this.setState({
keyboardSpace: keyboardSpace,
})
}
resetKeyboardSpace () {
this.setState({
keyboardSpace: 0,
})
}
componentDidMount () {
// Keyboard events
DeviceEventEmitter.addListener('keyboardWillShow', this.updateKeyboardSpace)
DeviceEventEmitter.addListener('keyboardWillHide', this.resetKeyboardSpace)
}
componentWillUnmount () {
DeviceEventEmitter.removeAllListeners('keyboardWillShow')
DeviceEventEmitter.removeAllListeners('keyboardWillHide')
}
scrollToFocusedInput (event, reactNode, extraHeight = 69) {
const scrollView = this.refs.keyboardScrollView.getScrollResponder();
setTimeout(() => {
scrollView.scrollResponderScrollNativeHandleToKeyboard(
reactNode, extraHeight, true
)
}, 220)
}
render () {
return (
<ScrollView
ref='keyboardScrollView'
keyboardDismissMode='interactive'
contentInset={{bottom: this.state.keyboardSpace}}
showsVerticalScrollIndicator={true}
style={this.props.style}>
{this.props.children}
</ScrollView>
)
}
Then i use it like any other scrollview
import { KeyboardAwareScrollView } from 'react-native-form-generator'
...
handleFormFocus(event, reactNode){
this.refs.scroll.scrollToFocusedInput(event, reactNode)
}
...
<KeyboardAwareScrollView ref='scroll'>
<Form ref='registrationForm'
onFocus={this.handleFormFocus.bind(this)}
onChange={this.handleFormChange.bind(this)}
label="Personal Information">
........
</Form>
</KeyboardAwareScrollView>
on change my component (Form) will call scrollToFocusedInput in KeyboardAwareScrollView (using the ref).
i suggest to check the code of my library (see the link on top), or simply use it (everything it's already tested and working).
If you have further questions just comment