Basic React Native Part 20 - React Native Modal

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

Component modal React Native adalah cara dasar untuk menampilan konten ini atas konten lain. Component ini didukung oleh android dan ios baik. Component Modal berisi konten sendiri yang terlihat ketika kita membuka modal tersebut.

Componet Modal Memiliki animationType

• slide, slide dalam dari bawah
• fade, memudar ke tampilan
• none, muncul tanpa animasi

Sekarang Default di Setting none.

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

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

• Kemudian buat state di dalam class App

class App extends Component {

 //1. Buat State
  state = {
    ModalState: false, 
  }
  
  render() { 
    return (  );
  }
}
 

Membuat state

• Setelah itu tambahkan code ini pada return didalam class

class App extends Component {

 //1. Buat State
  state = {
    ModalState: false, 
  }
  
  render() { 
    return ( 
    // 2.Tambahkan code di return 
      <View style = {styles.container}>
        <Modal animationType = {"slide"} transparent = {false}
            visible = {this.state.ModalState}
            onRequestClose = {() =>{ console.log("Modal dibuka.") } }>
            <View style = {styles.modal}>
              <Text style = {styles.text}>Modal Terbuka</Text>
              <Text style = {styles.text}>Konten 1</Text>
              <Text style = {styles.text}>Konten 2</Text>
              <Text style = {styles.text}>Konten 3</Text>
              <Button title="Keluar Dari Modal" onPress = {() => {
                  this.setState({ ModalState:!this.state.ModalState})}}/>
            </View>
        </Modal>
        <Button 
           title="Buka Modal" 
           onPress = {() => {this.setState({ ModalState: true})}}
        />
      </View>
    );
  }
}
 

Code pada return

• Dan tambahkan code style berikut.

// 3. Tambahkan Code Style
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
  },
   modal: {
     flex:1,
      alignItems: 'center',
      justifyContent:'center',
      backgroundColor: '#00ff00',
   },
   text: {
      color: '#3f2949',
      marginTop: 10
   }
});

Tambahkan Code Style

• Export Class App

export default  App

Export Class App

• Code Lengkap Component Modal

import React, { Component } from 'react';
 
import { Modal, Button, View,Text, StyleSheet } from 'react-native';
 
class App extends Component {
  

  //1. Buat State
  state = {
    ModalState: false, 
  }
  render() {
    return (
      // 2.Tambahkan code di return 
      <View style = {styles.container}>
        <Modal animationType = {"slide"} transparent = {false}
            visible = {this.state.ModalState}
            onRequestClose = {() =>{ console.log("Modal dibuka.") } }>
            <View style = {styles.modal}>
              <Text style = {styles.text}>Modal Terbuka</Text>
              <Text style = {styles.text}>Konten 1</Text>
              <Text style = {styles.text}>Konten 2</Text>
              <Text style = {styles.text}>Konten 3</Text>
              <Button title="Keluar Dari Modal" onPress = {() => {
                  this.setState({ ModalState:!this.state.ModalState})}}/>
            </View>
        </Modal>
        <Button 
           title="Buka Modal" 
           onPress = {() => {this.setState({ ModalState: true})}}
        />
      </View>
    );
  }
}
 
// 3. Tambahkan Code Style
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
  },
   modal: {
     flex:1,
      alignItems: 'center',
      justifyContent:'center',
      backgroundColor: '#00ff00',
   },
   text: {
      color: '#3f2949',
      marginTop: 10
   }
});
export default  App

• Tampilan Component Modal

Tampilan Modal

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

Catatan: tulisan ini dipindahkan dari cloudborneo.com, terbit pertama 4 Januari 2020.