Basic React Native Part 11 - React Native TextInput

React Native • Dec 31, 2019

Pada  Part 10 kita telah belajar dan mengenal StyleSheet jadi jika anda belum mengikuti tutorial Part 10 diharapkan anda mengikuti tutorial  Part 10 terlebih dahulu.

Pada Tutorial Part 11 ini kita mengenal terlebih dahulu Basic React Native TextInput. Component TextInput React Native adalah komponen dasar yang memungkinkan pengguna aplikasi untuk memasukkan teks, nomor, password dan lain - lain.


TextInput Pada React Native Memiliki sebauh prop onChangeText yang membutuhkan Fungsi atau Function yang akan dipanggil setiap kali ketika mengubah teks, dan juga memiliki nilai prop yang dapat mengatur nilai atau value default  ke dalamnya.

Data hasil Input Pengguna atau User aplikasi yang menggunakan keyboard akan di tampung atau di simpan terlebih dahulu kedalam state setelah baru langkah data di state tersebut dikelola untuk di tampilkan pada UI atau tampilan aplikasinya.

Mengimplementasikan Pada Project React Native

Buat Project React Native

Pada Tutorial Part 2 kita telah menginstall react-native-cli kemudian kita telah belajar cara membuat project baru react native. Berikut perintah cara untuk membuat project baru react native.

react-native init namafolderproject
Buat Project Baru

Install Aplikasi Debug Ke Handphone Android

Pada Tutorial Part 4 kita telah belajar cara menginstall Aplikasi Debug ke Handphone Android, untuk tata cara yang lebih jelas bisa langsung pelajari lagi pada Tutorial Part 4 terlebih dahulu. Secara singkat perintahnya seperti berikut.

react-native run-android
Install Aplikasi Debug Ke Handphone Android

Buka File App.js Dengan Visual Studio Code

Secara default pada file App.js memiliki code yang cukup dan menghasilkan tampilkan seperti berikut ini

import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
} from 'react-native';

import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

const App: () => React$Node = () => {
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <ScrollView
          contentInsetAdjustmentBehavior="automatic"
          style={styles.scrollView}>
          <Header />
          {global.HermesInternal == null ? null : (
            <View style={styles.engine}>
              <Text style={styles.footer}>Engine: Hermes</Text>
            </View>
          )}
          <View style={styles.body}>
            <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}>Step One</Text>
              <Text style={styles.sectionDescription}>
                Edit <Text style={styles.highlight}>App.js</Text> to change this
                screen and then come back to see your edits.
              </Text>
            </View>
            <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}>See Your Changes</Text>
              <Text style={styles.sectionDescription}>
                <ReloadInstructions />
              </Text>
            </View>
            <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}>Debug</Text>
              <Text style={styles.sectionDescription}>
                <DebugInstructions />
              </Text>
            </View>
            <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}>Learn More</Text>
              <Text style={styles.sectionDescription}>
                Read the docs to discover what to do next:
              </Text>
            </View>
            <LearnMoreLinks />
          </View>
        </ScrollView>
      </SafeAreaView>
    </>
  );
};

const styles = StyleSheet.create({
  scrollView: {
    backgroundColor: Colors.lighter,
  },
  engine: {
    position: 'absolute',
    right: 0,
  },
  body: {
    backgroundColor: Colors.white,
  },
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
    color: Colors.black,
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
    color: Colors.dark,
  },
  highlight: {
    fontWeight: '700',
  },
  footer: {
    color: Colors.dark,
    fontSize: 12,
    fontWeight: '600',
    padding: 4,
    paddingRight: 12,
    textAlign: 'right',
  },
});

export default App;
Code Default App.js
Tampilan Default File App.js
Tampilan Default File App.js

Menghapus Code Default App.js

Untuk memudahkan memahami componen TextInput kita hapus semua code dafault App.js. Setelah semua code default App.js dihapus maka ikuti langkah - langkah berikut ini.

  • Import React
import React, { Component } from 'react'
import react
  • Import Component Yang Dibutuhkan Untuk Project React Native
import {
View,
Text,
TextInput,
StyleSheet
}from 'react-native'
Import Component
  • Membuat Class Componet
class App extends Component {
  render() { 
    return (  );
  }
}
Membuat Class
  • Kemudian Buat state sebelum render() didalam class
class App extends Component {
    //1.Membuat State text dengan nilai default kosong
    state={
        text:''
    }
  render() { 
    return (  );
  }
}
Membuat State Dalam Class
  • Tambahkan Code Berikut untuk Memanggil State text Pada bagian return() didalam class.
class App extends React.Component{
  // 1.Membuat State text dengan nilai default koson
  state={
    text:''
  }
    render(){
        return(
            <View style={styles.container}>
            {/* 2. Memanggil State text */}
                <Text style={styles.sty_text}>Nama saya {this.state.text}</Text>
            </View>
        )
    }
}
  • Tambahkan code TextInput berikut setelah component Text
class App extends React.Component{
  // 1.Membuat State text dengan nilai default koson
  state={
    text:''
  }
    render(){
        return(
            <View style={styles.container}>
            {/* 2. Memanggil State text */}
                <Text style={styles.sty_text}>Nama saya {this.state.text}</Text>
            {/* 3. Tambahkan TextInput */}
                <TextInput 
                  style={styles.input}
                  placeholder='Masukan Nama Anda'
                  onChangeText={ (dataInput) => this.setState({text:dataInput})}
                />
            </View>
        )
    }
}
TextInput
  • Tambahan code style berikut sebelum export default
// 4.tambahan code style
const styles = StyleSheet.create({
  container:{
    flex:1,
    justifyContent:'center',
    alignItems:'center'
  },
  sty_text:{
    fontSize: 20,
    fontWeight:'bold'
  },
  input:{
    height: 50,
    width:'80%',
    borderBottomWidth: 2,
  }
})
Styling
  • Jangan Lupa di export class App dengan code berikut ini
export default App
export class
  • Berikut code versi lengkap nya App.js
import React from 'react'
import { View ,Text, TextInput,StyleSheet} from 'react-native'

class App extends React.Component{
  // 1.Membuat State text dengan nilai default koson
  state={
    text:''
  }
    render(){
        return(
            <View style={styles.container}>
            {/* 2. Memanggil State text */}
                <Text style={styles.sty_text}>Nama saya {this.state.text}</Text>
            {/* 3. Tambahkan TextInput */}
                <TextInput 
                  style={styles.input}
                  placeholder='Masukan Nama Anda'
                  onChangeText={ (dataInput) => this.setState({text:dataInput})}
                />
            </View>
        )
    }
}
// 4.tambahan code style
const styles = StyleSheet.create({
  container:{
    flex:1,
    justifyContent:'center',
    alignItems:'center'
  },
  sty_text:{
    fontSize: 20,
    fontWeight:'bold'
  },
  input:{
    height: 50,
    width:'80%',
    borderBottomWidth: 2,
  }
})

export default App
Code Lengkap App.js
TextInput

 Demikianlah pembahasan Tutorial Part 11 ini akan kita lanjutkan pada Tutorial Part 12

Wandi Pratama

Saya seorang Developer Mobile menggunakan Framework React Native dan saya juga memiliki pengalaman dibidang SYS Admin. Jasa menerima jasa pembuatan aplikasi dan website https://pindahdigital.com

Recommended for you

No results for your search, try something different.