모달

App.js

 import * as React from 'react';
-import { StyleSheet, View, Text, TextInput, Button, Keyboard, TouchableWithoutFeedback } from 'react-native';
+import { useState } from 'react';
+import { StyleSheet, View, Text, TextInput, Button, Keyboard, TouchableWithoutFeedback, Modal } from 'react-native';
 import { NavigationContainer } from '@react-navigation/native';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import Ionicons from 'react-native-vector-icons/Ionicons';
 import Monthly from './Monthly';
 import Analy from './Analy';
 import MoneyDB from './MoneyDB';
+import ReviewForm from './screens/reviewForm';
+
 
 
 function MainScreen({ navigation }) {
   const [number, onChangeNumber] = React.useState(null);
+  const [modalOpen, setModalOpen] = useState(false);
+  const [reviews, setReviews] = useState([
+    { title: 'aa', rating: 5, body: 'bb', key: '1' },
+  ]);
+
+  const addReview = (review) => {
+    review.key = Math.random().toString();
+    setReviews((currentReviews) => {
+      return [review, ...currentReviews]
+    });
+    setModalOpen(false);
+  }
+
   return (
     <>
       <TouchableWithoutFeedback onPress={() => {
         Keyboard.dismiss();
-        
+
       }}>
-        <View style={{flex: 1}}>
-        <View >
-          <Text style={style.Font}>여기는 메인 페이지 입니다.</Text>
-          <Text style={style.Font}>아래는 input 테스트를 위한 것입니다.</Text>
-          <TextInput
-            style={style.TextInput}
-            onChangeText={onChangeNumber}
-            keyboardType="numeric"
+        <View style={{ flex: 1 }}>
+
+
+          <View >
+            <Text style={style.Font}>여기는 메인 페이지 입니다.</Text>
+            <Text style={style.Font}>아래는 input 테스트를 위한 것입니다.</Text>
+            <TextInput
+              style={style.TextInput}
+              onChangeText={onChangeNumber}
+              keyboardType="numeric"
+            />
+            <Text>입력한 숫자 보기: {number} </Text>
+          </View>
+
+          <Button
+            title="월별 페이지로 이동"
+            onPress={() => navigation.navigate('Monthly')}
+          />
+                    <Modal visible={modalOpen} animationType='slide'>
+            <View style={style.modalContent}>
+              <Ionicons
+                name='close'
+                size={24}
+                style={{ ...style.modalToggle, ...style.modalClose }}
+                onPress={() => setModalOpen(false)}
+              />
+              <ReviewForm addReview = {addReview} />
+            </View>
+          </Modal>
+          <Ionicons
+            name='add'
+            size={24}
+            style={style.modalToggle}
+            onPress={() => setModalOpen(true)}
           />
-          <Text>입력한 숫자 보기: {number} </Text>
         </View>
-
-         <Button
-        title="월별 페이지로 이동"
-        onPress={() => navigation.navigate('Monthly')}
-        />  
-      <MoneyDB />
-      </View>
       </TouchableWithoutFeedback>
-      
+
     </>
   )
 }
@@ -76,6 +110,23 @@ function App() {
 }
 
 const style = StyleSheet.create({
+  modalToggle: {
+    marginBottom: 10,
+    borderWidth: 1,
+    borderColor: '#f2f2f2',
+    padding: 10,
+    borderRadius: 10,
+    alignSelf: 'center',
+  },
+  modalClose: {
+    marginTop: 20,
+    marginBottom: 0,
+  },
+  modalContent: {
+    flex: 1,
+
+  },
+
   TextInput: {
     borderColor: 'skyblue',
     height: 40,

package.json

@@ -15,6 +15,7 @@
     "@react-navigation/bottom-tabs": "^5.11.11",
     "@react-navigation/native": "^5.9.4",
     "@react-navigation/stack": "^5.14.5",
+    "formik": "^2.2.9",
     "react": "17.0.1",
     "react-native": "0.64.2",
     "react-native-elements": "^3.4.2",

screens/reviewForm.js

+import React from 'react';
+import { StyleSheet, Button, TextInput, View, Text } from 'react-native';
+import { globalStyles } from '../styles/global.js'
+import { Formik } from 'formik';
+
+export default function ReviewForm(addReview) {
+    return (
+        <View style={globalStyles.container}>
+            <Formik
+                initialValues={{ title: '', body: '', rating: '' }}
+                onSubmit={(values) => {
+                    addReview(values);
+                    
+
+                }} 
+
+            >
+                {(props) => (
+                    <View>
+                        <TextInput
+                            style={globalStyles.input}
+                            placeholder='Review title'
+                            onChangeText={props.handleChange('title')}
+                            value={props.values.title}
+                        />
+
+                        <TextInput
+                            multiline
+                            style={globalStyles.input}
+                            placeholder='Review body'
+                            onChangeText={props.handleChange('body')}
+                            value={props.values.body}
+                        />
+
+                        <TextInput
+                            multiline
+                            style={globalStyles.input}
+                            placeholder='Rating (1-5)'
+                            onChangeText={props.handleChange('rating')}
+                            value={props.values.rating}
+                        />
+
+                        <Button title = 'submit' color = 'maroon' onPress = {props.handleSubmit}/>
+                    </View>
+                )}
+
+            </Formik>
+
+        </View>
+    )
+}
\ No newline at end of file

styles/global.js

+import {StyleSheet} from 'react-native';
+
+export const globalStyles = StyleSheet.create({
+    container: {
+        flex:1,
+        padding:24,
+    },
+    titleText: {
+        fontFamily: 'nunito-bold',
+        fontSize:18,
+        color: '#333'
+    },
+    paragraph: {
+        marginVertical: 8,
+        lineHeight:20,
+    },
+    imput: {
+        borderWidth: 1,
+        borderColor: '#ddd',
+        padding: 10,
+        fontSize: 18,
+        borderRadius:6,
+    }
+})
\ No newline at end of file