Skip to content

Instantly share code, notes, and snippets.

@renso3x
Created August 2, 2017 13:17
Show Gist options
  • Save renso3x/62468530963b640de35b2923dc723f62 to your computer and use it in GitHub Desktop.
Save renso3x/62468530963b640de35b2923dc723f62 to your computer and use it in GitHub Desktop.
Recompose RN login form
import React from 'react';
import PropTypes from 'prop-types';
import {
compose,
withHandlers,
withState,
setStatic,
setPropTypes
} from 'recompose';
import { View } from 'react-native';
import { Button, FormInput, FormLabel } from 'react-native-elements';
import styles from './Styles/LoginStyle';
import color from '../Themes/Colors';
const enhance = compose(
setStatic('navigationOptions', { header: null }),
setPropTypes({ onPress: PropTypes.func }),
withState('username', 'userValue', ''),
withState('password', 'passValue', ''),
withHandlers({
onUserChange: props => user => props.userValue(user),
onPwdChange: props => pwd => props.passValue(pwd),
onLogin: props => () => {
props.navigation.navigate('main')
}
})
);
const Login = enhance(({
username,
password,
onLogin,
onUserChange,
onPwdChange,
}) => (
<View style={styles.container}>
<FormLabel>Username</FormLabel>
<FormInput
style={styles.textInput}
placeholder="Username"
value={username}
onChangeText={onUserChange}
/>
<FormLabel>Password</FormLabel>
<FormInput
style={styles.textInput}
placeholder="Password"
secureTextEntry
value={password}
autoCapitalize={'none'}
onChangeText={onPwdChange}
/>
<Button
raised
buttonStyle={styles.signBtn}
title="SIGN IN"
color={color.white}
onPress={onLogin}
/>
</View>
))
export default Login;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment