Hi Guys, I've been working on this login page for an app but can't seem to work out what the issue with the code is. I believe it may have something to do with -
Possibly? Here's the full code
Any Help would be greatly appreciated <3
JavaScript:
const MyTextInput = ({ label, icon, isPassword, hidePassword, setHidePassword, ...props }) => {
return (
<View>
<LeftIcon>
<Octicons name={icon} size={30} color={brand} />
</LeftIcon>
<StyledInputLabel>{label}</StyledInputLabel>
<StyledTextInput {...props} />
{isPassword && (
<RightIcon onPress={() => setHidePassword(!hidePassword)}>
<Ionicons
name={hidePassword ? 'md-eye-off' : 'md-eye'} size={30} color={darkLight}/>
</RightIcon>
)}
</View>
);
};
Possibly? Here's the full code
JavaScript:
import React, { useState } from 'react';
import { StatusBar } from 'expo-status-bar';
import { Formik } from 'formik';
import { Octicons, Ionicons, Fontisto } from '@expo/vector-icons';
import {
StyledContainer,
InnerContainer,
PageLogo,
PageTitle,
SubTitle,
StyledFormArea,
LeftIcon,
StyledInputLabel,
StyledTextInput,
RightIcon,
StyledButton,
ButtonText,
Colors,
MsgBox,
Line,
ExtraView,
ExtraText,
TextLink,
TextLinkContent
} from '../components/styles.js';
import { View } from 'react-native';
const { brand, darkLight, primary } = Colors;
const Login = () => {
const [hidePassword, setHidePassword] = useState(true);
return (
<StyledContainer>
<StatusBar style="dark" />
<InnerContainer>
<PageLogo resizemode="cover" source={require('../assets/Images/logo.png')}/>
<PageTitle>Daily Mask and Exposure Checks</PageTitle>
<SubTitle>Account Login</SubTitle>
<Formik
initialValues={{ email: '', password: '' }}
onSubmit={(values) => {
console.log(values);
}}
>
{({ handleChange, handleBlur, handleSubmit, values }) => (
<StyledFormArea>
<MyTextInput
label="Email Address"
icon="mail"
placeholder="[email protected]"
placeholderTextColor={darkLight}
onChangeText={handleChange('email')}
onBlur={handleBlur('email')}
value={values.email}
keyboardType="email-address"
/>
<MyTextInput
label="Password"
icon="lock"
placeholder="* * * * * * * *"
placeholderTextColor={darkLight}
onChangeText={handleChange('password')}
onBlur={handleBlur('password')}
value={values.password}
secureTextEntry={hidePassword}
isPassword={true}
hidePassword={hidePassword}
setHidePassword={setHidePassword}
/>
<MsgBox>...</MsgBox>
<StyledButton onPress={handleSubmit}>
<ButtonText>Login</ButtonText>
</StyledButton>
<Line />
<StyledButton google={true} onPress={handleSubmit}>
<Fontisto name="google" color={primary} size={25} />
<ButtonText google={true}>Sign in with Google</ButtonText>
</StyledButton>
<ExtraView>
<ExtraText>Don't have an account already? </ExtraText>
<TextLink>
<TextLinkContent>Signup</TextLinkContent>
</TextLink>
</ExtraView>
</StyledFormArea>
)}
</Formik>
</InnerContainer>
</StyledContainer>
);
};
const MyTextInput = ({ label, icon, isPassword, hidePassword, setHidePassword, ...props }) => {
return (
<View>
<LeftIcon>
<Octicons name={icon} size={30} color={brand} />
</LeftIcon>
<StyledInputLabel>{label}</StyledInputLabel>
<StyledTextInput {...props} />
{isPassword && (
<RightIcon onPress={() => setHidePassword(!hidePassword)}>
<Ionicons
name={hidePassword ? 'md-eye-off' : 'md-eye'} size={30} color={darkLight}/>
</RightIcon>
)}
</View>
);
};
export default Login;
Any Help would be greatly appreciated <3