complete loading animation with redux

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

@@ -4,7 +4,7 @@ import {View,ActivityIndicator,StyleSheet,Dimensions, Modal} from 'react-native'
 const Loading = () => {
 const Loading = () => {
     return (
     return (
         <Modal transparent={true} animationType={'none'}>
         <Modal transparent={true} animationType={'none'}>
-            <View style={styles.container}><ActivityIndicator size={80} color="#ffffff" /></View>
+            <View style={styles.container}><ActivityIndicator size={80} color="#ffffff" style={styles.icon} /></View>
         </Modal>
         </Modal>
       )
       )
 }
 }
@@ -12,14 +12,16 @@ const Loading = () => {
 const styles = StyleSheet.create({
 const styles = StyleSheet.create({
   container: {
   container: {
     zIndex: 2,
     zIndex: 2,
-    height: Dimensions.get('window').height,
+    height: Dimensions.get('window').height + 50,
     width: '100%',
     width: '100%',
     display: 'flex',
     display: 'flex',
     alignItems: 'center',
     alignItems: 'center',
     justifyContent:'center',
     justifyContent:'center',
     backgroundColor: 'rgba(15,15,15,0.7)',
     backgroundColor: 'rgba(15,15,15,0.7)',
-    paddingBottom: 50,
   },
   },
+  icon:{
+    paddingBottom: 100,
+  }
 });
 });
 
 
 
 

@@ -8,23 +8,22 @@ const Main = ({ isLoading, toggleLoading}) => {
         return(
         return(
             <>
             <>
             <Loading / >
             <Loading / >
-            <AppTabContainer  toggleLoading={toggleLoading}/>
+            <AppTabContainer />
             </>
             </>
         )
         )
     }
     }
     else{
     else{
         return (
         return (
-            <AppTabContainer  toggleLoading={toggleLoading}/>
+            <AppTabContainer />
         )
         )
-    }
-    
+    } 
 }
 }
 
 
 
 
-const MainContainer = ({isLoading, toggleLoading}) => {
+const MainContainer = ({isLoading}) => {
     return(<Main isLoading={isLoading} />)
     return(<Main isLoading={isLoading} />)
 }
 }
   
   
-  const mapStateToProps = (state) => ({isLoading : state.ToggleLoading.isLoading})
+const mapStateToProps = (state) => ({isLoading : state.ToggleLoading.isLoading})
   
   
-  export default connect(mapStateToProps)(MainContainer);
\ No newline at end of file
+export default connect(mapStateToProps)(MainContainer);
\ No newline at end of file

 import React from 'react';
 import React from 'react';
 import {View,Alert} from 'react-native';
 import {View,Alert} from 'react-native';
 import { Searchbar } from 'react-native-paper';
 import { Searchbar } from 'react-native-paper';
+import { connect } from 'react-redux';
+import {toggleLoading} from '../../reducers/ToggleLoading';
 
 
-export default class SearchBar extends React.Component {
+
+class SearchBar extends React.Component {
     constructor(props){
     constructor(props){
         super(props);
         super(props);
         this.state = {
         this.state = {
@@ -15,8 +18,8 @@ export default class SearchBar extends React.Component {
     }
     }
 
 
     submit=()=>{
     submit=()=>{
-        this.props.toggleLoading;
-        setInterval(()=>{this.props.toggleLoading},5);
+        this.props.toggleLoading();
+        setTimeout(()=>{this.props.toggleLoading()},1000);
         this.setState({query:''});
         this.setState({query:''});
     }
     }
 
 
@@ -46,4 +49,12 @@ export default class SearchBar extends React.Component {
             </>
             </>
         )
         )
     }
     }
-}
\ No newline at end of file
+}
+
+const SearchBarContainer = ({toggleLoading}) => {
+    return(<SearchBar toggleLoading={toggleLoading} />)
+}
+  
+const mapDispatchToProps = (dispatch) => ({toggleLoading : ()=>{ dispatch( toggleLoading() )}});
+
+export default connect(null,mapDispatchToProps)(SearchBarContainer);
\ No newline at end of file

@@ -3,7 +3,7 @@ import { DARK_MAIN,LIGHT_MAIN, WHITE_MAIN} from 'react-native-dotenv';
 import { Avatar, Button, Card, Title, Paragraph } from 'react-native-paper';
 import { Avatar, Button, Card, Title, Paragraph } from 'react-native-paper';
 import {Linking } from 'react-native';
 import {Linking } from 'react-native';
 
 
-const MyComponent = (props) => (
+const SearchCard = (props) => (
   <Card style={{margin:10}}>
   <Card style={{margin:10}}>
     <Card.Title title={props.title}
     <Card.Title title={props.title}
     left={ (props) => ( 
     left={ (props) => ( 
@@ -20,4 +20,4 @@ const MyComponent = (props) => (
   </Card>
   </Card>
 );
 );
 
 
-export default MyComponent;
\ No newline at end of file
+export default SearchCard;
\ No newline at end of file

-
-
 const TOGGLE_LOADING = 'ToggleLoading/TOGGLE';
 const TOGGLE_LOADING = 'ToggleLoading/TOGGLE';
 
 
 export const toggleLoading = () => ({ type: TOGGLE_LOADING,})
 export const toggleLoading = () => ({ type: TOGGLE_LOADING,})
@@ -11,7 +9,7 @@ const initialState = {
 export default ToggleLoading = (state = initialState, action) => {
 export default ToggleLoading = (state = initialState, action) => {
     switch (action.type) {
     switch (action.type) {
         case TOGGLE_LOADING:
         case TOGGLE_LOADING:
-            return { isLoading: !initialState.isLoading };
+            return {...state, isLoading: !state.isLoading };
         default:
         default:
             return state;
             return state;
     }
     }