I'm keep getting the following error when executing the React Native code below.
Link to Error Screenshot
I've tried various ways to define the actionEnum object but nothing seems to work. Please help!
import React from "react";
import {
View,
Text,
StyleSheet,
TextInput,
Button,
AsyncStorage
} from "react-native";
class AddItem extends React.Component {
static navigationOptions = {
title: "Add item"
};
static actionEnum = {
init: 1,
add: 2,
update: 3,
delete: 4,
set: 5
};
constructor(props) {
super(props);
this.setStateHandler(this.actionEnum.add);
}
.....
JavaScript doesn't have static variables, only static methods. You can work around this by exporting your enum object from your module instead of making it part of your class, but if you really need it to be part of your class you can use a get accessor.
class AddItem extends React.Component {
static get navigationOptions() {
return {
title: "Add item"
};
}
static get actionEnum() {
return {
init: 1,
add: 2,
update: 3,
delete: 4,
set: 5
};
}
constructor(props) {
super(props);
this.setStateHandler(this.actionEnum.add);
}
Related
I am currently switching to navigation 5.x from 4.x. I'm using
import { NavigationInjectedProps } from 'react-navigation'
across the entire application, but I cannot find anything equivalent in navigation 5. I'm using typescript.
Could anyone lead me in the right direction?
First of all, the logic behind obtaining params is changed. In v5, you have to access them from a route, which is passed as an additional property for class components, unlike using navigation in the previous versions.
To type your params in the right way, you have to type the route. For previously written code:
import { NavigationInjectedProps } from 'react-navigation'
type Params = {
param1: string
}
type Props = NavigationInjectedProps<Params>
class MyComponent extends Component<Props> {
render() {
const { param1 } = this.props.navigation.state.params
}
}
the rough equivalent will be:
import { StackScreenProps } from '#react-navigation/stack'
type RootParamsList = {
MyComponent: {
param1: string
}
}
type Props = StackScreenProps<RootParamsList, 'MyComponent'>
class MyComponent extends Component<Props> {
render() {
const { param1 } = this.props.route.params.param1
return null
}
}
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.
Ex-navigation allows defining navigation bar title using static route
static route = {
navigationBar: {
title: 'title'
}
}
I'd need to set navigationBar title programmatically after the component was mounted since it depends on data received from a server. How can I do it?
I've tried using props.route.config, but that only works when called in componentDidMount() but not later in component lifecycle.
this.props.route.config.navigationBar.title = 'new title'
Use the updateCurrentRouteParams as described here in the doc
:
class ProfileScreen extends React.Component {
static route = {
navigationBar: {
title(params) {
return `Hello ${params.name}`;
}
}
}
callMeLatter() {
this.props.navigator.updateCurrentRouteParams({name: "Jon Doe"})
}
}
I'm trying to use propTypes for my RN application, but it never seems to be enforced. My component looks something like this:
import React, { Component } from "react";
import { Text } form "react-native";
export class Table extends Component {
render() {
return (<Text>...</Text>);
}
}
Table.propTypes = {
data: React.PropTypes.string,
};
This didn't warn I passed a number into the component from another file like this:
<Table data= { 2000 } />
So I tried making propTypes a static property of Table because I saw some stuff about ES6 working with propTypes that way:
import React, { Component } from "react";
import { Text } form "react-native";
export class Table extends Component {
static propTypes = {
data: React.PropTypes.string,
};
render() {
return (<Text>...</Text>);
}
}
Then I tried adding a plugin to my .babelrc file
"plugins": [
"transform-class-properties",
]
I've tried making the prop required
static propTypes = {
data: React.PropTypes.string.isRequired,
};
I've even tried changing the export class Table... to export default class Table... with no luck. I've tried every combination of the methods listed above to no avail. What am I missing?
The problem seemed to go away by itself when I was fiddling with the code. It may have been an env issue like #asaf david suggested, I'm not really sure. I tried to go back and change stuff back to see if I could reproduce, but I couldn't :(. I'm sorry to anyone searching this in the future.
I want to ensure every element of an array property conforms to a particular shape.
This is different than the question answered in React proptype array with shape. They tested if every element matched a given pre-defined React proptype validator, in that case React.propTypes.number. I'm interested testing against a custom object shape.
For example:
class MyClass extends React.Component {
constructor(props) {
super(props);
}
static propTypes = {
data: React.PropTypes.arrayOf({
name: React.PropTypes.string,
year: React.PropTypes.number,
})
}
}
This triggers a warning: Failed propType: typeChecker is not a function Check the render method
You're close, but you need to specify what kind of proptype the array is of, and React.PropTypes.shape let's you specify an object with keys and their types.
static propTypes = {
data: React.PropTypes.arrayOf(
React.PropTypes.shape({
name: React.PropTypes.string,
year: React.PropTypes.number,
})
)
}
tip: do import React, { PropTypes } from 'react' so you can just use PropTypes.