React Native – Modal

Props Keterangan
animationType Type enum. Dapat diisi dengan (‘none’, ‘slide’, ‘fade’) untuk mendefinisikan animasi modal.
visible Type bool(true atau false) mendefinisikan modal dapat dilihat atau tidak.
onShow Diisi dengan “function” yang berisikan beberapa “statement” yang dijalankan saat modal ditampilkan
transparent Type bool(true atau false) untuk mengatur transparansi.
onRequestClose (android) Diisi dengan “function” yang berisikan beberapa “statement” yang dijalankan user menekan tombol “back button”
onOrientationChange (IOS) Diisi dengan “function” yang berisikan beberapa “statement” yang dijalankan saat orientasi handphone berubah
supportedOrientations (IOS) Type enum. Dapat diisi dengan (‘portrait’, ‘portrait-upside-down’, ‘landscape’, ‘landscape-left’, ‘landscape-right’)

Contoh Dasar Penggunaan Modal

import React, { Component } from 'react';
import {
 Modal,
 Text,
 View,
 Button,
 StyleSheet,
} from 'react-native';
const styles = StyleSheet.create({
 mainContainer: {
  marginTop: 22,
 },
 modalContainer: {
  marginTop: 22,
 },
});
class Example extends Component {
 constructor() {
  super();
  this.state = {
   visibility: false,
  };
 }
 setModalVisibility(visible) {
  this.setState({
   visibility: visible,
  });
 }
 render() {
  return (
   <View style={styles.mainContainer}>
    <Modal
    animationType={'slide'}
    transparent={false}
    visible={this.state.visibility}
    >
     <View style={styles.modalContainer}>
      <View>
       <Text>I'm a simple Modal</Text>
       <Button
       color="#000"
       onPress={()=> this.setModalVisibility(!this.state.visibility)}
       title="Hide Modal"
       />
      </View>
     </View>
    </Modal>
    <Button
    color="#000"
    onPress={() => this.setModalVisibility(true)}
    title="Show Modal"
    />
   </View>
  );
 }
}
export default Example;

Contoh Modal Transparan

Anda dapat melihat hasil dari contoh dibawah ini di sini.

import React, {
 Component
} from 'react';
import {
 Text,
 View,
 StyleSheet,
 Button,
 Modal
} from 'react-native';
import {
 Constants
} from 'expo';
export defaultclass App extends Component {
 state = {
  modalVisible: false,
 };
 _handleButtonPress = ()=>{
  this.setModalVisible(true);
 };
 setModalVisible = (visible)=>{
  this.setState({
   modalVisible: visible
  });
 }
 render() {
  var modalBackgroundStyle = {
   backgroundColor: 'rgba(0, 0, 0, 0.5)'
  };
  var innerContainerTransparentStyle = {
   backgroundColor: '#fff',
   padding: 20
  };
  return (
   <View style={styles.container}>
    <Modal animationType='fade' 
    transparent={true} 
    visible={this.state.modalVisible} 
    onRequestClose={()=> this.setModalVisible(false)}>  
     <View style={[styles.container, modalBackgroundStyle]}>
      <View style={innerContainerTransparentStyle}>
       <Text> This is a modal </Text>
       <Button title='close' onPress={this.setModalVisible.bind(this, false)}/>
      </View>
     </View>
    </Modal>
    <Button title="Press me" onPress={this._handleButtonPress}/>
   </View> 
  );
 }
}
const styles = StyleSheet.create({
 container: {
  flex: 1,
  alignItems: 'center',
  justifyContent: 'center',
  paddingTop: Constants.statusBarHeight,
  backgroundColor: '#ecf0f1',
 }
});

Add a Comment

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