Login.js

import React, { Component } from 'react';
import { View, Image,  ImageBackground, AsyncStorage } from 'react-native';
import { Button } from '../components';
import {Input} from '../components'
import {LinearGradient} from 'expo-linear-gradient'
import { login } from '../services/api';

export default class Login extends Component {

  constructor(props) {
    super(props);
    this.state = {
      username: '',
      password: '',
    }
  }
  _login = async () => {
    const { username, password } = this.state;
    const data = {
      username,
      password
    }
     console.log("DATA: ", data);
     const val = await login(data);
    if (val) {
      this.props.navigation.navigate('Home')
    }
  }

  render() {
    return (

    <LinearGradient colors={['#061071', '#015CA3', '#2DA6DD', '#061071']} style={styles.linearGradient}>
    <View style={styles.container}>



    <Image  style={styles.icon}
          source={{uri: "https://i.ibb.co/dfzQ3KC/user.png"}}
           />


<Input style={styles.username} placeholder="Name" autoCompleteType='username' onChangeText={(text) => this.setState({username:text})}></Input>
        <Input style={styles.password} secureTextEntry={true} placeholder="Password" autoCompleteType='password' onChangeText={(text) => this.setState({password:text})}></Input>
        <Button onPress={this._login} outline>Login</Button>
      </View>
      </LinearGradient>
    )
  }
}

const styles = {
  background: {
    justifyContent: 'flex-start',
    alignItems: 'center',
    width: '100%',
    height: '100%'

},
  container: {
    flex: 1,
    justifyContent: 'flex-start',
    alignItems: 'center',
    padding: 10,
    position: 'fixed',
    marginTop: '40%',
    marginBottom: '30%'
  },
  icon:{
    marginTop:10,
    marginBottom: 20,
    height: 50,
    width: 50,
    padding: 60,
    justifyContent: 'flex-start',
    alignItems: 'center'
  },
  title:{
    marginTop:10,
    marginBottom:30,
    fontSize:20,
    color: "white"
  },
  linearGradient: {
    flex: 1,
    paddingLeft: 15,
    paddingRight: 15,
    borderRadius: 5
  }


}