I have no idea How to set state.
Below is my code...
import React from 'react';
import { StyleSheet, Text, View, TouchableHighlight, AsyncStorage, ListView } from 'react-native';
export default class App extends React.Component {
constructor(){
super();
this.state = {
myLeader: 'Joe',
};
}
setMyLeader(name){
this.setState({
myLeader: name
});
}
render() {
return (
<View>
<TouchableHighlight
style={{padding: 30}}
onPress={this.setState(myLeader: 'xxx')}
>
<Text>foo</Text>
</TouchableHighlight>
</View>
);
}
}
error message is this. 'Can't find variable: myLeader'
How to fix this problem?
Inside your onPress function you can:
a) directly set the state
onPress={() => this.setState({ myLeader: 'xxx' })}
b) call your setLeader function
onPress={() => this.setMyLeader('xxx')}
Related
I have a problem when getting value. It always returns me an error navigation.getParam is not a function.
Account.js
<TouchableOpacity onPress={() => this.props.navigation.navigate('Detail_Account',
{id:'hello'})}>
<Block style={ styles.content }></Block>
</TouchableOpacity>
in my Detail Account
const { navigation } = this.props;
const id = navigation.getParam('id', 'empty')
return(
<Block>
<Text>
{id}
</Text>
</Block>
);
Suggest any solution for this.
1) Go to your package.json file in your project.
2) Change the version of #react-navigation/stack to a 5.x.x.
Example:
"#react-navigation/stack": "^5.2.14",
3) Run npm install.
4) Edit your DetailAccount.js as follows.
import React from 'react';
import { StyleSheet, View, Alert } from 'react-native';
import { Block, Text } from 'galio-framework';
class DetailAccount extends React.Component {
constructor(props) {
super(props);
}
render() {
const id = this.props.route.params.id;
return (
<Block>
<Text>{id}</Text>
</Block>
);
}
}
export default DetailAccount;
5) Run npm start and restart your project.
You will fix the problem.
Try this solution
Account.js
<TouchableOpacity
onPress={() =>
this.props.navigation.navigate("Detail_Account", { id: "hello" })
}
>
<Block style={styles.content}></Block>
</TouchableOpacity>;
Detail Account
const { id } = this.props.route.params;
return (
<Block>
<Text>{id}</Text>
</Block>
);
You can do like this...
const { navigation } = this.props;
const id = navigation.state.params.id;
return (
<Block>
<Text>{id}</Text>
</Block>
);
UPDATE
When configured the whole code of DetailAccount.js, the problem was, props are not received in to the particular component. So, the components doesn't know what this.props is.
Please update your DetailAccount.js as follows.
import React from 'react';
import { StyleSheet, View, Alert } from 'react-native';
import { Block, Text } from 'galio-framework';
class DetailAccount extends React.Component {
constructor(props) {
super(props);
}
render() {
const id = this.props.navigation.state.params.id;
return (
<Block>
<Text>{id}</Text>
</Block>
);
}
}
export default DetailAccount;
That means, simply you have to add the below part to your DetailAccount commponent.
constructor(props) {
super(props);
}
I have made two component (parent & child) & import the child component containing react-native modal
I have render child component after state change, it renders first time but on second time, it doesn't work.
Parent.js file is as follows:
import react, {Component} from 'react';
import { View, Text, TouchableOpacity} from 'react-native';
import ActionModal from './ActionModal';
export default class Parent extends Component {
constructor(props){
super(props);
this.state = { tabclicked: false }
}
actiontabclicked = () => {
this.setState({ tabclicked: true });
}
render(){
return (
<View>
<TouchableOpacity onPress={() => { this.actiontabclicked()} }>
<Text> MOVE</Text>
</TouchableOpacity>
{ (this.state.tabclicked) ? <ActionModal /> : null }
</View>
)
}
}
ActionModal.js file code
import React, {Component} from 'react';
import {Modal, Text, TouchableHighlight, View, Alert} from 'react-native';
export default class ActionModal extends Component {
constructor(){
super();
this.state = { modalVisible: true }
}
setModalVisible(visible) {
this.setState({modalVisible: visible});
}
render() {
return (
<View style={{marginTop: 22}}>
<Modal
animationType="slide"
transparent={false}
visible={this.state.modalVisible}
onRequestClose={() => { this.setModalVisible(!this.state.modalVisible)}}>
<View style={{marginTop: 22}}>
<View>
<Text>Hello World!</Text>
</View>
</View>
</Modal>
</View>
);
}
}
ActionModal opens first time but not second time, I think this is because state becomes true but after close modal it doesn't reset.
How can I achieve that ? Thanks in advance
You're not being so clear with what you want to achieve, if you want to achieve this behaviour of tapping > dismiss > tap again > shows
you should make something like this on your setModalVisible function:
setModalState = () => {
this.setState(prevState => ({
modalVisible: !prevState.modalVisible
})
}
This will change the state opposite to what it was. If you want to have more control maybe you can create two functions setModalOpen and setModalClosed
Maybe you can use props on the child component when onRequestClose is triggered to pass this function to the parent and there you can call setModalClosed, the way you have to do it is to make a callback with the given props (look for passing props to parent in react on the internet, it's quite simple)
Hope I could help
I have 2 views and I want to move from the first one to the second one without using createStackNavigator
There´s no need to use navigation because the first view is just a welcome screen
import React from 'react';
import { View, Text, Button } from 'react-native';
class HomeScreen extends React.Component {
render() {
const { navigate } = this.props.navigation;
return (
<View>
<Text>Welcome!</Text>
<Button
title="sign In"
onPress={() => navigate('SignInScreen')}
/>
</View>
);
}
}
class SignInScreen extends React.Component {
render() {
return (
<View>
<Text>Sign In screen</Text>
</View>
);
}
}
export default HomeScreen
the error I´m getting is
TypeError: undefined is not an object (evaluating 'this.props.navigation.navigate')
thank you.
Use a flag on state. When you click the button on HomeScreen, it will change the flag to true, which will allow the conditional statement to call the SignInScreen to be rendered.
import React from 'react';
import { View, Text, Button } from 'react-native';
class HomeScreen extends React.Component {
state = {
loggedIn: false,
};
render() {
const { navigate } = this.props.navigation;
return this.loggedIn ? (
<SignInScreen />
) : (
<View>
<Text>Welcome!</Text>
<Button
title="sign In"
onPress={() => this.setState({ loggedIn: true })}
/>
</View>
);
}
}
class SignInScreen extends React.Component {
render() {
return (
<View>
<Text>Sign In screen</Text>
</View>
);
}
}
export default HomeScreen;
Hi I'm having some trouble using the NavigatorIOS in my app, it gives me the error:'undefined is not an object(evaluating 'this.props.navigator.push').
I tried to see some examples but I can't see the error, can someone help me?
Here is the code:
import React, { Component, PropTypes } from 'react';
import Dimensions from 'Dimensions';
import Menu from './Menu'
import {
AppRegistry,
StyleSheet,
Image,
TouchableHighlight,
NavigatorIOS,
FadeInView,
Text,
View
} from 'react-native';
class Home extends React.Component {
constructor(props, context) {
super(props, context);
this.onForward = this.onForward.bind(this);
}
onForward(Menu){
this.props.navigator.push({
component: Menu,
title: "Menu",
navigationBarHidden: true,
});
}
render() {
return (
<View style={styles.container}>
<Image
style={styles.img}
source={require('./img/scrittaNera.png')}
onLoadStart={(e) => this.setState({loading: true})}
/>
<TouchableHighlight style={styles.button} onPress={() => this.onForward()}>
<Text style={styles.buttonText}>Get Inspired</Text>
</TouchableHighlight>
</View>
);
}
}
Thanks
You need to bind the function to your Component in this case this can be done as follows:
<TouchableHighlight
style={styles.button}
onPress=this.onForward.bind(this)>
....
</TouchableHighlight>
Also you need to make sure your main component is wrapped inside a <NavigatorIOS> component. Such as:
import React, { Component, PropTypes } from 'react';
import { NavigatorIOS, Text } from 'react-native';
export default class NavigatorIOSApp extends Component {
render() {
return (
<NavigatorIOS
initialRoute={{
component: MyScene,
title: 'My Initial Scene',
}}
style={{flex: 1}}
/>
);
}
}
Trying to load partial view inside my drawer but instead, I'm getting blank page.
Can anybody guide me with this;
MainScreen.js
..
import DrawerContent from "./PartialViews/DrawerContent";
...
render() {
return (
<DrawerLayoutAndroid
style={mainStyles.applicationView}
drawerWidth={300}
drawerPosition={DrawerLayoutAndroid.positions.Left}
renderNavigationView={() => {
<DrawerContent onItemClick={this._change.bind(this)} />;
}}
ref={_drawer => this.drawer = _drawer}
>
DrawerContent.js
import React, { Component } from "react";
import {
View,
Text,
Image,
ScrollView,
TouchableOpacity
} from "react-native";
import drawerStyles from "../Styles/DrawerContentStyles";
export default class DrawerContent extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<View style={drawerStyles.container}>
...
</View>
)}
I'm new to react-native development and was also struggling with this same issue, this is how I solved it:
const Drawer = (mainscreen) => {
return (
<View>
...
</View>
);
}
export default Drawer;
then within your MainScreen you can call it and pass in you context
<DrawerLayoutAndroid
ref={'DRAWER'}
drawerWidth={300}
drawerPosition={DrawerLayoutAndroid.positions.Left}
renderNavigationView={() => Drawer(this)}
>
Not sure if this is the right approach, but it works.
Hope this helps