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';
Related
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.
I'm having a problem setting a state in react-native. I can console.log the value just fine but when I call setState() I get Reference error 'targetSpreadsheet' is not defined.
This is in following function
getCategories = (file) => {
console.log(this.state.targetSpreadsheet); // works fine
this.setState({targetSpreadsheet: file}); // targetSpreadsheet is not defined.
}
And a picker that calls it
<SimplePicker
ref={'picker2'}
options={this.state.spreadsheetNames}
onSubmit={(option) => {
for(var i = 0; i < this.state.spreadsheets.files.length; i++){
if(this.state.spreadsheets.files[i].name === option){
let file = this.state.spreadsheets.files[i];
this.getCategories(file);
break;
}
}
}}
/>
EDIT
constructor
constructor(props){
super(props);
this.state = {
targetSpreadsheet: ''
}
this.getCategories = this.getCategories.bind(this);
}
This show you want to access the spreadsheets object that has files array in it
this.state.spreadsheets.files[I]
But In your constructor you have initialised targetSpreadsheet as and string object, so you are getting error.
this.state = {
targetSpreadsheet: ''
}
Solution : You need to make it as an object with files as an empty array.
this.state = {
targetSpreadsheet: {
files:[]
}
}
I am trying to set I18n.t to a variable then call this variable inside my class. But I am getting TypeError: undefined is not an object.
import I18n from 'react-native-i18n';
let tt = I18n.t;
class App extends Component {
render(){
return (
<View>
<Text>{tt('greeting')}</Text>
</View>
)
}
}
This will be useful check it out:
var tt = (translation) => I18n.t(translation);
<Text>{tt('greeting')}</Text>
I'm just getting started with Mobx in a react-native project and am having trouble understanding how to perform changes on a observed object.
Changing the object reference via the setWorkingObject action function in my store properly renders the UI, however if I just want to change a single property within this object, how do I cause a render?
My "store":
export default class MyStore {
constructor() {
extendObservable(this, {
workingObject: null
});
}
}
My "container":
class Container extends Component {
render() {
return (
<Provider store={new MyStore()}>
<App />
</Provider>
);
}
}
and my "component", which uses a simple custom input component (think of it like Checkbox) to perform changes to a property of my workingObject
class MyClass extends Component {
...
render() {
const {store} = this.props;
return
<View>
...
<RadioGroup
options={[
{ title: "One", value: 1 },
{ title: "Two", value: 2 }
]}
onPress={option => {
store.workingObject.numberProperty = option.value;
}}
selectedValue={store.workingObject.numberProperty}
/>
...
</View>
}
}
export default inject("store")(observer(MyClass));
I can't figure out why this doesn't work, in fact it looks very similar to the approach used in this example
Any other tips/critique on how I've implemented mobx welcome
The problem is that only existing properties are made observable at the time the workingObject is first assigned.
The solution is to declare future properties at the time of assignment, ie:
// some time prior to render
store.workingObject = { numberProperty:undefined };
First, you don't want to set initial value to null. Second, adding properties to observable object after it was created will not make added properties observable. You need to use extendObservable() instead of assigning new properties directly to observable object. Another solution is to use observable map instead.
in your store:
extendObservable(this, {
workingObject: {}
});
in your component:
extendObservable(store.workingObject, {numberProperty: option.value});
I recommend using Map in this case:
extendObservable(this, {workingObject: new Map()});
in your component:
store.workingObject.set(numberProperty, option.value);
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>
);
}
}