I am not able to navigate from one screen to another, I don't know why can anyone tell me what is the proper solution of this Error.
export default class Pro extends React.Component {
constructor(props) {
super(props);
this.state = {
email: '',
username: '',
};
}
_onPressButton = () =>{
this.props.navigation.navigate('Profile');
}
render() {
return (
<Block row style={styles.main}>
<Block>
<Image
source={{ uri: Images.ProfilePicture }}
style={styles.avatar}
/>
</Block>
<Block center>
<TouchableOpacity onPress={this._onPressButton()} underlayColor="white">
<Text>User name</Text>
<Text>Email</Text>
</TouchableOpacity>
</Block>
</Block>
);
}
}
Any help will be appreciated.
Use your button TouchableOpacity like this :
<TouchableOpacity onPress={() => this._onPressButton()} underlayColor="white">
<Text>User name</Text>
<Text>Email</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => {this._onPressButton}} underlayColor="white">
<Text>User name</Text>
<Text>Email</Text>
</TouchableOpacity>
You might also try this
Check the route page, because you may forget to add routes.
Profile: {
screen: ProfileView,
navigationOptions: {
header: null,
}
}
Related
I'm developing an application for a school project, and in this application I have a camera component in each view. When I go back on a view the camera freeze.
There is my code of one view:
class LoginView extends React.Component {
constructor(props) {
super(props);
}
togglePseudo = pseudo => {
const action = {type: 'USER_PSEUDO', value: pseudo};
this.props.dispatch(action);
};
render() {
const {navigate} = this.props.navigation;
const userPseudo = this.props.userPseudo;
return (
<View style={style.mainContainer}>
<RNCamera
style={style.backgroundCamera}
type={RNCamera.Constants.Type.back}
flashMode={RNCamera.Constants.FlashMode.on}
androidCameraPermissionOptions={{
title: "Permission d'utiliser la camera",
message: "L'application necessite l'autorisation de la camera",
buttonPositive: 'Autoriser',
buttonNegative: 'Refuser',
}}
/>
<View style={style.goContainer}>
<TouchableOpacity
style={style.backButton}
onPress={() => navigate('HomeView')}>
<Image source={require('assets/images/back-button.png')} />
</TouchableOpacity>
<View style={style.centeredElements}>
<Text style={style.titleMission}>Mission "Pc"</Text>
<View style={style.modalChoosePseudo}>
<Text style={style.modaltitle}>Choisir un pseudo</Text>
<TextInput
style={style.pseudoInput}
onChangeText={pseudo => this.togglePseudo(pseudo)}
value={userPseudo}
/>
{userPseudo !== '' ? (
<TouchableOpacity
style={style.validateButton}
onPress={() => navigate('InGame')}>
<Text style={style.buttonText}>Valider</Text>
</TouchableOpacity>
) : (
<TouchableOpacity
style={[style.validateButton, style.validateButtonDisabled]}
onPress={() =>
Alert.alert('Alerte', 'Veuillez entrer un pseudo')
}>
<Text
style={[style.buttonText, style.validateButtonDisabled]}>
Valider
</Text>
</TouchableOpacity>
)}
</View>
<Image
style={style.logoDimagine}
source={require('assets/images/logo_title_vertical.png')}
/>
</View>
</View>
</View>
);
}
}
I have already looked for solutions, so I tried what I found.
I've try to use componentDidMount with willFocus and willBlur, but it never detect them :
componentDidMount() {
const {navigation} = this.props;
navigation.addListener('willFocus', () =>
this.setState({focusedScreen: true}),
);
navigation.addListener('willBlur', () =>
this.setState({focusedScreen: false}),
);
}
I'm new to react native and so I'm wondering why I'm receiving an error like
"undefined is not an object (evaluating 'props.navigation.toggleDrawer')" when I try to click on hamburger menu in my Home
Here below my Home.js
const NavigatorHome = props => {
return (
<View>
<AppHeader navigation={props.navigation} title="Home" />
</View>
);
};
export default class Home extends Component {
state = {
users: []
}
async componentDidMount() {
const users = await ajax.fetchUsers();
//ET20200226 This was a warning
this.setState({users});
}
render() {
return (
<View>
<NavigatorHome></NavigatorHome>
<View>
<Text style={styles.h2text}>
List of requests
</Text>
<FlatList
data={this.state.users}
showsVerticalScrollIndicator={false}
renderItem={({item}) =>
<View style={styles.flatview}>
<Text style={styles.uuid}>{item.uuid}</Text>
</View>
}
keyExtractor={item => item.uuid}
/>
</View>
</View>
);
}
}
Here my AppHeader.js
const AppHeader = props => {
return (
<Header
//leftComponent={<HamburgerMenu navigation={props.navigation} />}
leftComponent={<Icon
color="#fff"
name="menu"
onPress={() => props.navigation.toggleDrawer()}
/>}
centerComponent={{
text: props.title,
style: { color: "#fff", fontWeight: "bold" }
}}
statusBarProps={{ barStyle: "light-content" }}
/>
);
};
export default AppHeader;
Can someone help me to figure out how to fix it?
The reason for the error is that props.navigation is undefined in NavigatorHome. you must pass props.navigation to NavigatorHome. Your code should be as follows:
<View>
<NavigatorHome navigation={this.props.navigation}></NavigatorHome>
<View>
In my drawer navigator, there is log out button when I press on logout. I want to remove app_token but I don't know how.
I try to put something like this:
onItemPress:() => { AsyncStorage.removeItem('app_token')},
But it did not work.
const AppDrawerNavigator = createDrawerNavigator({
Logout: {
onItemPress:() => { AsyncStorage.removeItem('app_token')},
screen: HomePage,
navigationOptions: {
drawerIcon: (
<Image style={{ width: 30, height: 30 }}
source={require('./assets/IconDrawerNavigation/logout.png')} />
)
}
},
}
);
to solve this problem i use props called contentComponent from this props you can create your own drawer
import drawerContentComponents from './Drawer';
const AppDrawerNavigator = createDrawerNavigator({
Home: {screen: Home,}
},
},
{contentComponent: drawerContentComponents,}
);
//Drawer source code
//i use this library so i can restart the app and logout
import RNRestart from 'react-native-restart';
export default class drawerContentComponents extends Component {
_logout = () => {
AsyncStorage.removeItem('sale_id');
RNRestart.Restart();
}
render() {
return (
<View style={styles.container2}>
<TouchableOpacity onPress={() => this.props.navigation.navigate('profile')} >
<View style={styles.screenStyle}>
<Image style={styles.iconStyle}
source={home} />
<Text style={styles.screenTextStyle}>My Profile</Text>
</View>
<View style={styles.underlineStyle} />
</TouchableOpacity>
<TouchableOpacity onPress={() => this.props.navigation.navigate('social')} >
<View style={styles.screenStyle}>
<Image style={styles.iconStyle}
source={home} />
<Text style={styles.screenTextStyle}>Contact US</Text>
</View>
<View style={styles.underlineStyle} />
</TouchableOpacity>
<TouchableOpacity onPress={this._logout} >
<View style={styles.screenStyle}>
<Image style={styles.iconStyle}
source={home} />
<Text style={styles.screenTextStyle}>Logout</Text>
</View>
</TouchableOpacity>
</View>
)
}
}
I am trying to change editable with state with the click of a button, but it is not working for some reason. I have seen other people do it this way and it works. Is there another way to do this instead? or am i missing something? Thanks
`class Settings extends Component {
constructor(props) {
super(props);
this.state = {
editable: false,
name: '',
};
this.handleEdit = this.handleEdit.bind(this);
this.handleName = this.handleName.bind(this);
}
handleEdit() {
this.setState({
editable: !this.state.editable,
});
}
handleName = (text) => {
this.setState({
name: text,
});
};
render() {
return(
<View style={styles.container}>
<View style={styles.headerContainer}>
<Text style={styles.header}>Settings</Text>
</View>
<View style={styles.section}>
<View style={styles.sectionTitleContainer}>
<Text style={styles.sectionTitle}>My Account</Text>
</View>
<View>
<Text>Name:</Text>
<TextInput
placeholder="name"
value={this.state.name}
onChangeText={this.handleName}
editable={this.state.editable}
/>
</View>
<View>
<TouchableOpacity onPress={() => this.handleEdit}>
<Text>Edit</Text>
</TouchableOpacity>
</View>
</View>
</View>
);
}
}
export default Settings;`
Change your
<TouchableOpacity onPress={() => this.handleEdit}>
To
<TouchableOpacity onPress={this.handleEdit}>
I believe that since you already binded 'this' to the handleEdit function you dont need to pass the () => anymore.
I am currently learning React-Native so apologies if the answer has appeared else where. But in my app whenever I change the text in the TextInput the program will crash with the error _this5.setState is not a function
i.e. if I search for 'Hello', everything works fine. But the moment when I change 'Hello' to 'Hell' the program crashes with that error.
Here's my code
export default class App extends React.Component {
constructor(props){
super(props)
this.state = {
apiKey: 'insertMyAPIKey',
isLoading: true,
text: ''
}
this.setInputState = this.setInputState.bind(this)
}
render() {
return (
<View style={{padding: 10}}>
<TextInput
style={{height: 40}}
placeholder="Search For Summoner!"
value={this.state.text}
onChangeText={(text) => this.setState({
text: text
})}
clearButtonMode="while-editing"
/>
<Button
onPress={() => {
this.MyFunctionsToRun(this.state.text)
}}
title="Search"
color="#841584"
/>
<Text style={{padding: 10, fontSize: 20}}>
Searching for summoner: {this.state.text}
</Text>
<Text>
The summoner ID: {this.state.summonerID}
</Text>
<Text>
The summoner Rank: {this.state.leagueName}, {this.state.tier} {this.state.rank}, {this.state.leaguePoints}
</Text>
<Text>
The Summoner Win Rate: {this.state.winRate}
</Text>
<View>
<FlatList
data={this.state.lastTenGames}
renderItem={({item}) => <Text>{item.lane}</Text>}
/>
</View>
</View>
);
}
}
you can try this
onChangeText={text => (this.state.text = text)}
or use another function
onChangeText={this.changeText}
changeText = text => {
this.setState({text: text});
};
i hope it works for you :D