bluejoyq

complete loading animation with redux

import React from 'react';
import { View} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import SearchBar from '../SearchBar/SearchBar';
import SearchBarContainer from '../SearchBar/SearchBar';
import SearchCard from '../SearchCard/SearchCard';
......@@ -19,7 +19,7 @@ class Home extends React.Component {
render() {
return(
<View style={{flex: 1, backgroundColor:'#eee', margin:0,padding:0}}>
<SearchBar toggleLoading={this.props.toggleLoading}/>
<SearchBarContainer />
<SearchCard title={'네이버- 지식인...인간사냥꾼 니달리를ㄴㄴㅁ'} content={'문도 가고 싶은 데로 간다!'} url={'https://www.naver.com'}/>
</View>
......
......@@ -4,7 +4,7 @@ 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>
<View style={styles.container}><ActivityIndicator size={80} color="#ffffff" style={styles.icon} /></View>
</Modal>
)
}
......@@ -12,14 +12,16 @@ const Loading = () => {
const styles = StyleSheet.create({
container: {
zIndex: 2,
height: Dimensions.get('window').height,
height: Dimensions.get('window').height + 50,
width: '100%',
display: 'flex',
alignItems: 'center',
justifyContent:'center',
backgroundColor: 'rgba(15,15,15,0.7)',
paddingBottom: 50,
},
icon:{
paddingBottom: 100,
}
});
......
......@@ -8,23 +8,22 @@ const Main = ({ isLoading, toggleLoading}) => {
return(
<>
<Loading / >
<AppTabContainer toggleLoading={toggleLoading}/>
<AppTabContainer />
</>
)
}
else{
return (
<AppTabContainer toggleLoading={toggleLoading}/>
<AppTabContainer />
)
}
}
}
const MainContainer = ({isLoading, toggleLoading}) => {
const MainContainer = ({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 {View,Alert} from 'react-native';
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){
super(props);
this.state = {
......@@ -15,8 +18,8 @@ export default class SearchBar extends React.Component {
}
submit=()=>{
this.props.toggleLoading;
setInterval(()=>{this.props.toggleLoading},5);
this.props.toggleLoading();
setTimeout(()=>{this.props.toggleLoading()},1000);
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 {Linking } from 'react-native';
const MyComponent = (props) => (
const SearchCard = (props) => (
<Card style={{margin:10}}>
<Card.Title title={props.title}
left={ (props) => (
......@@ -20,4 +20,4 @@ const MyComponent = (props) => (
</Card>
);
export default MyComponent;
\ No newline at end of file
export default SearchCard;
\ No newline at end of file
......
const TOGGLE_LOADING = 'ToggleLoading/TOGGLE';
export const toggleLoading = () => ({ type: TOGGLE_LOADING,})
......@@ -11,7 +9,7 @@ const initialState = {
export default ToggleLoading = (state = initialState, action) => {
switch (action.type) {
case TOGGLE_LOADING:
return { isLoading: !initialState.isLoading };
return {...state, isLoading: !state.isLoading };
default:
return state;
}
......