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>
Related
so I have declared my enums like so:
export const DOCUMENT_TYPE = {
Project: 'Project',
Document: 'Document'
}
And now I'm trying to access them in another document:
import DOCUMENT_TYPE from '../constants/enums'
const CreateDocumentScreen = props => {
const type = props.type == DOCUMENT_TYPE.Project ? "Project" : "Document";
return (
<View>
<Text>Create {type}</Text>
<TextInput/>
</View>
)
}
However, this line:
const type = props.type == DOCUMENT_TYPE.Project ? "Project" : "Document";
is throwing "TypeError: undefined is not an object"
My Guess:
import { DOCUMENT_TYPE } from '../constants/enums'
instead of
import DOCUMENT_TYPE from '../constants/enums'
export default class App extends React.Component {
constructor() {
super();
this.itemRef = firebaseApp.database().ref();
this.state = {
myArray: [],
};
}
componentDidMount() {
//get database from firebase
//................
this.setState({
// load database into myArray
// Example:
//myArray: myDatabaseFirebase
})
}
render() {
return (
<ViewPager>
{this.state.myArray.map(item => {
return (
<Text>Something from database </Text>
)
})}
</ViewPager>
);
}
}
when I run app it show blank screen, I think myArray did not load database so it null and the app show blank screen. How do I solve this problem ?
On the first render, UI gets loaded and due to the async nature of your firebase data it takes time to get load hence you need to check whether the data is available or not in myArray. Since you have defined myArray as empty initially So we can directly check the length. just add condition
return (
<ViewPager>
{this.state.myArray.length > 0 && this.state.myArray.map(item => {
return (
<Text>Something from database </Text>
)
})}
</ViewPager>
);
You need to learn JS and understand Sync/Async.
You are updating your array outside of your listener callback. You should setState inside of callback.
In the render method check if my array is not null and not empty
return (
<ViewPager>
{(this.state.myArray&&this.state.myArray.length>0)?
this.state.myArray.map(item => {
return (
<Text>Something from database </Text>
)
})
:<Text>No data present</Text>
}
</ViewPager>
);
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>
);
}
}