Tutorial Membuat Form Login Dengan React Native!

Sebagian besar aplikasi yang ada di Playstore maupun Apple Store memiliki form login berupa gambar, Kolom Input Text untuk Username & Password, serta fitur tambahan seperti “Lupa Kata Sandi ?”  atau Sign up.

Kalo kamu suka membuat aplikasi, hal ini tentunya sangat lekat dengan kamu. Karena aplikasi yang baik tentunya memiliki form login yang digunakan sebagai privasi User, penyimpanan data user di database, maupun keamanan untuk User aplikasi kamu.

Namun bagaimana cara membuat login form yang benar ? apakah login form yang pernah kamu buat sudah optimal ?

Baca Juga :

• Proses Installasi dan Konfigurasi CodeIgniter
• Memahami Style yang Ada Pada React Native

Maka dari itu artikel ini hadir untuk menjawab pertanyaan tersebut. Kita akan membuat Login Form dengan menggunakan React Native. Nantinya tampilan untuk Login Form nya akan terlihat seperti berikut :

Langkah Membuat Login Form

Sebagai langkah awal, kita buat project baru react native terlebih dahulu baik dengan menggunakan Expo atau React Native CLI. Yang manapun kamu gunakan nantinya tampilan project barunya akan seperti berikut ini :

export default class App extends React.Component {

  render(){

    return (

      <View style={styles.container}>

        <Text>Open up App.js to start working on your app!</Text>

      </View>

    );

  }

}

const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: ‘#fff’,

    alignItems: ‘center’,

    justifyContent: ‘center’,

  },

})

;

Saya akan memulai dengan menghapus Text View di pada code diatas Dan tambahkan properti sederhana untuk menyimpan email dan kata sandi dari Form login yang akan kita buat.

Baca Juga :

• 10 Keuntungan Menggunakan React JS Pada Desain Website
• Begini Nih Cara Scroll View pada React Native Yang Benar

state={

    email:””,

    password:””

  }

Selanjutnya kita akan membuat Logo Text, disini kamu bisa menambahkan gambar yang kamu mau atau hanya sekedar teks saja.

<View style={styles.inputView} >

Logo Text Style :

logo:{

    fontWeight:”bold”,

    fontSize:50,

    color:”#fb5b5a”,

    marginBottom:40

  }

Untuk Field textInput, saya akan membuat tampilan lalu menambahkannya di dalam, Dengan cara ini kita dapat memiliki styling yang terpisah.

Setiap item input akan terlihat seperti ini :

<View style={styles.inputView} >

          <TextInput  

            style={styles.inputText}

            placeholder=”Email…”

            placeholderTextColor=”#003f5c”

            onChangeText={text => this.setState({email:text})}/>

        </View>

Untuk bagian TextInput kata sandi (password) tambahkan prop secureTextEntry agar kata sandi yang diinput nanti diubah kebentuk bintang untuk keamanan si pengguna

Juga, ubah properti onChangeText untuk menyimpan teks ke properti status kata sandi, bukan email

Baca Juga : Apa Itu React Native?Cara Kerja, Serta Kelebihannya Dalam Membangun Aplikasi

Dan Tambahkan Style berikut ini ke InputView :

inputView:{

    width:”80%”,

    backgroundColor:”#465881″,

    borderRadius:25,

    height:50,

    marginBottom:20,

    justifyContent:”center”,

    padding:20

  }

Dan TextInput Style nya :

  inputText:{

    height:50,

    color:”white”

  }

Sekarang mari kita tambahkan View untuk Forgot Password ? atau lupa kata sandi, Berikut Ini adalah code nya :

<TouchableOpacity>

          <Text style={styles.forgot}>Forgot Password?</Text>

        </TouchableOpacity>

Forgot text style :

  forgot:{

    color:”white”,

    fontSize:11

  }

Sama halnya Style untuk text Sign Up, kamu hanya perlu mengatur ukuran teksnya saja (text size) :

<TouchableOpacity>

           <Text style = {styles.loginText}> Daftar </Text>

         </TouchableOpacity>

Dan Login Button :

<TouchableOpacity style = {styles.loginBtn}>

           <Text style = {styles.loginText}> LOGIN </Text>

         </TouchableOpacity>

Baca Juga : Apa Itu Handling Touches Dan Cara Menggunakannya di React Native

Untuk style Login Button akan kita buat sedikit berbeda. Kita akan buat menjadi rata tengah “Center” :

loginBtn: {

     lebar: “80%”,

     backgroundColor: “# fb5b5a”,

     borderRadius: 25,

     tinggi: 50,

     alignItems: “center”,

     justifyContent: “center”,

     marginTop: 40,

     marginBottom: 10

   },

Jika sudah, maka tampilan login form nya akan seperti berikut :

Selamat, project login form React native yang kita buat sudah jadi. Kamu bisa lakukan sedikit modifikasi sesuai style yang kamu inginkan. Coba untuk lakukan eksplorasi pada codingnya agar kamu lebih memahami struktur code nya.

 

Berikutnya Baca : 5 Cara Mudah Membuat Website dengan WordPress

Sumber : reactnativemaster.com