add toggle loading and edit alert message

@@ -2,8 +2,8 @@
   "devToolsPort": 19002,
   "expoServerPort": 19000,
   "packagerPort": 19001,
-  "packagerPid": 19948,
+  "packagerPid": 18100,
   "expoServerNgrokUrl": "https://ep-ukj.anonymous.searchguide.exp.direct",
   "packagerNgrokUrl": "https://packager.ep-ukj.anonymous.searchguide.exp.direct",
-  "ngrokPid": 12884
+  "ngrokPid": 20760
 }

 import React from 'react';
-import {View,ActivityIndicator,StyleSheet} from 'react-native'
+import {View,Text,StyleSheet} from 'react-native'
 import AppContainer from './components/AppContainer/AppContainer';
-
+import Loading from './components/Loading/Loading';
 
 export default class App extends React.Component {
   constructor(props){
     super(props);
     this.state = {
-      loading:true
+      loading:false
     };
   }
 
+  toggleLoading=()=>{
+    this.setState({loading:true});
+  }
+
   render(){
       return (
         <>
-          {this.state.loading ? <View><ActivityIndicator size="large" color="#0000ff" /></View> : null}
-          <AppContainer />
+          {this.state.loading ? <Loading/>  :  null}
+          <AppContainer  toggleLoading={this.toggleLoading}/>
         </>
       )
   }

@@ -6,10 +6,13 @@ import Home from '../Home/Home';
 import Rate from '../Rate/Rate';
 
 
+const HomeScreen = (props) => (<Home toggleLoading={props.toggleLoading} />);
+const RateScreen = (props) => (<Rate toggleLoading={props.toggleLoading} />);
+
 const AppTabNavigator = createMaterialTopTabNavigator (
     {
-        Home: Home,
-        Rate: Rate
+        Home: HomeScreen,
+        Rate: RateScreen
     },
     {
         initialRouteName: 'Home',

+import React from 'react';
+import {View,ActivityIndicator,StyleSheet,Dimensions, Modal} from 'react-native'
+
+const Loading = () => {
+    return (
+        <Modal transparent={true} animationType={'none'}>
+            <View style={styles.container}><ActivityIndicator size={80} color="#ffffff" /></View>
+        </Modal>
+      )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    zIndex: 2,
+    height: Dimensions.get('window').height,
+    width: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent:'center',
+    backgroundColor: 'rgba(15,15,15,0.7)',
+    paddingBottom: 50,
+  },
+});
+
+
+export default Loading;
\ No newline at end of file

 import React from 'react';
-import {View,ScrollView} from 'react-native';
+import {View,ScrollView,Alert} from 'react-native';
 import { Searchbar, Divider, Text } from 'react-native-paper';
 import Icon from 'react-native-vector-icons/FontAwesome';
 
@@ -21,6 +21,16 @@ export default class SearchBar extends React.Component {
         this.setState({query:''});
     }
 
+    voiceRecognition=()=>{
+        Alert.alert(
+            '음성 인식',
+            '아직 구현 못함',
+            [
+                {text: '확인', onPress: () => {}},
+            ],
+        )
+    }
+
     render(){
         return(
             <>
@@ -30,7 +40,7 @@ export default class SearchBar extends React.Component {
                 onChangeText={this.queryChange}
                 value={this.state.query}
                 icon='microphone'
-                onIconPress={()=>{alert("원래는 음성 인식 창!")}}
+                onIconPress={this.voiceRecognition}
                 onSubmitEditing={this.submit}
                 />
             </View>