I'm working in react-native. I have a form page in my mobile app and have an edit button and back button. Once the edit button is clicked, I want a save and cancel button to replace the edit and back button, and they should have their own functionality. I have tried componentWillUpdate() and if else statements in my render function, but neither seem to work.
You can put all the buttons in your render function, controlled with state(eg. inEditMode). When user click on edit button you can set inEditMode to true and display the edit & back button.
Something like this:
render() {
this.state.inEditMode ?
<View>
<EditButton />
<BackButton />
</View> :
<View>
<CancelButton />
<SaveButton />
</View>
}
Related
I have some very simple code:
<TextInput
onChangeText={setInputAddress}
value={inputAddress}
placeholder="Address or postcode..."
/>
<Button
title="press"
onPress={() => {
Alert.alert("clicked")
}}
/>
The button works fine, and so does the text input, but when I am focussed on the input field, and try to click on the button, it doesn't work. The first click blurs in input field and the second click clicks the button. Is there a way to prevent this behaviour?
The solution was to add keyboardShouldPersistTaps="always" to the surrounding ScrollView.
So I'm wondering if I'm just not using the right vocabulary in my search - but what I thought might be cool for an app I'm working on would be:
A user starts editing their post.
In case they go back or press a tab to go to another page before
they press "Update".
The screen change is intercepted and a modal shows up and asks if
they want to keep their changes.
I know you can add event handlers - https://reactnavigation.org/docs/navigation-events/ but I'm not sure if these are what I need, I've tested and the prevent default didn't seem to do what I thought it would. That and I couldn't find a way to find what the next intended route that the app would need to go to once they have said "Dismiss" on the modal.
Could anyone point me in the right direction please?
you can create your own modal and back button so you can control what each item do
this.state={
modalConfirm: false
}
goBack = () => { //your goback function }
cancel = () => { this.setState ({modalConfirm :false})
<View>
<TouchableOpacity onPress={()=> this.setState({modalConfirm: true})>
<Icon name='arrow-left' />
</TouchableOpacity>
<Modal visible={this.state.modalConfirm}>
<Text>Do you want to go back? </Text>
<Button title='Go back' onPress={this.goBack} />
<Button title='No' onPress={this.cancel} />
</Modal>
<View>
//your content
</View>
</View>
I got a weird problem on my react native app, I've a counter buttons, like increment and decrement the quantity of product using redux, but the problem is when i press on button the store value change but the Text component (View) doesn't change automatically until i click outside the button (That's the weird issue).
I tried Button component with onPress, TouchableOpacity onPress but still the same issue.
<TouchableOpacity onPress={()=>{this.handleDecQuantity(item)}}>
<Icon
family="AntDesign"
size={16}
name="minus"
color="#2B4D8E"
style={styles.btn}
/>
</TouchableOpacity>
...
<Text size={16}>{item.quantity}</Text>
...
<Button onlyIcon icon="plus" radius={3} shadowless iconFamily="AntDesign" iconSize={20} color="tarnsparent" iconColor="#2B4D8E" style={styles.btn} onPress={()=>{this.handleIncQuantity(item)}}>+</Button>
I hope the issue is clear, The counter change only when i click outside of button or TouchableOpacity
I am using react native to implement a community feed. In each post in the feed, I can comment as seen below.
However, the issue is after I enter a comment and want to press on the submit icon on the right, the keyboard will dismiss first before I can tap on the icon to submit the text.
QUESTION:
How can I immediately submit my text after pressing the submit icon without tapping twice (once to dismiss the keyboard, and second to submit)
Here's a snippet of my implementation:
//Code for comments section/box
<View style={styles.commentSectionContainer}>
<View style={[textInputStyle.dark, textInputStyle.compact]}>
<LocalizedTextInput
multiline={false}
autoCorrect={true}
onChangeText={onCommentTextChange}
placeholder="placeholder/writeComment"
style={[textInputStyle.default, {fontSize: 13}]}
underlineColorAndroid="transparent"
value={textComment}
onSubmitEditing={() => {
if (textComment) {
onSubmitComment();
}
}}
returnKeyType="send"
/>
<View style={styles.iconSubmitContainer}>
<IconButton style={styles.commentSubmit} iconName="send" isDisabled={textComment === ''} onPress={onSubmitComment} hitSlop={hitSlop} />
</View>
</View>
</View>
Localized Text Input is using the following textinput
<View style={{flex: 1}}>
<TextInput
multiline={multiline}
style={[defaultStyle, {flex: 1}]}
underlineColorAndroid="transparent"
autoCorrect={true}
{...otherProps}
/>
</View>
The posts are all wrapped in a scrollView.
I tried to use "keyboardShouldPersistTaps" and keyboardDismissMode="Drag-on" but it doesn't produce the expected experience.. The user should be able to dismiss the keyboard by tapping anywhere outside the textinput box instead of requiring to scroll.
If your parent is a ScrollView component, then passing the prop keyboardShouldPersistTaps="always" should do the trick. See the official documentation here.
As Ankit suggested the prop needs to be passed to the scroll view but if that isn't giving you the desired results TextInput has a blur() method that you can call using a ref of that TextInput. Maybe that would help.
I'd like to know how to render this button and if so is it autobound to the text in the input field ?
Basically onSumbitEditing will trigger and event provided when go button is clicked from android soft keyboard as in below example :
<TextInput
style={[styles.zipCode, styles.mainText]}
returnKeyType='My Custom button'
onSubmitEditing={(event) => this.updateText( event.nativeEvent.text
)}/>
in above code snippet :
I have action name is 'My Custom button' which will appera in soft keyboard in android and when you press that the updateText event is tiggered , thats what is the meaning on onSubmitEditing
Note : if physical keyboard is enable in android emulator so onSubmitEditing will not tigger any event since you would not be also to press virtual key which is given name as 'My Custom Button'
You can have something like this :
onSubmitEdit = () => {
// whatever you want to do on submit
}
render() {
return(
<View>
<TextInput
style={styles.input}
textAlign="center"
onSubmitEditing={this.onSubmitEdit} />
<TouchableHighlight onPress={this.onSubmitEdit}>
<Text>Press this button to submit editing</Text>
</TouchableHighlight>
</View>
);
}
The onSubmit callback is called when you hit the done/return/join on the keyboard that pops out