tambah modal

view/Item.js

 import React from 'react';
-import { View, Text, StyleSheet, ScrollView, TouchableOpacity, Image, TextInput,Modal } from 'react-native';
+import { View, Text, StyleSheet, ScrollView, TouchableOpacity, Image, TextInput, Modal, Alert } from 'react-native';
 import { connect } from 'react-redux';
 import ActionType from '../redux/globalActionType';
 import NumberFormat from 'react-number-format';
@@ -10,7 +10,9 @@ class Item extends React.Component {
     constructor(props) {
         super(props)
         this.state = {
-            value: 0
+            value: 0,
+            modalVisible: false,
+            description: ''
         }
     }
     handleChangeQuantity = (item, qty) => {
@@ -34,11 +36,45 @@ class Item extends React.Component {
         }
     }
 
+    handleAddDescription() {
+        this.setState({
+            modalVisible: true
+        })
+    }
+
     render() {
         const { item } = this.props
         // console.log("ini id itemnya "+item.id)
         return (
             <View style={{ flex: 1, margin: 10 }} key={item.id} ref={this.props._scrollView}>
+                <Modal animationType="slide"
+                    transparent={true}
+                    visible={this.state.modalVisible}
+                    onRequestClose={() => {
+                        this.setState({
+                            modalVisible: false
+                        })
+                    }}>
+                    <View style={styles.centerViewModal}>
+                        <View style={styles.modalView}>
+                            <Text style={{ fontSize: 12, color: '#CFB368', fontFamily: 'Gotham-Black' }}>Add Description</Text>
+                            <View style={{ margin: 10 }}>
+                                <TextInput
+                                    style={styles.textInput}
+                                    onChangeText={(description) => this.setState({ description })}
+                                    value={this.state.description}
+                                    textAlign='center'
+                                />
+                            </View>
+                            <TouchableOpacity onPress={() => this.setState({ modalVisible: false })}>
+                                <View style={styles.button}>
+                                    <Text style={{ color: 'white', fontWeight: 'bold', fontSize: 22 }}>Confirm</Text>
+                                </View>
+                            </TouchableOpacity>
+                        </View>
+                    </View>
+
+                </Modal>
                 <ScrollView ref={view => this._scrollView = view}>
                     {item.code == 'CATEGORY' ? (
                         <Text style={{ fontSize: 15, color: '#c9af6d', fontFamily: 'Gotham-Black' }}>{item.name}</Text>
@@ -46,7 +82,7 @@ class Item extends React.Component {
 
                             <View style={{ flex: 1, flexDirection: 'row', height: 100 }}>
                                 <View style={{ flex: 1, height: 100 }}>
-                                <TouchableOpacity onPress={() => this.props.navigation.navigate('Menu Detail', {nameMenu:item.name,desc:item.description,image:item.image})}>
+                                    <TouchableOpacity onPress={() => this.props.navigation.navigate('Menu Detail', { nameMenu: item.name, desc: item.description, image: item.image })}>
                                         <Image source={{ uri: item.image }} style={{ height: 100, width: 100, borderRadius: 10, }}></Image>
                                     </TouchableOpacity>
                                 </View>
@@ -56,19 +92,21 @@ class Item extends React.Component {
                                         <NumberFormat decimalScale={0} value={item.price} renderText={value => <Text style={{ fontSize: 12, margin: 5, marginRight: 10, fontFamily: 'Gotham-Black', color: 'grey' }}>Rp. {value}</Text>} displayType={'text'} thousandSeparator={true} prefix={''} />
                                     </View>
                                     <View style={{ marginLeft: 5, marginRight: 5, flexDirection: 'row' }}>
-                                        <View style={styles.shadowEdit}>
-                                            <Image source={(require('../assets/icon/icon-pencil.png'))} style={{ height: 25, width: 25, marginLeft: 5, marginRight: 5 }}></Image>
-                                        </View>
+                                        <TouchableOpacity onPress={() => this.handleAddDescription()}>
+                                            <View style={styles.shadowEdit}>
+                                                <Image source={(require('../assets/icon/icon-pencil.png'))} style={{ height: 25, width: 25, marginLeft: 5, marginRight: 5 }}></Image>
+                                            </View>
+                                        </TouchableOpacity>
                                         <View style={styles.shadowAdd}>
                                             <TouchableOpacity onPress={() => this.props.handleMin()}>
-                                                <Text style={{ fontSize:25,alignSelf:'center' }}> - </Text>
+                                                <Text style={{ fontSize: 25, alignSelf: 'center' }}> - </Text>
                                             </TouchableOpacity>
                                             <TextInput
-                                                style={{  padding: 2, textAlign: 'center', fontFamily: 'Gotham-Black',fontSize:15,marginRight:5,marginLeft:5 }}
+                                                style={{ padding: 2, textAlign: 'center', fontFamily: 'Gotham-Black', fontSize: 15, marginRight: 5, marginLeft: 5 }}
                                                 keyboardType={'numeric'}
                                                 onChangeText={(qty) => this.handleChangeQuantity(item, qty)}>{item.qty}</TextInput>
-                                            <TouchableOpacity style={{alignSelf:'center'}} onPress={() => this.props.handleAdd()}>
-                                                <Text style={{ fontSize: 25,alignSelf:'center' }}> + </Text>
+                                            <TouchableOpacity style={{ alignSelf: 'center' }} onPress={() => this.props.handleAdd()}>
+                                                <Text style={{ fontSize: 25, alignSelf: 'center' }}> + </Text>
                                             </TouchableOpacity>
                                         </View>
                                     </View>
@@ -130,7 +168,36 @@ const styles = StyleSheet.create({
         marginLeft: 5,
         marginRight: 5,
         marginTop: 5,
-    }
+    },
+    centerViewModal: {
+        flex: 1,
+        justifyContent: "center",
+        alignItems: "center",
+    },
+    modalView: {
+        backgroundColor: "white",
+        borderRadius: 10,
+        borderWidth: 1,
+        borderColor: 'grey',
+        padding: 20,
+        alignItems: "center",
+    },
+    textInput: {
+        height: 40,
+        width: 250,
+        borderColor: 'gray',
+        borderWidth: 1,
+        marginHorizontal: 30,
+        borderRadius: 10
+    },
+    button: {
+        backgroundColor: '#CFB368',
+        padding:20,
+        borderRadius: 10,
+        paddingVertical: 5,
+        alignItems: 'center',
+        justifyContent: 'center'
+    },
 })
 
 const mapDispatchToProps = (dispacth) => {