Saya membuat login page menggunakan react native (tentang react native bisa melihat ke https://facebook.github.io/react-native/)
login page yang saya buat ini sebenarnya sangat sederhana.

Pertama install terlebih dahulu react-native

npm install -g create-react-native-app

Buat project react native
react-native init LoginDesign

Install plugin Node.js untuk Button agar login design sesuai screenshot diatas
npm install --save react-native-button-component

Karena hanya menggunakan satu page saja maka cukup mengubah code di LoginDesign/index.ios.js untuk IOS, LoginDesign/index.android.js untuk Android

import component yg dibutuhkan

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  TextInput,
  ScrollView,
} from 'react-native';
import ButtonComponent, {RectangleButton} from 'react-native-button-component';

lalu didalam method render di class LoginDesign ubah menjadi

return (
  <View style={{ height: '100%'}}>
      <Image style={{ width: '100%', height: '100%'}} source={require('./app/images/bg_login.png')}>
          <View style={styles.subcontainer}>
          <Image source={require('./app/images/logo.png')} style={styles.logo}/>
              <TextInput editable={true} placeholder='Username...' style={styles.textinput} underlineColorAndroid='transparent' 
                  placeholderTextColor='#ffffff'/>
              <TextInput editable={true} placeholder='Password...' style={styles.textinput} underlineColorAndroid='transparent' 
                  placeholderTextColor='#ffffff' secureTextEntry={true}/>

              <ButtonComponent style={styles.btnComponent} text="LOGIN" shape='rectangle' width={'80%'} 
                  backgroundColors={['#F1404B', '#F1404B']} type='primary'>
              </ButtonComponent>
              <ButtonComponent style={styles.btnComponent} text="CREATE ACCOUNT" shape='rectangle' width={'80%'} 
                backgroundColors={['#0072BC', '#0072BC']} type='primary'></ButtonComponent>
          </View>
      </Image>
  </View>
);

lalu tambahkan style

const styles = StyleSheet.create({
  container: {
      flex: 1,
      alignItems: 'stretch',
      backgroundColor: '#F5FCFF'
  },
  
  logo:{
      marginBottom: 60,
      width: '30%', 
      height: '25%'
  },

  subcontainer:  {
      flex: 1,
      flexDirection: 'column',
      alignItems: 'center',
      justifyContent: 'center'
  },

  titleLogin: {
      backgroundColor: 'rgba(255, 255, 255, 0)',
      color: 'white',
      fontSize: 25,
      marginBottom: 50,
  },

  textinput: {
      color: '#ffffff',
      backgroundColor: 'rgba(255, 255, 255, 0.1)',
      borderBottomColor: '#ffffff',
      width: '80%',
      bottom: 2,
      height: 40,
      marginBottom: 10,
      textAlign: 'center',
      borderBottomColor: '#ffffff',
      borderBottomWidth: 1
  },

  btnComponent: {
      marginBottom: 10,
      backgroundColor: '#F1404B'
  }
})

kode lengkapnya

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  TextInput,
  ScrollView,
} from 'react-native';
import ButtonComponent, {RectangleButton} from 'react-native-button-component';

export default class LoginDesign extends Component {
  render() {
    return (
      <View style={{ height: '100%'}}>
          <Image style={{ width: '100%', height: '100%'}} source={require('./app/images/bg_login.png')}>
              <View style={styles.subcontainer}>
              <Image source={require('./app/images/logo.png')} style={styles.logo}/>
                  <TextInput editable={true} placeholder='Username...' style={styles.textinput} underlineColorAndroid='transparent' 
                      placeholderTextColor='#ffffff'/>
                  <TextInput editable={true} placeholder='Password...' style={styles.textinput} underlineColorAndroid='transparent' 
                      placeholderTextColor='#ffffff' secureTextEntry={true}/>

                  <ButtonComponent style={styles.btnComponent} text="LOGIN" shape='rectangle' width={'80%'} 
                      backgroundColors={['#F1404B', '#F1404B']} type='primary'>
                  </ButtonComponent>
                  <ButtonComponent style={styles.btnComponent} text="CREATE ACCOUNT" shape='rectangle' width={'80%'} 
                    backgroundColors={['#0072BC', '#0072BC']} type='primary'></ButtonComponent>
              </View>
          </Image>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
      flex: 1,
      alignItems: 'stretch',
      backgroundColor: '#F5FCFF'
  },
  
  logo:{
      marginBottom: 60,
      width: '30%', 
      height: '25%'
  },

  subcontainer:  {
      flex: 1,
      flexDirection: 'column',
      alignItems: 'center',
      justifyContent: 'center'
  },

  titleLogin: {
      backgroundColor: 'rgba(255, 255, 255, 0)',
      color: 'white',
      fontSize: 25,
      marginBottom: 50,
  },

  textinput: {
      color: '#ffffff',
      backgroundColor: 'rgba(255, 255, 255, 0.1)',
      borderBottomColor: '#ffffff',
      width: '80%',
      bottom: 2,
      height: 40,
      marginBottom: 10,
      textAlign: 'center',
      borderBottomColor: '#ffffff',
      borderBottomWidth: 1
  },

  btnComponent: {
      marginBottom: 10,
      backgroundColor: '#F1404B'
  }
})

AppRegistry.registerComponent('LoginDesign', () => LoginDesign);

jalankan aplikasi di emulator untuk melihat hasil-nya dengan menjalankan perintah didalam path LoginDesign

untuk menjalankan di IOS simulator : react-native run-ios

untuk menjalankan di Android simulator : react-native run-android

 

Categories: Code

0 thoughts on “Login Page UI – React Native”

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Posts

Code

Docker Compose untuk Laravel 5.4

Saya sedang mengerjakan projek dengan menggunakan Laravel 5.4 (saya tidak menggunakan Laravel 5.5 karena requirementnya membutuhkan > php 7). ternyata Laravel 5.4 ini membutuhkan php 5.6 dan AMPPS (semacam XAMPP / MAMP) yg saya pakai Read more…

Code

Facade Design Pattern in Python

Facade design pattern is useful pattern for complexity of a class, then provide an simple interface for user for using that complex class. Facade pattern used to simplify to access a complex class example of implementation : https://github.com/alrifqi/DesignPattern/tree/master/facade Read more…