bluejoyq

add loading animation

1 { 1 {
2 "devToolsPort": 19002, 2 "devToolsPort": 19002,
3 "expoServerPort": 19000, 3 "expoServerPort": 19000,
4 - "packagerPort": 19001, 4 + "packagerPort": null,
5 - "packagerPid": 12024, 5 + "packagerPid": null,
6 "expoServerNgrokUrl": "https://s4-47j.anonymous.searchguide.exp.direct", 6 "expoServerNgrokUrl": "https://s4-47j.anonymous.searchguide.exp.direct",
7 "packagerNgrokUrl": "https://packager.s4-47j.anonymous.searchguide.exp.direct", 7 "packagerNgrokUrl": "https://packager.s4-47j.anonymous.searchguide.exp.direct",
8 - "ngrokPid": 22188 8 + "ngrokPid": 31700
9 } 9 }
......
1 import React from 'react'; 1 import React from 'react';
2 -import { View} from 'react-native'; 2 +import { View, ScrollView} from 'react-native';
3 import {connect} from 'react-redux' 3 import {connect} from 'react-redux'
4 import Icon from 'react-native-vector-icons/FontAwesome'; 4 import Icon from 'react-native-vector-icons/FontAwesome';
5 import SearchBar from '../SearchBar/SearchBar'; 5 import SearchBar from '../SearchBar/SearchBar';
...@@ -10,9 +10,11 @@ const Home = ({searchResults}) => { ...@@ -10,9 +10,11 @@ const Home = ({searchResults}) => {
10 return( 10 return(
11 <View style={{flex: 1, backgroundColor:'#eee', margin:0,padding:0}}> 11 <View style={{flex: 1, backgroundColor:'#eee', margin:0,padding:0}}>
12 <SearchBar /> 12 <SearchBar />
13 + <ScrollView>
13 { searchResults && searchResults.map((searchResult, index) => ( 14 { searchResults && searchResults.map((searchResult, index) => (
14 <SearchCard key={index} title={searchResult.title} content={searchResult.passage} url={searchResult.url}/> 15 <SearchCard key={index} title={searchResult.title} content={searchResult.passage} url={searchResult.url}/>
15 ))} 16 ))}
17 + </ScrollView>
16 </View> 18 </View>
17 19
18 ) 20 )
......
...@@ -4,19 +4,12 @@ import { connect } from 'react-redux'; ...@@ -4,19 +4,12 @@ import { connect } from 'react-redux';
4 import Loading from '../Loading/Loading'; 4 import Loading from '../Loading/Loading';
5 5
6 const Main = ({ isLoading}) => { 6 const Main = ({ isLoading}) => {
7 - if ( isLoading ) { 7 + return (
8 - return(
9 <> 8 <>
10 - <Loading / > 9 + { isLoading && (<Loading />) }
11 <AppTabContainer /> 10 <AppTabContainer />
12 </> 11 </>
13 ) 12 )
14 - }
15 - else{
16 - return (
17 - <AppTabContainer />
18 - )
19 - }
20 } 13 }
21 14
22 const MainContainer = ({isLoading}) => { 15 const MainContainer = ({isLoading}) => {
......