react-native onpress conflicts with onchangetext - react-native

code:
export default class app extends Component {
state={
name:''
}
render(){
return(
<View>
<TextInput onChangeText={this.handle}></TextInput>
<TouchableOpacity
onPress={this.handleSubmit(this.state.name)}>
<Text>go</Text>
</TouchableOpacity>
</View>
)
}
handle=(text)=>{
this.setState({name:text})
}
handleSubmit=(name)=>{
alert(name)
}
}
every time I enter text,The handleSubmit function will use，why？
<TouchableOpacity
onPress={()=>this.handleSubmit(this.state.name)}>
<Text>go</Text>
</TouchableOpacity>
If i write like this，The problem is solved，but why？


The handleSubmit function invoked automatically every time when the render cycle occurs the component so when the text changes occur and that's why the function automatically invokes so you have to put the arrow function to must call when they go button press event occurs.
as you are using () here in the this.handleSubmit(this.state.name).

Related

React native changing button color not working properly

I have my reusable component for Button :
import React, { Component } from "react";
import { View, Text, TouchableOpacity } from "react-native";
import { styles } from "./styles";
class TransactionFees extends Component {
state = {
pressed: false,
};
render() {
const { pressed } = this.state;
const { speed, eth, usd } = this.props;
return (
<View>
<TouchableOpacity style={ pressed ? styles.pressedButton : null } onPress={() => this.setState({ pressed: !pressed })}>
<Text style={styles.transactionFeeTitle}>{speed}</Text>
<Text style={styles.transactionFeeSubText}>{eth} ETH</Text>
<Text style={styles.transactionFeeSubText}>$ {usd} </Text>
</TouchableOpacity>
</View>
);
}
}
export default TransactionFees;
This is how I use it in another component :
<View style={styles.transactionFeeChoices}>
<TransactionFees speed={"Slow"} eth={"0.000010"} usd={"0.02"} />
<TransactionFees speed={"Average"} eth={"0.000030"} usd={"0.03"} />
<TransactionFees speed={"Fast"} eth={"0.000050"} usd={"0.04"} />
</View>
When i press the button the background color changes to blue and the problem is When I click on second button,the first button is not going to default background color
Any solutions on how to solve this please?

The way your TransactionFees component is currently created means that each TransactionFees occurrence has its own internal state. So when one TransactionFees changes, that doesn't mean the others are automatically updated. You can see them as autonomous components.
In your case however, the TransactionFees occurrences shouldn't be automomous, a change in one occurence should reflect in the others. This is a classic react pattern where the most common solution is to "lift the state up" from the TransactionFeeds component into the parent. There even is a react article about in the official docs
Steps to take
have one state variable in the parent that keeps the selected TransactionFees
pass in pressed as a prop to the TransactionFees occurrences
pass in a change handler function that the TransactionFees component can call when one of the buttons is pressed
In code, this will be more or less:
class Manager extends Component {
constructor(props) {
super(props);
this.state = {
selected: '',
};
}
onChangeSelection = selected => {
this.setState({
selected,
});
}
render() {
const { selected } = this.state;
return (
<View style={styles.transactionFeeChoices}>
<TransactionFees speed={"Slow"} eth={"0.000010"} usd={"0.02"} pressed={selected === 'Slow'} onPress={() => this.onChangeSelection('Slow')} />
<TransactionFees speed={"Average"} eth={"0.000030"} usd={"0.03"} pressed={selected === 'Average'} onPress={() => this.onChangeSelection('Average')} />
<TransactionFees speed={"Fast"} eth={"0.000050"} usd={"0.04"} pressed={selected === 'Fast'} onPress={() => this.onChangeSelection('Fast')} />
</View>
);
}
}
class TransactionFees extends Component {
render() {
const { speed, eth, usd, pressed, onPress } = this.props;
return (
<View>
<TouchableOpacity style={ pressed ? styles.pressedButton : null } onPress={onPress}>
<Text style={styles.transactionFeeTitle}>{speed}</Text>
<Text style={styles.transactionFeeSubText}>{eth} ETH</Text>
<Text style={styles.transactionFeeSubText}>$ {usd} </Text>
</TouchableOpacity>
</View>
);
}
}

You have created 3 instances of TransactionFees and they will have their own separate state.
That's why click on the second button does not change the state of the first button.
If you want to make either of button-click trigger that style change, you need to use shared value between all those TransactionFees instances.
There can be 2 ways to do this depending on where to store that value
You can store it as a state of the parent component and pass it down to TransactionFees component
You can store it in redux store and use it inside TransactionFees by connecting the component to the store.

