Basic React Native Part 23 - React Native Touchable

Pada  Part 22 kita telah belajar dan mengenal Slider jadi jika anda belum mengikuti tutorial Part 22 diharapkan anda mengikuti tutorial Part 22 terlebih dahulu. Pada Tutorial Part 23 ini kita mengenal terlebih dahulu Basic React Native Touchable.

React Native Touchable adalah komponen untuk mengatasi keterbatasan styling komponen Button. Touchable fungsi hampir sama dengan komponen Button namun karena komponen Button memiliki keterbatasan dalam styling atau tidak bisa mengatur Button yang kita sesuai keinginan, makanya Komponen Touchable adalah solusinya. Dengan Touchable semua komponen lain bisa memiliki aksi ketika komponen tersebut di klik. Seperti komponen Text, View, Image dan lain -nya masih banyak.

Touchable terbagi menjadi 4 bagian:

• TouchableNativeFeedback (Only For Android)
• TouchableHighlight (For Android/IOS Both)
• TouchableOpacity (For Android/IOS Both)
• TouchableWithoutFeedback (For Android/IOS Both)

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

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

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;

Menghapus Code Default App.js

Untuk memudahkan memahami component Touchable 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 Component React Native Untuk Project React Native dari React Native

import { TouchableNativeFeedback, TouchableHighlight,TouchableOpacity,
         TouchableWithoutFeedback, View, Text, StyleSheet} from 'react-native';

• Membuat Class Componet

class App extends Component {
  render() { 
    return (  );
  }
}
 

• Buat Function, tambahkan code berikut ini diatas rende

class App extends Component {
//Buat Function

    onPressTouchableNativeFeedback(){
      alert('TouchableNativeFeedback')
    }

    onPressTouchableHighlight(){
      alert('TouchableHighlight')
    }

    onPressTouchableOpacity(){
      alert('TouchableOpacity')
    }

    onPressTouchableWithoutFeedback(){
      alert('TouchableWithoutFeedback')
    }   
  render() { 
    return (  );
  }
}

• Kemudian tambahan code berikut ini didalam return.

return (
    //Code return
       <View style = {styles.container}>
          <TouchableNativeFeedback onPress={this.onPressTouchableNativeFeedback}
              background={TouchableNativeFeedback.SelectableBackground()}>
            <View style={styles.button}>
              <Text>Touchable Native Feedback(Only Android)</Text>
            </View>
          </TouchableNativeFeedback>
          <TouchableHighlight style={styles.button} onPress={this.onPressTouchableHighlight}>
            <Text>Touchable Highlight</Text>
          </TouchableHighlight>
          <TouchableOpacity
              style={styles.button}
              onPress={this.onPressTouchableOpacity}>
            <Text>Touchable Opacity</Text>
          </TouchableOpacity>
          <TouchableWithoutFeedback
              style={styles.button}
              onPress={this.onPressTouchableWithoutFeedback}>
            <View style={styles.button}>
              <Text>Touchable Without Feedback</Text>
            </View>
          </TouchableWithoutFeedback>
         </View>
    );

• Tambahkan Style sebelum export default

//Buat Style
const styles = StyleSheet.create ({
   container: {
      flex: 1,
      alignItems: 'center',
      marginTop: 50
   },
    button: {
      alignItems: 'center',
      backgroundColor: '#DDDDDD',
      padding: 10,
      width:300,
      marginTop:16
    },
});

• Setelah itu export class App.

export default App

• Berikut Code lengkap nya

import React, { Component } from 'react';
import { TouchableNativeFeedback, TouchableHighlight,TouchableOpacity,
         TouchableWithoutFeedback, View, Text, StyleSheet} from 'react-native';
class App extends Component {
    //Buat Function
    onPressTouchableNativeFeedback(){
      alert('TouchableNativeFeedback')
    }

    onPressTouchableHighlight(){
      alert('TouchableHighlight')
    }

    onPressTouchableOpacity(){
      alert('TouchableOpacity')
    }

    onPressTouchableWithoutFeedback(){
      alert('TouchableWithoutFeedback')
    }
   render() {
      return (
         //Code return
         <View style = {styles.container}>
          <TouchableNativeFeedback onPress={this.onPressTouchableNativeFeedback}
              background={TouchableNativeFeedback.SelectableBackground()}>
            <View style={styles.button}>
              <Text>Touchable Native Feedback(Only Android)</Text>
            </View>
          </TouchableNativeFeedback>
          <TouchableHighlight style={styles.button} onPress={this.onPressTouchableHighlight}>
            <Text>Touchable Highlight</Text>
          </TouchableHighlight>
          <TouchableOpacity
              style={styles.button}
              onPress={this.onPressTouchableOpacity}>
            <Text>Touchable Opacity</Text>
          </TouchableOpacity>
          <TouchableWithoutFeedback
              style={styles.button}
              onPress={this.onPressTouchableWithoutFeedback}>
            <View style={styles.button}>
              <Text>Touchable Without Feedback</Text>
            </View>
          </TouchableWithoutFeedback>
         </View>
      )
   }
}
//Buat Style
const styles = StyleSheet.create ({
   container: {
      flex: 1,
      alignItems: 'center',
      marginTop: 50
   },
    button: {
      alignItems: 'center',
      backgroundColor: '#DDDDDD',
      padding: 10,
      width:300,
      marginTop:16
    },
});
export default  App

• Tampilan Touchable

Demikianlah pembahasan Tutorial Part 23 ini akan kita lanjutkan pada Tutorial Part 24.