working for loading animation while searching

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

 import React from 'react';
+import {View,ActivityIndicator,StyleSheet} from 'react-native'
 import AppContainer from './components/AppContainer/AppContainer';
-import SafeAreaView from 'react-native-safe-area-view';
-import SearchBar from './components/SearchBar/SearchBar';
+
 
 export default class App extends React.Component {
   constructor(props){
     super(props);
     this.state = {
-      
+      loading:true
     };
   }
+
   render(){
       return (
         <>
-      <SearchBar />
-      <SafeAreaView style={{flex: 1, backgroundColor:'#eee'}}>
+          {this.state.loading ? <View><ActivityIndicator size="large" color="#0000ff" /></View> : null}
           <AppContainer />
-      </SafeAreaView>
         </>
       )
   }
 }
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+});
\ No newline at end of file

 module.exports = function(api) {
   api.cache(true);
   return {
-    presets: ['babel-preset-expo'],
+    presets: ['babel-preset-expo','module:metro-react-native-babel-preset','module:react-native-dotenv'],
     env: {
       production: {
         plugins: ['react-native-paper/babel'],

 import React from 'react';
+import { DARK_MAIN,LIGHT_MAIN, WHITE_MAIN} from 'react-native-dotenv';
 import {createAppContainer} from 'react-navigation';  
 import {createMaterialTopTabNavigator} from 'react-navigation-tabs';
 import Home from '../Home/Home';
 import Rate from '../Rate/Rate';
 
+
 const AppTabNavigator = createMaterialTopTabNavigator (
     {
         Home: Home,
@@ -13,13 +15,13 @@ const AppTabNavigator = createMaterialTopTabNavigator (
         initialRouteName: 'Home',
         tabBarPosition: 'bottom',
         tabBarOptions:{
-            activeTintColor: '#f0edf6',
-            inactiveTintColor: '#226557',
+            activeTintColor: WHITE_MAIN,
+            inactiveTintColor: DARK_MAIN,
             indicatorStyle: {
-                backgroundColor: '#f0edf6',
+                backgroundColor: WHITE_MAIN,
             },
             style:{
-                backgroundColor:'#3BAD87',
+                backgroundColor:LIGHT_MAIN,
                 allowFontScaling : 'true'
             },
             showIcon: true,

 import React from 'react';
-import { View, Text} from 'react-native';
+import { View} from 'react-native';
 import Icon from 'react-native-vector-icons/FontAwesome';
+import SearchBar from '../SearchBar/SearchBar';
+import SearchCard from '../SearchCard/SearchCard';
+
 
 class Home extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
-
         }
     }
     static navigationOptions={
@@ -16,9 +18,11 @@ class Home extends React.Component {
 
     render() {
         return(
-            <View>
-                <Text>검색</Text>
+            <View style={{flex: 1, backgroundColor:'#eee', margin:0,padding:0}}>
+                <SearchBar />
+                <SearchCard title={'네이버- 지식인...인간사냥꾼 니달리를ㄴㄴㅁ'} content={'문도 가고 싶은 데로 간다!'} url={'https://www.naver.com'}/>
             </View>
+            
         )
     }
         

@@ -17,7 +17,7 @@ class Rate extends React.Component {
 
     render() {
         return(
-            <View >
+            <View style={{flex: 1, backgroundColor:'#eee', margin:0,padding:0}}>
                 <Text >평가</Text>
             </View>
         )

 import React from 'react';
 import {View,ScrollView} from 'react-native';
-import { Searchbar } from 'react-native-paper';
+import { Searchbar, Divider, Text } from 'react-native-paper';
 import Icon from 'react-native-vector-icons/FontAwesome';
 
+
 export default class SearchBar extends React.Component {
-    state = {
-        firstQuery: '',
+    constructor(props){
+        super(props);
+        this.state = {
+            query: '',
         };
+    }
+    
+    queryChange=(query)=>{
+        this.setState({ query: query });
+    }
+
+    submit=()=>{
+        alert(this.state.query);
+        this.setState({query:''});
+    }
 
     render(){
         return(
             <>
-            <View style={{margin:0,padding:0}}>
+            <View>
                 <Searchbar
                 placeholder="검색할 질문을 입력하세요."
-                onChangeText={query => { this.setState({ firstQuery: query }); }}
-                value={this.state.firstQuery}
+                onChangeText={this.queryChange}
+                value={this.state.query}
+                icon='microphone'
+                onIconPress={()=>{alert("원래는 음성 인식 창!")}}
+                onSubmitEditing={this.submit}
                 />
             </View>
             </>

+import React from 'react';
+import { DARK_MAIN,LIGHT_MAIN, WHITE_MAIN} from 'react-native-dotenv';
+import { Avatar, Button, Card, Title, Paragraph } from 'react-native-paper';
+import {Linking } from 'react-native';
+
+const MyComponent = (props) => (
+  <Card style={{margin:10}}>
+    <Card.Title title={props.title}
+    left={ (props) => ( 
+        <Avatar.Icon {...props} icon="folder" color={WHITE_MAIN}style={{backgroundColor:LIGHT_MAIN}} /> ) } 
+    />
+    <Card.Content>
+      <Paragraph>{props.content}</Paragraph>
+    </Card.Content>
+    <Card.Actions style={{flexDirection:'row-reverse'}}>
+        <Button mode='contained' color= {LIGHT_MAIN} labelStyle={{color:WHITE_MAIN}} onPress={()=>{Linking.openURL(props.url)}}>
+        자세히보기
+        </Button>
+    </Card.Actions>
+  </Card>
+);
+
+export default MyComponent;
\ No newline at end of file

@@ -1603,6 +1603,15 @@
       "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
       "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg=="
     },
+    "babel-plugin-dotenv": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-dotenv/-/babel-plugin-dotenv-0.1.1.tgz",
+      "integrity": "sha1-nI+upnp8A0/n6UCZGHqy51c0ALw=",
+      "dev": true,
+      "requires": {
+        "dotenv": "^2.0.0"
+      }
+    },
     "babel-plugin-dynamic-import-node": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.0.tgz",
@@ -2355,6 +2364,12 @@
       "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.1.tgz",
       "integrity": "sha1-ZyIm3HTI95mtNTB9+TaroRrNYBg="
     },
+    "dotenv": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-2.0.0.tgz",
+      "integrity": "sha1-vXWcNXqqcDZeAclrewvsCKbg2Uk=",
+      "dev": true
+    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -5020,6 +5035,15 @@
       "resolved": "https://registry.npmjs.org/pascalcase/-/pascalcase-0.1.1.tgz",
       "integrity": "sha1-s2PlXoAGym/iF4TS2yK9FdeRfxQ="
     },
+    "path": {
+      "version": "0.12.7",
+      "resolved": "https://registry.npmjs.org/path/-/path-0.12.7.tgz",
+      "integrity": "sha1-1NwqUGxM4hl+tIHr/NWzbAFAsQ8=",
+      "requires": {
+        "process": "^0.11.1",
+        "util": "^0.10.3"
+      }
+    },
     "path-browserify": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.0.tgz",
@@ -5494,6 +5518,15 @@
       "resolved": "https://registry.npmjs.org/react-native-branch/-/react-native-branch-3.0.1.tgz",
       "integrity": "sha512-vbcYxPZlpF5f39GAEUF8kuGQqCNeD3E6zEdvtOq8oCGZunHXlWlKgAS6dgBKCvsHvXgHuMtpvs39VgOp8DaKig=="
     },
+    "react-native-dotenv": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/react-native-dotenv/-/react-native-dotenv-0.2.0.tgz",
+      "integrity": "sha1-MRVRy2o1o9z+3mSL3tVcDj7OV50=",
+      "dev": true,
+      "requires": {
+        "babel-plugin-dotenv": "0.1.1"
+      }
+    },
     "react-native-gesture-handler": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-1.3.0.tgz",
@@ -6970,6 +7003,21 @@
       "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
       "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ=="
     },
+    "util": {
+      "version": "0.10.4",
+      "resolved": "https://registry.npmjs.org/util/-/util-0.10.4.tgz",
+      "integrity": "sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A==",
+      "requires": {
+        "inherits": "2.0.3"
+      },
+      "dependencies": {
+        "inherits": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+          "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
+        }
+      }
+    },
     "util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",

@@ -12,6 +12,7 @@
     "expo": "^35.0.0",
     "expo-permissions": "~7.0.0",
     "expo-speech": "~7.0.0",
+    "path": "^0.12.7",
     "react": "16.8.3",
     "react-dom": "16.8.3",
     "react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz",
@@ -26,7 +27,8 @@
     "react-navigation-tabs": "^2.5.6"
   },
   "devDependencies": {
-    "babel-preset-expo": "^7.1.0"
+    "babel-preset-expo": "^7.1.0",
+    "react-native-dotenv": "^0.2.0"
   },
   "private": true
 }