Basic React Native Part 19 - React Native ToastAndroid

react-native • Jan 04, 2020

Pada  Part 18 kita telah belajar dan mengenal ActivitiIndicator jadi jika anda belum mengikuti tutorial Part 18 diharapkan anda mengikuti tutorial  Part 18 terlebih dahulu. Pada Tutorial Part 19 ini kita mengenal terlebih dahulu Basic React Native ToastAndroid.

Mengekspos modul ToastAndroid native sebagai  modul Javascript. ini memiliki fungsi 'show' yang mengambil parameter berikut:

  • String message: Menampilkan Toast dengan teks.
  • int duration: ToastAndroid.SHORT or ToastAndroid.LONG

Terdapat juga sebuah Function showWithGravity untuk mengatur posisi atau layout Toast.

  • ToastAndroid.TOP
  • ToastAndroid.BOTTOM
  • ToastAndroid.CENTER.

komponen ToastAndroid yang terkait dengan android saja dan dapat digunakan untuk menampilkan informasi untuk waktu singkat. bersulang berisi pesan yang akan ditampilkan dengan cepat dan menghilang setelah beberapa waktu.

ToastAndroid memiliki 3 cara untuk menggunakan Component tersebut :
  • ToastAndroid.show(message, duration)
  • ToastAndroid.showWithGravity(message, duration, gravity)
  • ToastAndroid.showWithGravityAndOffset(message, duration, gravity, xOffset, yOffset)

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 component ToastAndroid 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 { 
    ToastAndroid,
    Alert, 
    Button, 
    View, 
    StyleSheet
} from 'react-native';
Import Component
  • Membuat Class Componet
class App extends Component {
  render() { 
    return (  );
  }
}
Membuat Class
  • Tambahkan ke 3 Function Berikut diatas render
class App extends Component {

  //1. Buat function Toast With Duration 
  toastWithDuration=()=>{
    ToastAndroid.show('Hi I am Simple Toast', ToastAndroid.SHORT);
  }

  //2. Buat function Toast With Duration And Gravity
  toastWithDurationGravity=()=>{
   ToastAndroid.showWithGravity(
      'Hi I am Toast with center gravity',
      ToastAndroid.SHORT, //bisa diganti SHORT, LONG
      ToastAndroid.CENTER //bisa diganti TOP, BOTTON, CENTER
    );
  }

    //3. Buat function Toast With Duration, Gravity And Offset
  _toastWithDurationGravityOffsetHandler=()=>{
     ToastAndroid.showWithGravityAndOffset(
      'Hi I am Toast with garavity and offset',
      ToastAndroid.LONG, //bisa diganti SHORT, LONG
      ToastAndroid.BOTTOM, //bisa diganti TOP, BOTTON, CENTER
      25, //xOffset
      50 //yOffset
    );
  }
  
  render() { 
    return (  );
  }
}
Tambah 3 Function
  • Tambahkan code ini di return
//4. Tambahkan code pada return
return (
      <View style={styles.container}>
 
        <Button 
           title='Generate Toast With Duration' 
           onPress={this.toastWithDuration}
        />
      
        <Button 
           title='Generate Toast With Duration AND Gravity' 
           onPress={this.toastWithDurationGravity}
        />
      
        <Button 
           title='Generate Toast With Duration, Gravity And Offset' 
           onPress={this._toastWithDurationGravityOffsetHandler}
         />
      
      </View>
    );
Tambah Code Di dalam return
  • Komudian tambahkan code style berikut ini.
//5. Tambahkan code style
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'space-between',
    backgroundColor: '#ecf0f1',
    margin: 20
  },
 
});
Code Style
  • Dan export class App
export default  App
export default App
  • Tampilan ToastAndroid
Tampilan Toast Android

Demikianlah pembahasan Tutorial Part 19 ini akan kita lanjutkan pada Tutorial Part 20

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.