Added gradient headers

This commit is contained in:
M10T 2020-11-07 08:55:23 -05:00
parent 36a64a25b5
commit a4770d9fa0
5 changed files with 31 additions and 17 deletions

View File

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

View File

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

View File

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

View File

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

View File

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