I have a simple app with a Welcome class that redirects to Select class.
Select class has 2 buttons.
My problem is that when I redirect to Select class, button are automatically clicked and I have the Alert triggered without clicking.
Do you know how to prevent it ?
//Select.js
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Image,ImageBackground, Linking, TouchableOpacity, Alert, Button } from 'react-native';
import { createStackNavigator, createAppContainer } from "react-navigation"
export default class Select extends React.Component {
displayMessage1(){
Alert.alert("hello1")
}
displayMessage2(){
Alert.alert("hello2")
}
render() {
return (
<View>
<ImageBackground
source={require("./images/im1.jpg")}
style={styles.imageBackground}>
<View style ={{flex:0.3}}></View>
<View style ={{flex:1}}>
<Text style ={styles.text}> myText</Text>
</View>
<Button
onPress={this.displayMessage1()}
title="go message 1"
color="#00aaf0"
/>
<View style ={{flex:0.3}}></View>
<Button
onPress={this.displayMessage2()}
title="go message 2"
color="#00aaf0"
/>
<View style ={{flex:1}}></View>
</ImageBackground>
</View>
)
}
}
```
You are executing displayMessage1 message on the onClick method of your button.
You should do something like, so when the event is fired, the method binded to your class will be called.
<Button
onPress={this.displayMessage1.bind(this)}
title="go message 1"
color="#00aaf0"
/>
<Button
onPress={this.displayMessage1()} // <-- here
title="go message 1"
color="#00aaf0"
/>
That's be cause instead of passing a reference to the the onPress prop you are actually execution the method, so on every render that method if being called.
Related
I am having a very peculiar issue with React Native Elements Text Input along with using touchable opacity.
import React, { useState } from 'react';
import { TouchableOpacity, View, Dimensions } from 'react-native';
import { Input } from 'react-native-elements';
const test = () => (
<TouchableOpacity onPress={() => console.log('we hit here')}>
<Input disabled>
{children}
</Input>
</TouchableOpacity>
)
export default test;
So the outer rim of the input field is completely clickable, however, the center of the component, it cannot be clicked.
This works perfectly for android however.
Any ideas
if anyone has this issue, then the you need to supply a pointerEvents to 'none' for the entire component to be clickable:
<View pointerEvents='none'>
<Input disabled>
{children}
</Input>
</View>
Mubeen hussain answer is correct, but to be more precise it's like this
<TouchableOpacity onPress={() => console.log('we hit here')}>
<View pointerEvents="none">
<Input disabled>{children}</Input>
</View>
</TouchableOpacity>
My HomeHeader component is like this:
import React from "react";
import { View, StyleSheet, Text, Image } from "react-native";
import Icon from "react-native-vector-icons/FontAwesome5";
export default function HomeHeader({ navigation }) {
return (
<View style={styles.home_header}>
<Icon
style={styles.menu}
name="bars"
size={30}
color="white"
onPress={navigation.toggleDrawer()}
/>
<Image
style={styles.header_logo}
source={require("../assets/logo.png")}
/>
<Text>Hello</Text>
</View>
);
}
And am using it in my Home screen like this:
return (
<View>
<HomeHeader navigation={navigation} />
</View>
)
But am receiving this error message:
Warning: Cannot update a component from inside the function body of a
different component.
What am trying to do is, I have separated out the header section of my HOME screen into a separate component called HomeHeader. And in this component, am attaching the event handler to toggle the opening/closing of the DrawerNavigation (left side drawer menu)
If I create a Button in my HOME screen and add the event handler to toggle the drawer, it works fine. But the issue happens only if I try this from inside my HomeHeader component.
Btw, am using ReactNavigation v5 and I even tried this method: https://reactnavigation.org/docs/connecting-navigation-prop/
No luck so far.
Change onPress={ navigation.toggleDrawer() } to onPress={ ()=> navigation.toggleDrawer() }
You can read more about this in here
In react-native-paper (or even in react-native dirctly) I don't understand how to do the equivalent of getElementById to modify an element. In JavaScript, I would assign each button a unique id, and then when one button is clicked, I can call function that will disable/enable the other button based on its id.
However I am not seeing how to accomplish this task in react-native-paper (or react-native either).
Here is sample code:
import React from 'react';
import {View, Alert} from 'react-native';
import {Button} from 'react-native-paper';
export default class App extends React.Component {
render() {
return (
<View>
<Button mode="contained" color="green" onPress={() => this.buttonOnePressed()}>Button One</Button>
<Button mode="contained" color="red" onPress={() => this.buttonTwoPressed()}>Button Two</Button>
</View>
);
}
buttonOnePressed() {
// If Button Two is disabled, then enable it.
// If Button Two is enabled, then disable it.
Alert.alert('Button ONE pressed');
}
buttonTwoPressed() {
// Do something when Button Two is pressed
Alert.alert('Button TWO pressed');
}
}
In your code make a state for the 1st button and another state for the 2nd button. Then by handling the state of the 2, you can achieve what you want
Here's a sample code:
export class default Test extends React.Component{
constructor(props){
super(props);
this.state = {
firstButtonEnable: false,
secondButtonDisable: false,
}
this.handlingButton = this.handlingButton.bind(this)
}
handlingButton(){
firstButtonEnable
? this.setState({secondButtonDisable: true})
: null;
}
render(){
return(
<View>
<Button title='Button1' onPress={() => {
this.setState({firstButtonEnable: true});
handlingButton();
}} />
<Button disabled={secondButtonDisable} title='Button2' } />
</View>
)
}
}
I have the following code:
import React, {Component} from 'react';
import {Platform, ScrollView, StyleSheet, Text, TextInput, TouchableOpacity, View,} from 'react-native';
import {Alert} from "react-native-web";
export default class HomeScreen extends Component {
state = {text: ''};
_onPressSearch() {
Alert.alert("Button pressed!")
}
render() {
return (<View style={styles.container}>
<ScrollView style={styles.scrollViewContainer} contentContainerStyle={styles.contentContainer}>
<View style={styles.searchContainer}>
<TextInput placeHolder="Type something!" onChangeText={(text) => this.setState({text})}
value={this.state.text}/>
</View>
<TouchableOpacity
onPress={this._onPressSearch}>
<View>
<Text>Search</Text>
</View>
</TouchableOpacity>
<View style={styles.listContainer}>
<Text>{this.state.text}</Text>
</View>
</ScrollView>
</View>
And my problem is that when I click on TouchableOpacity no action happens (in my case showing alert). I tried to change ToachableOpacity and View combination to usual button but nothing happened again. So, what's the problem and how can I solve it?
Looking at the docs looks like Alert is not completed yet (https://github.com/necolas/react-native-web) inside react-native-web.
This is the issue about the react-native-web alert: https://github.com/necolas/react-native-web/issues/1026
Try using default javascript alert doing alert("Button pressed!") or importing Alert from react-native
The code looks fine
When I am trying to wrap redux form into the react-native elements it shows following error.
this is my code
import React,{ Component } from 'react';
import { Field,reduxForm } from 'redux-form';
import { Text,Input } from 'react-native-elements';
import { View,Button } from 'react-native';
const renderField=({label,keyboardType,name}) => {
return(
<View style={{flexDirection:'row',height:50,alignItems:'center' }}>
<Text>
{label}
</Text>
<Input />
</View>
)
}
const RegisterForm=props => {
const {handleSubmit}=props;
return(
<View style={{flex:1,flexDirection:'column',margin:40,justifyContent:'flex-start'}}>
<Field label="Username" component={renderField} name="username" />
<Button title='SUBMIT' onPress={handleSubmit} />
</View>
)
}
const Register=reduxForm({
form:'register',
})(RegisterForm);
export default Register;
When used FormInput in react-native elements it works then I am changed it into react-native elements 1.0.0beta4 and replace the formInput with Input component.
After that it shows above error.My debugger window also shows an error
debugger window
The error is due to your upgrade to react-native-elements beta which include breaking changes like the button component props :
The actual error is located in welcomePage.js file (as you can see in debugger), you need to change the object you pass to the button icon prop to a react component (see the button doc in the link above).