To do so
You need to keep the stat in the parent
And pass to each button the function to change the state
And move the current stat to each button
like this
<TransactionFees speed={"Slow"}
setClicked(()->{
this.setState({clicked:true})
clicked={this.state.clicked}
eth={"0.000010"} usd={"0.02"}
/>

How to show component when a function is called in ReactNative (Like Alert.alert())

I would to create a custom component to be rendered when a function is called in ReactNative. Is like a alert() component. In this case i don't want use a modal, a want to make a component that can showed in screen when a function is called. Someone have any ideia about how i can made this?
I want to make this:
const Example = () => {
return(
<View>
<Button title="Show Modal" onPress={showModal}/>
</View>
)
}
I can't make this:
const Example = () => {
const [isVisible, setIsVisible] = useState(false);
return(
<View>
<Modal visible={isVisible}>
<Text>Awesome code here ...</Text>
</Modal>
<Button title="Show Modal" onPress={() => {setIsVisible(true)}}/>
</View>
)
}
What i want to do is show the component whitout put her jsx in my return. I need to call a function, when this function is called my componnent is showed in screen. The logic is same of Alert.alert() function.

Return a custom Alert in react native

I am trying to launch a custom Alert component from an onPress call from Touchable Highlight. I have been unable to get this to work, I have tried console logging from inside the custom Alert component render function and the code doesn't run to this point because I am unable to see this log. What is confusing me is that when I tested this with the React-Native Alert this did run and show that Alert. I would appreciate some help understanding what I am doing wrong here because I feel I am misunderstanding something. I have used the Alert component before and it works fine but in these instances it has only been when i have called the Alert directly not from onPress.
onPress() {
return (
<Alert
message={i18n('alerts.improvements')}
/>
)
}
render() {
return (
<TouchableHighlight onPress={() => this.onPress.bind(this)}>
<Text>Test Text</Text>
</TouchableHighlight>
)
}
The Alert Component with the console log that doesn't get hit:
class Alert extends Component{
props: {
message: string
}
state = {
modalVisible: false,
}
setModalVisible(visible) {
this.setState({modalVisible: visible});
}
render() {
console.log('modal')
return (
<Modal
animationStyle='fade'
transparent={true}
visible={!this.state.modalVisible}
onRequestClose={() => {}}
>
<View style={styles.container}>
<Text style={styles.text}>{this.props.message}</Text>
</View>
</Modal>
)
}
}
export default Alert

Rather than calling it onPress you can have default visible false and place it in render. Then add one more prop to your component which will manage visibility of it.
for example:
in component:
<Modal
animationType={'fade'}
transparent={true}
visible={this.props.isOpen}
onRequestClose={this.props.actionClose}>
while calling:
<ModalBox
isOpen={this.props.isOpen}
I have isOpen prop for visibility

How to bind(this) when passing a function as a prop in react native

I am working on a simple calculator app to learn react native. I have a button component that displays the number buttons. I need to pass it a function so that when the button is touched the state of the parent is updated to the new number.
Without the bind(this) it says this.setState is undefined. When I add bind(this) in the constructor all I get is a blank page in my app. My code is listed below.
constructor:
constructor() {
super();
this.state = {
total: 0,
display: 0
};
this._displayUpdate = this._displayUpdate.bind(this);
}
One row of calculator buttons:
<View style={styles.buttonRow}>
<NumButton numText={7} update={this._displayUpdate} />
<NumButton numText={8} update={this._displayUpdate} />
<NumButton numText={9} update={this._displayUpdate} />
<FuncButton funcText={'*'} />
</View>
NumButton Component:
export default class NumButton extends Component {
render() {
return (
<TouchableHighlight style={styles.buttonArea} onPress={this.props.update(this.props.numText)}>
<Text style={styles.buttonText}>{this.props.numText}</Text>
</TouchableHighlight>
)
}
}

Your parent bind is right. The problem is with the onPress of the TouchableHighlight in the NumButton component. You can't add code to execute to it, You should pass a function to it. You can use ES6 arrow function:
export default class NumButton extends Component {
render() {
return (
<TouchableHighlight style={styles.buttonArea}
onPress={()=>{ this.props.update(this.props.numText) }}
>
<Text style={styles.buttonText}>{this.props.numText}</Text>
</TouchableHighlight>
)
}
}

How to route to a component programatically

I am trying to push a component when initial component is about to render. I am using the react-native-router-flux module. Unfortunately the Action.checkpass call does not execute while the one in Button tag does (i.e on click).
Any ideas what I could be doing wrong?
class Launch extends React.Component {
render(){
//transfer to checkpass
Actions.checkpass;
return (
<View style={styles.container}>
<Text>Launch page</Text>
<Button onPress={Actions.checkpass}>Go to Register page</Button>
</View>
);
}
};

Call Actions.route('checkpass');