demo react native screen

demo react native screen

import React from 'react';
import {AsyncStorage, View} from 'react-native';
import {Button, Input, Layout, StyleService, Text, useStyleSheet} from '@ui-kitten/components';
import {EyeIcon, EyeOffIcon, PersonIcon} from './extra/icons';
import {KeyboardAvoidingView} from './extra/3rd-party';
import { AppStorage } from '../../../services/app-storage.service';
import { CommonActions } from '@react-navigation/native';


export default ({navigation}): React.ReactElement => {

    const [email, setEmail] = React.useState<string>();
    const [password, setPassword] = React.useState<string>();
    const [passwordVisible, setPasswordVisible] = React.useState<boolean>(false);

    const styles = useStyleSheet(themedStyles);

    const onSignUpButtonPress = (): void => {
        navigation && navigation.navigate('SignUp2');
    };

    const onHomeButtonPress = (): void => {
        AppStorage.setUser('hichem');
        navigation && navigation.dispatch(
            CommonActions.reset({
                index: 1,
                routes: [
                    { name: 'Home' },
                    {
                        name: 'Home'
                    },
                ],
            })
        );
    };

    const onSignInButtonPress = async (username, password): void => {
        console.log('signin press', username, password);
        var url  = "http://m.carevoz.local/api/login" ;

    };

    const onForgotPasswordButtonPress = (): void => {
        navigation && navigation.navigate('ForgotPassword');
    };

    const onPasswordIconPress = (): void => {
        setPasswordVisible(!passwordVisible);
    };

    return (
        <KeyboardAvoidingView style={styles.container}>
            <View style={styles.headerContainer}>
                <Text
                    category='h1'
                    status='control'>
                    eCarevoz
                </Text>
                <Text
                    style={styles.signInLabel}
                    category='s1'
                    status='control'>
                    Sign in to your account
                </Text>
            </View>
            <Layout
                style={styles.formContainer}
                level='1'>
                <Input
                    placeholder='Email'
                    icon={PersonIcon}
                    value={email}
                    onChangeText={setEmail}
                />
                <Input
                    style={styles.passwordInput}
                    placeholder='Password'
                    icon={passwordVisible ? EyeIcon : EyeOffIcon}
                    value={password}
                    secureTextEntry={!passwordVisible}
                    onChangeText={setPassword}
                    onIconPress={onPasswordIconPress}
                />
                <View style={styles.forgotPasswordContainer}>
                    <Button
                        style={styles.forgotPasswordButton}
                        appearance='ghost'
                        status='basic'
                        onPress={onForgotPasswordButtonPress}>
                        Forgot your password?
                    </Button>
                </View>
            </Layout>
            <Button
                style={styles.signInButton}
                size='giant'
                onPress={() => onSignInButtonPress(email, password)}>
                SIGN IN
            </Button>
            <Button
                style={styles.signUpButton}
                appearance='ghost'
                status='basic'
                onPress={onSignUpButtonPress}>
                Don't have an account? Create
            </Button>
            {/*<Button*/}
                {/*style={styles.signUpButton}*/}
                {/*appearance='ghost'*/}
                {/*status='basic'*/}
                {/*onPress={onHomeButtonPress}>*/}
                {/*Go to homepage*/}
            {/*</Button>*/}
        </KeyboardAvoidingView>
    );
};

const themedStyles = StyleService.create({
    container: {
        backgroundColor: 'background-basic-color-1',
    },
    headerContainer: {
        justifyContent: 'center',
        alignItems: 'center',
        minHeight: 216,
        backgroundColor: 'color-primary-default',
    },
    formContainer: {
        flex: 1,
        paddingTop: 32,
        paddingHorizontal: 16,
    },
    signInLabel: {
        marginTop: 16,
    },
    signInButton: {
        marginHorizontal: 16,
    },
    signUpButton: {
        marginVertical: 12,
        marginHorizontal: 16,
    },
    forgotPasswordContainer: {
        flexDirection: 'row',
        justifyContent: 'flex-end',
    },
    passwordInput: {
        marginTop: 16,
    },
    forgotPasswordButton: {
        paddingHorizontal: 0,
    },
});