Trying to follow the React Native tutorial with the Movies app.
Using iOS or Android everything goes fine until we try to introduce state into the component.
The tutorial does not use ES6 classes but the Hello World App does and this is where it gets confusing.
The tutorial says to add getIntialState which breaks I assume due to using ES6 classes, however using a constructor also does not seem to work so I wanted to know what is the correct way to proceed?
Tutorial
getInitialState: function() {
return {
movies: null,
};
},
ES6 Equivalent?
constructor(props) {
super(props);
this.state = {
movies: null,
};
},
Do not use the comma (,) after methods in the class!
class ListApp extends Component {
constructor(props){
super(props);
this.state = { loaded: false };
} //, <--- no comma!
...
...
...
}
Related
So I'm trying to use react native and aws-amplify to build a web and mobile app with one code base. Now I just added the withAuthenticator component to my app which works fine on the mobile part but when i run the web app in the browser I'm unable to type into the authentication field that is if I click on it the cursor appears and emmediately dissapears suprisingly though if i click and hold I'm suddenly able to type aslong as I'm holding the mouse button. So after that I tried to instead create my custom authenticator which worked fine for mobile but on the web it returned the error class constructors must be invoked with 'new'. My code is below hope someone can help me with this. Thanks!
class MySignIn extends SignIn {
constructor(props) {
super(props);
this.state = {
username: null,
password: null,
error: null
}
this.checkContact = this.checkContact.bind(this);
this.signIn = this.signIn.bind(this);
}
render() {
if (this.props.authState !== 'signIn') {
return null;
}
return(
<View style={{flex:1, backgroundColor: 'blue'}} behavior="padding">
<Text>Stuff and Stuff</Text>
</View>
);
}
}
export default withAuthenticator(Signout, false, [
<MySignIn/>,
<ConfirmSignIn/>,
<VerifyContact/>,
<SignUp/>,
<ConfirmSignUp/>,
<ForgotPassword/>,
<RequireNewPassword />
]);
class MySignIn extends SignIn is this correct? ive usually imported class of class MySignIn extends React.Component
and that works because they have imported signIn from
import { ConfirmSignIn, ConfirmSignUp, ForgotPassword, RequireNewPassword, SignIn, SignUp, VerifyContact, withAuthenticator } from 'aws-amplify-react';
and hence this is a custom class component , hence it works
// This is my custom Sign in component
class MySignIn extends SignIn {
render() {
...
}
}
this works. Hope it helps
Specifically at points such as this
componentDidMount() {
this._getCoords();
}
the "{" which comes before this._getCoords is marked as wrong. As is the "{" after
constructor(props)(
super(props);
this._getCoords = this._getCoords.bind(this);
this.state = {
position: null
};
Is there any reason for this? Instead of accepting the { as valid, it says a ) is expected instead.. But when I put in that suggestion the code obviously breaks.
I have tried to use tools such as "ES7 React/Redux/GraphQL/React-Native snippets", "React-Native/React/Redux snippets for es6/es7", and "React Native Tools"... But none of them seem to allow me to properly write React Native code.
I've attempted to turn extensions on and off without much difference being seen. It seems like VSCode wants me to purely code in JavaScript
constructor(props)(
super(props);
this._getCoords = this._getCoords.bind(this);
this.state = {
position: null
};
componentDidMount() {
this._getCoords();
}
As previously state the general error I am seeing is ";" expected or ") expected" instead of accepting the appropriate syntax of React Native. Additionally, although this is more visual, the color-coded nature of various commands isn't appearing.
Edit
import {MapView } from 'react-native-maps';
constructor(props){
super(props);
this._getCoords = this._getCoords.bind(this);
this.state = { position: null };
}
componentDidMount() { this._getCoords(); }
When you include a constructor, you must use middle brackets instead of small brackets.
( => { // { instead of (
JavaScript is based on Java and is an object-oriented language. Therefore, you create objects in the class. To use the constructor, you must use a class.
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
position: null
};
}
componentDidMount() {
this._getCoords();
}
_getCoords() {
alert("_getCoords")
}
render() {
return(<View><Text>Basic Screen </Text> </View>);
}
}
Exists some way to do this?
When I use { navigation.goBack() } my changes wasn't does updated in the before screen, but using navigate('MyObject', params ) the changes will be made without additional code to receive the changes.
There are 2 ways I can think of for you to do this. The first is to use Redux and the second is to pass a function to the next screen that will update the previous screen. Example (for the second method) are below:
export default class screenA extends Component {
constructor(props) {
super(props);
this.state = {value: 0};
}
updateValue=(val)=>{
this.setState({value: val});
}
openScreenB=()=>{
this.props.navigation.navigate('screenB', {
updateValue: this.updateValue,
});
}
}
export default class screenB extends Component {
updateClassAValue() {
const {params} = this.props.navigation.state;
params.updateValue(20);
this.props.navigation.pop();
}
}
For Redux, I can't really say much about it since I haven't used it that much. However, it's made for this kind of purpose of sharing values between screen and easily updating the values.
I'm new on React-Native and it's my first React-Native app. However, I have already some problems.
I want to pass a variable from one class (Home.js) to an another. (Is it possible without using the composent in the render() fonction ?)
##### Home.js #####
class Home extends Component {
constructor(props) {
super(props);
this.state = {direction: "defaultvalue"};
}
getCurrentDirection() {
return this.state.direction;
}
render() {
/***..... some elements ..*/
}
}
export default Home
And
#### Two.js ####
import Home from './Home'
/** SOME CODE **/
const DrawerOptions = {
initialRouteName: Home.getCurrentDirection(),
contentComponent: CustomDrawerContentComponent,
drawerWidth: 300,
};
However it doesn't work... How to resolve it ? I have already try some solutions as declare the getCurrentDirection as static but nothing.
In addition, it seems to be a specific case because DrawerOptions is not a class. Could you please, add to your response also, how make it if I want to obtain the variable into the class Two.js ?
I meant if Two.js was for example :
##### Two.js #####
class Two extends Component {
var myvariable = Home.getCurrentDirection();
render() {
/***..... some elements ..*/
}
}
Thanks a lot in advance
A recommendable way of accessing the state from a component into another is to use (in this case) the Home component as a parent of Two component. This way you don't have to trigger a function to access the Home's state. On each time when the state of the parent (in this case) component will be updated, the Two component will receive the updated property (direction). If you want to call a function from Two component, you have to pass it a function as a property (changeCurrentDirection) that will call back the function you want to trigger from Home component.
So you would have something like this:
class Home extends React.Component {
constructor(props) {
super(props);
this.state = {
direction: "defaultValue"
};
}
changeCurrentDirection() {
this.setState({
direction: "valueChanged"
})
}
render() {
let state = this.state;
return (
<Two
direction={state.direction}
changeCurrentDirection={() => this.changeCurrentDirection.bind(this)}/>
)
}
}
class Two extends React.Component {
render() {
let props = this.props;
return (
<div>
<h3>{props.direction}</h3>
<button onClick={props.changeCurrentDirection()}>Change value</button>
</div>
)
}
}
React.render(<Home/> , document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.min.js"></script>
<div id="app"></div>
Additional info you can find here.
Also, if you want to have a good management of the state of your components, my advice for you is to use redux. Using this library you can easily connect the component's actions and properties that can further be accessible from other files where you can manage them.
Anyone can help me fix this error when using code modal sample in link https://facebook.github.io/react-native/docs/modal.html I can't understand why this error appear although i coded absolutely same code sample.
Use ES6 class. Constructor will work only on ES6 class.
class ModalExample extends React.Component {
constructor () {
super(props)
}
render () {
// code
}
}
If you don't want to use ES6 class, then use getInitialState to set the state.
var ModalExample = React.createClass ({
getInitialState: function() {
return {
modalVisible: false
}
}
})