Skip to content

Instantly share code, notes, and snippets.

@guaracyalima
Created June 19, 2018 14:30
Show Gist options
  • Save guaracyalima/737c9e48c91bb1279bed1eb244f2ac67 to your computer and use it in GitHub Desktop.
Save guaracyalima/737c9e48c91bb1279bed1eb244f2ac67 to your computer and use it in GitHub Desktop.
Formulario de login com gifted form - react native
'use strict';
import moment from 'moment';
import React from 'react';
import { StackNavigator } from 'react-navigation';
import { Text, Button, View, StatusBar, Image } from 'react-native';
import { GiftedForm, GiftedFormManager } from 'react-native-gifted-form';
import { Actions } from 'react-native-router-flux';
import styles from './styles';
const logo = require('../../../../assets/img/logo/logo.png')
class MyModal extends React.Component {
static navigationOptions = ({ navigation }) => {
return {
title: navigation.getParam('getTitle')(),
headerLeft: (
<Button
onPress={() => {
navigation.getParam('onClose')(null, navigation);
}}
title='Voltar'
/>
),
headerRight: (
<Button
onPress={() => {
navigation.getParam('onClose')(null, navigation);
}}
title='Confirmar'
/>
)
};
};
render() {
return this.props.navigation.getParam('renderScene')();
}
}
class Login extends React.Component {
static navigationOptions = {
// title: 'logao',
headerStyle: {
backgroundColor: '#e40f00',
borderBottomColor: 'transparent',
},
headerTintColor: '#000',
headerTitleStyle: {
fontWeight: 'bold',
},
};
constructor(props) {
super(props);
this.state = { lastSubmitValues: '' };
}
render() {
return (
<View style={styles.bg}>
<StatusBar
barStyle="light-content"
/>
<View style={styles.loginCotainer}>
<View style={styles.logo}>
<Image source={logo} style={styles.logoImage} />
</View>
<GiftedForm
formName='signupForm' // GiftedForm instances that use the same name will also share the same states
openModal={route => {
this.props.navigation.push('MyModal', route); // The ModalWidget will be opened using this method. Tested with ExNavigator
}}
clearOnClose={false} // delete the values of the form when unmounted
defaults={{
username: 'Farid',
'gender{}': false,
password: 'abcdefg',
country: 'FR',
}}
style={styles.loginCotainer}>
<GiftedForm.SeparatorWidget />
<GiftedForm.TextInputWidget
name='fullName' // mandatory
title='Usuario'
placeholder='username'
clearButtonMode='while-editing'
image={require('../../../../assets/img/icons/user.png')}
/>
<GiftedForm.ModalWidget
title='Centro de custo'
displayValue='gender'
image={require('../../../../assets/img/icons/cc.png')}
>
<GiftedForm.SeparatorWidget />
<GiftedForm.SelectWidget
name='gender'
title='Centro de custo'
multiple={false}
>
<GiftedForm.OptionWidget
title='30001 - TI'
value='30001 - TI'
image={require('../../../../assets/img/icons/ti.png')}
/>
<GiftedForm.OptionWidget
title='30002 - TO'
value='30002 - TO'
image={require('../../../../assets/img/icons/rocket.png')}
/>
<GiftedForm.OptionWidget
title='30003 - TU'
value='30003 - TU'
image={require('../../../../assets/img/icons/rocket.png')}
/>
</GiftedForm.SelectWidget>
</GiftedForm.ModalWidget>
<GiftedForm.ErrorsWidget />
<GiftedForm.SubmitWidget
title='Entrar'
widgetStyles={{
submitButton: {
backgroundColor: '#2185D0'
}
}}
onSubmit={
(
isValid,
values,
validationResults,
postSubmit = null,
modalNavigator = null
) => { Actions.main() }
}
/>
</GiftedForm>
</View>
</View>
);
}
}
const RootNavigation = StackNavigator({
DemoScreen: {
screen: Login
},
MyModal: {
screen: MyModal
}
});
const root = () => <RootNavigation />;
export default root;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment