Devy Ferdiansyah, M. Kom

Kumpulan BLOG dan VLOG Pribadi Koe

Membuat Form Login

1 min read

Kali ini kita akan membuat sebuah tampilan form login, seperti kita ketahui bahwa biasanya sebuah form login akan terdiri dari Judul form login, sebuah textbox username, sebuah textbox password, sebuah tombol Login dan sebuah tombol registrasi kan?

Pada bentuk standarnya, sebuah app.js akan menggunakan komponen standar seperti Stylesheet, Text, dan View, untuk membuat sebuah tampilan form login, makan perlu kita tambahkan kompnen baru seperti TextInput dan Button yang diimport dari React Native

Berikut adalah script untuk membuat tampilan login dengan react native

import React from 'react';
import { StyleSheet, Text, View, TextInput, Button } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text styles = {styles.text}>Selamat Datang, Silahkan Login</Text>
      <View style={styles.containerInput}>
        <TextInput
          style = {styles.input}
          placeholder='Masukkan Nama'
          placeholderTextColor = 'grey'
        />
      </View>
      <View style={styles.containerInput}>
        <TextInput
          style = {styles.input}
          placeholder='Masukkan Password'
          placeholderTextColor = 'grey'
        />
      </View>
      <View style={styles.containerButton}>
        <View style={styles.button}>
          <Button
            title = 'Register'
            color = 'green'
          />
        </View>

        <View style={styles.button}>
          <Button
            title = 'Login'
            color = 'blue'
          />
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },

  containerButton : {
    flexDirection : 'row',
    alignItems : 'flex-start',
    justifyContent : 'space-around',
    width : '100%',
  },

  containerInput : {
    borderColor : 'black',
    margin : 10,
    backgroundColor : 'white',
    borderWidth : 1,
    borderStyle : 'solid',
    padding : 10,
  },

  input : {
    width: 250,
  },

  button : {
    width : 90,
  },

  text : {
    fontSize : 20,
    color : 'white',
  }
});

Sehingga kalau kita simpan maka akan muncul tampilan seperti dibawah ini

Selamat mencoba…

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *