login.js

import React, {useEffect} from 'react';
import {StyleSheet, View, Image, Text} from 'react-native';
import {Header, Gap, Button, StatusBar, Input} from '../../components';
import {colors, fonts} from '../../utils';
import {ILLoginAtas, ILLogoTanpaRiba} from '../../assets';
import {TouchableOpacity} from 'react-native-gesture-handler';

const Login = ({navigation}) => {
  useEffect(() => {
    getDataLogin();
  });
  const getDataLogin = () => {
    fetch('http://api.tanpariba.co.id:8000/v4.0/account/login', {
      method: 'POST',
      headers: {
        Authorization:
          'Basic dXNtYW5ydWJpYW50b3JvcW9kcnFvZHJiZWV3b293YToyNjM3NmVkeXV3OWUwcmkzNDl1ZA==',
        'Content-Type': 'application/json',
      },
      'body form-data': JSON.stringify({
        user: 'ngadimin',
        pass: 'h4oejsgmQ#6ChYBtDb',
      }),
    })
      .then(response => response.json())
      .then(json => {
        console.log(json.data);
      })
      .catch(err => {
        console.log(err);
      });
  };
  return (
    <View style={styles.page}>
      <RenderStatusBar />
      <RenderHeaderSection navigation={navigation} />
      <RenderContentSection navigation={navigation} />
    </View>
  );
};

const RenderStatusBar = () => {
  return <StatusBar type="secondary" />;
};

const RenderHeaderSection = ({navigation}) => {
  return (
    <>
      <View style={styles.topOrnament}>
        <Image source={ILLoginAtas} style={styles.image} />
      </View>
      <Header
        icon="back-light"
        onPress={() => navigation.goBack()}
        title="Daftar Sekarang"
      />
      <View style={styles.wrapperTitle}>
        <Text style={styles.title}>Masuk Akun</Text>
      </View>
    </>
  );
};

const RenderContentSection = ({navigation}) => {
  return (
    <View style={styles.content}>
      <Gap height={80} />
      <View style={styles.wrapperLogo}>
        <Image source={ILLogoTanpaRiba} style={styles.logo} />
      </View>
      <Gap height={20} />
      <Input label="Username / Email" />
      <Input label="Password" />
      <Gap height={40} />
      <Button
        title="MASUK"
        type="secondary"
        onPress={() => navigation.navigate('MainApp')}
      />
      <Gap height={10} />
      <TouchableOpacity>
        <Text style={styles.ask}>Lupa Password</Text>
      </TouchableOpacity>
    </View>
  );
};

export default Login;

const styles = StyleSheet.create({
  page: {
    flex: 1,
    backgroundColor: colors.primary,
  },
  topOrnament: {
    position: 'absolute',
    bottom: 500,
  },
  image: {
    width: 450,
    height: 300,
  },
  content: {
    padding: 40,
    paddingTop: 0,
  },
  wrapperLogo: {
    alignItems: 'center',
  },
  logo: {
    height: 100,
    width: 270,
  },
  ask: {
    fontSize: 20,
    fontFamily: fonts.primary[600],
    color: colors.text.tertiary,
    textAlign: 'center',
  },
  wrapperTitle: {
    paddingHorizontal: 40,
    width: 200,
  },
  title: {
    fontSize: 30,
    fontFamily: fonts.primary[900],
    color: colors.primary,
  },
});