added opening/loading page

This commit is contained in:
Emily Liu 2020-10-18 20:47:15 -04:00
parent ede61a73a0
commit bfd30f4ad1
6 changed files with 7456 additions and 4 deletions

View File

@ -1,4 +1,4 @@
import React from 'react'; import React, {Fragment, useEffect} from 'react';
import { import {
SafeAreaView, SafeAreaView,
StyleSheet, StyleSheet,
@ -18,20 +18,30 @@ import {
import { NavigationContainer } from '@react-navigation/native' import { NavigationContainer } from '@react-navigation/native'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs' import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import SplashScreen from 'react-native-splash-screen';
import Home from './Home' import Home from './Home'
import Calendar from './Calendar' import Calendar from './Calendar'
import Poll from './Poll' import Poll from './Poll'
import Clubs from './Clubs' import Clubs from './Clubs'
import More from './More' import More from './More'
import Staff from './Staff' import Staff from './Staff'
import OpeningPage from './OpeningPage';
import OpenPage from './OpenPage';
const Tab = createBottomTabNavigator(); const Tab = createBottomTabNavigator();
class App extends React.Component { class App extends React.Component {
state = {
loaded: false
}
constructor() {
super();
OpeningPage.load(v => this.setState({loaded: true}));
}
render() { render() {
return ( return (
<NavigationContainer > <NavigationContainer >
{this.state.loaded ?
<Tab.Navigator tabBarOptions={{ <Tab.Navigator tabBarOptions={{
activeTintColor: 'red', activeTintColor: 'red',
labelStyle:{ labelStyle:{
@ -40,12 +50,13 @@ class App extends React.Component {
<Tab.Screen name="Home" component={Home} /> <Tab.Screen name="Home" component={Home} />
<Tab.Screen name="Calendar" component={Calendar} /> <Tab.Screen name="Calendar" component={Calendar} />
<Tab.Screen name="Polls" component={Poll} /> <Tab.Screen name="Polls" component={Poll} />
<Tab.Screen name="Clubs" component={Clubs} /> <Tab.Screen name="Clubs" component={Clubs} options ={{title: 'Clubs'}}/>
<Tab.Screen name="Staff" component={Staff} /> <Tab.Screen name="Staff" component={Staff} />
<Tab.Screen name="More" component={More} /> <Tab.Screen name="More" component={More} />
</Tab.Navigator> </Tab.Navigator>
: <OpenPage />}
</NavigationContainer> </NavigationContainer>
) );
} }
} }

45
app/OpenPage.js Normal file
View File

@ -0,0 +1,45 @@
import React, { useState } from 'react';
import {
SafeAreaView,
StyleSheet,
ScrollView,
View,
Text,
StatusBar,
ActivityIndicator,
FlatList,
TouchableOpacity,
Image
} from 'react-native';
import {
Header,
LearnMoreLinks,
Colors,
DebugInstructions,
ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
import { SearchBar } from 'react-native-elements';
import styles from './styles/morestyles';
import { url } from './resources/fetchInfo.json';
import LinearGradient from 'react-native-linear-gradient';
class OpenPage extends React.Component{
render() {
return (
<View style = {styles.openPage}>
<LinearGradient
colors={['red', 'white']}
style = {styles.linearGradient}
>
<Image source = {require('./assets/blair_logo.png')} />
<Text style = {{fontSize: 52, fontWeight: 'bold'}}>MBHS</Text>
</LinearGradient>
</View>
)
}
}
export default OpenPage;

31
app/OpeningPage.js Normal file
View File

@ -0,0 +1,31 @@
import React, { useState } from 'react';
import {
SafeAreaView,
StyleSheet,
ScrollView,
View,
Text,
StatusBar,
ActivityIndicator,
FlatList,
TouchableOpacity
} from 'react-native';
import {
Header,
LearnMoreLinks,
Colors,
DebugInstructions,
ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
import { SearchBar } from 'react-native-elements';
import styles from './styles/liststyles'
import { url } from './resources/fetchInfo.json'
class OpeningPage {
static load(cb) {
setTimeout(cb, 1500);
}
}
export default OpeningPage;

BIN
app/assets/blair_logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 70 KiB

View File

@ -1,4 +1,5 @@
import {StyleSheet, Dimensions} from 'react-native'; import {StyleSheet, Dimensions} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
const styles=StyleSheet.create({ const styles=StyleSheet.create({
moreitem: { moreitem: {
@ -38,6 +39,19 @@ const styles=StyleSheet.create({
fontSize:32, fontSize:32,
textAlign:'center', textAlign:'center',
}, },
openPage: {
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center'
},
linearGradient: {
alignItems: 'center',
justifyContent: 'center',
borderRadius: 5,
height: '100%',
width: '100%',
}
}); });
export default styles; export default styles;

7351
yarn.lock Normal file

File diff suppressed because it is too large Load Diff