Skip to content

Instantly share code, notes, and snippets.

@csorlandi csorlandi/index.js
Created Oct 3, 2019

Embed
What would you like to do?
import React from 'react';
import PropTypes from 'prop-types';
import { View } from 'react-native';
import BackButton from '~/components/BackButton';
import {
Container,
KeyboardContainer,
FormContainer,
FormBorder,
FormInput,
ButtonContainer,
ButtonText,
LinkContainer,
LinkText,
FooterContainer,
SocialButtonsContainer,
SocialButtonContainer,
SocialButtonIcon,
SocialButtonText,
TermsContainer,
WrapTerms,
RegularTerms,
BoldTerms,
} from './styles';
import { colors } from '~/styles';
export default function SignIn({ navigation }) {
return (
<KeyboardContainer enabled>
<Container>
<FormContainer>
<FormBorder>
<FormInput
first
placeholder="Login"
autoCorrect={false}
autoCapitalize="none"
keyboardType="email-address"
returnKeyType="next"
/>
<FormInput
last
placeholder="Senha"
autoCorrect={false}
autoCapitalize="none"
secureTextEntry
returnKeyType="done"
/>
</FormBorder>
<ButtonContainer>
<ButtonText>Entrar</ButtonText>
</ButtonContainer>
<LinkContainer onPress={() => navigation.navigate('RecoverPassword')}>
<LinkText>Esqueci Minha Senha</LinkText>
</LinkContainer>
</FormContainer>
<FooterContainer>
<SocialButtonsContainer>
<SocialButtonContainer first>
<SocialButtonIcon name="facebook-f" facebook />
<SocialButtonText>Facebook</SocialButtonText>
</SocialButtonContainer>
<SocialButtonContainer>
<SocialButtonIcon name="google" google />
<SocialButtonText>Google</SocialButtonText>
</SocialButtonContainer>
</SocialButtonsContainer>
<TermsContainer onPress={() => navigation.navigate('Terms')}>
<WrapTerms>
<RegularTerms>
{'Ao entrar no To beee você concorda com os nossos '}
</RegularTerms>
<BoldTerms>Termos de Uso</BoldTerms>
<RegularTerms> e </RegularTerms>
<BoldTerms>Política de Privacidade</BoldTerms>
</WrapTerms>
</TermsContainer>
</FooterContainer>
</Container>
</KeyboardContainer>
);
}
SignIn.navigationOptions = ({ navigation }) => ({
title: 'Insira seus Dados',
headerStyle: {
backgroundColor: colors.grayWhite,
borderBottomWidth: 0,
elevation: 0,
},
headerTintColor: colors.grayRegular,
headerTitleStyle: {
fontFamily: 'Nunito-Bold',
textAlign: 'center',
flexGrow: 1,
alignSelf: 'center',
},
headerRight: <View />,
headerLeft: <BackButton navigation={navigation} />,
});
SignIn.propTypes = {
navigation: PropTypes.shape({
navigate: PropTypes.func,
}).isRequired,
};
import styled from 'styled-components/native';
import { Platform } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome5';
import { colors, fonts, metrics } from '~/styles';
export const Container = styled.SafeAreaView`
flex: 1;
background-color: ${colors.grayWhite};
`;
export const KeyboardContainer = styled.KeyboardAvoidingView.attrs({
behavior: Platform.OS === 'ios' ? 'padding' : null,
})`
flex: 1;
`;
export const FormContainer = styled.View`
flex: 1;
align-items: center;
justify-content: center;
padding: ${metrics.base}px;
`;
export const FormBorder = styled.View`
align-self: stretch;
border-width: 1.5;
border-radius: ${metrics.base};
border-color: ${colors.grayRegular};
`;
export const FormInput = styled.TextInput.attrs({
placeholderTextColor: colors.grayLight,
underlineColorAndroid: colors.transparent,
})`
padding: ${metrics.base}px;
border-bottom-width: ${props => (!props.last ? 1.5 : 0)};
border-bottom-color: ${props =>
!props.last ? colors.grayRegular : colors.transparent};
border-top-left-radius: ${props => (props.first ? metrics.base : 0)}px;
border-top-right-radius: ${props => (props.first ? metrics.base : 0)}px;
border-bottom-left-radius: ${props => (props.last ? metrics.base : 0)}px;
border-bottom-right-radius: ${props => (props.last ? metrics.base : 0)}px;
color: ${colors.primary};
font-size: ${fonts.small};
font-family: 'Nunito-Regular';
`;
export const ButtonContainer = styled.TouchableOpacity.attrs({
rippleColor: colors.primary,
})`
align-self: stretch;
margin-top: ${metrics.base * 2}px;
height: 50;
align-items: center;
justify-content: center;
border-radius: ${metrics.base};
background-color: ${colors.primary};
border-width: 0;
border-color: ${colors.transparent};
`;
export const ButtonText = styled.Text`
font-family: 'Nunito-Bold';
font-size: ${fonts.regular};
color: ${colors.primaryWhite};
`;
export const LinkContainer = styled.TouchableOpacity.attrs({
rippleColor: colors.primary,
})`
margin-top: ${metrics.base * 2}px;
`;
export const LinkText = styled.Text`
font-family: 'Nunito-Bold';
font-size: ${fonts.regular};
color: ${colors.primaryLight};
`;
export const FooterContainer = styled.View`
padding: 0 ${metrics.base}px;
padding-bottom: ${Platform.select({
ios: 0,
android: metrics.base,
})}px;
`;
export const SocialButtonsContainer = styled.View`
flex-direction: row;
`;
export const SocialButtonContainer = styled.TouchableOpacity.attrs({
rippleColor: colors.primary,
})`
flex: 1;
margin-right: ${props => (props.first ? metrics.base : 0)}px;
border-radius: ${metrics.base};
border-width: 1;
border-color: ${colors.grayLight};
flex-direction: row;
justify-content: space-evenly;
align-items: center;
height: ${metrics.base * 3};
`;
export const SocialButtonIcon = styled(Icon)`
font-size: ${fonts.regular};
color: ${props => (props.facebook ? '#3B5998' : '#f4c20d')};
`;
export const SocialButtonText = styled.Text`
color: ${colors.graySuperDark};
font-size: ${fonts.small};
font-family: 'Nunito-Bold';
`;
export const TermsContainer = styled.TouchableOpacity.attrs({
rippleColor: colors.primary,
underlayColor: colors.primary,
})`
margin-top: ${metrics.base}px;
`;
export const WrapTerms = styled.Text`
text-align: center;
font-size: ${fonts.regular};
`;
export const RegularTerms = styled.Text`
font-family: 'Nunito-Regular';
`;
export const BoldTerms = styled.Text`
font-family: 'Nunito-Bold';
`;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.