Categories
javascript native-base react-native reactjs

How to submit a form in React Native

I feel crazy asking this question here, but I can’t find any good tutorials for how to submit a form and capture the data for RN. Everything I do find is someone pushing a library “just npm install react-native-form-genie-magic-box and call it in your project“…

but I just want to know – How to submit a form in vanilla React Native.

Sample code:

AuthContainer

class AuthContainer extends Component {
render() {
const { errorMessage, handleLogin } = this.props
return (
<Login
errorMessage={errorMessage}
onLoginClick={(e) => handleLogin(e)}
/>
)
}
}
.....
const mapDispatchToProps = (dispatch) => {
return {
handleLogin: (e) => {
e.preventDefault()
const form = e.target
const data = serialize(form, {hash: true})
const creds = { email:data.email, password: data.password }
dispatch(loginUser(creds))
},
}
}

Login

import { Container, Content, Form, Item, Input, Label, Button, Text } from 'native-base';
....
const Login = ({errorMessage, onLoginClick}) => {
return (
<Container>
<Content>
<Form >
{errorMessage &&
<Text>{errorMessage}</Text>
}
<Item floatingLabel>
<Label>Email</Label>
<Input
type="email"
name="email"
/>
</Item>
<Item floatingLabel last>
<Label>Password</Label>
<Input secureTextEntry={true} />
</Item>
<Button onPress={onLoginClick} ><Text>Sign in</Text></Button>
</Form>
</Content>
</Container>
)
}

Question: How can I just capture the submitted email and password in AuthContainer’s handleLogin function?

On the <input you need to add something like this, example:

<Input onChangeText={(text) => this.setState({username: text})} value={this.state.username}

And when you use the onPress function you just need to get the this.state.username and use it when you want.
I don’t usually do a function that handle the Login or something in other .js so you need to pass the this.state.username to the page that handles it.

What i usually do if I really need to pass something to other page is using GLOBALS, example:

// globals.js 
module.exports = {
username: '',
};

And then to use the globals.js

// import the globals.js
GLOBAL = require('./globals');
<Input onChangeText={(text) => this_onButtonPressed(text) value={this.state.username}/>
_onButtonPressed(text){
GLOBAL.username = this.state.username
// call function that handles it
}

And then on the page that handles it you need to import it again and just use GLOBAL.username.

If you didn’t understand it tell me I will try to explain it better, I need to know if you want to handle the login on a different .js or it can be on the .js that has the Form (its easier like this)