Added gradient headers

app/Announcements.js

@@ -69,8 +69,7 @@ class Announcements extends React.Component {
 		this.state = {
 			data: [],
 			teacherNames: [],
-			favoriteNames: [],
+			favoriteNames: []
-			isLoading:true
 		}
 	}
 	
@@ -117,7 +116,6 @@ class Announcements extends React.Component {
 	}
 	
 	render() {
-		if (this.state.isLoading) return <></>
 		return (
 			<View style={[styles.container]}>
 				<TeacherButton data={this.state.data.filter(x=>x.teacher==null||x.teacher.trim()==='')} name="No Teacher" navigation={this.props.navigation} />

app/Calendar.js

@@ -76,7 +76,7 @@ class Calendar extends React.Component {
 	
 	render() {
 		return (
-			<View>
+			<View style={styles.container}>
 				<FlatList
 					data={this.state.data}
 					renderItem={item=><Event item={item}/>}

app/More.js

@@ -28,7 +28,7 @@ import StudentWeek from './StudentWeek'
 import SSLOps, {SSLInfo} from './SSLOps'
 import LunchEvents, {LunchInfo} from './LunchEvents'
 import ChallengeWeek from './ChallengeWeek'
-import { LinearGradient } from 'react-native-linear-gradient'
+import LinearGradient from 'react-native-linear-gradient'
 
 const Stack = createStackNavigator()
 
@@ -61,6 +61,11 @@ class MoreSwitch extends React.Component {
 	}
 }
 
+const background = (<LinearGradient
+                    colors={['#f99', 'white']}
+                    style = {{flex:1,borderBottomColor:'black',borderBottomWidth:0.5}}
+                    />)
+
 class More extends React.Component {
 	render() {
 		return (
@@ -72,7 +77,7 @@ class More extends React.Component {
 						options={{
 							title:'More',
 							headerTitleStyle:styles.headerTitle,
-							headerStyle:{borderBottomWidth:0.5,borderBottomColor:'black'},
+							headerBackground: ()=>background
 						}}
 					/>
 					<Stack.Screen 
@@ -82,6 +87,7 @@ class More extends React.Component {
 							title:'Announcements',
 							headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}],
 							headerLeft:null,
+							headerBackground: ()=>background
 						}}
 					/>
 					<Stack.Screen 
@@ -90,7 +96,8 @@ class More extends React.Component {
 						options={{
 							title:'Resources',
 							headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}],
-							headerLeft:null
+							headerLeft:null,
+							headerBackground: ()=>background
 						}}
 					/>
 					<Stack.Screen 
@@ -99,7 +106,8 @@ class More extends React.Component {
 						options={{
 							title:'Student of the Week',
 							headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}],
-							headerLeft:null
+							headerLeft:null,
+							headerBackground: ()=>background
 						}}
 					/>
 					<Stack.Screen 
@@ -108,7 +116,8 @@ class More extends React.Component {
 						options={{
 							title:'Lunch Events',
 							headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}],
-							headerLeft:null
+							headerLeft:null,
+							headerBackground: ()=>background
 						}}
 					/>
 					<Stack.Screen 
@@ -117,7 +126,8 @@ class More extends React.Component {
 						options={{
 							title:'SSL Opportunities',
 							headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}],
-							headerLeft:null
+							headerLeft:null,
+							headerBackground: ()=>background
 						}}
 					/>
 					<Stack.Screen 
@@ -126,33 +136,37 @@ class More extends React.Component {
 						options={{
 							title:'Challenge of the Week',
 							headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}],
-							headerLeft:null
+							headerLeft:null,
+							headerBackground: ()=>background
 						}}
 					/>
 					<Stack.Screen 
 						name="TeacherList" 
 						component={TeacherList}
 						options={({route})=>({
-							headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}],
+							headerTitleStyle:[styles.headerTitle,{alignSelf:'center',fontSize:Math.min(24,24*23/route.params.name.length)}],
 							title:route.params.name,
-							headerRight:()=>(<></>)
+							headerRight:()=>(<></>),
+							headerBackground: ()=>background
 						})}
 					/>
 					<Stack.Screen 
 						name="LunchInfo" 
 						component={LunchInfo}
 						options={({route})=>({
-							headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}],
+							headerTitleStyle:[styles.headerTitle,{alignSelf:'center',fontSize:Math.min(24,24*23/route.params.name.length)}],
 							title:route.params.name,
-							headerRight:()=>(<></>)
+							headerRight:()=>(<></>),
+							headerBackground: ()=>background
 						})}
 					/>
 					<Stack.Screen 
 						name="SSLInfo" 
 						component={SSLInfo}
 						options={({route})=>({
-							headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}],
+							headerTitleStyle:[styles.headerTitle,{alignSelf:'center',fontSize:Math.min(24,24*23/route.params.name.length)}],
 							title:route.params.name,
+							headerBackground: ()=>background,
 							headerRight:()=>(<></>)
 						})}
 					/>

app/styles/liststyles.js

@@ -3,7 +3,7 @@ import {StyleSheet, StatusBar} from 'react-native';
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    marginTop: StatusBar.currentHeight || 0,
+    marginTop: StatusBar.currentHeight || 0
   },
   item: {
     backgroundColor: 'white',

app/styles/morestyles.js

@@ -1,6 +1,8 @@
 import {StyleSheet, Dimensions} from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 
+console.log(Dimensions.get('window'))
+
 const styles=StyleSheet.create({
 	moreitem: {
 		backgroundColor:'red',