I have just created a login form and doing validation on it, but not found
how to disable submit button from submit in react native if validation fails. I am not using any type of library here, just try to prevent button from submit in react native and if there is any valuable link for form handling in react native.
Any help with this would be appreciated.
You can do it in submit button's onPress function like this:
if (validation is successful)
submit
else
Do nothing
its a very simple way and other people may have different answers.
once submit, you can check if your validation is success or no and if not, just ignore or pop an alert to tell the user the error..
onSubmit = () => {
if(validationSuccess) {
//navigate to next screen component
} else {
//Alert to user
}
}
or if you do the validation onChange inside your render you still can do if else condition to make your submit button into grey and not clickable
render() {
return (
....
{this.state.validationSuccess ? (
<TouchableHighlight onPress={() => this.onSubmit()}>
<Text>LOGIN</Text>
</TouchableHighlight>
) : (
<View style={{ backgroundColor: 'grey'}}>
<Text>LOGIN</Text>
</View>
)}
....
)
}
after all, there is still other way to do this here but this is some example.. hope that helps you to start.. happy exploring!
Related
Hey Im trying to save data from the textinput with useState. I also have a button which should just bring the user to the past screen. But because both are getting rendered at the time the program gives me a warning and the button is getting disabled.
It says: Cannot update a component while rendering a different component.
And I found out I have to use the useEffect hook but I dont know how to implement it. I tried but It didnt work. I think my problem is in the logic. Hope someone can help me :D
const [text, changeText] = React.useState("")
useEffect(() => {
onChangeText();
}, [] );
return(
<View>
<Text>DER NEUE SCREEN</Text>
<TextInput placeholder="Name your Year" onChangeText={changeText} />
<TouchableOpacity onPress={navigation.goBack()}><Text>BUTTON</Text></TouchableOpacity>
<Text>{text}</Text>
</View>
);
}
I am trying to refresh/ reload the page with an updated document once I click on a button. saveAnnotations(); saves the changes made to the document on the device and also updates the document with any other updates from other devices in the database.
The filepath is a REST URL to get the document.
After I click the sync button, the edits made to the document are saved but I want to reload the page so that it pulls the latest updated document from the database in the onclick button itself.
When I go back and return on this page I am able to see the lastest changes made but I want the document to reload when I click on sync button.
I tried using window.location.reload(false); but it closes the page where as I just want to reload the page or rerender filepath props to pull latest changes when I click on the sync button.
Any suggestions on how do I achieve that?
here's my code snippet
reRender = () => {
// calling the forceUpdate() method
this.forceUpdate();
window.location.reload(false);
};
render() {
return (
<View style={{ flex: 1 }}>
<DocumentView
document={filepath}
/>
<View style={styles.button}>
<Button
onPress={() => {
// Save Document
this.saveAnnotations();
}}
title="Sync"
/>
</View>
</View>
</View>
);
}
To achieve what you are looking for, you need to trigger the render method. Doing this will show the updated document. Here is a diagram showing the lifecycle methods of React components. As you can see, there are three ways to trigger the render method:
The component receives new props
Calling setState
Calling forceUpdate
For your use case, I would suggest adding a call to forceUpdate, like so:
<View style={styles.button}>
<Button
onPress={() => {
// Save Document
this.saveAnnotations();
this.forceUpdate(); // <-- add this
}}
title="Sync"
/>
</View>
I'm trying to use aws-amplify authenticatorfor my app. My idea is to show the app first (that's the reason why i didn't wrap the whole app into withAuthenticator) and if user needs to sign in they will be led to a authentication screen, which is like below:
import { Authenticator } from 'aws-amplify-react-native'
const AuthScreen =({ route }) => {
return (
<View style={{flex: 1}}>
<Authenticator>
<TouchableOpacity
onPress={() => {
navigation.goBack()
}}
>
<Text style={{fontSize: 25}}>go back</Text>
</TouchableOpacity>
</Authenticator>
</View>
)
}
export default AuthScreen;
however in this way once the user is signed in, the UI will display like below, with a string and a signout button:
picture
My question is how can i hide this string and display the info i want after user is signed in? i tried to make a CustomSignOut component, add it in but it didn't work (didn't override):
<CustomSignOut override={'SignIn'}/>
ok finally finally figured this out... use hideDefault={true} in , then add all the other components except for Greetings (includes signout button) and TOTPSetup (somehow it just didn't work when adding it on), and the signout button & the string will disappear
i'm new in react native. i'm use react native action button and i want if button clicked, then show other page. this is my code but still doesn't work. have any solution?
render() {
return (
<View style={styles.container}>
<ActionButton buttonColor="#1E73C1" onPress={() => this.buttonPressed}>
</ActionButton>
</View>
);
}
buttonPressed() {
this.props.navigation.navigate('NewCase', {});
}
You don't execute buttonPressed at all. Fix it with ():
<ActionButton buttonColor="#1E73C1" onPress={() => this.buttonPressed()}>
Other way would be:
<ActionButton buttonColor="#1E73C1" onPress={this.buttonPressed.bind(this)}>
And like said in the comments, you should ensure that navigation actually exists in the props.
Be sure to pass the navigation prop to the component
Example
<ActionButton buttonColor="#1E73C1" onPress={() => this.buttonPressed('page2')}>
buttonPressed(page){
this.props.navigator.replace({
id: page,
})
}
You just put buttonPressed thats doesn't really do nothing if you have a buttonPressed() to exec the transition you need to put buttonPressed() , by the away a good thing to do is putting this type of function with '_' behind , like this: _buttonPressed('page2') and then _buttonPressed(page) , it helps a bit to know what you are doing
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