Advertisement
CarlosWGama

Aula 04 - Interface 2

Jan 24th, 2023
1,434
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import { View, Text, ImageBackground, StyleSheet, Alert } from 'react-native';
  2. import bg from './../../assets/imgs/bg.png';
  3. import { Input } from "@rneui/themed";
  4. import { Button } from '@rneui/base';
  5.  
  6. export interface LoginScreenProps {
  7. }
  8.  
  9. export function LoginScreen(props: LoginScreenProps) {
  10.  
  11.  
  12.  
  13.       return (
  14.           <ImageBackground source={bg} style={styles.background}>
  15.               <View style={styles.container}>
  16.                   <Text style={styles.logo}>APP</Text>
  17.                  
  18.                   {/* EMAIL */ }
  19.                   <Input
  20.                     placeholder='Digite seu email'
  21.                     inputContainerStyle={styles.inputContainer}
  22.                     inputStyle={{color:'white'}}
  23.                     placeholderTextColor="lightgrey"
  24.                     leftIcon={{name:'person', color:'white'}}
  25.                   />
  26.                  
  27.                   {/* SENHA */}
  28.                   <Input
  29.                     placeholder='Digite sua senha'
  30.                     inputContainerStyle={styles.inputContainer}
  31.                     placeholderTextColor="lightgrey"
  32.                     inputStyle={{color:'white'}}
  33.                     leftIcon={{name:'lock', color:'white'}}
  34.                     secureTextEntry={true}
  35.                     />
  36.  
  37.                     {/* BOTÃO */}
  38.                     <Button title='Logar'
  39.                         buttonStyle={styles.btn}
  40.          
  41.                     />
  42.  
  43.                     {/* OPÇÃO CADASTRAR */}
  44.                     <Text style={styles.cadastrar}>Não possui conta?
  45.                       {'\n'}
  46.                      Clique aqui para se cadastrar</Text>
  47.               </View>
  48.           </ImageBackground>
  49.       );
  50.   }
  51.  
  52.   const styles = StyleSheet.create({
  53.       cadastrar: {
  54.         fontSize: 20,
  55.         color: 'white',
  56.         margin: 30,
  57.         textAlign: 'center',
  58.         textDecorationLine: 'underline'
  59.       },
  60.       background: {width:'100%', height:'100%'},
  61.       container: {
  62.           flex: 1,
  63.           justifyContent: 'center',
  64.           padding: 10,
  65.           alignItems: 'stretch'
  66.       },
  67.       inputContainer:{
  68.         backgroundColor:'rgba(255,255, 255, 0.3)',
  69.         borderRadius: 30,
  70.         paddingLeft: 10,
  71.         marginBottom: -15
  72.       },
  73.       btn: {borderRadius:30, marginTop: 10, marginHorizontal: 10},
  74.       logo: { color: 'white', fontSize: 50, textAlign: 'center'}
  75. });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement