UI Login

				
					import React, {useState} from 'react';
import {
  SafeAreaView,
  ScrollView,
  View,
  Text,
  TextInput,
  TouchableOpacity,
  Image
} from 'react-native';

import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import Ionicons from 'react-native-vector-icons/Ionicons';


const RegisterScreen = ({navigation}) => {
  const [email, setEmail] = useState('');
  const [clave, setClave] = useState('');

  return (
    <SafeAreaView style={{flex: 1, justifyContent: 'center'}}>
      <ScrollView
        showsVerticalScrollIndicator={false}
        style={{paddingHorizontal: 25}}>
        <View style={{alignItems: 'center'}}>
        <Image
          source={require('../assets/images/misc/logo.jpeg')}
          style={{
            transform: [{rotate: '0deg'}],
            width:300,
            height:300
          }}
        />
        </View>

        <Text
          style={{
            fontFamily: 'Roboto-Medium',
            fontSize: 28,
            fontWeight: '500',
            color: '#333',
            marginBottom: 30,
          }}>
          Login
        </Text>

        <Text style={{textAlign: 'center', color: '#666', marginBottom: 30}}>
          Ingresa todos los datos
        </Text>


        <View
       style={{
        flexDirection: 'row',
        borderBottomColor: '#ccc',
        borderBottomWidth: 1,
        paddingBottom: 8,
        marginBottom: 25
        }}
       >
        <MaterialIcons
              name="alternate-email"
              size={20}
              color="#666"
              style={{marginRight: 5}}
            />
        <TextInput
          placeholder='Email'
          style={{flex: 1, paddingVertical: 0}}
          keyboardType="email-address"
          onChange={(text)=> setEmail(text) }
        />
        </View>
        

        <View
       style={{
        flexDirection: 'row',
        borderBottomColor: '#ccc',
        borderBottomWidth: 1,
        paddingBottom: 8,
        marginBottom: 25
        }}
       >
        <Ionicons
              name="ios-lock-closed-outline"
              size={20}
              color="#666"
              style={{marginRight: 5}}
            />
        <TextInput
          placeholder='Clave'
          style={{flex: 1, paddingVertical: 0}}
          secureTextEntry={true}
          onChange={(text)=> setClave(text) }
        />
        </View>


        <View
          style={{
            flexDirection: 'row',
            justifyContent: 'center',
            marginBottom: 30,
          }}>
          <Text>Ya estas registrado?</Text>
          <TouchableOpacity onPress={() => navigation.goBack()}>
            <Text style={{color: '#AD40AF', fontWeight: '700'}}> Login</Text>
          </TouchableOpacity>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};

export default RegisterScreen;