index.js

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,
};

styles.js

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';
`;