bluejoyq

complete loading animation with redux

1 import React from 'react'; 1 import React from 'react';
2 import { View} from 'react-native'; 2 import { View} from 'react-native';
3 import Icon from 'react-native-vector-icons/FontAwesome'; 3 import Icon from 'react-native-vector-icons/FontAwesome';
4 -import SearchBar from '../SearchBar/SearchBar'; 4 +import SearchBarContainer from '../SearchBar/SearchBar';
5 import SearchCard from '../SearchCard/SearchCard'; 5 import SearchCard from '../SearchCard/SearchCard';
6 6
7 7
...@@ -19,7 +19,7 @@ class Home extends React.Component { ...@@ -19,7 +19,7 @@ class Home extends React.Component {
19 render() { 19 render() {
20 return( 20 return(
21 <View style={{flex: 1, backgroundColor:'#eee', margin:0,padding:0}}> 21 <View style={{flex: 1, backgroundColor:'#eee', margin:0,padding:0}}>
22 - <SearchBar toggleLoading={this.props.toggleLoading}/> 22 + <SearchBarContainer />
23 <SearchCard title={'네이버- 지식인...인간사냥꾼 니달리를ㄴㄴㅁ'} content={'문도 가고 싶은 데로 간다!'} url={'https://www.naver.com'}/> 23 <SearchCard title={'네이버- 지식인...인간사냥꾼 니달리를ㄴㄴㅁ'} content={'문도 가고 싶은 데로 간다!'} url={'https://www.naver.com'}/>
24 </View> 24 </View>
25 25
......
...@@ -4,7 +4,7 @@ import {View,ActivityIndicator,StyleSheet,Dimensions, Modal} from 'react-native' ...@@ -4,7 +4,7 @@ import {View,ActivityIndicator,StyleSheet,Dimensions, Modal} from 'react-native'
4 const Loading = () => { 4 const Loading = () => {
5 return ( 5 return (
6 <Modal transparent={true} animationType={'none'}> 6 <Modal transparent={true} animationType={'none'}>
7 - <View style={styles.container}><ActivityIndicator size={80} color="#ffffff" /></View> 7 + <View style={styles.container}><ActivityIndicator size={80} color="#ffffff" style={styles.icon} /></View>
8 </Modal> 8 </Modal>
9 ) 9 )
10 } 10 }
...@@ -12,14 +12,16 @@ const Loading = () => { ...@@ -12,14 +12,16 @@ const Loading = () => {
12 const styles = StyleSheet.create({ 12 const styles = StyleSheet.create({
13 container: { 13 container: {
14 zIndex: 2, 14 zIndex: 2,
15 - height: Dimensions.get('window').height, 15 + height: Dimensions.get('window').height + 50,
16 width: '100%', 16 width: '100%',
17 display: 'flex', 17 display: 'flex',
18 alignItems: 'center', 18 alignItems: 'center',
19 justifyContent:'center', 19 justifyContent:'center',
20 backgroundColor: 'rgba(15,15,15,0.7)', 20 backgroundColor: 'rgba(15,15,15,0.7)',
21 - paddingBottom: 50,
22 }, 21 },
22 + icon:{
23 + paddingBottom: 100,
24 + }
23 }); 25 });
24 26
25 27
......
...@@ -8,23 +8,22 @@ const Main = ({ isLoading, toggleLoading}) => { ...@@ -8,23 +8,22 @@ const Main = ({ isLoading, toggleLoading}) => {
8 return( 8 return(
9 <> 9 <>
10 <Loading / > 10 <Loading / >
11 - <AppTabContainer toggleLoading={toggleLoading}/> 11 + <AppTabContainer />
12 </> 12 </>
13 ) 13 )
14 } 14 }
15 else{ 15 else{
16 return ( 16 return (
17 - <AppTabContainer toggleLoading={toggleLoading}/> 17 + <AppTabContainer />
18 ) 18 )
19 - } 19 + }
20 -
21 } 20 }
22 21
23 22
24 -const MainContainer = ({isLoading, toggleLoading}) => { 23 +const MainContainer = ({isLoading}) => {
25 return(<Main isLoading={isLoading} />) 24 return(<Main isLoading={isLoading} />)
26 } 25 }
27 26
28 - const mapStateToProps = (state) => ({isLoading : state.ToggleLoading.isLoading}) 27 +const mapStateToProps = (state) => ({isLoading : state.ToggleLoading.isLoading})
29 28
30 - export default connect(mapStateToProps)(MainContainer);
...\ No newline at end of file ...\ No newline at end of file
29 +export default connect(mapStateToProps)(MainContainer);
...\ No newline at end of file ...\ No newline at end of file
......
1 import React from 'react'; 1 import React from 'react';
2 import {View,Alert} from 'react-native'; 2 import {View,Alert} from 'react-native';
3 import { Searchbar } from 'react-native-paper'; 3 import { Searchbar } from 'react-native-paper';
4 +import { connect } from 'react-redux';
5 +import {toggleLoading} from '../../reducers/ToggleLoading';
4 6
5 -export default class SearchBar extends React.Component { 7 +
8 +class SearchBar extends React.Component {
6 constructor(props){ 9 constructor(props){
7 super(props); 10 super(props);
8 this.state = { 11 this.state = {
...@@ -15,8 +18,8 @@ export default class SearchBar extends React.Component { ...@@ -15,8 +18,8 @@ export default class SearchBar extends React.Component {
15 } 18 }
16 19
17 submit=()=>{ 20 submit=()=>{
18 - this.props.toggleLoading; 21 + this.props.toggleLoading();
19 - setInterval(()=>{this.props.toggleLoading},5); 22 + setTimeout(()=>{this.props.toggleLoading()},1000);
20 this.setState({query:''}); 23 this.setState({query:''});
21 } 24 }
22 25
...@@ -46,4 +49,12 @@ export default class SearchBar extends React.Component { ...@@ -46,4 +49,12 @@ export default class SearchBar extends React.Component {
46 </> 49 </>
47 ) 50 )
48 } 51 }
49 -}
...\ No newline at end of file ...\ No newline at end of file
52 +}
53 +
54 +const SearchBarContainer = ({toggleLoading}) => {
55 + return(<SearchBar toggleLoading={toggleLoading} />)
56 +}
57 +
58 +const mapDispatchToProps = (dispatch) => ({toggleLoading : ()=>{ dispatch( toggleLoading() )}});
59 +
60 +export default connect(null,mapDispatchToProps)(SearchBarContainer);
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -3,7 +3,7 @@ import { DARK_MAIN,LIGHT_MAIN, WHITE_MAIN} from 'react-native-dotenv'; ...@@ -3,7 +3,7 @@ import { DARK_MAIN,LIGHT_MAIN, WHITE_MAIN} from 'react-native-dotenv';
3 import { Avatar, Button, Card, Title, Paragraph } from 'react-native-paper'; 3 import { Avatar, Button, Card, Title, Paragraph } from 'react-native-paper';
4 import {Linking } from 'react-native'; 4 import {Linking } from 'react-native';
5 5
6 -const MyComponent = (props) => ( 6 +const SearchCard = (props) => (
7 <Card style={{margin:10}}> 7 <Card style={{margin:10}}>
8 <Card.Title title={props.title} 8 <Card.Title title={props.title}
9 left={ (props) => ( 9 left={ (props) => (
...@@ -20,4 +20,4 @@ const MyComponent = (props) => ( ...@@ -20,4 +20,4 @@ const MyComponent = (props) => (
20 </Card> 20 </Card>
21 ); 21 );
22 22
23 -export default MyComponent;
...\ No newline at end of file ...\ No newline at end of file
23 +export default SearchCard;
...\ No newline at end of file ...\ No newline at end of file
......
1 -
2 -
3 const TOGGLE_LOADING = 'ToggleLoading/TOGGLE'; 1 const TOGGLE_LOADING = 'ToggleLoading/TOGGLE';
4 2
5 export const toggleLoading = () => ({ type: TOGGLE_LOADING,}) 3 export const toggleLoading = () => ({ type: TOGGLE_LOADING,})
...@@ -11,7 +9,7 @@ const initialState = { ...@@ -11,7 +9,7 @@ const initialState = {
11 export default ToggleLoading = (state = initialState, action) => { 9 export default ToggleLoading = (state = initialState, action) => {
12 switch (action.type) { 10 switch (action.type) {
13 case TOGGLE_LOADING: 11 case TOGGLE_LOADING:
14 - return { isLoading: !initialState.isLoading }; 12 + return {...state, isLoading: !state.isLoading };
15 default: 13 default:
16 return state; 14 return state;
17 } 15 }
......